javascript - html5mode(true) 是否影响谷歌搜索爬虫

Question

我正在阅读 this specification这是网络服务器和搜索引擎爬虫之间的协议(protocol)，允许动态创建的内容对爬虫可见。那里指出，为了让爬虫索引 html5 应用程序，必须在 URL 中使用 #! 实现路由。在 Angular html5mode(true) 中，我们去掉了 URL 的散列部分。我想知道这是否会阻止抓取工具将我的网站编入索引。

Answer 1

简短回答 - 不，html5mode 不会弄乱您的索引，但请继续阅读。

---

重要说明:Google 和 Bing 都可以在没有 HTML 快照的情况下抓取基于 AJAX 的内容

我知道，您链接到的文档另有说明，但大约一两年前，他们正式宣布他们处理 AJAX 内容而不需要 HTML 快照，只要您使用 pushstates，但是很多文档都是旧的，不幸的是没有更新。

使用推送状态的 SEO

AJAX 抓取开箱即用的要求是您正在使用 pushstates 更改您的 url。这正是 Angular 中的 html5mode 所做的(以及许多其他框架所做的)。当 pushstates 开启时，爬虫将等待 ajax 调用完成并等待 javascript 在索引页面之前更新页面。您甚至可以更新路由器中的页面标题甚至元标记等内容，它会正确索引。从本质上讲，您不需要做任何事情，在这种情况下，服务器端和客户端呈现的网站之间没有区别。

需要明确的是，许多 SEO 分析工具(例如 Moz)会在使用 pushstates 的页面上发出警告。那是因为这些工具(以及他们的代表，如果您与他们交谈)在撰写本文时还不是最新的，所以请忽略它们。

最后，确保您在执行此操作时不使用下面的片段元标记。如果你有那个标签，爬虫会认为你想使用非 pushstates 方法，事情可能会变得一团糟。

没有推送状态的 SEO

没有什么理由不在 Angular 中使用 pushstates，但如果您不这样做，则需要遵循问题中链接的指南。简而言之，您在服务器上创建 html 的快照，然后使用片段元标记将您的 url 片段更改为“#!”而不是“#”。

<meta name="fragment" content="!" />

当爬虫找到这样的页面时，它会删除 url 的片段部分，而是使用参数 _escaped_fragment_ 请求 url，您可以提供您的快照页面作为响应。为爬虫提供一个正常的静态页面以进行索引。

请注意，只有在您想要触发此行为时才应使用片段元标记。如果您正在使用 pushstates 并希望页面以这种方式编制索引，请不要使用此标记。

此外，在 Angular 中使用快照时，您可以启用 html5 模式。在 html5mode 中，片段是隐藏的，但它在技术上仍然存在，并且仍然会触发相同的行为，假设片段元标记已设置。

警告 - Facebook 爬虫

虽然 Google 和 Bing 都可以毫无问题地抓取您的 AJAX 页面(如果您使用的是 pushstates)，但 Facebook 不会。 Facebook 不理解 ajax 内容并且仍然需要特殊的解决方案，例如专门为 facebook 机器人提供的 html 快照(用户代理 facebookexternalhit/1.1)。

---

编辑 - 我应该提一下，我已经部署了所有这些版本的网站。既有 html5 模式、片段元标记和快照，也没有任何快照，仅依赖 pushstate-crawling。一切正常，除了上面提到的 pushstates 和 Facebook。