什么是shebang/hashbang(!)在Facebook和Twitter的新网址上?

这项技术是 now deprecated .

这个 用于 告诉谷歌如何索引页面。

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

这种技术主要被使用HTML5旁边引入的JavaScriptHistoryAPI的能力所取代。对于URL类 www.example.com/ajax.html#!key=value ,谷歌将检查网址 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';

啊哈!没有页面刷新!Type:

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

仍然没有刷新。使用后退按钮查看这些URL是否在浏览器历史记录中。浏览器会注意到我们在同一个页面上,但是只是更改了锚,所以它不会重新加载。由于这种行为,我们可以有一个单独的javascript应用程序,它在浏览器中显示在一个“页面”上,但是有许多可书签的部分都与后退按钮相关。当用户进入不同的“状态”时,应用程序必须更改锚定,同样,如果用户使用后退按钮、书签或链接加载包含锚定的应用程序,应用程序必须还原适当的状态。

这样就有了:锚为JavaScript程序员提供了一种机制,使书签、可索引和后退按钮友好的应用程序成为可能。这种技术有一个名字:它是 Single Page Interface .

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

P.P.S.鉴于所有这些,“bang”或感叹号进一步暗示了谷歌的网络爬虫可以从服务器以稍微不同的URL加载完全相同的页面。见 Ajax Crawling . 另一种技术是使每个链接指向服务器可访问的URL,然后使用不引人注目的javascript将其更改为带有锚的SPI。

下面是关键链接: The Single Page Interface Manifesto

首先:我是Raganwald引用的单页界面宣言的作者

正如Raganwald已经很好地解释的那样,Facebook和Twitter中使用的单页面界面(SPI)方法最重要的方面是使用哈希 # 在URL中

性格 ! 只为Google的目的而添加,这个符号是Google的“标准”,用于对Ajax(在极端的单页界面网站中)上密集的网站进行爬行。当谷歌的爬虫找到一个网址 #! 它知道有一个替代的传统URL提供相同的页面“状态”,但在这种情况下是加载时间。

尽管 哎呀! 这种组合对于SEO很有意思,只有Google支持(据我所知),通过一些JavaScript技巧,您可以构建与任何网络爬虫(雅虎、必应…)兼容的SPI网站SEO。

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

看看这个 tutorial ,是一个简单ITSNATSPI站点的例子,但是您可以为其他框架选择一些想法,这个例子与任何Web爬虫程序都是SEO兼容的。

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

我会 very careful 如果您正在考虑采用这个hashbang约定。

一旦你发了大麻,你就不能再回去了。 这可能是最棘手的问题。Ben_稹的文章提出了这样一点:当pushstate被广泛采用时,我们可以将hashbang抛在脑后,返回到传统的URL。嗯,事实是,你可以t。早些时候我说过,URL是永久的,它们会被索引和存档,并且通常会保留在周围。此外,酷URL不会改变。我们不想将自己与所有有价值的内容链接断开。如果您已经在任何时候实现了hashbang URL,那么想要在不中断链接的情况下更改它们,唯一的方法就是在域的根文档上运行一些javascript。永远。它绝不是暂时的,你被它困住了。

你真的很想 use pushState instead of hashbangs 因为让你的网址变得丑陋,可能永远被破坏,这是对hashbang的巨大和永久的负面影响。

为了更好地跟进这一切,Twitter——hashbang url和单页面界面的先驱之一——承认hashbang系统长期以来运行缓慢,事实上他们已经开始改变决定并返回旧的学校链接。

Article about this is here.

我一直以为 ! 只是指出后面的哈希片段对应于一个URL, ! 代替站点根目录或域。理论上,它可以是任何东西,但看起来GoogleAjax爬行API喜欢这样。

当然,散列只是表示没有真正的页面重新加载,所以是的,它是用于Ajax的。 编辑:拉甘瓦尔德做了一个可爱的工作,更详细地解释这一点。

上面的答案很好地描述了它在Twitter和Facebook上使用的原因和方式,我错过的是解释什么是默认的

在“普通”(不是单页应用程序)上,可以通过将元素ID放在url中的hash之后,对任何具有ID的元素进行锚定。

示例: