javascript - AngularJS SEO 使用 HTML5 模式 : Would love some clarity on how this functions behind-the-scenes

Question

当然，有许多资源可用于实现 AngularJS 应用程序的 SEO 友好版本。尽管阅读了无数遍，但我仍然对一些事情不太清楚，尤其是关于 hashbang 和 HTML5 模式模型之间的区别:

1. 对于 hashbang(#! 或“HTML4”)应用程序，location 提供商提供以下设置:

   $location.hashPrefix('!');
   

   HTML5 模式是否也需要此设置？为什么或为什么不？

2. 对于 HTML5 模式的应用程序，index.html 页面中包含以下 meta 标记:

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

   hashbang 应用程序也需要这个元标记吗？为什么或为什么不？

3. 使用 HTML5 模式，我的 URL 类似于:

   http://sample.com/landing/home
   

   即使在我的 index.html 中指定了 #2 中的 meta 标记，我仍然无法像爬虫那样导航到我的 URL，例如:

   http://sample.com/#!/landing/home
   

   这正常吗？在添加 location 提供商设置和/或 meta 标签后，如果它是 HTML5 模式应用程序，我是否应该期望能够导航到我的应用程序 hashbang 风格？

---

最重要的是，我想我的实际问题是:HTML5 模式抓取特别需要什么，hashbang 式抓取特别需要什么？它们如何重叠？此外，如果没有生成/使用 hashbang 样式的路由，HTML5 模式配置实际上如何在幕后工作？

请注意，这些问题与我通常理解的生成/提供快照的问题是分开的。

AngularJS SEO 友好的配置对于经典的 hashbang 风格的应用程序通常是有意义的，但对于 HTML5 模式，我有点困惑。会喜欢一些清晰度。

Answer 1

答案

1. HTML4 也不需要 Hashbang。但是，如果您想实现 SEO，最好使用它，因为搜索机器人会看到这些链接并请求不同的 URL:

   原创

   http://somesite.com/#!/crazy/101
   

   机器人:

   http://somesite.com/?_escaped_fragment_=crazy/101
   

2. 包含元标记，因此搜索机器人会自动将 ?_escaped_fragment_ 附加到请求中。由于它不知道哪一部分实际上是 SPA 的一部分，因此该值将为空。

   带有 meta 标签的原创

   http://somesite/crazy/101
   

   机器人

   http://somesite/crazy/101?_escaped_fragment_=
   

3. 参见 #2

HTML5 模式在幕后如何运作？

它使用在 HTML5 中实现的历史 API 工作，允许更改浏览器的 URL 和历史条目操作。基本上，它允许开发人员更改浏览器的 URL 地址，而无需浏览器实际发出请求。

额外的HTML5模式解释

假设您的 SPA 在域根 http://somesite.com 运行。因此，只要浏览器中的 URL 发生变化，就意味着它已在客户端上被操纵。这意味着服务器上的某些子内容 URL 上没有实际内容。

这就是机器人在末尾附加 _escaped_fragment_ 的原因，这样您就可以向 root 提供静态内容而不是 404 或 301(因为服务器上不存在内容)。这个静态内容除了返回内容外什么都不做。不处理 SPA 脚本。纯内容。