HTML AngularJS 个使用 pushState 的应用的片段?

HTML snippets for AngularJS app that uses pushState?

我正在决定使用 pushState 在 AngularJS 中开发面向客户的应用程序是否安全。

我读到在 AngularJS 应用程序中使用 pushState 时,我们不需要担心 Googlebot 因为它可以现在执行足够的 JS 来为自己生成一个 HTML 片段。但后来我想知道 BingFacebook 和其他机器人和爬虫。我看过的使 AngularJS SEO 友好的教程都涉及使用 hashbangs (#!) 的应用程序。这些不适用于我,因为我没有使用 hashbangs。

有没有人了解这个问题?有哪些方法可以确保使用 pushState 的 AngularJS 应用程序 SEO 友好 Social-scraper -友好?如果您使用像 Seo4Ajax 或 prerender.io 这样的服务,我会很感激您对此的看法。

注意: 据我了解,在过去几年开发单页应用程序时,有必要发送 HTML 片段到 SEO 爬虫。这是通过使用 hashbangs 和元标记来实现的,元标记让 Google、Bing 和 Facebook 知道它需要在发出请求时用 _escaped_string 替换 bang (!)。在服务器上,您列出了带有 _escaped_string 的请求,并使用生成 HTML 片段(如 phantomJS)的工具提供了适当的 HTML 片段。

现在我们有了 pushState,我不明白我们如何向 javascript-less 机器人指示要用 [=103= 重写 URL 的哪一部分] 或者即使有必要。我找不到 "you're site will be okay with google ;)".

以外的任何信息

以下是其他一些类似但未得到解答的 SO 问题。
Angularjs vs SEO vs pushState
.htaccess for SEO bots crawling single page applications without hashbangs

这是我在该问题中发布的解决方案,我正在考虑是否要将 HTML 片段发送给机器人。这将是 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 Whosebug. 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 将正确完成其余部分。

据推测,Bing also supports pushState. For Facebook, make sure your website takes advantage of Open Graph META tags