HTML片段为使用pushState的AngularJS应用程序？ [英] HTML snippets for AngularJS app that uses pushState?

问题描述

我决定是否可以安全地发展自己的面向客户的应用程序使用pushState的AngularJS。

我读过，在AngularJS应用程序中使用pushState的时候，我们并不需要担心的的Googlebot ，因为它现在可以执行JS足以产生一个HTML片段本身。但后来我想知道的兵 的Facebook 和其他机器人和刮削器。我见过使得AngularJS SEO友好的都处理使用hashbangs应用教程（＃！）。因为我没有使用hashbangs这些并不适用于我。

有没有人能洞察这个问题？什么是保证一个AngularJS应用的使用pushState的一些方法为 SEO友好和社会刮板友好？如果你使用像Seo4Ajax或prerender.io服务我最好的AP preciate你的想法就可以了。

注：据我了解，在过去几年它一直需要HTML片段发送给搜索引擎爬虫开发单页的应用程序时。这是通过使用hashbangs和meta标签，让谷歌，必应和Facebook知道，它需要与_escaped_string来代替感叹号（！）提出请求的时候完成的。在服务器上你会列出与_escaped_string请求，并使用工具来生成HTML片段像phantomJS提供相应的HTML代码段。的

的现在，我们有pushState的，我看不出我们如何指示JavaScript的少机器人与_escaped_string或者即使有必要重写什么URL的一部分。我无法找到超越你的网站会好起来与谷歌;）的任何信息。的

---

下面是其他一些做题是类似的，但没有得到答复。
结果<一个href=\"http://stackoverflow.com/questions/26200740/angularjs-vs-seo-vs-pushstate/27954211#27954211\">Angularjs VS SEO VS pushState的
结果<一个href=\"http://stackoverflow.com/questions/17926219/htaccess-for-seo-bots-crawling-single-page-applications-without-hashbangs/27954392#27954392\">.htaccess搜索引擎优化Googlebot抓取单个页面应用程序，而hashbangs

下面是我在这个问题贴在案件正在考虑为自己我想HTML片段传送到机器人的解决方案。这将是一个 Symfony2的后端解决方案

1. 使用prerender或其他服务来生成所有页面的静态片段。它们存储您的路由器的某个地方进行访问。



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

   ＃添加一个尾随/这条线路打破它。不知道为什么。结果
   ＃这也是不正确的计算器格式。这是YAML。结果
   NgTestReroute：结果
   ----路径：/ NG测试/ {1} / {2} / {3} / {4} 结果
   ----默认值：结果
   --------_控制器：DriverSideSiteBundle：NgTest：ngTestReroute 结果
   --------一：空结果
   --------两化：空结果
   --------三化：空结果
   --------四：空结果
   ----方法：[GET]




3. 在你的Symfony2控制器检查用户代理来看看它的Googlebot的或bingbot。你应该能够用低于code要做到这一点，然后用这个列表来定位你感兴趣的机器人（的 http://www.searchenginedictionary.com/spider-names.shtml ）...

   如果（的strstr（用strtolower（$ _ SERVER ['HTTP_USER_AGENT']），Googlebot时））结果
   {结果
        //做什么结果
   }




4. 如果你的控制器找到匹配到一个机器人，把它的HTML代码段。否则，在与我的AngularJS应用程序的情况下，只需将用户发送到索引页面和角度将正确做休息。

解决方案

据推测，兵还支持pushState的。对于Facebook，请确保您的网站需要的Open Graph META标签的优势。

I'm deciding whether it's safe to develop my client-facing app in AngularJS using pushState.

I've read that when using pushState in an AngularJS app, we don't need to worry about Googlebot because it can now execute enough JS to produce an HTML snippet for itself. But then I wonder about Bing, Facebook and other bots and scrapers. The tutorials I've seen for making AngularJS SEO-friendly all deal with apps that use hashbangs (#!). These don't apply to me since I'm not using hashbangs.

Does anyone have insight into this problem? What are some methods for ensuring an AngularJS app that uses pushState is SEO-friendly and Social-scraper-friendly? If you use a service like Seo4Ajax or prerender.io I'd appreciate your thoughts on it.

Note: As I understand it, when developing single page apps in the last couple of years it has been necessary to send HTML snippets to SEO crawlers. This was accomplished by using hashbangs and a meta tag that let Google, Bing and Facebook know that it needed to replace the bang (!) with an _escaped_string when making a request. On the server you'd listed for requests with _escaped_string and deliver the appropriate HTML snippet using a tool to generate HTML snippets like phantomJS.

Now that we have pushState, I don't see how we indicate to javascript-less bots what part of the URL to rewrite with an _escaped_string or even if it's necessary. I'm having trouble finding any information beyond "you're site will be okay with google ;)".

---

Here are some other SO questions that are similar but have gone unanswered.
Angularjs vs SEO vs pushState
.htaccess for SEO bots crawling single page applications without hashbangs

Here's a solution I posted in that question and am considering for myself in case I want to send HTML snippets to bots. This would be a solution for a Symfony2 backend:

1. Use prerender or another service to generate static snippets of all your pages. Store them somewhere accessible by your router.

2. In your Symfony2 routing file, create a route that matches your SPA. I have a test SPA running at localhost.com/ng-test/, so my route would look like this:

   # 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. In your Symfony2 controller, check user-agent to see if it's googlebot or bingbot. You should be able to do this with the code below, and then use this list to target the bots you're interested in (http://www.searchenginedictionary.com/spider-names.shtml)...

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

4. If your controller finds a match to a bot, send it the HTML snippet. Otherwise, as in the case with my AngularJS app, just send the user to the index page and Angular will correctly do the rest.

解决方案

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

这篇关于HTML片段为使用pushState的AngularJS应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！