建立 Open Graph 圖片網址意味著在標準網頁的 HTML head 中加入一個帶有 og:image meta 標籤的絕對 HTTP 或 HTTPS 網址,該網址必須指向一個可公開存取的圖片。Open Graph 協定定義了四個必要屬性 —— og:title、og:type、og:image 和 og:url —— 而圖片值是唯一決定分享預覽外觀(在任何文字被讀取之前)的部分。該網址本身並不會上傳或託管圖片;它只是指向爬蟲到你伺服器已提供的一個檔案,因此託管的所有責任都落在你的基礎架構上,而不是 metadata。這種分離正是 Open Graph 圖片網址在實務上經常失敗的原因:meta 標籤在原始碼中看起來語法正確,但它所指向的檔案無法被擷取、使用了錯誤的格式,或被認證或 robots 排除規則隱藏起來。因此,產生 og:image 包含兩部分:撰寫語法正確、能通過 HTML 跳脫的 meta 元素,以及確認該網址在請求時能解析為分享爬蟲實際可讀取的圖片。
og:image 網址實際控制的是什麼
Open Graph metadata 只是描述一個網頁;它永遠不會取代它所引用的檔案。og:image 值是一個指令,告訴分享爬蟲:「當你看到這個網址被分享時,請擷取這張圖片並將其作為預覽圖片。」爬蟲負責解析連結、下載檔案、根據平台規則驗證格式和尺寸,並套用其自身的裁切或快取決策。當你撰寫標籤時,這些都不是你的責任,但它們全部決定了預覽是否符合你的預期。
透過撰寫 meta 標籤,你能控制的,是該檔案是否能從爬蟲的角度存取。這個角度幾乎永遠是公開資料中心的 IP,絕不會是已登入的瀏覽器,因此任何依賴 cookie、session、地理限制或有限速規則的 CDN 路徑,都會直接失敗。該協定將 og:image 視為單一純量值 —— 沒有陣列、沒有備援鏈、沒有遠端 picture 元素。許多分享系統在宣告多個時會靜默地選取找到的第一個 og:image,但協定本身對每個物件只定義一個圖片值。因此,妥善撰寫標籤意味著產生「一個」正確的網址,而不是多個帶有期望的網址。
可分享預覽的網址與圖片要求
Open Graph 協定,如 ogp.me 所記載,並未明確規定圖片本身的格式,僅註明它必須是一張「代表性圖片」,這也是為什麼每個分享服務都會發布自己的技術規則。協定在網址層級強制執行的規則則相當嚴格:該值必須是絕對網址、使用 http 或 https、不包含片段識別碼,並且不包含使用者認證資訊。Open Graph Generator 在執行階段會透過正規化瀏覽器解析後的網址,並拒絕任何不符合該形狀的內容,來遵循這些規則,從而使 meta 輸出可被稽核,而不是靜默地產生爬蟲拒絕擷取的標籤。
四個必要屬性必須同時存在;產生器會依序輸出 og:title、og:type、og:image 和 og:url,然後附加任何通過驗證的選用 og:description、og:site_name 和 og:locale。選用值會受到長度限制、修剪、拒絕控制字元,並在寫入 meta 元素時進行 HTML 跳脫,因此標題或描述中的 & 符號、引號和角括號都不會破壞產生的標籤。選用的 locale 刻意採取保守設計 —— 它僅接受兩個字母的語言代碼和兩個字母的地域代碼,例如 en_US,因為更廣泛的替代選項需要額外的協定屬性和編輯決策,而非單一區塊產生器所能處理。
| 屬性 | 是否必要? | 穩定順序 | 備註 |
|---|---|---|---|
| og:title | 是 | 1 | 物件名稱;以跳脫後的 HTML 屬性呈現 |
| og:type | 是 | 2 | 本產生器僅限 "website" 或 "article" |
| og:image | 是 | 3 | 絕對 HTTP(S) 圖片網址,無片段識別碼,無認證資訊 |
| og:url | 是 | 4 | 標準網頁網址,不含片段識別碼 |
| og:description | 否 | 5 | 選用摘要;有長度限制並經過跳脫 |
| og:site_name | 否 | 6 | 選用的品牌或出版物名稱 |
| og:locale | 否 | 7 | 選用的 language_TERRITORY 格式,例如 en_US |
圖片網址欄位會拒絕任何不符合接受形狀的值。這個形狀刻意設計得很嚴格,以便表單產生的每個 meta 元素都是爬蟲在無需進一步檢查下,合理有機會擷取的內容。
| 圖片網址輸入 | 是否接受? | 原因 |
|---|---|---|
| https://cdn.example.com/cover.jpg | 是 | 絕對網址,HTTPS,無片段識別碼,無認證資訊 |
| http://example.com/banner.png | 是 | 允許純 HTTP;在可行情況下優先使用 HTTPS |
| https://example.com/post#hero | 否 | 片段識別碼會將相同資源的分享拆分為不同的快取鍵 |
| https://user:[email protected]/hero.jpg | 否 | 嵌入的認證資訊可能洩漏至公開 metadata |
| data:image/png;base64,... | 否 | 非 HTTP 協定;沒有爬蟲能擷取 data URI |
| /uploads/cover.jpg | 否 | 相對網址會被正規化或拒絕;必須為絕對網址 |
產生 og:image 網址與其餘區塊
- 在瀏覽器中開啟 Open Graph Generator;所有處理都在用戶端進行,不會擷取任何網址。
- 輸入標題,使其與分享預覽中應顯示的內容一致,使用你希望爬蟲看到的精確措辭。
- 從物件類型選單中選擇 "website" 或 "article";本專注的表單不涵蓋更豐富的協定類型。
- 將標準網頁網址 —— 絕對 HTTP 或 HTTPS,無片段識別碼且無嵌入認證資訊 —— 貼到網址欄位。
- 使用相同的形狀將 og:image 網址貼到圖片欄位:絕對 HTTP 或 HTTPS,指向公開檔案,無片段識別碼。
- 選擇性地以 language_TERRITORY 格式(例如 en_US)加入描述、網站名稱和 locale;這些欄位有長度限制並會被修剪。
- 產生區塊;四個必要屬性會依 og:title、og:type、og:image、og:url 順序出現,接著是任何通過驗證的選用欄位。
- 複製僅含協定的區塊,並將其以純 HTML(而非可見文字)的形式貼到標準網頁的 <head> 元素中。
- 檢查呈現後的原始碼,並執行各目標平台的預覽除錯工具,以確認圖片網址能解析、尺寸通過,以及快取反映最新的值。
內部驗證機制能防止表單輸入造成大多數生產環境故障的內容。物件類型選單會在執行階段重新檢查,網頁和圖片網址會被正規化為不含片段識別碼且不含認證資訊,選用文字會受到長度限制並檢查控制字元,每個屬性值都會經過 HTML 跳脫,因此 & 符號、引號和角括號都不會破壞最終產生的 meta 元素。輸出遵循 Open Graph 屬性語法,而不是一般 meta 標籤所記載的舊式 name 語法,這正是分享爬蟲所預期看到的內容。
Open Graph 區塊在 HTML 中的位置
Open Graph meta 元素應放在標準網頁的 <head> 元素內。標準的 <meta> 元素使用 property 和 content 屬性,而產生器的輸出遵循該 property 語法,而不是 <meta name="description"> 所使用的舊式 name 形式。將這些標籤放在 body、模板頁尾部分中,或作為可見網頁文字,會使其失去作用:爬蟲會在渲染前,於 head 中特別尋找這些標籤,如 WHATWG HTML 規範中對 meta 元素的定義。
該區塊應只出現一次。同時透過框架和外掛加入相同的標籤會產生重複的 meta 元素,而大多數分享服務會將重複的屬性宣告視為「最後一個生效」,或直接忽略衝突。重新排序或重寫 head 的建置工具也可能覆寫你手動放置的 og:image,因此在建置執行後,請檢視標準網址的原始碼,確認順序和四個必要值仍然存在。貼上時跳脫處理很重要:產生器已對每個屬性值進行 HTML 跳脫,因此該區塊可以直接放入 head,無需額外編碼。對整個區塊重新編碼 —— 將 meta 行再執行一次跳脫 —— 會破壞有效字元。
破壞預覽的常見 og:image 網址錯誤
即使 meta 標籤本身語法正確,多個網站仍反覆出現相同的失敗。第一個是指向爬蟲無法存取的 host 或路徑。內部主機名稱、staging 網址和 IP 位址通常可從編輯者的瀏覽器解析,但無法從分享資料中心解析;分享服務會靜默地退回為缺失圖片的佔位符。解決方法是在標準網頁上線之前,將圖片發布到生產環境 CDN,並從辦公室網路外部測試該網址。
第二個是格式或尺寸錯誤。PNG、JPEG 和 WebP 幾乎涵蓋所有平台,但每個平台都會施加協定未定義的最小和最大像素大小、位元組限制以及長寬比。1200x630 的 PNG 能舒適地容納在常見的橫向裁切範圍內,而 200x200 的正方形則會被拒絕或拉伸。產生器不會驗證尺寸或 MIME 類型,因為它無法擷取圖片;該檢查應在網址定案前,由你自己的管線負責。
第三個是快取效應。分享服務會根據網址本身(而非 meta 標籤)來快取該網址的預覽,因此變更同一標準網址上的 og:image 並不會自動改變預覽。每個平台都提供除錯工具或分享檢查器來重新擷取網頁並清除快取表示;使用這些工具是強制重新整理的唯一可靠方式。請將標準網址視為快取鍵:如果你需要不同的預覽,請變更標準網址,而不僅僅是變更 og:image 值。
在目標平台上逐一驗證每個預覽
當區塊已置於 head 中且頁面可被存取後,Open Graph 預覽的製作工作便從撰寫轉為驗證。您所瞄準的每個平台——主要社群網路、專業網路、通訊應用——皆會套用各自的圖片規則、透過各自的資料中心抓取內容,並維護各自的快取。每個平台都會提供一個偵錯工具,讓已登入的開發者貼上標準網址,並檢視爬蟲所看到的內容:算繪後的標題、解析後的圖片網址、位元組大小、尺寸,以及任何錯誤或警告。
在頁面上線後,以及每次變更 og:image 值後,將標準網址逐一送進每個偵錯工具執行。將偵錯工具回報的標題、說明與圖片,與您原本預期的內容進行比對。若算繪出的圖片仍是舊版本,表示平台正在提供快取副本,此時偵錯工具通常會提供「重新抓取」或「清除快取」的動作;請觸發該動作並重新檢查。若標題缺失或不一致,代表您的 head 中由框架輸出了重複或互相競爭的標籤;請檢視網頁原始碼並進行調和。若圖片網址遭拒,請回到前文的網址規則,確認其通訊協定、主機、檔案格式與可存取性。
即便 Open Graph 區塊語法有效,也無法保證貼文實際呈現的方式。分享系統可能會裁切圖片、截斷文字、忽略欄位、選用快取資料,或套用任何工具皆無法預測的帳號層級政策。應將此詮釋資料視為提供給這些系統的準確來源內容,而非版面配置契約。請撰寫與頁面可見內容相符的詮釋資料,因為即使能因此換得點擊,誤導性的標題、說明或圖片仍會令訪客失望並侵蝕信任。
建構一個真正能算繪的 og:image 標籤,取決於兩項獨立的檢查。語法必須來自強制執行四項必要屬性、將屬性值算繪為跳脫後的 HTML,且拒絕輸出不完整區塊的產生器。其所產生的網址必須指向一張公開、尺寸正確的圖片,讓分享爬蟲能夠從各自的資料中心順利抓取。Open Graph 產生器負責前半段,而平台偵錯工具則補完後半段的驗證圈。產出區塊、將其貼入標準頁面的 head,並在您實際發佈的每一個管道上,驗證算繪後的分享預覽。
若您正在權衡各種方案,如何在瀏覽器中從 XML Sitemap 擷取網址對此有詳細說明。
若您正在權衡各種方案,如何為任何頁面取得標準網址標籤對此有詳細說明。