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

这项技术是 now deprecated。

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

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

这项技术大部分已被使用与 HTML5 一起引入的 JavaScript History API 的能力所取代。对于像 www.example.com/ajax.html#!key=value 这样的 URL，Google 将检查 URL www.example.com/ajax.html?_escaped_fragment_=key=value 以获取非 AJAX 版本的内容。

---

octothorpe/number-sign/hashmark 在 URL 中具有特殊意义，它通常标识文档的某个部分的名称。准确的说法是散列后面的文本是 URL 的锚部分。如果您使用 Wikipedia，您会看到大多数页面都有一个目录，您可以使用锚点跳转到文档中的部分，例如：

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 程序员提供了一种机制，用于制作可书签、可索引和后退按钮友好的应用程序。这种技术有一个名字：它是一个Single Page Interface。

ps 这种技术还有第四个好处：通过 AJAX 加载页面内容，然后将其注入当前 DOM 可以比加载新页面快得多。除了提高速度之外，还可以在程序员的控制下执行进一步的技巧，例如在后台加载某些部分。

pps 考虑到所有这些，“砰”或感叹号进一步暗示了谷歌的网络爬虫，可以从服务器以稍微不同的 URL 加载完全相同的页面。请参阅Ajax Crawling。另一种技术是让每个链接指向一个服务器可访问的 URL，然后使用不显眼的 Javascript 将其更改为带有锚点的 SPI。

这里又是关键链接：The Single Page Interface Manifesto

---

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

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

添加字符 ! 仅用于 Google 的目的，此符号是用于抓取 AJAX 密集型网站（在极端单页界面网站中）的 Google“标准”。当 Google 的抓取工具找到带有 #! 的 URL 时，它知道存在另一个传统 URL，提供相同的页面“状态”，但在这种情况下是在加载时间。

尽管 #! 组合对于 SEO 来说非常有趣，但仅受 Google 支持（据我所知），通过一些 JavaScript 技巧，您可以构建与任何网络爬虫（雅虎、必应......）兼容的 SPI 网站 SEO。

SPI Manifesto 和演示在哈希中不使用 Google 的 ! 格式，可以轻松添加此表示法，并且 SPI 抓取可能更容易（更新：现在使用 ! 表示法并与其他搜索引擎保持兼容）。

看看这个 tutorial，它是一个简单的 ItsNat SPI 站点的示例，但您可以为其他框架挑选一些想法，这个示例与任何网络爬虫都兼容 SEO。

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

---

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

一旦你hashbang，你就不能回去了。这可能是最棘手的问题。 Ben 的帖子指出，当 pushState 被更广泛地采用时，我们可以将 hashbang 抛在脑后，回到传统的 URL。好吧，事实是，你不能。之前我说过 URL 是永远存在的，它们会被编入索引和存档，并且通常会保留下来。除此之外，很酷的 URL 不会改变。我们不想将自己与指向我们内容的所有有价值的链接断开。如果您在任何时候都实现了 hashbang URL，那么想要在不破坏链接的情况下更改它们，唯一的方法是在您的域的根文档上运行一些 JavaScript。永远。这绝不是暂时的，你被它困住了。

您确实想要use pushState instead of hashbangs，因为让您的 URL 变得丑陋并且可能永远损坏 - 是 hashbangs 的一个巨大且永久的缺点。

---

为了更好地跟进这一切，Twitter——hashbang URL 和单页界面的先驱之一——承认 hashbang 系统从长远来看是缓慢的，他们实际上已经开始扭转决定并返回老派链接。

Article about this is here.

---

我一直认为 ! 只是表示后面的哈希片段对应于 URL，而 ! 代替了站点根目录或域。从理论上讲，它可以是任何东西，但 Google AJAX Crawling API 似乎喜欢这种方式。

当然，哈希只是表明没有发生真正的页面重新加载，所以是的，它是出于 AJAX 目的。编辑：Raganwald 做得很好，更详细地解释了这一点。

---