教你设计一个好的网站URL连接

你应该花时间来设计你的URL结构。 在你看完这篇文章以后，我唯yi期望的是你能花点时间设计你的URL结构。

网址设计是一个复杂的问题。 我不能说有什么“正确”的解决办法。 好的URL设计，坏URL设计，它们都会因为每个人的主观判断而不同。但是，这并不意味着没有创建优秀的URL的方法。 我希望分享给你这些年积累的关于如何创建好的URL的方法，并使这些URL能和新新的HTML5中的浏览器历史Javascript API很好的一起工作。

为什么你需要设计你的URL？

地址栏成为当前浏览器的一个主要特性，他已经不再是一个简单的地址栏了，你可以输入部分URL就能找到完整的URL。当我在地址栏中输入resque issues时，第一个返回的链接是https://github.com/defunkt/resque/issues

URL 可以用在很多地方，他可以在Firefox, Chrome, Safari, Internet Explorer, cURL, wget, iPhone, Android甚至手写。它们是互联网最通用的语法。不要让它随随便便。网站内90%的页面需要通过网址进行访问，为了能让用户正常访问，你的网址必须做大务实，它们就像是一个数学问题，通过一些简单的规则让访客获取想要的页面。

网址根目录（level section）是非常珍贵的

对于任何一个URL而言，它最用价值的方面是在他的根目录（level section），我的观点是她必须在你写任何代码前确定下来，他会确定你网站后面是怎么组织起来的。当你想建立新的站点的时候，一定要想好哪些根目录的网址是需要保留的。

命名空间是一个非常有用的拓展网址方案

命名空间是一个建立容易记忆的良好网址结构的方案。那命名空间是什么意思呢？下面是一个例子：

https://github.com/defunkt/resque/issues

在上面的URL中，defunkt/resque是命名空间。为什么这个是有用的？因为任何跟在命名空间后面的部分都将成为level section。在可以在任何/后面跟上/issues或/wiki来生成页面。

为了命名空间的通用性，保持命名空间的简洁，不要将内容加在前面或后面，类似/feature//或///feature.

查询字符串对排序和过滤非常的有用

网站都有一些查询字符串，很多网站使用多个查询字符串。他们通常使用同一的模式来对页面或内容进行排序或过滤（sort=alpha&dir=desc），他们可以是URL非常简单和易记。

需要记住的是，在URL上没有带任何查询字符串时需要显示一个不同的页面。

非ASCII字符出现在网址中

非 ASCII字符不但难以输入，而且还难以记忆。

URL是为人设计的，不是为搜索引擎设计的

在URl中堆砌关键词的手法，并不罕见，比如下面的URL：

http://guitars.example.com/best-guitars/cheap-guitars/popular-guitar

这样的URL在Google2003年修改算法前对SEO很有效，但是一些SEO教程上现在还是叫你将关键词写入URL。他们错了，忽略他们。

除此之外，你还需要记住以下两点：

• 下划线很不好，请在URL中使用中划线。
• 在URL中使用一些短的、通俗的词，如果一段URL中有中划线会特殊的字符，那它可能有些长。

URL是为人使用的，也是为人设计的。

一个URL就是一个协议

一个URL是一个协议，你需要让他保存做够长的时间。一旦有人点击了你的URL，他们就是和你签署有了一个协议，他们期望下次再打开这个网址的时候看到同样的内容。在你的URL公布出去以后，不要轻易的去修改它，如果你真的迫不得已要去修改它，那么请多原来的URL做跳转。

任何页面都需要有个URL

在理想的情况下，每个单独的页面都需要一个URL，这个URL在复制到别的浏览器的时候要还可以访问。事实上这样做是完全不可能的，直到新的HTML5浏览器历史记录Javascript API的出现，这里有两种方法：

• onReplaceState — 这个方法取代了浏览器历史记录中的URL，使URL留下后退按钮。
• onPushState – 这个方法能push一个新的URL到浏览器历史记录，用来更换浏览器中的历史堆栈。

什么是有使用onReplaceState和onPushState

这两个新的方法可以改变浏览器中的访问历史，有了这个新的特征，我们需要为页面设计后退页面。在使用前需要问自己：这个动作是否需要产生新的内容或用不同的方法显示相同的内容。

1. 生成新的内容-你应该使用onPushState（如分页链接）
2. 用不同的方法显示相同的内容-你应该使用onReplaceState（如排序了过滤）

通过自己的判断，想想你需要实现怎样的效果。

链接需要看上去像个链接

很多生成链接的方法如、，如果你点击它们它们会打开新的页面，当你将鼠标放在标签时，你的浏览器状态栏就会告诉你URL地址是什么。在使用onReplaceState and onPushState时不要破坏这样的规则。

• 当进行AJAX请求时，显示当前的请求地址。
• 当使用Javascript打开过程中返回true。

上面的说的可以非常容易的实现，下面是使用jQuery的一个例子：

$('a.ajaxylink').click(function(e){
  // Fallback for browser that don't support the history API
  if (!('replaceState' in window.history)) return true

  // Ensure middle, control and command clicks act normally
  if (e.which == 2 || e.metaKey || e.ctrlKey){
    return true
  }

  // Do something awesome, then change the URL
  window.history.replaceState(null, "New Title", '/some/cool/url')
  return false
})

POST后的网站需要被遗弃

过去很多开发人员喜欢生成不能再次使用的URL，这种URL也称为Post-specific URLs，当你提交一个表单的时候你不会发现地址栏中的URL会发生任何变化，当你将复制URL重新打开后却得到一个错误的页面。这样的URL本身没有任何错误，他们的主要作用是进行重定向和在API中使用，并不应该给用户使用。

一个非常好的URL示例

1. 在生成URL的时候仅使用ASCII字符（defunkt,resque）。
2. “push“是”push request”的简称-简单、简洁且有关联。
3. 请求号码是基于defunkt/resque（从1开始）。
4. 锚点指向内容的具体位置。

一个新的开始

我期望很多的人使用新增的Javascript API，网站策划人员和开发人员可以花很多的时间在设计URL上。URL是网站可用性的重要组成部分，但是很多人会忽视它的存在。给一个网站重新设计界面是件和容易的事情，但是重新设计网址结构却非常的困难。

 

本文地址：http://www.billionnet.net/c/201251167.html

分享到：

---

【刷新页面】【加入收藏】【打印此文】 【关闭窗口】

• 上一篇：二维码数据格式详解
• 下一篇：点击热力图的技术如何实现

评论加载中... 内容： 评论者： 验证码：