Angularjs vs SEO vs pushState

时间:2014-10-05 07:57:05

标签: javascript angularjs seo pushstate

在阅读了这个thread 后,我决定在我的angularjs应用程序中使用pushstate api,它完全基于API(独立前端和独立后端)。

以下是我的测试网站:http://huyaks.com/index.html

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

从我所看到的:

谷歌索引主页,索引动态导航(酷!)但没有索引 任何动态网址。 请take a look.

我检查了相关主题中给出的示例站点:

http://html5.gingerhost.com/london

据我所知,当我直接访问某个特定页面时,服务器会返回假定为动态的内容,因此会对其进行索引。但是在我的情况下这是不可能的,因为我的应用程序是完全动态的。

请你告诉我,我的具体案例有什么问题以及如何解决这个问题?

提前致谢。

注意:这个问题是关于pushState方式的。请不要建议我使用像prerender.io这样的转义片段或三维派对服务。我想弄清楚如何使用这种方法。

4 个答案:

答案 0 :(得分:1)

显然,昆汀没有读过您所指的帖子。 http://html5.gingerhost.com/london整点是它使用pushState并证明它不会为了蜘蛛的利益而需要静态html。

  

"此网站使用HTML5 wizrdry [sic]加载“实际内容”#39;与代码的其余部分异步[原文如此]:这使得用户更快,但它仍然完全可以被搜索引擎索引。"

除了狡猾的拼写,这个演示显示异步加载的内容是可索引的。

答案 1 :(得分:0)

  

据我所见,当我直接访问某个特定页面时,服务器会返回假定为动态的内容

不是。您正在加载一个包含JavaScript的空白页面,并且JavaScript会立即加载应该为该URL显示的内容。

您需要让服务器生成在运行JavaScript之后获得的HTML,而不是依赖于JS。

答案 2 :(得分:0)

Google确实解释了Angular网页,您可以在this quick demo page上看到,其中标题和元描述在search result中正确显示。

如果他们完全解释JS,很可能会对它进行彻底的链接分析。

某些网页未编入索引的事实是由于他们分析了Google does not index every page这一事实,即使您将其添加到站点地图或提交它以便在网站管理员工具中进行索引。在demo page上,常规链接和范围绑定链接当前未被编入索引。

更新:所以要具体回答这个问题,测试网站上的pushState没有问题。这些网页根本不包含Google的增值内容。 (见他们的general guidelines)。

答案 3 :(得分:0)

Sray,我最近在另一个帖子中打开了同样的问题,并被告知Googlebot和Bingbot会对使用pushState的SPA进行索引。我没有看到一个确保我信心的例子,但这就是我所说的。为了覆盖你的基地,就Facebook而言,使用开放图形元标记。

我仍然对没有向机器人发送HTML代码片段向前推进没有信心,但是就像你一样,我发现在使用pushState或甚至建议时都没有教程告诉你如何做到这一点。但是这就是我想象它可以使用Symfony2 ...

  1. 使用预渲染或其他服务生成所有网页的静态代码段。将它们存放在路由器可以访问的地方。
  2. 在Symfony2路由文件中,创建一个与您的SPA匹配的路由。我在localhost.com/ng-test/上运行了一个测试SPA,所以我的路线看起来像这样:

    # Adding a trailing / to this route breaks it. Not sure why.
    # This is also not formatting correctly in StackOverflow. This is 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就会正确完成剩下的工作。

  5. 此外,您的问题已得到解答了吗?如果有,请选择一个,以便我和其他人可以告诉你什么对你有用。

    HTML snippets for AngularJS app that uses pushState?