一個連結被貼到社群平台時,會不會跳出漂亮的預覽圖、正確的標題和描述,這件事看起來是行銷的門面,實際上牽動的是點擊率和分享意願。我這二十年幫不少 B2B 網站做技術體檢,發現社群 meta 標籤是最容易被整組漏掉、卻又最容易補起來的一塊。這篇我用一家工業儲存廠商的檢測結果當例子,把 Open Graph、Twitter Card、robots.txt 對爬蟲的封鎖、還有 referrer-policy 與舊追蹤碼這幾件事一次講清楚,順序就照我實際會動手的優先度來排。
1. 為什麼社群 meta 缺了,分享出去會變一片空白
那家廠商的頁面完全沒有 Open Graph 和 Twitter Card 標籤。結果就是連結被貼到社群平台時,平台抓不到指定的預覽圖、標題和描述,只能自己亂猜,經常抓錯圖或顯示一段沒意義的文字。對一個靠專業形象接單的工業品牌來說,這種空白的預覽等於在分享的第一眼就先失分。
1.1 Open Graph 決定連結在社群長什麼樣
Open Graph 是一組放在 <head> 裡的 meta 標籤,告訴社群平台這個頁面該用什麼標題、描述、圖片和網址來呈現。核心的四個是 og:title、og:description、og:url 和 og:image。我的做法是讓前三個動態綁定頁面本身的標題、描述和正規網址,不要另外手寫一套,否則兩邊很快就會不一致。og:image 則要準備一張高品質的預設圖,尺寸建議走 1200×630 這種主流長寬比,社群平台裁切時才不會切壞。
1.2 Twitter Card 是另一套,不能只靠 Open Graph
很多人以為有了 Open Graph 就夠,但部分平台走的是自己的 Card 規格。twitter:card 設成 summary_large_image 可以拿到大圖版面,再搭配 twitter:title、twitter:description、twitter:image。這幾個欄位可以和 Open Graph 共用同一份內容,重點是要「都寫上去」,別讓某一個平台抓到空值。下面這張表是我給客戶的最小必備清單。
| 標籤 | 用途 | 建議來源 | 漏掉的後果 |
|---|---|---|---|
| og:title | 社群顯示標題 | 動態綁定頁面 Title | 顯示錯誤或空白標題 |
| og:description | 社群顯示描述 | 動態綁定 Meta Description | 平台自行抓一段亂文字 |
| og:url | 正規化網址 | 動態綁定 Canonical | 分享數散落在不同網址 |
| og:image | 預覽圖 | 預設圖 1200×630 | 抓錯圖或無圖 |
| twitter:card | 卡片版型 | summary_large_image | 退回小圖或純文字 |
1.3 我上線社群 meta 前一定跑一次的驗證
我在實務上看過標籤都加了,分享出來卻還是舊圖的狀況,原因是社群平台有自己的快取。所以我的做法是每次上線後,一定用各平台的官方偵錯工具重抓一次,強制刷新快取,順便確認圖片真的載得出來。標籤寫對只是第一步,確認平台端真的更新了,才算收尾。
2. robots.txt 把社群爬蟲擋掉,標籤寫再好也沒用
這是那家廠商最容易被忽略、卻最要命的一個問題。我們系統偵測到它的 robots.txt 裡有一條規則,把某個社群平台的爬蟲(用來抓分享預覽的那隻)整個封鎖掉了。這種情況下,你 Open Graph 標籤寫得再完整都沒意義,因為對方的爬蟲根本進不來讀。
2.1 針對社群爬蟲下 Disallow 是常見誤傷
那條規則長得像對某個社群抓圖用的 User-agent 下了 Disallow: /,等於告訴它「整站都不准爬」。這通常不是故意的,而是早年為了擋某些流量,順手把一票 User-agent 都封了,結果誤傷了負責抓分享預覽的爬蟲。我的處理是把針對社群抓圖爬蟲的那條 Disallow 移除,讓它能正常讀取頁面,分享預覽才回得來。
2.2 robots.txt 我會逐條看的兩件事
我在檢查 robots.txt 時有兩個固定動作。第一,把每一條 User-agent 和它對應的 Disallow 列出來,確認沒有哪隻該讓進來的爬蟲被 Disallow: / 全站封鎖,搜尋引擎的主爬蟲和社群抓圖爬蟲都要放行。第二,確認 robots.txt 本身回傳的是正常狀態,不是錯誤頁。robots.txt 是爬蟲進站看的第一份文件,這裡設錯,後面所有優化都被卡在門口。
3. referrer-policy 重複與舊追蹤碼,清掉是為了乾淨
這一段的兩個問題都不是致命傷,但屬於「留著沒好處、清掉有價值」的那種。我把它們放在社群 meta 和 robots.txt 之後,因為優先度較低,但趁改版一起收最划算。
3.1 重複的 referrer-policy 標頭該留哪一個
那家廠商的伺服器同時送出兩個 referrer-policy HTTP 標頭,一個是 same-origin,一個是 strict-origin-when-cross-origin。這個標頭控制瀏覽器發送請求時,要把多少來源網址資訊帶給目標網站。同時給兩個值會造成行為不確定,也讓分析數據的來源判讀變得混亂。我的建議是只保留 strict-origin-when-cross-origin,這是目前兼顧安全與可用性的主流設定,把 same-origin 那一條從伺服器設定裡移除即可。要提醒的是,這動的是伺服器層設定,得由掌握伺服器的一方來改。
3.2 已停止收集的舊追蹤碼,為什麼還是建議移除
頁面裡還留著一段舊版分析工具的追蹤碼,那套服務早在 2024 年 7 月就停止收集資料,這段程式碼目前雖然被註解掉,實際上已經不作用。我在實務上的建議是直接移除,而不是留著註解:一來減少無效程式碼堆積,降低日後維護時的誤解;二來若哪天有人手滑把註解解開,反而多送一個無用的請求。清乾淨的好處是長期的,不是立即見效那種。
3.3 誰該動哪一段,先分清楚再改
我在交付這類項目時,一定先把「誰有權限動」講清楚。像伺服器層的 referrer-policy、還有由客戶自家帳號管理的追蹤碼,外部團隊通常沒有權限也不該擅自更動,得由客戶內部的資訊人員處理。社群 meta 和 robots.txt 這類前端與站台設定,才是外部團隊能直接經手的。把責任邊界先切清楚,才不會改到一半卡在權限,或動到不該動的東西。
4. 常見問題
4.1 Open Graph 標籤加了,分享還是顯示舊圖怎麼辦?
幾乎都是社群平台的快取還沒更新。每個主流平台都有官方的分享偵錯工具,把網址貼進去重新抓一次,就能強制刷新快取。如果重抓後圖片還是不對,再回頭檢查 og:image 的網址是不是絕對路徑、圖片本身能不能公開存取。
4.2 robots.txt 把爬蟲擋掉,和 meta 標籤沒被讀到有什麼關係?
關係很直接。robots.txt 是爬蟲進站的第一道關卡,被 Disallow 擋掉的爬蟲根本讀不到頁面內容,自然也讀不到你寫在 <head> 裡的 Open Graph 標籤。所以檢查社群預覽問題時,我一定先看 robots.txt 有沒有誤擋,再看標籤本身。
4.3 referrer-policy 設哪個值比較安全?
目前多數情況我會用 strict-origin-when-cross-origin。它在同源請求時傳完整來源網址,跨源時只傳網域不傳完整路徑,兼顧了分析需求和隱私保護。如果安全要求更高,可以考慮更嚴格的策略,但別同時送出兩個不同的值,那只會造成行為不確定。
4.4 舊的追蹤碼被註解了,還有必要花時間刪嗎?
從立即效益看確實不急,它被註解後不會執行。但我還是建議趁手邊在改的時候清掉,理由是降低長期維護的認知負擔,也避免日後有人誤解或誤啟用。這屬於低優先度但值得順手做的整理。
4.5 這些社群和標頭設定,做了對搜尋排名有幫助嗎?
Open Graph 和 Twitter Card 本身不是排名因素,它們影響的是社群上的點擊和分享意願,間接帶來流量與曝光。robots.txt 誤擋則會直接傷到收錄。referrer-policy 和舊追蹤碼偏向工程整潔面。我的看法是把它們放在對的優先度:robots.txt 先修,社群 meta 次之,標頭與追蹤碼收尾,各自解決各自的問題。