HTML/DOM爲隨機圖片的頁面將正確發佈在Facebook和谷歌+

我有一個網站，其中包含隨機爆頭的可愛自負。每次加載頁面（或點擊爆頭）時，都會被替換爲新的爆頭。它很好用，直到我發佈Facebook上的網站鏈接。HTML/DOM爲隨機圖片的頁面將正確發佈在Facebook和谷歌+

然後會發生什麼情況是，當Facebook掃描頁面的圖像時，它沒有找到隨機圖像，我假設它是因爲它不運行腳本。我喜歡Facebook的縮略圖也有一個隨機圖像。

有沒有辦法解決這個問題，而不訴諸於服務器端代碼？

這就是我現在做的事：

頭腳本部分

var lastTimeout = 0; 
var lastHeadNum = 0; 

function headURL(headCount) 
{ 
    url = "/public/images/heads/mtoy"; 
    if(headCount < 10) 
     url += "0"; 
    url += headCount.toString(); 
    url += ".gif"; 
    return url; 
} 

function headshotImage() 
{ 
    lastHeadNum = Math.floor((Math.random()*87)+1); 
    document.write('<img id="headshot" src="' + headURL(lastHeadNum) + '" onclick="next_headshot();" width=150 height=150>\n'); 
    lastTimeout = setTimeout("next_headshot();", 12000); 
} 

function next_headshot() 
{ 
    if (lastTimeout != 0) 
     clearTimeout(lastTimeout); 
    do { 
     headNum = Math.floor((Math.random()*87)+1); 
    } while (headNum == lastHeadNum); 
    lastHeadNum = headNum; 
    document.getElementById('headshot').src = headURL(headNum);; 
    lastTimeout = setTimeout("next_headshot();", 12000); 
}

然後在身體的HTML

<div id="contents"> 
<script type="text/javascript">headshotImage();</script> 
<H1 class="contenthead">Table of Contents</H1>

後來在前世，身體HTML看着如：

<div id="contents"> 
<img id="headshot" src="" onclick="next_headshot();"> 
<H1 class="contenthead">Table of Contents</H1>

然後我有一個body.onload處理程序，第一次調用next_headshot，並且這與Facebook有相同的問題。

來源

2012-05-16 mtoy

如果你真的想讓Facebook有一個隨機圖片，那麼我認爲你需要服務器端的代碼。但是如果你對一幅固定的圖像感到滿意，那麼看看OpenGraph。你應該可以把這個在您的<head>部分：

<meta property="og:image" content="/public/images/heads/mtoy01.gif"/>

另一種方法是把<img>標籤右側插入HTML（而不是程序上產生的話），它硬編碼到一個圖像。它不會給你最初的隨機圖像，儘管你可以在頁面加載時立即將它換出。

來源

2012-05-16 16:43:07

[https://developers.google.com/+/plugins/snippet/]文件google + snippet構建。最近的Google+開始無法使用og：image，除非內容是完整的網址。 – mtoy

HTML/DOM爲隨機圖片的頁面將正確發佈在Facebook和谷歌+

回答

相關問題