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