什么是Facebook中的shebang/hashbang(#!)和新的Twitter URL？

Question

我刚才注意到,我们习惯使用的漫长而复杂的Facebook网址现在看起来像这样:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

据我所知,今年早些时候它只是一个普通的URL片段式字符串(以...开头#),没有感叹号.但现在它是一个shebang或hashbang(#!),我以前只在shell脚本和Perl脚本中看到过.

在新的Twitter的网址,现在还采用了#!符号.例如,Twitter个人资料网址现在看起来像这样:

http://twitter.com/#!/BoltClock

#!现在是否在URL中起了一些特殊的作用,比如某个Ajax框架或某些东西,因为新的Facebook和Twitter界面现在基本上是Ajax化的？在我的URL中使用它会以任何方式使我的Web应用程序受益吗？

Answer 1

此技术现已弃用.

这用于告诉Google如何索引页面.

https://developers.google.com/webmasters/ajax-crawling/

这种技术大多被使用与HTML5一起引入的JavaScript History API的能力所取代.对于类似的网址www.example.com/ajax.html#!key=value,Google会检查网址www.example.com/ajax.html?_escaped_fragment_=key=value以获取内容的非AJAX版本.

Answer 2

octothorpe/number-sign/hashmark在URL中具有特殊意义,它通常标识文档的一部分的名称.准确的术语是散列后面的文本是URL 的锚点部分.如果您使用维基百科,您将看到大多数页面都有一个目录,您可以使用锚点跳转到文档中的部分,例如:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing标识页面并且Early_computers_and_the_Turing_test是锚点.Facebook和其他Javascript驱动的应用程序(比如我自己的Wood&Stones)使用锚点的原因是他们想要将页面设为可收藏(如对该答案的评论所建议)或支持后退按钮而不重新加载整个页面.服务器.

为了支持书签和后退按钮,您需要更改URL.但是,如果您将页面部分(类似的内容window.location = 'http://raganwald.com';)更改为其他URL或未指定锚点,则浏览器将从URL加载整个页面.在Firebug或Safari的Javascript控制台中试试这个.加载http://minimal-github.gilesb.com/raganwald.现在在Javascript控制台中,键入:

window.location = 'http://minimal-github.gilesb.com/raganwald';

您将看到从服务器刷新页面.现在输入:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

啊哈!没有页面刷新!类型:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

仍然没有刷新.使用后退按钮可以查看这些URL是否在浏览器历史记录中.浏览器注意到我们在同一页面上但只是更改锚点,因此它不会重新加载.由于这种行为,我们可以在浏览器中显示一个单独的Javascript应用程序,使其位于一个"页面"上,但是有许多可书签部分,这些部分都支持后退按钮.当用户输入不同的"状态"时,应用程序必须更改锚点;同样,如果用户使用后退按钮或书签或链接来加载包含锚点的应用程序,则应用程序必须恢复适当的状态.

所以你有它:Anchors为Javascript程序员提供了一个机制,用于制作可收起书签,可索引和后退按钮的应用程序.这种技术有一个名称:它是一个单页面界面.

ps这项技术有第四个好处:通过AJAX加载页面内容然后将其注入当前DOM可以比加载新页面快得多.除了速度增加之外,还可以在程序员的控制下执行诸如在后台加载某些部分之类的其他技巧.

pps鉴于所有这些,"爆炸"或感叹号进一步暗示谷歌的网络抓取工具可以从稍微不同的URL从服务器加载完全相同的页面.请参阅Ajax Crawling.另一种技术是使每个链接指向服务器可访问的URL,然后使用不显眼的Javascript将其更改为带锚的SPI.

这是关键链接:单页界面宣言

Answer 3

首先:我是raganwald引用的The Single Page Interface Manifesto的作者

正如raganwald所解释的那样,FaceBook和Twitter中使用的单页面接口(SPI)方法最重要的方面是#在URL中使用哈希

该字符!仅为Google目的添加,这种表示法是用于在AJAX(极端单页界面网站)上对网站进行爬网的Google"标准".当Google的抓取工具找到一个URL时,#!它知道存在另一个传统的URL,提供相同的页面"状态",但在这种情况下是加载时间.

尽管#!SEO 的组合非常有趣,但只有Google支持(据我所知),通过一些JavaScript技巧,您可以构建SPI网站SEO兼容任何网络爬虫(Yahoo,Bing ...).

SPI宣言和演示不使用谷歌的!哈希格式,这种符号可以很容易地添加,SPI爬行可以更容易(更新:现在!使用符号并保持与其他搜索引擎兼容).

看看这个教程,是一个简单的ItsNat SPI站点的例子,但是你可以为其他框架选择一些想法,这个例子对于任何网络爬虫都是SEO兼容的.

难的问题是生成任何(或选定的)"AJAX页面状态"作为SEO的纯HTML,在ItsNat中非常容易和自动,同一站点在同一时间SPI或基于SEO的页面(或当JavaScript被禁用时)为了可访问性).使用其他Web框架,您可以遵循双站点方法,一个站点基于SPI,另一个基于SEO,例如Twitter使用这种"双站点"技术.

Answer 4

如果你正在考虑采用这个hashbang惯例,我会非常小心.

一旦你做好了,你就不能回去了.这可能是最棘手的问题.Ben的帖子提出了这样一个观点,即当pushState被广泛采用时,我们可以留下hashbang并返回传统的URL.嗯,事实是,你做不到.之前我曾说过,URL是永久性的,它们会被编入索引并存档,并且通常会被保留.除此之外,酷网址不会改变.我们不希望自己与我们内容的所有有价值的链接脱节.如果您已经在任何时候实现了hashbang URL,那么想要在不破坏链接的情况下更改它们,唯一的方法就是在域的根文档上运行一些JavaScript.永远.这绝不是暂时的,你坚持下去.

你真的想使用pushState而不是hashbangs,因为让你的网址变得丑陋而且可能永远破坏 - 这对于hashbang来说是一个巨大而永久的缺点.

Answer 5

为了对所有这些进行良好的跟进,Twitter(hashbang URL和单页界面的先驱之一)承认,hashbang系统从长远来看是缓慢的,并且他们实际上已经开始扭转决策并返回到老派联系.

关于这个的文章在这里.

Answer 6

我总是假设!刚刚表明后面的哈希片段对应于一个URL,!取代了站点根或域.从理论上讲,它可能是任何东西,但Google AJAX Crawling API似乎就是这样.

当然,哈希表示没有发生真正的页面重新加载,所以是的,这是出于AJAX的目的.编辑:Raganwald做了一个可爱的工作,更详细地解释了这一点.