facebook sharer 使用詳解 之 description, title 和 image

(本文最後檢閱日期 - 27th August, 2015)

facebook sharer 使用詳解是本部落格的人氣文章
謝謝各位的支持

若各下新接觸facebook sharer(後稱sharer) 的話
您在跟著本文實作時或會遇到一些困難,
這時不妨先到上述連結了解一下sharer是怎樣運作

今天繼續說明如何設定sharer其他重要的屬性

---

og:description

設定方法為 <meta name="og:description" content="blar blar blar" />
sharer 會先看看html裡有沒有設這個meta
  有:用這個meta 裡的content 屬性
  沒有:在html 裡找第一個多於120字(不包括120)的 <p>

兩個都找不到的話, 那description就會設為空白
這就是為甚麼通常share 出去的description 怪怪的原因

---

og:image

設定方法為 <meta name="og:image" content="http://absolute.image.path"/>

可設多張, 多copy一次就可

圖的url一定要absolute path 而且是published url

聽起來好像好簡單，那你就錯了

不要相信debugger裡og:image的結果, 那是騙你的
用來參考倒是可以的, 一切要以真正sharer 的結果為準

長氣點說多次, 若遇上甚麼問題, 請參閱facebook sharer 使用詳解

這裡sharer 會這樣做:

先看HTML裡有沒有設og:image

    有:圖片是否大過200x200? (不包括200)

      是:sharer會用這個圖

      否:sharer不會使用這圖片, 請繼續看下去

    否: 忽略此圖片, 並找找網頁裡有哪些 *有夠大 的<img>,

      如有: 放入thumbnail list 讓用家選擇

      沒有: 這個分享不會顯示任何thumbnail

* : 夠大的定義目前還未測試出來, 總之是大圖片

除了og:image 已證實必定要大過200x200外 (deleted on 18th June, 2015 -- its not always true)

其他由HTML extract出來的暫時都未太清楚甚麼size才會當做thumbnail,
簡單來說夠大的都會有機會

測試所得, sharer會比較喜歡找放在開頭的圖

---

og:title

這個是最簡單最正常的屬性

設法為<meta name="og:title" content="bi li ba la"/>

sharer 會先看有沒有設og:title

  有:用這個為title
  沒有:
     sharer會找<title>當title
     若<title>都沒有的話就會直接把網址當成title

文章如能幫到各下的話, 請留個comment讓小弟知道
謝謝