Facebook, Line, Twitter的網址預覽內容設定
當你在各種通訊軟體或社交平台上，利用網址分享網頁內容時，難免會遇到預覽內容怪怪的時候…
相信各位前端工程師或UI設計師們，對於HTML的<meta>標籤應該都不陌生。其實meta不只是幫助瀏覽器抓取網頁資訊，或是能夠讓搜尋引擎的agent進到你的網頁「爬好爬滿」，進行SEO的優化…如此而已，他也有另一個重要的功能：在進行社群分享時的正確資訊顯示。
Facebook、Line和Twitter的設定
<meta>在各大社群的屬性名稱有所不同，以Facebook所制定的og (Open Graph tags)為Facebook和Line所使用`
<meta property="og:site_name" content="網站名稱" />
<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" />而Twitter則是將og改為twitter：
<meta name=”twitter:title” content=”網頁標題”>
...相關的設定和說明，在網路上都有許多好文可以學習。對我來說，真正的坑其實是在標準網址的設定：
<meta property=”og:url” content=”URL” />近來替公司的某項產品製作了官方網站，原以為設定了domain name作為url即可，但是，同一個url，在Linec和FaceBook的預覽內容卻完全不同。
想要預覽自己的url預覽效果時，推薦大家將domain name放到Facebook Developer(連結請點我)上進行測試後來發現，後端在設定domain name的時候，有進行301轉址，將https://syncobox.com轉址到https://www.syncobox.com/
若你將轉址前的domain name丟上去測試，Facebook Developer就會跳出「無法辨識標準網址」之類的警告。
而我們也可以從下圖的標準網址測試欄位中看到你的標準網址的偵測歷程：
這時候，無論是針對Facebook這類的社群網站，或是Google agent，你都可以使用含有canonical的link標籤，來「建議」他們，我的標準網址其實是：
<link rel=”canonical” href=”https://www.syncobox.com/">會說是建議，是因為他們不會完全聽你的話，根據Google的說法，他會依據他自己的爬蟲結果和轉址後所讀取的網站內容，來決斷你的標準網址。
Facebook和Line的縮圖預覽不同步
但是，還是無法理解為何相同的domain name所產生的預覽內容，會在臉書和Line之間不同步。
才發現，可能是Line的Server應有儲存cookie或快取，隔了一天，在用相同的Domain name，貼在Line的聊天室中，所顯示的內容就和Facebook相同了。
所以，若你發現了這個不同步的問題，你可以這樣做：
第一步，請先確認您的meta og標籤的設定是否正確；
第二步，耐心的等待一段時間，正確的內容就會自己重新跑出來了。
你看，就連medium也可以抓到你所設定的預覽內容喔 ↓
參考文章：
