發布之前,先檢查你的分享卡片

分享卡片是當有人把指向你頁面的連結貼出去時,社交網路或聊天應用程式生成的那張小預覽——一個標題、一段描述和一張圖片。對大多數接觸過這個頁面的人來說,卡片是他們唯一會看到的版本:他們在滑動中與它相遇,用大約一秒鐘評判它,然後決定它背後的頁面值不值得點開。不舒服的地方在於,卡片的故障是無聲的。你的頁面在自己的瀏覽器裡可以看起來完美無缺,而它的卡片卻沒有圖片、顯示著上個月的標題,或者描述在一半處被截斷,因為卡片不是從你在螢幕上看到的東西建構的——它是從頁面頭部的一小組 meta 標籤建構的,由一個你從來不會去看的抓取器一次性抓取。所以,在發布任何你打算分享的內容之前,把草稿 URL 放進 Open Graph 檢查器,按你的讀者會看到的方式看你的頁面:四張小卡片。

連結就是廣告

當一個連結被貼到社交資訊流或聊天對話裡時,沒有人類會先造訪你的頁面。平台派出一個抓取器——一個小而沒耐心的爬蟲——它抓取頁面一次,從頭部找到的 meta 標籤建構卡片。這條鏈上的任何人看不到你的版面、字體、精心調整的首屏部分,也看不到你放在折疊線上方的截圖。他們看到的恰好是三個欄位加一張圖片:og:title、og:description 和 og:image。如果這三個不對、缺失或過期,那麼在你的受眾看來,你的頁面就是不對、缺失或過期——卡片後面那個漂亮頁面永遠沒有機會糾正這個印象。

卡片還很頑固。平台會快取這次抓取,通常是按確切的 URL 快取,所以抓取器建構的第一個版本往往就是那個被持續轉發數週乃至數月的版本,遠遠晚於你編輯頁面的時間。這就是為什麼分享卡片值得與廣告創意同等的尊重:對於一篇全部目的就是被分享的貼文來說,連結就是廣告,meta 標籤就是文案。把它們當作事後補筆——或者讓建站工具用附近恰好放著的文字自動填進去——等於在運行一場沒人審過的創意的推廣活動。

每個平台到底讀取什麼

先說基準。Facebook 和 LinkedIn 讀取 Open Graph:由 Open Graph 協議定義的 og:title、og:description、og:image、og:url 和 og:type。只要這五個存在且合理,兩個最大的職業分享介面就覆蓋到了。X 優先讀取它自己的 Twitter Card 標籤——twitter:card、twitter:title、twitter:description、twitter:image——在 Twitter 標籤缺失時回退到 Open Graph 等價標籤。Slack 先讀 Open Graph,以 Twitter Card 標籤作為它的回退。也就是說,各平台對配料達成一致,只是在先伸手拿哪個貨架上略有分歧。

到處都一樣,最後的兜底是同一個:普通的 <title> 元素和 meta 描述,在既沒有 Open Graph 也沒有 Twitter 標籤時被拉來頂上。這個回退對你如何閱讀任何檢查器(包括我們的)都很重要。當一個工具向你展示卡片標題時,誠實的問題是這個值從哪來——是你專門為此寫的一個標籤,還是從一個為搜尋結果頁寫的、字元預算與你的卡片並不共享的 title 元素裡救出來的回退。一台悄悄替換回退值並把它當成標籤呈現的檢查器,是在以遺漏的方式對你撒謊,這正是為什麼 Open Graph 檢查器 把每個回退都標註為回退,而不是假裝標籤存在。

讓卡片看起來壞掉的故障

經典款是相對路徑的 og:image。標籤寫著 content="/images/share.png"——一個路徑,不是一個 URL——它在你的瀏覽器裡能運作,因為瀏覽器知道自己在哪個網站上。抓取器不會解析它:它要的是一個以 https:// 開頭的完整絕對 URL,得不到就直接建構一張沒有圖片的卡片,讀者滑過去時永遠不會知道自己錯過了什麼。緊隨其後的是圖片存在但不合身:遠小於平台推薦的 1200×630 像素,或者比例在置中裁剪後變得莫名其妙。請把 1200×630 當作它本來的樣子——廣泛公布的平台指導,不是任何人批准過的標準——但被無視的指導依然意味著一張標題被裁出畫面的卡片。

其餘的更安靜。缺失 twitter:card 標籤意味著 X 回退到一張小摘要卡片——文字旁邊一個縮圖——即使你提供了一張又大又漂亮的圖片、期待的是全寬的 summary_large_image 待遇。空的標籤值比缺失的標籤更糟:一個 content="" 的 og:title 不會觸發回退,它會以空無一物覆蓋回退。而錯誤的 og:url——指向預發布網域、主頁,或者上週的文章,正如複製來的範本經常幹的那樣——告訴每個平台正規頁面在別處,把分享、計數和快取條目從你真正發布的頁面上分流出去。

