fbpx

網站與社群連結常用的 SEO 中繼標籤

社群當道,各位有沒有發現網頁要進行分享時,都會自動帶出文章資訊與縮圖。又或者我們將連結傳送到 Skype, Line, Wechat 等等 IM 聊天室的時候,系統都能自動產生 Preview 縮圖與標題,到底是怎麼做到的?這些技巧,我們統稱 OG Tag 中繼標籤,一般來說機器人會先讀取這裡的資訊,如果都沒有設定才會對網頁進行解析。中繼標籤對於 SEO 來說是很重要的,不可忽視。

OG Tag 中繼標籤是什麼?

OG:Tag 是 Open Graph Tag 的簡稱,一開始是 Facebook 提出的規範,再網頁 HTML 標頭 <head> 中描述這個資源希望被抓取的資訊,如果有了這些資訊,機器人就不需要解析整份網頁,也能夠顯示最適合的縮圖與文字標題等等。介紹一下目前社群常用的幾種 Tag:

Facebook og:tag

    <!-- 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+

    <!-- Google+ -->
    <meta itemprop="name" content="標題" />
    <meta itemprop="description" content="描述或摘要" />
    <meta itemprop="image" content="預覽圖 URL" />

Google 倒是提供一個「結構化資料查詢工具」可以檢驗 HTML 與中繼標籤。

Twitter Card

    <!-- 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

    <!-- Pinterest -->
    <meta property="og:price:amount" content="商品售價幣別" />
    <meta property="og:price:currency" content="商品售價" />

Pinterest 基本上延伸 OG:tag,但是在類別上比較複雜,上述屬於產品類別。他支援很多不同的類型,有興趣可以參考官方 Documents,當然也提供了驗證工具「Rich Pins Validator」。

Weibo Meta Tags

    <!-- 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

    <!-- 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

    <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 需要的人請自行參閱。