Open Graph 產生器會對接收到的每個文字欄位進行長度限制、修剪與 HTML 跳脫,因此即使是長度很大的標題或描述,也能產生語法正確的 meta 區塊。當發布者將一個 400 字元的標題或冗長的兩段描述貼到分享預覽表單時,真正的問題在於產生的 og:title 與 og:description 是否仍能在 HTML head 中乾淨地解析,以及每個目標平台是否會接受這個結果。Open Graph 產生器會在輸出任何 property 元素之前,先對輸入進行驗證、修剪與跳脫。當必填值缺失時,它會拒絕輸出;它會對每個文字欄位採用保守的長度限制;它會移除可能破壞屬性的控制字元;並會在輸出任何選填屬性之前,先序列化四個必填屬性。這些處理都不會改變分享服務後續對預覽所做的動作。每個平台會套用各自的字元預算、可能快取較舊的快照,並能獨立裁切所提供的圖片。將產生器輸出視為一個乾淨的協定區塊,並將平台渲染視為部署後的獨立步驟,可避免冗長文字工作破壞管線中的任何一端。

長文字如何被限制、修剪與跳脫
Open Graph 產生器內部的長文字處理遵循一套固定的管線。每個文字欄位——為物件命名的標題、概述該物件的選填描述、識別較大出版品的網站名稱,以及語言代碼標籤——在產生任何輸出之前,都會通過相同的控管機制。這些控管機制正是當長字串被貼入表單時會發生什麼事的答案。
文字欄位會受到長度限制,這代表產生器只保留協定視為有意義的字元,並捨棄其餘部分,而不是寫入一個過大的屬性。控制字元會被直接拒絕,因此貼上含有雜亂換行、定位點或其他不可列印值的文字區塊,並不會讓這些字元溜進產生的 meta 元素中。
通過該過濾器後的內容會被跳脫,以便在 HTML 屬性中使用。& 符號會變成實體參考、引號不再終止屬性、角括號也不再具有啟動標籤的能力。每個抵達輸出的值都已經過長度與結構的雙重檢查,這正是該結果能夠直接複製到頁面 head 中而無需額外編碼的原因。產生器完全在瀏覽器中運作,因此在使用者複製任何內容之前,修剪與跳脫就已發生;不會有伺服器往返可能竄改結果的情況。
Open Graph 協定本身定義了四個基本必填屬性:og:title、og:type、og:image 與 og:url(依據 Open Graph Protocol 規範)。產生器會一律優先輸出這些屬性,並維持穩定順序,無論表單欄位是如何填寫的。標題為物件命名、類型加以分類、圖片提供代表性視覺、URL 則識別永久物件。缺少任何必填值都會阻擋輸出,而不是產生一個不完整的預覽區塊,這避免了後續分享時引用不到內容、無法分類,或指向不到標準頁面的情況。
從長標題或長描述建立 OG 標籤
對於實際頁面文字比可見分享欄位還長的發布者來說,務實的工作流程是把 Open Graph 產生器 視為帶有長度限制的輸出工具,而非編輯器。表單會原樣接收文字、套用其長度限制,並回傳語法安全的區塊;任何進一步的縮短都必須在貼上之前完成。
- 寫下你真正希望使用者閱讀的標題,即使感覺很長也照寫,然後貼到標題欄位;產生器會自行套用長度限制,而不是在輸入時就失敗。
- 在貼上之前自行修剪選填的描述。長度限制偏保守,因此一兩句話的摘要是較安全的習慣。
- 選擇與頁面相符的物件類型——首頁或分區頁使用 website,帶日期的文章或長篇內容使用 article。
- 提供該頁面的標準絕對 URL。瀏覽器解析器會去除片段與任何內嵌的認證資訊,避免因用戶端錨點不同而將同一資源拆開。
- 提供指向公開可存取檔案的絕對圖片 URL。產生器不會抓取圖片;HTTP 狀態、MIME 類型與尺寸必須另外驗證。
- 可以選擇性地以 language_TERRITORY 格式(例如 en_US)新增網站名稱與語系標籤;語系驗證器只接受這種兩字母語言與兩字母地區的格式。
- 產生 meta 區塊。四個必填屬性會以穩定順序優先出現,接著才是任何已填寫的選填元素。
- 將僅含協定的區塊複製到標準頁面的 HTML head 中。不要將其當作可見文字放置、不要再次對整個區塊進行編碼,也不要透過框架與外掛重複輸出相同的屬性。
- 部署後檢查實際送出的 HTML 原始碼。建置工具可能會重新排序、覆寫或新增衝突的屬性,因此實際送出的原始碼才是唯一的事實來源。
- 執行每個目標平台目前的分享偵錯工具,以確認預覽內容,並將平台的快取重新整理行為納入考量。
四個必填與三個選填屬性
產生器的輸出永遠使用一組固定的屬性,將頁面描述為可分享的圖譜物件。下表摘要說明每個屬性的用途、是否為必填或選填,以及當值缺失或格式錯誤時產生器的行為。
| 屬性 | 狀態 | 用途 | 產生器行為 |
|---|---|---|---|
| og:title | 必填 | 為分享物件命名 | 限制長度、進行跳脫、拒絕控制字元 |
| og:type | 必填 | 分類物件(website 或 article) | 於執行階段進行驗證;拒絕變更後的輸入 |
| og:image | 必填 | 提供代表性視覺 | 正規化為絕對 HTTP(S),不含片段與認證資訊 |
| og:url | 必填 | 識別永久的標準物件 | 正規化為絕對 HTTP(S),不含片段與認證資訊 |
| og:description | 選填 | 概述該物件 | 與標題同樣限制長度並進行跳脫 |
| og:site_name | 選填 | 為較大的出版品命名 | 與標題同樣限制長度並進行跳脫 |
| og:locale | 選填 | 宣告語言與地區 | 保守的兩字母語言與地區驗證器 |
這樣的劃分也說明了為何可用的物件類型僅限於 website 與 article。開放自由填寫的類型會讓表單在缺少對應結構化欄位的情況下產出不支援的組合,因此更豐富的類型——music、video、profile、book、product——需要專門的實作,而不是這個聚焦的表單。
平台截斷與快取行為
有效的 Open Graph 區塊並不能決定社群貼文實際呈現的樣子。分享系統可能會以不同的長寬比裁切圖片、依其自身的字元預算截斷標題或描述、忽略欄位、選擇快取資料,或套用帳號層級的政策。Open Graph 產生器的輸出是協定層級的合約;平台預覽則是獨立的渲染步驟。
對長標題與長描述來說,實際的效果是,未限制長度的 og:title 值在使用者看到之前,就可能已被截斷到平台的顯示範圍內。Facebook、LinkedIn、X、Slack 與 Discord 各自提供分享偵錯工具,也各自有公開的預覽規則。在部署 meta 區塊之後,要知道平台實際會渲染什麼,唯一的方法就是將標準 URL 貼入該平台目前的偵錯工具,並讀取爬蟲回傳的內容。快取可能會讓中繼資料的變更延遲數小時甚至數天,因此更新後的標題在快取重新整理之前,仍可能持續在偵錯工具中顯示舊的字串。
圖片的情況也是如此。即使 og:image 指向完全可存取的檔案,且長寬比與尺寸都符合建議,平台仍可能重新裁切、重新壓縮,或在該檔案未通過該平台個別檢查時拒絕採用。Open Graph 產生器並不會產生 Twitter Card 中繼資料,雖然部分平台會將 Open Graph 屬性作為備援,但平台專屬的標籤與驗證規則仍是各自獨立的事。把這些協定視為彼此獨立,能讓複製出來的結果保持可稽核,並避免假設的跨平台欄位被冒充為標準需求。
長輸入出錯的地方
每當發布者將大量內容貼入分享預覽工具時,都會出現幾個可預期的錯誤。每個錯誤都可透過了解產生器的行為而非憑空猜測來避免。
第一,保留頁面 URL 中的片段。像 https://example.com/article#section-2 這類 URL 會被瀏覽器解析器正規化為不含片段的形式,這對分享來說是正確的,但也代表頁面本身與頁內錨點會在表單上游產生兩個不同的混合輸入。請永遠貼上單純的資源 URL。
第二,在圖片 URL 中保留認證資訊。表單會拒絕含有內嵌使用者名稱或密碼的 URL,這對公開中繼資料而言是正確的行為,但也代表使用基本認證的測試環境,在發布 og:image 之前,需要一個獨立的、不需認證的圖片主機。
第三,將描述視為放置文章內文的地方。選填的描述採用保守的長度限制,其作用在於概述物件,而非改寫整篇文章。將整篇文章貼入描述中會產生語法有效的輸出,卻是無用的預覽;平台的截斷機制會把它切到使用者無法閱讀的範圍。
第四,預期產生器會抓取並驗證圖片。它並不會。圖片 URL 必須另外針對 HTTP 狀態、MIME 類型、尺寸、位元組大小、長寬比、重新導向、robots 控管、認證以及平台的快取狀態進行驗證。表單僅驗證 URL 的格式。
第五,透過兩個系統重複輸出 meta 區塊。一個會輸出 og:title 的框架元件,與另一個也會輸出 og:title 的外掛,會在 head 中產生兩份副本,而建置工具可能會重新排序或覆寫它們。請選擇單一輸出路徑,並檢查實際送出的原始碼以確認。
將輸出與渲染視為兩個獨立步驟
使用此工具處理長文本工作時,最清晰的心智模型是將工作分為兩個階段。開放圖譜產生器負責第一階段:從發布者的輸入中產生一個語法安全、僅含通訊協定的區塊,包含長度限制、控字符號拒絕、HTML 跳脫、不含片段與憑證的網址正規化,以及固定的必填屬性優先順序。凡是複製貼上之後的所有事情,都屬於第二階段:將該區塊放入規範的頁面 head 中,確認伺服器回傳的來源內容一致,並逐一檢視各平台的現行偵錯工具,以了解爬蟲實際取得的內容。
將兩個階段分開,有助於在長文本問題出現時進行除錯。若共享預覽被截斷,原因在於平台的顯示視窗,而非產生器的長度限制。若預覽引用了舊標題,原因在於平台的快取,而非表單的輸出。若預覽無法載入圖片,原因在於圖片主機或平台的圖片規則,而非網址解析器。每一層各司其職,長文本輸入會依序通過每一層,而不會破壞任何一層。
若想更深入了解四個必填屬性是如何輸出的,以及它們在 head 中的實際作用,請參閱四個必填開放圖譜標籤的詳細說明。
若要進一步了解,請參閱從大型 Sitemap 文字貼中擷取網址。