【问题标题】:Does html5mode(true) affect google search crawlershtml5mode(true) 会影响谷歌搜索爬虫吗
【发布时间】:2015-07-15 18:03:08
【问题描述】:

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

【问题讨论】:

    标签: javascript angularjs web-crawler google-crawlers


    【解决方案1】:

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


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

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

    使用推送状态的 SEO

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

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

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

    没有推送状态的 SEO

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

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

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

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

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

    警告 - Facebook 爬虫

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


    编辑 - 我应该提到我已经部署了所有这些版本的网站。两者都有 html5mode、片段元标记和快照,没有任何快照,只依赖于 pushstate-crawling。除了上面提到的 pushstates 和 Facebook 之外,一切都很好。

    【讨论】:

    • 感谢您的回答! snapshotsfragments 是什么意思?
    • 这一切都在您在原始帖子中链接到的文档中。当爬虫遇到包含 #! 的页面时作为 url 的一部分,它将重定向到包含参数 escaped_fragment 的 url。然后,您可以在服务器上查找它并提供页面的预生成 HTML 快照,而不是动态角度页面。谷歌创建了标准,必应(也许还有 Facebook,不确定)也将遵循它,但如上所述,它已经过时,谷歌和必应不再需要它。
    • 所以快照是指整个转义片段方法使用的预生成的 HTML 快照。当我提到片段元标记时,我提到了 Teliren 在他/她的回答中提到的那个。
    • 非常感谢您的详尽回答!祝你好运!
    【解决方案2】:

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

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

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

    向底部寻找爬取你的应用程序

    【讨论】:

    • 谢谢,我已经看到了这个要求。但我很感兴趣这是否足够,我正在寻找在 Angular 的应用程序中使用 html5mode 并且有爬虫经验的人的回复
    • 他们是否应该在他们的开发者网站上展示相同的内容以使 ajax 应用程序可抓取
    • 此方法已被 google 弃用,不再推荐。 googlewebmastercentral.blogspot.co.uk/2015/10/…
    猜你喜欢
    • 2017-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-03
    • 2023-03-09
    • 1970-01-01
    • 2013-10-15
    • 1970-01-01
    相关资源
    最近更新 更多