标点符(钱魏 Way)

怎样设计一个好的URL

你应该花时间来设计你的URL结构。 在你看完这篇文章以后,我唯一期望的是你能花点时间设计你的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。在可以在任何<user>/<repo>后面跟上/issues或/wiki来生成页面。

为了命名空间的通用性,保持命名空间的简洁,不要将内容加在前面或后面,类似/feature/<user>/<repo>/<user>/<repo>/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到浏览器历史记录,用来更换浏览器中的历史堆栈。

什么是有使用onReplaceStateonPushState

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

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

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

链接需要看上去像个链接

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

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

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

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://warpspire.com/posts/url-design/

码字很辛苦,转载请注明来自标点符《怎样设计一个好的URL》

评论