html5mode(true) 是否影响 google 搜索爬虫

Does html5mode(true) affect google search crawlers

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

要允许索引您的 AJAX 应用程序,您必须在文档的标头部分添加特殊的元标记:

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

来源: https://docs.angularjs.org/guide/$location#crawling-your-app

在底部查找是否正在抓取您的应用

简短回答 - 不,html5 模式不会打乱您的索引,但请继续阅读。


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

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

使用推送状态的 SEO

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

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

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

没有推送状态的 SEO

几乎没有理由不对 Angular 使用 pushstates,但如果您不这样做,则需要遵循问题中 linked 的指导方针。简而言之,您在服务器上创建 html 的快照,然后使用片段元标记将 url-fragment 更改为“#!”而不是“#”。

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

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

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

此外,在 Angular 中使用快照时,您 可以 打开 html5 模式。在 html5 模式中,片段被隐藏,但它在技术上仍然存在,并且仍然会触发相同的行为,假设片段 meta-tag 已设置。

警告 - Facebook 爬虫

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


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