社群當道，各位有沒有發現網頁要進行分享時，都會自動帶出文章資訊與縮圖。又或者我們將連結傳送到 Skype, Line, Wechat 等等 IM 聊天室的時候，系統都能自動產生 Preview 縮圖與標題，到底是怎麼做到的？這些技巧，我們統稱 OG Tag 中繼標籤，一般來說機器人會先讀取這裡的資訊，如果都沒有設定才會對網頁進行解析。中繼標籤對於 SEO 來說是很重要的，不可忽視。
OG Tag 中繼標籤是什麼？
OG:Tag 是 Open Graph Tag 的簡稱，一開始是 Facebook 提出的規範，再網頁 HTML 標頭 <head> 中描述這個資源希望被抓取的資訊，如果有了這些資訊，機器人就不需要解析整份網頁，也能夠顯示最適合的縮圖與文字標題等等。介紹一下目前社群常用的幾種 Tag：
Facebook og:tag
|
1 2 3 4 5 6 7 8 |
<!-- Facebook --> <meta property="fb:app_id" content="APP ID" /> <meta property="og:type" content="website" /> <!-- 類型 --> <meta property="og:title" content="標題" /> <meta property="og:description" content="描述或摘要" /> <meta property="og:image" content="預覽圖 URL，必須大於 200x200，建議大小 600 x 314 最適合顯示" /> <meta property="og:site_name" content="網站名稱" /> <meta property="og:url" content="URL" /> |
Facebook og:tag 可以透過「分享偵錯工具」進行測試，確認有沒有寫錯。
Google+
|
1 2 3 4 |
<!-- Google+ --> <meta itemprop="name" content="標題" /> <meta itemprop="description" content="描述或摘要" /> <meta itemprop="image" content="預覽圖 URL" /> |
Google 倒是提供一個「結構化資料查詢工具」可以檢驗 HTML 與中繼標籤。
Twitter Card
|
1 2 3 4 5 6 7 8 |
<!-- Twitter Card --> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@username"> <!-- Twitter 使用者名稱 --> <meta name="twitter:title" content="標題"> <meta name="twitter:description" content="描述或摘要"> <meta name="twitter:creator" content="@username"> <!-- Twitter 使用者名稱 --> <meta name="twitter:image" content="預覽圖 URL，大於 144x144 小於 4096x4096"> <meta name="twitter:image:alt" content="圖片內容說明"> |
Twitter 有一個「Card Validator 工具」可以用來驗證，twitter:image:alt 的概念與 <img alt=""> 一樣，告訴搜尋引擎或機器人這圖片是什麼。
Pinterest Rich Pin
|
1 2 3 |
<!-- Pinterest --> <meta property="og:price:amount" content="商品售價幣別" /> <meta property="og:price:currency" content="商品售價" /> |
Pinterest 基本上延伸 OG:tag，但是在類別上比較複雜，上述屬於產品類別。他支援很多不同的類型，有興趣可以參考官方 Documents，當然也提供了驗證工具「Rich Pins Validator」。
Weibo Meta Tags
|
1 2 3 4 5 |
<!-- Weibo --> <meta name ="weibo:type" content="webpage" /> <meta name ="weibo:webpage:title" content="標題" /> <meta name ="weibo:webpage:description" content="描述或摘要" /> <meta name ="weibo:webpage:image" content=""預覽圖 URL" /> |
大陸常用的微博，我比較少用，這裡有詳盡的介紹。
LinkedIn tag
|
1 2 3 4 5 6 |
<!-- LinkedIn --> <meta prefix="og: http://ogp.me/ns#" property="og:type" content="website" /> <!-- 類型 --> <meta prefix="og: http://ogp.me/ns#" property="og:title" content="標題，通常與 Title Tag 相同" /> <meta prefix="og: http://ogp.me/ns#" property="og:image" content="預覽圖 URL" /> <meta prefix="og: http://ogp.me/ns#" property="og:site_name" content="網站名稱"/> <meta prefix="og: http://ogp.me/ns#" property="og:description" content="描述或摘要"/> |
由於 LinkedIn 也可以貼文分享了，這算是比較冷門的中繼標籤。
其他好用的 SEO 中繼標籤
除了社群分享專用的 Tag 只外，順便加碼介紹幾個常用的 Meta Tag
|
1 2 3 4 5 6 |
<title>標題，這不用解釋了</title> <meta charset="utf-8"> <!-- 指定網頁編碼 --> <meta name="robots" content="all,follow"> <!-- 指定爬蟲策略 --> <meta name="googlebot" content="index,follow,snippet,archive"> <!-- 指定爬蟲策略 --> <meta name="keywords" content="關鍵字，太多一點用處都沒有，很多搜尋引擎不參考了"> <link rel="canonical" href="網頁連結" /> |
上述就是 canonical Tag 要特別講一下，很多網頁都有帶 QueryString 參數，容易造成網址不一樣但內容一樣，這是 SEO 的致命傷。只要是同樣內容的網頁，canonical link 必須一樣，才不會被降分，網站架構設計要特別注意。
以上我建立一個樣板放在 GitHub 需要的人請自行參閱。
