基於Ajax的OpenGraph網站

我有一個完全基於Ajax的網站（哈希導航）。基於Ajax的OpenGraph網站

有沒有辦法使用Javascript刷新基於ajax的網站的開放圖元標籤？（當我點擊一個鏈接時，標籤和那裏的值應該改變）

來源

2012-01-17 C.E.

編號開放圖標記必須存在於純HTTP的GET頁面上。

這是因爲當用戶與OG對象進行交互（如執行動作等）時，Facebook將在OG URL上執行HTTP GET，並期望在標記中看到OG標記。

解決方案是爲每個對象創建規範URL。這些網址包含基本的HTML標記，包括OG標記。

對這些URL的請求，如果您看到包含'facebookexternalhit'的傳入useragent字符串，則呈現HTML。如果你不這樣做，你會提供一個302重定向到你的ajax URL。在AJAX網址，你喜歡按鈕和發佈應指向規範網址對象

例任何OG操作：

作爲一個用戶，我對http://yoursite.com/#!/artists/monet。我點擊一個類似按鈕，或者當您發佈的行動應該是該對象的網絡hittable規範URL發佈的行動，但類似按鈕的href參數，或對象的URL - 在這種情況下，也許http://yoursite.com/artists/monet

當使用瀏覽器的用戶點擊http://yoursite.com/artists/monet時，您應該將其重定向到http://yoursite.com/#!/artists/monet，但如果傳入的useragent表示它是Facebook的刮板，則只需返回代表藝術家Monet的標記。

有關真實世界的例子，請參閱Deezer，Rdio和Mog，他們都使用這種設計模式。

來源

2012-01-17 15:17:25

寫得非常好的回覆！ – DMCS

非常感謝您的回答！ –

很好的答案，但是當用戶在facebook框中複製/粘貼'http：//yoursite.com/#！/ artists/monet'時會發生什麼？ Imho抓取失敗是因爲他們不知道他們必須複製/粘貼規範網址。 – polyclick

多一點點的調查導致以下結果：

比方說，你做一個哈希看起來像這樣的應用程序：

http://yoursite.com/#/artists/monet

Facebook的刮板將打電話給你的網址不/#/artists/monet部分。這是一個問題，因爲你無法知道你需要解析什麼信息到meta og: tags。

然後嘗試用建議的URL西蒙一樣說：

http://yoursite.com/#!/artists/monet

現在你會發現，Facebook的刮板尊重google ajax specifications，它會轉換#!到?_escaped_fragment_=所以URL看起來像這樣：

http://yoursite.com/?_escaped_fragment_=/artists/monet

您可以用Facebook的調試檢查了這一點自己：https://developers.facebook.com/tools/debug

上傳PHP腳本到你的服務器
去facebook的調試
與/#/部分
點擊「查看我們刮刀認爲正是爲你的URL」輸入網址 - 沒有哈希代碼
與/#!/
再次點擊進入網址「看看到底是什麼我們刮刀看到了你的URL」 - 哈希代碼已經轉向
?_escaped_fragment_=

腳本

<html> 
    <head> 
    <title>Scraping</title> 
    </head> 
    <body> 
    <? 
     print_r($_SERVER); 
    ?> 
    </body> 
</html>

或彙總：總是使用/#!/（hashbang）深層鏈接;）

來源

2013-02-22 12:59:29 polyclick

感謝您的額外信息。真的有用我正在研究的w問題。 – TobyG

這個答案應該被標記爲正確答案（！） –

@polyclick和Yaron我在Simon的回答中添加了一條評論，如果能夠澄清是否需要用hashbang重寫redriect並且如果設置足以滿足索引'og：tags'到與JSON對象D3的可視化相對應的html對象 - 或者我會打開另一個問題。 – user305883

我跑了一個快速的測試，似乎工作。取決於FB scraper不運行JavaScript的事實。

由於大部分我的網站都是靜態的單頁應用程序沒有服務器的邏輯，我可以快速的工具，如步兵和咕嘟咕嘟生成靜態頁面。

如果您分享http://wh-share-test.s3-website-eu-west-1.amazonaws.com/test

Facebook將刮測試頁面meta標籤，當用戶點擊的JS重定向到/＃/測試的鏈接，我的單頁的應用程序作出反應，並提出正確的觀點。

似乎哈克，但工程;

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>This is a shared item</title> 
</head> 
<body> 
    <h1>This is a shared item page.</h1> 
    <script> 
     var path = window.location.pathname; 
     window.location = '/#' + path; 
    </script> 
</body> 
</html>

來源

2016-05-17 16:35:21

基於Ajax的OpenGraph網站

回答

相關問題