Zi 字媒體

社群當道，各位有沒有發現網頁要進行分享時，都會自動帶出文章資訊與縮圖。又或者我們將連結傳送到 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 需要的人請自行參閱。 分享到 Twitter(在新視窗中開啟) 按一下以分享至 Facebook(在新視窗中開啟) 分享到 LinkedIn(在新視窗中開啟) 點這裡寄給朋友(在新視窗中開啟) 按一下即可分享至 Skype(在新視窗中開啟) 分享到 Reddit(在新視窗中開啟) 分享到 Tumblr(在新視窗中開啟) 按一下以分享到 Telegram(在新視窗中開啟)