使用HTML5模式的AngularJS SEO:想要了解幕后的功能

Question

当然,有很多资源用于实现对SEO友好版本的AngularJS应用程序.尽管阅读了所有这些内容,但我仍然对一些事情有点不清楚,特别是关于hashbang和HTML5模式模型之间的区别:

1. 对于hashbang(#!或"HTML4")应用程序,location提供程序提供以下设置:

   $location.hashPrefix('!');
   

   HTML5模式也需要此设置吗？为什么或者为什么不？

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

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

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

3. 使用HTML5模式,我的网址类似于:

   http://sample.com/landing/home
   

   即使使用meta我指定的#2中的标记index.html,我仍然无法像抓取工具那样导航到我的网址,例如:

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

   这是正常的吗？在添加location提供程序设置和/或meta标记后,我是否希望能够导航到我的应用程序hashbang样式(如果它是HTML5模式应用程序)？

---

最重要的是,我想我实际的问题是:什么是特别需要的HTML5模式爬行,有什么具体要求hashbang式爬行？它们如何重叠？另外,如果没有生成/可用的hashbang风格的路由,HTML5模式配置如何在幕后实际工作？

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

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

Answer 1

答案

1. HTML4也不需要Hashbang.但是如果你想实现搜索引擎优化,你可以使用它,因为搜索机器人会看到这些链接并请求不同的网址:

   原版的

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

   BOT:

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

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

   带meta标签的原件

   http://somesite/crazy/101
   

   BOT

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

3. 见#2

HTML5模式如何在幕后工作？

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

其他HTML5模式说明

假设您的SPA在域根运行http://somesite.com.因此,只要浏览器中的URL发生更改,就意味着它已在客户端上进行操作.这意味着在某个子内容URL上服务器上没有实际内容.

这就是为什么机器人最后附加_escaped_fragment_,所以你可以提供静态内容而不是404或301到root(因为服务器上不存在内容).此静态内容只会返回内容.没有处理没有SPA脚本.纯粹的内容.