Facebook的URL分享預覽 關於OG中繼標籤

9ing
9ing
Published in
4 min readMar 23, 2020

當在Facebook分享你的網站,Facebook是如何抓取你網站的頁面內容的呢?(如下圖貼上Yahoo奇摩網址時)

Facebook會在你貼上網址時,爬取你所分享頁面中的og tag。

以下是Yahoo奇摩首頁的og tag內容:

facebook for developers中有詳述og tag的用途:

facebook Sharing 最佳做法中有詳述og tag image的部分應該使用怎麼樣的圖片大小與比例,正方形圖片我會建議300 x 300像素以上,長方形則是 600 x 314 像素。

您也可以利用facebook的分享偵錯工具,預覽您頁面分享後的畫面,或是檢視錯誤。

facebook的分享偵錯工具

如下圖,facebook會分析該頁面的tags

偵錯工具也能幫助您重新抓取該頁面的內容,如果您更新了og tag內容,內容卻遲遲沒有變化,建議您使用偵錯工具重新抓取,頁面就會即時更新。

我曾經遇到很奇怪的問題,同樣的og image在其它頁面是正常的,但是新頁面卻無法正常顯示,後來我用偵錯工具掃描,偵錯工具明確的告訴我og tag的第一張圖片過小(128 x 128 px),替換過就正常了。(該錯誤剛好在第一個og image tag,連帶造成後面的og image tag無法抓取。)

雖然至今不知道為什麼其它頁面能正常顯示,但至少偵錯工具能即時讓我知道問題出在哪邊,不用一直用重複貼文的方式來try。(而且就算你重複貼文,除非你網址不同,否則facebook短時間內還是會抓取快取的內容,而不是最新的內容。)

不同的社群網站/軟體都有不同的tag,同場加映一個整理的很棒的部落格,裡面整理了幾個常用社群網站的tag。

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

參考內容:

--

--