Facebook 圖譜預覽實際讀取的內容
Facebook 的分享圖譜會從頁面的 HTML head 讀取 Open Graph 通訊協定中繼資料,以在動態消息、Messenger、留言和搜尋中產生連結卡片。此處的「graph」指的是 Open Graph 通訊協定,這是一組用來將頁面描述為可分享物件的少量 <meta> 元素。它並非開發人員用來驗證使用者身分或代為發文的 Facebook Graph API。
當有人將你的 URL 貼到 Facebook 時,該平台的爬蟲會擷取該頁面,在 head 中尋找 Open Graph 屬性,並從中找到的值組成預覽卡片。同一組中繼資料會被 LinkedIn、Slack、Discord、Pinterest、WhatsApp 及許多即時通訊應用程式以不同程度支援的方式所取用。Twitter 過去依賴自家的 Card 標籤,但現在針對多個欄位會回退使用 Open Graph,因此正確的 Open Graph 區塊影響範圍遠超過 Facebook 本身。
建立該區塊就是搜尋用於分享的 Facebook graph API 時背後的實際工作:產生四個必要屬性、新增能改善卡片的選用欄位、跳脫每個屬性值以確保 HTML 安全,然後將結果貼到標準頁面的 head 中。Open Graph Generator 正好在瀏覽器中執行這項產生步驟,因此你複製的輸出可以直接放進你的樣板。
必要與選用的 Open Graph 屬性
| 屬性 | 是否必要 | 用途 |
|---|---|---|
| og:title | 必要 | 為分享的物件命名,在預覽卡片中作為標題顯示。 |
| og:type | 必要 | 為物件分類,本產生器僅提供 website 和 article 兩種。 |
| og:image | 必要 | 提供可公開存取的圖片 URL,作為卡片縮圖。 |
| og:url | 必要 | 識別標準物件,亦即 Facebook 將分享動作關聯到的連結。 |
| og:description | 選用 | 簡短摘要,許多平台會在約 200 個字元處截斷。 |
| og:site_name | 選用 | 顯示在標題上方或旁邊的發布網站名稱。 |
| og:locale | 選用 | 以 language_TERRITORY 格式表示的語言與地區,例如 en_US。 |
產生器一律先以固定順序輸出四個必要屬性,接著才是你提供的任何選用欄位。The Open Graph Protocol specification 列出這些屬性,並指出額外的結構化類型(如 music、video 和 profile)有其專屬的必要與選用屬性,這就是為什麼精簡的表單會讓類型選擇器保持狹窄。
使用 Open Graph Generator 建立中繼資料區塊
- 在瀏覽器中開啟 Open Graph Generator。此工具完全在用戶端執行,因此產生過程中不會有任何 URL 或標題離開你的電腦。
- 如實輸入你希望物件標題在預覽卡片中顯示的內容。工具會去除空白字元並拒絕控制字元,讓最終屬性保持格式正確。
- 從選單控制項中選擇物件類型。對首頁、登陸頁和多數行銷目標頁面選擇 website,對個別編輯文章選擇 article。雖然該控制項已限制選項,但類型仍會在執行階段再次驗證,以防經程式或竄改的輸入。
- 將標準頁面 URL 貼到物件 URL 欄位。必須是絕對的 HTTP 或 HTTPS 位址,且不含片段識別碼,也不得內嵌使用者名稱或密碼。無片段的 URL 可防止同一頁面因用戶端錨點而被切成多個分享,拒絕帶有認證資訊的 URL 則可避免使用者資料洩漏到公開的中繼資料中。
- 將圖片 URL 貼到圖片欄位,同樣使用不含片段與認證資訊的絕對 HTTP 或 HTTPS 位址。圖片必須可公開存取,讓平台爬蟲能擷取;工具本身不會請求該 URL,也無法驗證 HTTP 狀態、MIME 類型、尺寸、位元組大小或長寬比。
- 選擇性地填寫 og:description 簡短摘要、og:site_name 發布品牌,以及 og:locale(以 language_TERRITORY 格式呈現,例如 en_US)。地區驗證器只接受這種保守的雙字母格式;替代地區與腳本子標記需要額外的通訊協定屬性,本表單並未提供。
- 產生區塊。輸出是依屬性排序的 meta 元素清單,以必要屬性優先的固定順序排列,且每個屬性值都已進行 HTML 跳脫,避免 & 符號、引號與角括號破壞最終產生的標籤。
- 從結果面板複製區塊。這是你唯一需要貼到頁面 head 的內容;產生器不會附加追蹤碼、框架樣板或平台專屬標籤。
將區塊放入標準頁面的 head
複製的區塊是純 HTML,可直接放入標準頁面的 <head>,亦即你在 og:url 中宣告的同一個 URL。請以原始標記方式放置,不要將其當作可見文字,且不要再對整個區塊進行二次編碼;產生器已為你跳脫所有屬性值。
避免透過多個系統重複輸出相同的屬性。如果佈景主題、外掛或框架已會寫入 Open Graph 標籤,請決定哪一個為主並僅由它輸出,否則值可能互相衝突,而爬蟲只會看到服務原始碼中最先出現的那一份。負責壓縮或重新排列 head 內容的建置工具也可能覆寫、移除或拆解 meta 元素,因此每次部署後請檢查實際送出的原始碼,不要只信任樣板。
og:url 請使用可公開存取的標準 URL,不要使用追蹤重新導向或附帶查詢字串的變體。搜尋與分享系統會使用該值來整合同一物件的訊號,使用會變動的 URL 會在無形中逐漸割裂你的圖譜能見度。HTML specification for the meta element 要求同一元素同時具備 name 與 property 屬性;Open Graph 使用的是 property 而非 name,產生器遵循此語法。
在 Facebook 上驗證實際預覽
有效的 Open Graph 區塊並不保證 Facebook 會如何呈現。該平台可能裁切圖片、截斷文字、忽略欄位、選擇快取資料,或套用帳號層級政策。部署完成後,將標準 URL 貼到 Facebook 的 Sharing Debugger,即可查看爬蟲實際擷取的內容,包括任何關於缺少屬性、圖片被阻擋或標籤重複的警告。
除錯工具也提供「Scrape Again」控制項以強制重新擷取。分享系統會積極快取預覽,即使區塊正確,也可能在中繼資料變更後的數分鐘到數小時內被較舊的快取卡片遮住。請規劃在發布後、編輯標題/描述/圖片後,以及任何 URL 或網域遷移後重新抓取。
對任何你積極經營的其他平台重複相同的檢查流程。LinkedIn 的 Post Inspector、Twitter 的 Card Validator、Slack 的連結展開預覽與 Discord 的嵌入檢查工具,各自適用不同的規則。通訊協定區塊可攜,快取、圖片需求與呈現邏輯則否。
所產生區塊的限制
此產生器僅產生 Open Graph 通訊協定輸出。它不會產生 Twitter Card 標籤;部分 Twitter 欄位會回退使用 Open Graph 值,但服務專屬的標籤與驗證仍是獨立的議題。如果你需要更完整的 Twitter 卡片,請另外執行 Card 產生器,並在 head 中協調這兩段區塊。
物件類型刻意僅限於 website 與 article。其他結構化類型(如 music、video 與 profile)需要額外的屬性,本表單並未提供;允許自由填寫類型將會悄悄產生不完整的結構化中繼資料。當物件確實需要更豐富的類型時,請使用專屬的實作方式。
此工具會驗證 URL 格式、選用文字與地區,但不會主動抓取任一 URL。HTTP 狀態、MIME 類型、圖片尺寸、位元組大小、長寬比、重新導向、robots 控制、認證與平台快取狀態,皆須由你在部署後自行驗證。頁面必須對各平台的爬蟲保持可存取,圖片必須符合該平台目前的最小尺寸與長寬比,且可見的頁面內容應與你發布的中繼資料一致。誤導性的標題、描述或圖片或許能換得一次點擊,卻會悄悄侵蝕之後每位訪客的信任。
延伸閱讀:How to Make a Meta Robot Tag (The "Metal Robot" of SEO)。
延伸閱讀:How to Create an Open Graph Image URL That Renders Correctly。