動態Facebook的開放圖標籤可能嗎？

我使用jQuery動態更改我的<meta property="og:image" content="#">和<meta property="og:title" content="#">標記（下圖）。當我通過Chrome中的「檢查」查看代碼時，代碼已成功更改。動態Facebook的開放圖標籤可能嗎？

HTML：

<meta property="og:title" content="#"> 
<meta property="og:image" content="#">

的jQuery：

$("meta[property='og:title']").attr("content", data.name); 
$("meta[property='og:image']").attr("content", data.thumbnail.url);

但Facebook debugger tool仍呈現content="#"每個。我假設這是因爲Facebook在Javascript有機會替換內容之前讀取源代碼。

有沒有辦法解決這個問題？

謝謝。

來源

2015-12-15 user1661677

Facebook根本不解析JavaScript，您不能使用動態Open Graph標籤。無論如何改變它們並沒有意義。

顯然，您只能在服務器上動態更改OG標籤。例如：https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx

<meta property="og:title" content="<?php echo $_GET['title'];?>">

不知道that's你想，雖然做的事，該URL看起來很醜陋的方式。當然，重寫會很好。

您也可能想嘗試類似prerender.io，但我不確定它是否會處理動態og標記。

來源

2015-12-15 08:37:31 luschn

我已經知道這一點。我的問題是'解決'我的問題。許多網站都這樣做 - 必須有一種方法。 – user1661677

有沒有辦法解決，Facebook只是不解析JavaScript。網站在做什麼？ – luschn

我並不是說我需要使用Javascript才能完成此操作。必須有一種方法來動態加載''標籤。 Vimeo，Youtube，幾乎所有的視頻託管網站都像FB一樣完美無瑕。我猜他們正在使用PHP爲每個上傳的視頻創建一個新頁面？ – user1661677

試試這個對我有用。

<?php 

$params = array(); 
if(count($_GET) > 0) { 
    $params = $_GET; 
} else { 
    $params = $_POST; 
} 
// defaults 
if($params['type'] == "") $params['type'] = "restaurant"; 
if($params['locale'] == "") $params['locale'] = "en_US"; 
if($params['title'] == "") $params['title'] = "default title"; 
if($params['image'] == "") $params['image'] = "thumb"; 
if($params['description'] == "") $params['description'] = "default description"; 

?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#"> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 

     <!-- Open Graph meta tags --> 
     <meta property="fb:app_id" content="MY_APP_ID" /> 
     <meta property="og:site_name" content="meta site name"/> 
     <meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/> 
     <meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/> 
     <meta property="og:locale" content="<?php echo $params['locale']; ?>"/> 
     <meta property="og:title" content="<?php echo $params['title']; ?>"/> 
     <meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/> 
     <meta property="og:description" content="<?php echo $params['description']; ?>"/> 

    </head> 
</html>

來源

2017-04-03 10:16:52 user7795526

如前所述，Facebook根本不解析JavaScript。

這樣做的一種方式（我這樣做）是使用prerender.io之類的預渲染服務預渲染頁面並將來自Web搜尋器的請求重定向到基於用戶代理的預渲染服務器（可以輕鬆找到如何與你的谷歌Nginx/Apache服務器）。

預渲染服務會生成頁面的HTML/CSS渲染，但它們會等到頁面完全加載並執行JavaScript之後才執行此操作。這樣，Facebook就會得到一個網站的渲染，JavaScript已經被執行，並且OpenGraph標籤設置正確！

Prerender是開源的，所以你可以免費運行你自己的prerender服務器！

來源

2018-02-21 15:19:38

動態Facebook的開放圖標籤可能嗎？

回答

相關問題