使用pushState的AngularJS應用程序的HTML代碼片段？

Question

我決定使用pushState在AngularJS中開發面向客戶端的應用程序是否安全。

我讀過，當在AngularJS應用中使用pushState時，我們不需要擔心Googlebot，因爲它現在可以執行足夠的JS來爲自己生成一個HTML片段。但後來我想知道Bing,Facebook和其他機器人和刮板。我見過的用於製作AngularJS搜索引擎優化的教程都處理使用hashbangs（＃！）的應用程序。這些不適用於我，因爲我沒有使用hashbangs。

有沒有人有洞察到這個問題？什麼是確保AngularJS應用程序使用pushState是搜索引擎友好和社會刮板友好？如果你使用像Seo4Ajax或prerender.io這樣的服務，我會很感激你的想法。

注意：據我所知，在過去幾年開發單頁應用程序時，有必要將HTML片段發送給SEO抓取工具。這是通過使用hashbangs和meta標籤完成的，它讓Google，Bing和Facebook知道在發出請求時需要用_escaped_string替換bang（！）。在服務器上，您使用_escaped_string列出了請求，並使用工具交付適當的HTML片段來生成像phantomJS這樣的HTML片段。

既然我們有pushState，我就不會看到我們如何向javascript-less機器人表明要使用_escaped_string重寫URL的哪個部分，或者即使它是必要的。我很難找到除「你的網站會與谷歌合適」之外的任何信息;）「。

---

下面是一些其他類似的問題，但沒有答案。
Angularjs vs SEO vs pushState
.htaccess for SEO bots crawling single page applications without hashbangs

這裏有一個解決方案，我貼在了這個問題，並在案件正在考慮爲自己我想HTML片段發送給機器人。這將是一個Symfony2的後端的解決方案：

1. 使用預渲染或其他服務來產生所有網頁的靜態片段。將它們存儲在路由器可以訪問的地方。

2. 在你的Symfony2路由文件中，創建一個與你的SPA相匹配的路由。我有一個測試SPA在本地主機上運行。COM/NG測試/，所以我的路線是這樣的：

   # 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. 如果您的控制器發現與bot相匹配，請將其發送給HTML片段。否則，就像我的AngularJS應用程序一樣，只需將用戶發送到索引頁面，Angular就會正確地完成剩下的工作。

Answer 1

據說，Bing also supports pushState。對於Facebook，請確保您的網站利用Open Graph META tags。