AngularJS与SEO与pushState的对比

Question

阅读完这篇帖子后，我决定在我的基于API的AngularJS应用程序中使用pushstate API（独立的前端和独立的后端）。

这是我的测试网站：http://huyaks.com/index.html

我创建了一个网站地图并上传到谷歌网站管理员工具。

从我所看到的：

Google索引了主页，索引了动态导航（很酷！），但没有索引任何动态URL。请看一下。

我检查了相关帖子中提供的示例网站：

http://html5.gingerhost.com/london

据我所见，当我直接访问某个页面时，被认为是动态的内容会由服务器返回，因此它被索引。但在我的情况下，这是不可能的，因为我的应用程序完全是动态的。请问，在我的特定情况下问题出在哪里，如何解决？谢谢提前。注意：这个问题是关于pushState方式的。请不要建议我使用转义片段或第三方服务，比如prerender.io。我想弄清楚如何使用这种方法。

- Sray

Answer 1

显然，Quentin没有读到你所提到的帖子。 http://html5.gingerhost.com/london 的整个重点在于它使用pushState并证明它不需要静态HTML也可以为蜘蛛带来好处。

“此站点使用HTML5巫术[sic]将“实际内容”异步加载到其余代码中：这使用户更快，但仍然可以完全被搜索引擎索引。”

撇开拼写错误，这个演示表明异步加载的内容是可索引的。

- djadomi

---

谢谢您的回复。然而，这个问题对我来说仍未解决。正如我之前提到的那样，该演示还使用了预渲染内容（尝试在Chrome中打开view-source:http://html5.gingerhost.com/new-york，您就会明白我的意思）。因此它被索引了。在我的特定情况下，只有动态导航被索引了。动态页面没有被索引。我做错了什么？您能否看一下我的演示？ - Sray

请看我的测试，网址为https://www.google.com/search?q=%22What's+the+video+all+about%3F+Just+to+test+that+the+content+is+asynchronous%22。这里没有任何静态版本。数据位于http://coger.me/data/data.json（已设置CORS以允许） 。 - djadomi

Answer 2

据我所见，当我直接访问特定页面时，服务器返回的是被认为是动态的内容。

实际上不是这样的。你正在加载一个带有一些 JavaScript 的空白页面，而该 JavaScript 立即加载应该出现在该 URL 上的内容。

你需要让服务器生成运行 JavaScript 后得到的 HTML，而不是依赖于 JS。

- Quentin

---

我的信息中提到了http://html5.gingerhost.com/london。他们返回的是静态内容。>>>>你需要让服务器生成运行JavaScript后得到的HTML，而不是依赖于JS。你是否意味着我仍然需要为Google机器人提供静态内容？ - Sray

是的，您需要静态内容。 - Quentin

好的，谢谢您的回复。假设我想使用phantomjs，那么如何在pushstate angularjs中启动它呢？有很多文章介绍如何处理常规URL（哈希标记），但我不太明白如何告诉搜索引擎使用静态内容，因为没有使用转义片段。 - Sray

@Quentin，那真的不再是100％准确了，你不需要静态内容。我看过一些例子（其中之一列在OP中）的网站，它们索引的内容是100％动态内容。我个人有一个完全使用Angular和API驱动的网站，其中包含已被索引的页面。我还没有准备好说需要预渲染内容的（相对短暂的）日子已经结束，但如果这是我的业务，我会非常紧张，因为Google和Bing都能够读取动态JS驱动的页面，并且正在努力使预渲染变得不必要。 - LocalPCGuy

哎呀，我确实注意到OP中列出的网站在直接访问路由时会呈现静态数据。但我肯定看过并构建过100%动态的网站，而且同样的动态内容也被Google索引。我认为提供静态内容仍然相当重要，但在我看来，随着每个月的过去，这种重要性越来越小。 - LocalPCGuy

Answer 3

谷歌确实解释Angular页面，正如您在这个快速演示页面上看到的那样，标题和元描述在搜索结果中正确显示。

很可能，如果他们解释JS，他们会对彻底的链接分析进行足够的解释。

一些页面未被索引的事实是由于谷歌不索引每个页面，即使您将其添加到站点地图或提交给网站管理员工具进行索引。在演示页面上，常规链接和范围绑定链接目前都没有被索引。

更新：为了具体回答这个问题，测试网站上的pushState没有任何问题。这些页面只是不包含对Google有价值的内容。（请参见他们的一般指南）。

- Sam

Answer 4

嗨，最近在另一个帖子中我提出了同样的问题，得到建议说Googlebot和Bingbot确实会索引使用pushState的单页面应用。虽然我还没有看到确切的例子来证明这一点，但这是我被告知的。为了满足Facebook的要求，你可以使用open graph meta标签。

我仍然不太确定是否可以在不向机器人发送HTML片段的情况下继续进行推进，就像你一样，我也没有找到任何关于如何在使用pushState时做到这一点的教程，甚至没有人提到过。但以下是我想象中使用Symfony2实现这个的方式...

1. 使用预渲染或其他服务生成所有页面的静态片段。将它们存储在路由器可以访问的地方。

2. 在Symfony2路由文件中，创建与您的SPA匹配的路由。我有一个测试SPA运行在localhost.com/ng-test/，所以我的路由看起来像这样：

   # 在此路由后添加尾随/会破坏它。不知道为什么。
# 这也没有在StackOverflow中正确格式化。这是yaml。
NgTestReroute:
----path: /ng-test/{one}/{two}/{three}/{four}
----defaults:
--------_controller: DriverSideSiteBundle:NgTest:ngTestReroute
--------'one': null
--------'two': null
--------'three': null
--------'four': null
----methods: [GET]

3. 在Symfony2控制器中，检查用户代理是否为Googlebot或Bingbot。您应该能够使用下面的代码来做到这一点，然后使用此列表来针对您感兴趣的机器人（http://www.searchenginedictionary.com/spider-names.shtml）...

   if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
{
// what to do
}

4. 如果您的控制器找到机器人的匹配项，请将HTML片段发送给它。否则，就像我的AngularJS应用程序一样，只需将用户发送到索引页面，Angular将正确完成其余工作。

另外，您的问题是否已得到解答？如果是，请选择一个答案，这样我和其他人就可以知道哪种方法适用于您。

使用pushState的AngularJS应用程序的HTML片段？

- Miguel Valencia