协慌网

登录 贡献 社区

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

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

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

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

新的 Twitter URL 现在也以#!为特色#!符号。例如,Twitter 个人资料网址现在看起来像这样:

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

#!现在在 URL 中扮演一些特殊的角色,比如某个 Ajax 框架或某些东西,因为新的 Facebook 和 Twitter 界面现在主要是 Ajax 化的?在我的 URL 中使用它会以任何方式使我的 Web 应用程序受益吗?

答案

此技术现已弃用

用于告诉 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 版本。

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。

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

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

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

人物!仅为 Google 目的添加,此表示法是 Google“标准”,用于抓取密集在 AJAX 上的网站(在极端的单页界面网站中)。当 Google 的抓取工具找到带#!的网址时#!它知道另一种传统的 URL 存在提供相同的页面 “状态”,但在这种情况下是加载时间。

尽管#! SEO 的组合非常有趣,只有谷歌支持(据我所知),有一些 JavaScript 技巧,你可以建立 SPI 网站 SEO 兼容任何网络爬虫(雅虎,Bing ...)。

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

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

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