Open Graph 產生器是一個由表單驅動的建構工具，會產生以屬性為基礎的 HTML meta 元素，將網頁描述為可分享的圖譜物件，並遵循 Open Graph 協定所定義的四個必填欄位 —— og:title、og:type、og:image 和 og:url。此工具會驗證 URL、限制文字長度、跳脫屬性值，並以穩定的「必填優先」順序序列化結果，讓產生的區塊可以直接貼入頁面 head 區段而無需再編輯。所有輸出皆在本機瀏覽器中產生；不需要任何伺服器呼叫即可渲染或複製標籤。由於該協定是宣告式而非視覺式，即使是一個語法正確的區塊，仍可能因各消費服務自身的圖片規則、快取狀態和帳號層級政策而呈現不同的結果。Open Graph 產生器涵蓋了該協定的必填欄位以及三個最常被使用的選填欄位，而將 Twitter Cards 這類平台專屬的標籤留給專門的工具處理。
本文將逐步說明產生器所強制執行的協定要求、決定是否產出輸出的輸入規則，以及將複製的區塊轉化為真實分享預覽的部署與檢查步驟。
協定要求的四個必填屬性
Open Graph 協定明確指定四個基本必填屬性，工具在產生的區塊中一定會優先輸出它們。og:title 使用讀者在頁面上看到的相同文字來為可分享的物件命名。og:type 為物件分類 —— 在此產生器中僅能選擇 website 與 article —— 而該協定本身（記載於 ogp.me）定義了更長的類型詞彙，包括 music.song、video.movie 和 profile。og:image 提供一個具代表性的視覺素材，供分享服務擷取並呈現；og:url 則識別該物件的永久標準化網址，無論使用者從何處進入皆然。這四個值若缺少任何一個，就會阻擋輸出，而非產生一個不完整的預覽區塊，因為最終的分享將帶有一個未定義的身分，而協定並不會對消費端應如何填補此空缺做任何假設。
為何產生器僅提供 Website 與 Article
即使更廣泛的協定列出更多類型，此表單刻意將物件類型限制在 website 與 article。原因是較豐富的類型本身帶有必填或選填的結構化屬性 —— music.song 需要 music:duration、video.episode 需要 video:series 等等。開放自由填寫的類型欄位，會讓表單在缺少對應結構化欄位的情況下輸出不支援的組合，產生看似有效但實際上無效的標籤。當物件確實需要更豐富的類型時，請使用專門的實作；此產生器的範圍僅限於四個必填屬性能完整描述的兩種情境。
決定是否產出輸出的輸入規則
此產生器在執行階段驗證輸入，而非信任介面本身。頁面與圖片值必須是不含內嵌憑證或片段的絕對 HTTP 或 HTTPS URL；瀏覽器的 URL 解析器會將其標準化，但此工具實際上並不會擷取這兩個網址。不含片段的物件 URL 能避免同一資源因用戶端錨點而分散到不同的分享中，而拒絕憑證則可避免將使用者資訊複製到公開的元資料中。此工具無法驗證任一 URL 的 HTTP 狀態、MIME 類型、尺寸、位元組大小、長寬比、重導向、robots 控管或身分驗證 —— 這些是區塊上線後另一個獨立的檢查工作。
文字欄位會經過修剪、長度限制，並在包含控制字元時予以拒絕，因為雜散位元組可能破壞 HTML 屬性或在除錯工具中意外顯現。& 符號、引號與角括號也會因相同原因而被跳脫，因此像「Tom & Jerry — 'The Movie'」這樣的標題能在不損毀的情況下，完整往返於 meta 元素之中。選填的 og:description 用於摘要說明物件，og:site_name 為較大的網站命名，og:locale 則使用 language_TERRITORY 格式，例如 en_US。地區設定驗證器僅接受一種保守的兩字母語言與兩字母地區形式；替代的地區設定與 script 子標籤是另外的協定屬性，本聚焦式表單並未蒐集這些資料。
必填與選填屬性的比較
| 類別 | 屬性 | 用途 | 產生器行為 |
|---|---|---|---|
| 必填 | og:title | 為可分享的物件命名 | 永遠輸出；空值會阻擋輸出 |
| 必填 | og:type | 為物件分類 | 永遠輸出；僅限 website 或 article |
| 必填 | og:image | 提供具代表性的視覺素材 | 永遠輸出；空值會阻擋輸出 |
| 必填 | og:url | 識別物件的永久網址 | 永遠輸出；空值會阻擋輸出 |
| 選填 | og:description | 摘要說明物件 | 僅在提供說明時輸出 |
| 選填 | og:site_name | 為較大的網站命名 | 僅在提供網站名稱時輸出 |
| 選填 | og:locale | 語言與地區 (en_US) | 僅在通過保守的地區設定時輸出 |
如何產生、複製並放置區塊
- 在標題欄位中輸入準確的物件文字，選擇 website 或 article 作為物件類型，並提供標準化的絕對 HTTP 或 HTTPS 頁面 URL，以及一個可公開存取的絕對圖片 URL —— 兩者皆會檢查是否不含片段且不含憑證。
- 可選擇性地新增說明、網站名稱，以及 en_US 格式的地區設定；每個欄位在序列化前皆會經過修剪、長度限制與 HTML 跳脫處理。
- 產生區塊。四個必填屬性會以穩定順序優先出現，接著才是任何已提供的選填欄位。
- 複製僅含協定的區塊，並貼入標準化頁面的 head 區段。請勿將其作為可見文字放置、請勿對整個區塊進行二次編碼，也請勿同時透過框架與外掛重複放置。
- 部署後檢查實際送出的原始碼，因為建置工具可能在建置過程中重新排序、覆寫或新增衝突的屬性。
- 使用各目標平台當前的分享預覽除錯工具，檢查爬蟲存取權、圖片處理與快取重新整理行為是否正確，針對實際運作的 URL 進行驗證。
物件類型即使在使用 select 控制項的介面中，仍會在執行階段重新檢查，因此繞過表單的程式化或竄改輸入，仍無法迫使驗證器接受不支援的類型。輸出遵循 Open Graph 屬性語法 —— property="og:..." —— 而非較舊的 name 屬性，因為協定本身已轉為使用 property 語法，且消費端也預期如此。想具體了解產生的區塊實際包含什麼內容，請參閱 Open Graph 產生器範例：必填屬性輸出 的逐步說明。
為何有效的區塊並不保證預覽正確
語法上有效的 Open Graph 區塊無法決定貼文實際呈現的方式。每個分享服務皆會套用自身的圖片要求 —— 最小尺寸、長寬比、位元組大小、MIME 類型，有時還包括允許的格式 —— 並可能為了配合固定卡片而裁切、加黑邊或截斷文字。平台也可能忽略某些欄位、選擇使用快取中的元資料而非新值，或套用完全覆寫該標籤的帳號層級政策。因此，一張符合典型卡片尺寸的圖片，仍可能遭到某個服務拒絕、同時被另一個服務接受；此產生器無法預測平台行為，因為它既不擷取圖片，也不呼叫任何社群網路。
快取是正確區塊在變更後立即顯示錯誤的最常見原因。許多服務會儲存其首次為某 URL 爬取到的元資料，並持續顯示，直到其快取重新整理或人工觸發重新抓取為止。請先發布元資料，再依照各除錯工具自身的時程重新檢視，而非假設首次預覽即反映最新狀態。
使用各平台的除錯工具進行驗證
最後的檢查步驟在於平台端。在區塊已放入頁面 head、即時 URL 對一般瀏覽器請求回傳 200 之後，請開啟各目標平台所發布的分享預覽除錯工具，貼上標準化 URL，並將渲染出的卡片與頁面上的可見內容進行比對。請比對三個獨立的訊號：原始 HTML 原始碼，以確認 meta 元素未被建置步驟重新排序或覆寫；擷取到的圖片回應，以確認爬蟲實際看到的視覺素材；以及平台上的即時預覽，以確認讀者將看到的內容。
當頁面的身分變更時 —— 例如 URL 搬移、標題更名或圖片更換 —— 請保持這三個訊號一致：在頁面原始碼中更新、重新整理任何仍持有舊版本的平台快取，並重新發布為新的分享，使三種檢視結果再次收斂一致。請撰寫與可見內容相符的元資料，因為誤導性的標題、說明或圖片可能騙到點擊，卻會在使用者實際進入頁面的那一刻侵蝕信任。
若想更深入了解，請參閱 Canonical Tag 產生器安全性：發布前檢查清單。