設定 Open Graph Metadata,分享文章更好看

Open Graph protocol

永遠的初學者先前以為 WordPress 只要裝個 SEO 外掛快速設定一下就好了,直到前陣子在 Twitter 分享動畫官方網站時、發現 Tweet 顯示的圖片竟然是官網畫面上沒有的,加上最近分享自家文章到社群網站時圖片一片空白,研究了下原始碼才發現問題所在--沒設定 Open Graph Metadata

WordPress 設定要點

我是遲了 3、4 年才知道這玩意兒,幾年前就已有不少分享設定方式的文章,也有直接寫好的 WordPress 程式碼;但因應個人需求,這邊還是自己寫,本文僅簡單分享 3 個撰寫時碰到的狀況及解決方式:

文章標題左邊出現兩個空白

這邊是以 wp_title() 叫出文章標題,主要是懶得寫程式碼判斷是單篇文章還是分類,用這個標籤函數是最方便的;不過如果只單純設定標題不加任何額外符號,標題文字左方還是會自動多出兩個半形空白,因此需加上 trim 把多餘的空白修掉。

<meta property="og:title" content="<?php echo trim(wp_title('', false)); ?>" />
<meta name="twitter:title" content="<?php echo trim(wp_title('', false)); ?>">

文章描述抓不到內容

一般搜尋「文章摘要的呼叫方式」都會找到 get_the_excerpt(),但這個標籤函數只限文章本身有另外設定摘要時才有值可以抓、否則都是空白;本網誌的各篇文章摘要則是以 the_excerpt() 的方式呼叫,雖然不用設定摘要,但寫在 meta 時無法如願抓到想要的文字。

經過一番折騰才找到偷吃步的方式,就是使用 the_excerpt_rss()!該標籤函數會將文字格式成 RSS 用,在沒設定摘要的情況下、抓取文章的前 120 個半形字,相當方便;唯一需要注意的是此標籤函數必須在文章迴圈內使用。

<meta property="og:description" content="<?php the_excerpt_rss(); ?>" />
<meta name="twitter:description" content="<?php the_excerpt_rss(); ?>">

Printerest 用的文章時間呼叫方式

Printerest 設定文章發佈時間是非強制的選項,只是設定一下比較好看。唯一要注意的就是時間格式必須符合 ISO 8601 國際標準,WordPress 只要使用 the_time() 標籤函數如下,就可以順利叫出符合標準的時間了。

<meta property="article:published_time" content="<?php the_time( 'c' ); ?>" />

檢測工具

基本上只要 Metadata 設定好了,就可以用各大社群網站的檢測工具來測試成果囉!

成功與失敗範例

各家檢測工具都會很貼心提醒建議改進的部分,其中比較需要留意的是 Facebook 的檢測工具有時不會一次抓到位,所以如果第一次偵錯結果不盡人意、可以等一下下再重新抓取。Open Graph 設定好,分享文章好看沒煩惱,也較能吸引人點閱喔!

參考文章:
Moz:Must-Have Social Meta Tags for Twitter, Google+, Facebook and More
OXXO.STUDIO:結構化資料 SEO 與 meta 標籤
MIS腳印:讓 Facebook、Google+『推文』時,正確抓取指定資訊,例如:內容、圖片……

魔法少女 俺」應該是近兩年我重翻最多次的漫畫,前幾年發佈動畫化消息後一直沒下文,直到最近才確定放送!雖然台灣沒代理漫畫,但推薦懂日文又喜歡搞笑作品的朋友看看。

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料