HTML AngularJS 个使用 pushState 的应用的片段?
HTML snippets for AngularJS app that uses pushState?
我正在决定使用 pushState 在 AngularJS 中开发面向客户的应用程序是否安全。
我读到在 AngularJS 应用程序中使用 pushState 时,我们不需要担心 Googlebot 因为它可以现在执行足够的 JS 来为自己生成一个 HTML 片段。但后来我想知道 Bing、Facebook 和其他机器人和爬虫。我看过的使 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 后端:
的解决方案
- 使用预渲染或其他服务生成所有页面的静态片段。将它们存储在您的路由器可以访问的地方。
在您的 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]
在您的 Symfony2 控制器中,检查用户代理以查看它是 googlebot 还是 bingbot。您应该能够使用下面的代码执行此操作,然后使用此列表来定位您感兴趣的机器人 (http://www.searchenginedictionary.com/spider-names.shtml)...
if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
{
// what to do
}
如果您的控制器找到与机器人的匹配项,请将 HTML 代码段发送给它。否则,就像我的 AngularJS 应用程序一样,只需将用户发送到索引页面,Angular 将正确完成其余部分。
据推测,Bing also supports pushState. For Facebook, make sure your website takes advantage of Open Graph META tags。
我正在决定使用 pushState 在 AngularJS 中开发面向客户的应用程序是否安全。
我读到在 AngularJS 应用程序中使用 pushState 时,我们不需要担心 Googlebot 因为它可以现在执行足够的 JS 来为自己生成一个 HTML 片段。但后来我想知道 Bing、Facebook 和其他机器人和爬虫。我看过的使 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 后端:
的解决方案- 使用预渲染或其他服务生成所有页面的静态片段。将它们存储在您的路由器可以访问的地方。
在您的 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]
在您的 Symfony2 控制器中,检查用户代理以查看它是 googlebot 还是 bingbot。您应该能够使用下面的代码执行此操作,然后使用此列表来定位您感兴趣的机器人 (http://www.searchenginedictionary.com/spider-names.shtml)...
if(strstr(strtolower($_SERVER['HTTP_USER_AGENT']), "googlebot"))
{
// what to do
}
如果您的控制器找到与机器人的匹配项,请将 HTML 代码段发送给它。否则,就像我的 AngularJS 应用程序一样,只需将用户发送到索引页面,Angular 将正确完成其余部分。
据推测,Bing also supports pushState. For Facebook, make sure your website takes advantage of Open Graph META tags。