WordPress Open Graph Tags – 開放社交關係圖標籤

max

7 年前

如何建立網站開放社交關係圖標籤

Facebook 臉書部落格在前些日子發出了一則訊息指出，為了進一步限制假新聞在 Facebook 臉書上散佈，將會對分享文章連結時的預覽編輯功能關閉。而這一則新聞又對 WordPress 網站有什麼影響呢？在這之前為了推銷網站文章在臉書 Facebook 分享貼文連結時，如果抓取的文章標題描述不滿意時，可以立即編輯修改連結預覽的標題與內容描述，現在這些編輯的功能被取消了，所以每一位 WordPress 網站的管理者或是設計者就應該要注意了，自己的網站設計是不是符合標準？而根據臉書 Facebook 的說明文件指出，務必使用開放社交關係圖標籤 Open Graph Tags 來標示您的網站。接著的文章內容就要跟大家分享如何幫自己的 WordPress 網站建立 Open Graph Tags，有興趣的朋友可以繼續閱讀。

WordPress Open Graph Tags

臉書貼文分享連結預覽

上圖所示是我們分享文章連結正確實所顯示的效果，根據臉書的說明文件指出開放社交關係圖標記範例使用 og:type=”article” 如下。

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

透過這些中繼標籤的屬性來最佳化臉書上的分享效果，因此每一個 WordPress 網站都必須建立好開放社交關係圖標籤。
在 WordPress 網站要建立 Open Graph Tags 的方法也很簡單，可以是手動建立的方式又或者是安裝外掛程式的方式。

手動方法

手動建立的方式是透過編輯子佈景主題的 fucntions.php 檔案，新增以下語法（語法參考來源）。

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
		return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
	}
add_filter('language_attributes', 'add_opengraph_doctype');

//新增 Open Graph Meta Info

function insert_fb_in_head() {
	global $post;
	if ( !is_singular()) //如果不是文章或是頁面時
		return;
        echo '<meta property="fb:admins" content="您的 USER ID"/>';
        echo '<meta property="og:title" content="' . get_the_title() . '"/>';
        echo '<meta property="og:type" content="article"/>';
        echo '<meta property="og:url" content="' . get_permalink() . '"/>';
        echo '<meta property="og:site_name" content="網站名稱"/>';
	if(!has_post_thumbnail( $post->ID )) { //這篇文章沒有特色圖片,請使用預設的圖片。
		$default_image="http://example.com/image.jpg"; //請確實填寫預設圖變的正確網址。
		echo '<meta property="og:image" content="' . $default_image . '"/>';
	}
	else{
		$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
		echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
	}
	echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

//Adding the Open Graph in the Language Attributes

function add_opengraph_doctype( $output ) {

return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';

}

add_filter('language_attributes', 'add_opengraph_doctype');

//新增 Open Graph Meta Info

function insert_fb_in_head() {

global $post;

if ( !is_singular()) //如果不是文章或是頁面時

return;

echo '<meta property="fb:admins" content="您的 USER ID"/>';

echo '<meta property="og:title" content="' . get_the_title() . '"/>';

echo '<meta property="og:type" content="article"/>';

echo '<meta property="og:url" content="' . get_permalink() . '"/>';

echo '<meta property="og:site_name" content="網站名稱"/>';

if(!has_post_thumbnail( $post->ID )) { //這篇文章沒有特色圖片,請使用預設的圖片。

$default_image="http://example.com/image.jpg"; //請確實填寫預設圖變的正確網址。

echo '<meta property="og:image" content="' . $default_image . '"/>';

}

else{

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );

echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';

}

echo "

}

add_action( 'wp_head', 'insert_fb_in_head', 5 );

外掛程式

一般的 SEO 外掛程式都具備為網站建立 Open Graph Tags 的功能，例如 Yoast SEO 或是 All in One SEO Pack 外掛程式。
如果您的網站有使用 SEO 外掛程式，而且也正確的建立文章的特色圖片，那麼基本上就沒有問題了。
如果您的網站建立已經有一段時間了，而且有很多文章沒有建立特色圖片，那麼可以試試 Facebook Open Graph, Google+ and Twitter Card Tags 這一款外掛程式，它的好處是可以設定幫沒有指定特色圖片的文章，自動抓取文章中的圖片來作為特色圖片。
特別注意的是這類型的外掛程式並不需要重複安裝，可以針對自己網站的需求挑選適合的一款外掛程式來安裝就可以了。

結論

網站設計者需要時常保持對整個網路環境變化的敏感性，讓自己的網站隨時維持正確的運作，不要發生了問題在到處問答案，這樣就辜負了 WordPress 這一套這麼好用的系統了。當然，如果您對於網站設計沒有興趣，那麼前述的內容就與您無關，如果您對於網站的架設與設計有興趣，那麼開始培養自己吸收新資訊的興趣，這樣對於網站設計的功力增進會有非常大的幫助的。