Facebook的刮板和角度應用與HTML5Mode Hashbang網址

Question

我加入搜索引擎支持我的角度應用

http://staging.lovented.com

我配置Html5Mode包括Hashbang網址

$locationProvider.html5Mode(true).hashPrefix('!'); 

通過這樣做，這兩個URL都是有效的

http://staging.lovented.com/contest/extension_test_contest

http://staging.lovented.com/#!/contest/extension_test_contest

然後我設置的元標籤，如

<meta name="description" content="{{description}}"> 

<!--Facebook Meta Tags--> 
<meta property="og:title" content="{{title}}" /> 
<meta property="og:url" content="{{siteUrl}}#!{{contentUrl}}" /> 
<meta property="og:description" content="{{description}}" /> 
<meta property="og:image" content="{{serviceUrl}}{{imageUrl}}" /> 

如果我去這個頁面動態設置http://staging.lovented.com/contest/extension_test_contest

meta標籤，谷歌將在年底追加逃脫片段抓取網站的方式的網址和系統將拍攝快照。您可以點擊下面的鏈接並查看頁面的來源。一切都在那裏。

http://staging.lovented.com/contest/extension_test_contest?_escaped_fragement_=

但Facebook的方式將履帶工作，它看起來＃！在URL中，並將其替換爲轉義片段，以便fb分享我將分享此URL http://staging.lovented.com/#!/contest/extension_test_contest

但是，如果我在Facebook調試器中運行此URL，它似乎並沒有刮擦網站。

https://developers.facebook.com/tools/debug/og/object/

所以，谷歌爬蟲肯定會工作，但我不知道爲什麼不Fb的刮我的網頁。有什麼建議嗎？

Answer 1

這是因爲拼搶當Facebook沒有使用<meta name="fragment" content="!">，所以如果在URL沒有#! - Facebook將它取作爲一個普通網頁不增加_escaped_fragment_查詢參數......

這同樣適用於其他社交網絡真（至少是當我爲我的應用程序做搜索引擎優化時）...

要處理此問題，您可以添加基於用戶代理的檢測。 有很好的例子如何從prerender.io做到：

阿帕奇：https://gist.github.com/thoop/8072354

Nginx的：https://gist.github.com/thoop/8165802