WordPress Open Graph Tags – 開放社交關係圖標籤
如何建立網站開放社交關係圖標籤
Facebook 臉書部落格在前些日子發出了一則訊息指出，為了進一步限制假新聞在 Facebook 臉書上散佈，將會對分享文章連結時的預覽編輯功能關閉。而這一則新聞又對 WordPress 網站有什麼影響呢？在這之前為了推銷網站文章在臉書 Facebook 分享貼文連結時，如果抓取的文章標題描述不滿意時，可以立即編輯修改連結預覽的標題與內容描述，現在這些編輯的功能被取消了，所以每一位 WordPress 網站的管理者或是設計者就應該要注意了，自己的網站設計是不是符合標準？而根據臉書 Facebook 的說明文件指出，務必使用開放社交關係圖標籤 Open Graph Tags 來標示您的網站。接著的文章內容就要跟大家分享如何幫自己的 WordPress 網站建立 Open Graph Tags，有興趣的朋友可以繼續閱讀。
WordPress Open Graph Tags
臉書貼文分享連結預覽
- 上圖所示是我們分享文章連結正確實所顯示的效果，根據臉書的說明文件指出開放社交關係圖標記範例使用 og:type=”article” 如下。
|
1 2 3 4 5 |
<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 的方法也很簡單，可以是手動建立的方式又或者是安裝外掛程式的方式。
手動方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//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 這一套這麼好用的系統了。當然，如果您對於網站設計沒有興趣，那麼前述的內容就與您無關，如果您對於網站的架設與設計有興趣，那麼開始培養自己吸收新資訊的興趣，這樣對於網站設計的功力增進會有非常大的幫助的。