為什麼你修好了標籤,舊卡片還在

你改好了標籤,重新部署了,又貼了一次連結——舊標題還在那裡,對著你笑。什麼都沒壞。每個平台都會把針對你的 URL 建構好的卡片快取起來,而這個快取不會監視你的網站有沒有變化;從平台的角度看,它已經知道你的頁面長什麼樣了,在每次分享時重新抓取每個 URL 將是為極小收益付出的巨大爬取量。過期卡片不是你的修復失敗的證據,而是快取還沒有被告知要再看一眼的證據——在那之前,每個分享這個連結的同事和讀者重新端出來的都是舊的那次抓取。

所以去告訴它。每個主要平台都提供強制重新抓取單個 URL 的方式:Facebook 的 Sharing Debugger 和 LinkedIn 的 Post Inspector 都會重新抓取頁面並向你顯示它們重建的卡片——X 歷史上也提供過用於同一目的的卡片驗證器。在任何標籤修復之後,把你的 URL 放進相應的工具裡跑一遍,在宣布貼文之前確認新卡片。在沒有重新抓取工具的地方,改 URL 就改了快取鍵:附加一個諸如 ?v=2 的查詢字串,會讓平台把這個連結當作從未見過的來處理,這對一次性分享來說是個完全體面的技巧。還有,留一點耐心——即使重新抓取之後,快取也可能需要一段時間才放手,所以先檢查、等一等、再檢查一次,然後再去編輯那些本來就沒錯的標籤。

兩分鐘的發布前例行檢查

把它變成例行工作,而不是一次調查。第一:把草稿 URL 貼進 Open Graph 檢查器——預發布或預覽 URL 就行,只要它是抓取器將抓取的那個頁面。第二:確認全部四張卡片——Facebook、X、LinkedIn 和 Slack——顯示的都是你想要的標題、描述和圖片,並留意任何標為回退的項目,因為你選擇的回退沒問題,你撞上的回退則是一個等著被寫出來的標籤。第三:確認圖片 URL 是絕對 URL,圖片本身至少 1200×630。第四:確認在你想要 X 大圖格式的地方 twitter:card 是 summary_large_image,並確認 og:url 指的是你即將發布的正規頁面。

第五:發布——然後自己先把連結貼到某處一次,在你還盯著的時候強制完成第一次抓取,看看返回的卡片。如果它過期或不對,用平台自己的工具重新抓取,而不是慌亂地改東西。兩分鐘、五步,而大多數人唯一會看到的你的頁面版本,就會是一個你真正批准過的版本。至於更寬的發布前清掃——TLS、安全標頭、重新導向,一個頁面在上線前值得做的其餘例行檢查——同時運行 網站健康檢查;卡片是前門,但不是整棟房子。

來源與延伸閱讀

常見問題

為什麼我的連結不顯示圖片?

幾乎總是三個原因之一。og:image 的值是相對路徑而不是完整的 https:// URL,抓取器不會解析它。標籤完全缺失,於是平台要麼從頁面正文裡猜一張圖片,要麼什麼都不顯示。或者圖片在你的瀏覽器裡可達,但對抓取器被阻斷——在登入之後、被機器人規則或 robots 排除拒絕——或者乾脆太小用不了。Open Graph 檢查器會顯示這幾種中哪一種適用於你的 URL,因為它以抓取器的方式讀取標籤。

我修好了標籤——為什麼舊標題還出現?

因為平台顯示的是它快取的抓取結果,而不是你目前的頁面。每個平台都會按 URL 快取卡片,不被告知就不會重新抓取。用平台自己的工具強制一次全新抓取——Facebook 的 Sharing Debugger 或 LinkedIn 的 Post Inspector——並在那裡確認重建的卡片。對於在別處的一次性分享,附加一個諸如 ?v=2 的查詢字串,就足以讓 URL 發生變化,使平台建構一張全新的卡片。

我需要同時寫 Open Graph 和 Twitter 兩套標籤嗎?

主要是 Open Graph,再加一個 Twitter 標籤。當對應的 Twitter 標籤缺失時,X 會回退到 og:title、og:description 和 og:image,所以把每個值都複製一份收穫很小。但 twitter:card 沒有 Open Graph 等價物——og 集合裡沒有任何東西告訴 X 應該渲染小摘要還是大圖——所以實用的最小集是完整的 Open Graph 集合加上設為 summary_large_image 的 twitter:card。只有當你刻意想讓 X 顯示與所有其他地方不同的文案時,才添加其餘的 Twitter 標籤。