要從 Facebook 取得中繼標籤,你可以檢查 Facebook 的爬蟲在分享 URL 上已讀取的 Open Graph 與 HTML head 標籤,或者建立自己頁面所需的基本 HTML head 標籤,讓 Facebook 能夠產生乾淨的連結預覽。Facebook 的爬蟲會讀取你放在頁面 head 中的 Open Graph 詞彙——og:title、og:description、og:image、og:url——當 Open Graph 值缺失或為空時,則會回退到一般的 元素與 。像 Meta Tag Generator 這類瀏覽器端的工具會產生符合標準的基礎區塊——UTF-8 字元集、回應式 viewport、title、description,以及選填的 author——它是用來補充 Facebook 專屬的 Open Graph 標記,而不是取代它。因為基礎區塊省略了 canonical、robots 與社交標籤,所以最終的 head 仍然保持可稽核,且沒有重複或矛盾的宣告。檢查既有內容只需要瀏覽器的檢視原始碼與 Sharing Debugger;而建立應該存在的內容則需要三個小輸入與一次複製操作。
Facebook 實際上會讀取哪些中繼標籤
當 Facebook 使用者將連結貼到貼文中時,Facebook 的爬蟲會擷取頁面 HTML,並在文件 內部尋找兩個平行的詞彙。第一個是 Open Graph,這是一個原本為 Facebook 設計、以屬性為基礎的命名空間,以 og: 開頭。Facebook 文件記載的最低限度 Open Graph 組合包含 og:title、og:description、og:image 與 og:url,再加上一個宣告內容類別(例如 website 或 article)的 og:type。第二個詞彙是由 WHATWG HTML 語意 所定義的標準 HTML 中繼資料: 元素與 。如果 Open Graph 標籤缺失或為空,Facebook 會回退使用 HTML 的 title 與 description,接著再回退到頁面上其他可見的文字,例如標題內容。這種雙軌行為正是頁面能同時受益於乾淨的基礎區塊與專屬 Open Graph 區塊的原因。
其他標籤有時會出現在教學文章中,但並非本文重點。rel=canonical 屬於另一個索引決策,robots 指令掌管檢索與索引行為,而 Twitter Card 標記則是另一個平台專屬的詞彙。把它們全部混進同一個區塊,正是讓複製來的程式碼片段變得不可靠的原因,因為佈景主題、外掛或部署平台可能會為其中任何一個加入競爭的值。
如何檢查已分享 Facebook URL 上的中繼標籤
在更動你自己頁面的任何內容之前,值得先看看 Facebook 目前從目標 URL 讀取到什麼。在不需伺服器存取權的情況下,有兩條實際可行的檢查路。
- 在任何現代瀏覽器中開啟頁面,並選擇檢視原始碼(Windows/Linux 為 Ctrl+U,macOS 為 Cmd+Option+U)。閱讀 區塊的內容,記下 元素、若有則記下 ,以及每一個 og: 屬性。值的正確性比順序重要。
- 若你有權限,將同一個 URL 貼到 Meta Sharing Debugger。Debugger 會顯示 Facebook 爬蟲在上次檢索時實際擷取到的 Open Graph 值,並針對缺失的屬性與類似問題回報警告。它不會顯示標準的 或 description,只會顯示 Facebook 在動態消息中呈現的 Open Graph 層。
- 比對這兩個檢視結果。如果 Debugger 顯示的 og:title 與頁面原始碼不同,表示自從 Facebook 上次檢索後,部署的 HTML 已經變動,因此在新的值出現之前,需要重新發布或明確觸發重新檢索。
這個檢查步正是「取得」Facebook 中繼標籤的實務答案:它揭示平台已有的值、將它們與 Facebook 從未看到的值區分開來,並告訴你接下來該在自家伺服器上做哪些修改。
如何為 Facebook 分享建立基本中繼標籤
一個頁面要擁有乾淨的 Facebook 回退機會所需要的基本 head 區塊很小,而 Meta Tag Generator 只需三個輸入就能產生它。這個區塊刻意保持精簡,如此一來就不會與其他工具所放置的 Open Graph、canonical 或 robots 值發生衝突。
- 在 Title 欄位中輸入一個準確的文件標題——也就是瀏覽器分頁與搜尋結果標題連結會顯示的文字。請保持人可閱讀,並避免堆砌關鍵字。
- 在 Description 欄位中輸入一段簡潔的頁面說明——一兩句話總結訪客實際會得到的內容。這個值與 Facebook 爬蟲在 og:description 缺失時回退使用的值相同。
- 只有在整個網站對作者欄位都維持同一個有意義的值時,才輸入選填的作者名稱。當作者中繼資料會是空的或具誤導性時,請跳過該欄位。
- 產生區塊。輸出會是一段已跳脫的 HTML head 程式碼片段,其中包含 UTF-8 宣告、固定的回應式 、 元素、、以及選填的 。
- 將程式碼片段複製到頁面範本的 中,放在任何佈景主題或框架的中繼資料之上,然後儲存。產生器會在本地端完成所有跳脫處理,因此 &、角括號與屬性分隔用的引號都會以正確編碼送達。
- 部署完成後,重新開啟頁面原始碼,確認只有一個 與一個 description 存在,並移除你的 CMS 可能新增的重複項。然後以行動裝置寬度覽該頁面;若社交預覽對此次變更重要,則重新觸發 Sharing Debugger。
工具強制執行的字元上限——標題 200、說明 500、作者 120——是複製操作所強制執行的界限,而非排名目標。超出上限的頁面會以清楚的訊息被拒絕,而不是悄悄截斷。
為什麼 Open Graph 與基本標籤要保持分離
將基本區塊與 Open Graph 標記分開,是刻意的設計選擇,而不是疏漏。Open Graph 帶有四個必要屬性加上一個類型,每一個都表達了一個 Facebook 專屬的渲染決策:og:image 必須通過最小像素尺寸才能產生可用的預覽;og:url 在追蹤參數屬於分享連結而非索引時,可以與 canonical URL 不同;og:locale 則影響 Facebook 組合特定 UI 字串的方式。這些決策沒有一個應該與基本的 放在同一個表單欄位中。
在 Open Graph 方面,請遵循 Facebook Graph 中繼資料指南,並使用專屬的 Open Graph 產生器,讓圖片尺寸、地區語系與網站名稱的值都能各自獨立檢視。Meta Tag Generator 的基本區塊位於那一層之下;兩者結合,就能在不互相矛盾的情況下構成完整的 head。
| 標籤 | 詞彙 | 所承載的決策 |
|---|---|---|
| <title> | HTML 標準 | 文件名稱;瀏覽器分頁與搜尋結果標題連結 |
| <meta name="description"> | HTML 標準 | 簡短摘要,作為 Facebook 回退值與摘要文字輸入 |
| <meta charset="utf-8"> | HTML 標準 | 文件的字元編碼 |
| <meta name="viewport"> | HTML 標準 | 版面 viewport 寬度;不會限制縮放 |
| og:title、og:description、og:image、og:url | Open Graph | Facebook 專屬的預覽渲染 |
| rel=canonical | 搜尋引擎 | 偏好的可索引 URL;不是社交標籤 |
欄位限制、跳脫處理,以及部署後要驗證的事項
產生器接受的每一個值,在輸出前都會進行修剪、長度限制、控制字元檢查,以及 HTML 跳。& 會變成 &,角括號會變成 < 與 >,任何可能結束屬性值的引號也都會被編碼。UTF-8 宣告會在複製出來的區塊中最先輸出;接著是回應式 viewport。貼到範本後,請保持這個順序,以便編碼設定在任何文字中繼資料之前被解析。
有兩項後續檢查是必要的,且無法由產生器本身完成。第一,檢查部署後的原始碼——部署後的檢視原始碼——並確認頁面正好包含一個 元素與一個 description 中繼標籤。佈景主題、SEO 外掛與框架預設值經常會注入重複項;請移除任何重複項。第二,以 360 像素的行動 viewport 檢視頁面,確認版面能正確回應。固定的 viewport 內容是 width=device-width、initial-scale=1,且無縮放限制;若頁面在行動度下無法使用,問題出在 CSS,而不是中繼標區塊。
此工具不會擷取頁面、不會更新 CMS,也不會更動部署。請將複製出來的區塊視為正確的起始語法,而非任何特定搜尋摘要、Facebook 預覽或索引行為的保證。根據 Google 的標題連結指南,搜尋系統可能會根據查詢、周圍的標題與頁面上的連結,改寫產生的標題——這個事實同樣適用於 Facebook 的回退行為。
為 Facebook 複製中繼標籤區塊時的常見陷阱
當團隊將中繼標籤片段複製到正式環境時,有一小撮反覆出現的錯誤。避開它們會比事後除錯更快,而且每一項都是基本區塊的設計從根本上就能避免的。
- 重複的標題或說明。佈景主題、SEO 外掛與部署平台經常會注入自己的 或 值。瀏器在顯示時會保留第一個有效值,但 Facebook 的爬可能會保留最後一個。請稽核部署後的原始碼,並除重複項。
- 重複跳脫的字元。當程式碼片段透過會重新跳脫 & 或角括號的編輯器貼上時,值會以字面文字呈現在頁面上。產生器的本地端跳脫步只會產生一次正確的編碼;請讓編輯器不要插手。
- 帶有縮放限制的 viewport。在 viewport 標籤中加入 maximum-scale=1 或 user-scalable=no 可能會損害無障礙性。基本區塊刻意省略這些屬性,以維持可用的回應式基準。
- 錯誤的編碼宣告。如果伺服器回應也設定了不同的 charset,瀏覽器會套用其中一個規則,頁面可能會以亂碼呈現。請確認 HTTP 標頭與 行一致。
- 把 Facebook 專屬的值混進基本區塊。og:image 的最小像素、og:url 的追蹤參數,以及 og:locale 字串,全都屬於 Open Graph 標記。基本區塊刻意設計得放不下這些,以保持稽核的乾淨。
如需更深入的說明,請參如何取得 Facebook Graph API 分享權限。