大量 Open Graph 工作流程本質上是一系列單一且經過驗證的頁面區塊,而 Open Graph 產生器的設計目的,就是為每個頁面產生一個區塊,其中包含四個必要屬性,以及三個安全的選用欄位。Open Graph 通訊協定要求每個可分享物件都必須具備四個 meta 屬性:og:title、og:type、og:image 和 og:url,缺少其中任何一個就會阻擋輸出,而不是產生一個不完整的預覽。大多數在尋找「大量」解決方案的團隊,只是想跳過重複的輸入作業,而不是跳過驗證,因此比較安全的做法,是使用單頁產生器作為網站上每個頁面的唯一真實來源。採用這個做法後,行銷人員可以為每個 URL 填寫一次表單,將該區塊貼到該頁面的標準 head 區段,並在每個目標平台的偵錯工具中確認分享預覽。這樣得到的結果與批次指令稿同樣準確,卻不需要將 URL 上傳到伺服器、不需要依賴推測的類型專屬欄位,也不會失去能找出 metadata 與可見內容之間不一致之處的逐頁審查步驟。

open graph generator bulk
Open Graph 大量產生器:適用於多頁的安全工作流程

「大量」對 Open Graph Metadata 而言代表什麼

Open Graph 是一種以屬性為基礎的 metadata 格式,由 Open Graph 通訊協定 所定義,網站上每個可分享的頁面都必須帶有自己一組完整的 og: meta 元素。當團隊要求大量產生器時,他們通常指的是以下三種需求之一:快速為數百個頁面填寫 metadata 的方法、讓同一個網站在所有這些頁面上保持品牌一致性的方法,或避免手動將相同的標籤逐一貼到每個範本中的方法。這些目標都不需要伺服器端的批次處理程式;它們需要的是一個可靠的單頁產生器,可以反覆執行,既不需上傳 URL,也不會失去驗證功能,更不會漏掉通訊協定要求的欄位。

四個必要的 Open Graph 屬性是 og:title、og:type、og:image 和 og:url。產生器一定會先以固定順序輸出這四個屬性,並在缺少任何一個時拒絕輸出該區塊。另外還有三個屬性 —— og:description、og:site_name 和 og:locale —— 是選用的,但被廣泛使用,產生器會限制它們的長度、移除控制字元,並以嚴格的 language_TERRITORY 格式 (例如 en_US) 來驗證 locale。這個嚴格的範圍是刻意為之:範圍更廣的物件類型,例如音樂、影片和個人檔案,需要額外的結構化屬性,而表單無法如實產生這些屬性,因此可用的物件類型被刻意限制為 website 和 article。

單頁產生器如何融入大量工作流程

Open Graph 產生器 完全在瀏覽器中執行,不會進行任何擷取動作,也絕對不會將輸入的頁面 URL 或圖片 URL 傳送到遠端服務。這項單一限制正是讓大量工作流程安全無虞的關鍵:行銷人員可以處理正式網站上的每個頁面,而不必將 URL 清單、標準路徑或尚未公開的活動目的地曝光給第三方工具。該工具的其他限制,則直接對應到大量工作流程在每個頁面上必須強制執行的規則。

物件 URL 和圖片 URL 必須是絕對的 HTTP 或 HTTPS 網址,不得內嵌驗證資訊,也不得帶有片段。瀏覽器的 URL 解析器會將該值標準化,而一個不含片段的標準 URL 能避免當頁面使用客戶端錨點時,同一個資源被拆成多個分享物件。圖片 URL 必須使用 http 或 https 協定,因為其他協定 (例如 data: 或 file:) 不會被分享服務抓取。標題、說明、網站名稱和 locale 文字會經過修剪、長度限制,若含有控制字元會予以拒絕,並進行 HTML 跳脫處理,以免 & 符號、引號和角括號破壞所產生的 meta 元素。

必要與選用的 Open Graph 屬性

通訊協定定義了一個小型核心,網站上的每個頁面都應將這些屬性視為一份核對清單,而不是可自行取捨的選項。

屬性通訊協定是否必要產生器行為每個頁面應驗證的項目
og:title是修剪、長度限制、跳脫;若為空則阻擋輸出與可見的 H1 一致,且未在多個頁面重複
og:type是限於 website 或 article;執行階段會再次檢查符合實際的內容形式,而不只是範本的預設值
og:image是絕對的 http(s) URL,不含片段與驗證資訊可公開存取、可被爬蟲抓取、MIME 類型正確、長寬比符合規範
og:url是絕對的 http(s) URL,經標準化且不含片段指向標準頁面本身,而不是一連串的重新導向
og:description否修剪、長度限制、跳脫反映頁面內容,並符合各平台的截斷長度限制
og:site_name否修剪、長度限制、跳脫同一個網站所有頁面使用相同的值
og:locale否以 language_TERRITORY 格式驗證符合頁面實際使用的語言與地區變體

為單一頁面建立正確的 OG 區塊

可規模化的是這個單頁流程;只要把它做對一次,就能為網站上的每個 URL 重複執行。

  1. 開啟 Open Graph 產生器,輸入與讀者看到的完全一致的頁面標題,而不是搜尋結果的摘要。
  2. 選擇物件類型:首頁、分類頁或登陸頁使用 website,有日期的文章或新聞內容使用 article。其他類型需要更豐富的結構化欄位,應使用專門的實作方式。
  3. 貼上該頁面的標準絕對 URL。移除任何 #片段,刪除只用於追蹤的查詢參數,並確認 URL 指向頁面本身而非重新導向。
  4. 貼上你希望每次分享都使用的圖片絕對 URL。該 URL 必須可公開存取、必須使用 http 或 https、不得包含驗證資訊,且必須指向目標分享服務能夠爬取的圖片。
  5. 選擇性填寫 og:description、og:site_name 和 og:locale(例如 en_US)。若不希望輸出某個欄位,請將其留空。
  6. 產生區塊,複製僅含通訊協定的輸出內容,並貼到該標準頁面的 head 區段。不要將 meta 元素放在 body 中、不要重新編碼它們,也不要同時透過框架與外掛重複加入。

在多個頁面間正確地重複使用同一個區塊

規模化 Open Graph metadata 的重點不是批次處理,而是在每個 URL 上強制執行相同的逐頁紀律。建立一份工作表,在同一列中列出每個頁面的標題、標準 URL、圖片 URL、說明、網站名稱和 locale,並將產生器當作驗證步驟,把每一列轉成一個經過驗證的 meta 區塊。由於表單會拒絕缺少必要欄位、含有驗證資訊與非網頁 URL 的項目,以及格式錯誤的 locale,因此當某一列失敗時,就能在標籤發布前知道哪個頁面需要處理。這種列層級的驗證,是伺服器端的批次匯出工具很少能提供的:在單一列上發現過期的標準 URL,比在事後從上千則分享貼文中找出顯示錯誤的圖片容易得多。

在通訊協定允許的情況下,讓共用欄位保持一致。og:site_name 在同一個網站的每個頁面上都應相同,而 og:locale 應只在頁面實際語言變更時才跟著改變。og:type 應逐頁檢視,而不是全域設定一次,因為同一個網站上的分類頁與新聞文章可能需要不同的值。og:image URL 只能在同一張圖片確實符合分享情境時,才能在多個頁面間重複使用;如果兩個頁面描述的是差異極大的產品,使用兩張不同的圖片效果會比共用一張更好,即使通訊協定並未強制要求這麼做。

面向使用產生器進行逐頁執行典型的批次匯出工具做法
URL 曝光留在瀏覽器中經常上傳到伺服器
必要欄位檢查逐頁阻擋輸出經常略過,導致區塊不完整
物件類型從限定集合中逐頁選擇經常以任意文字接受
驗證資訊與片段的處理標準化並拒絕經常原封不動地通過
HTML 跳脫一律為屬性進行跳脫不一致,有時完全不處理
審查步驟在工作表中以一列代表一個頁面隱藏在匯出流程之中

使用真實的分享偵錯工具驗證大量輸出

有效的 Open Graph 區塊並不能保證貼文呈現的方式,因為每個分享系統都可能裁切圖片、截斷文字、忽略欄位、選擇快取資料,或套用帳號層級的政策。在將 meta 元素貼入每個標準頁面的 head 之後,請擷取實際送出的原始碼,確認這些標籤只出現一次、位於 head 中,並依通訊協定的屬性順序排列。接著使用每個目標平台目前的預覽偵錯工具,檢查爬蟲存取、圖片處理與快取重新整理。偵錯工具是唯一能證明該平台的爬蟲可存取 URL 與圖片的地方,也是你在頁面遷移或 metadata 變更後,要求重新整理快取的地方。

請將不同的通訊協定分開處理。產生器不會產生 Twitter Card 標籤,而這個省略是刻意的:Twitter 專屬的標籤與驗證規則屬於另一個獨立議題,即使部分平台會將 Open Graph 屬性作為備援。透過獨立的工作流程加入 Twitter Cards,可讓 Open Graph 區塊保持可稽核性,並避免某個假設為跨平台通用的欄位,被誤認為標準必要項目。

擴展 Open Graph 標籤時的常見陷阱

第一個陷阱是在許多頁面之間重複使用同一個 og:title,因為批次匯出比逐一審核來得快。每個頁面的標題都應該標示物件本身,而非網站名稱;重複的標題會在分享預覽中被截斷或忽略。第二個陷阱是將重新導向鏈當作標準網址;產生器會接受你給的標準化網址,但分享時仍會透過重新導向來解析,而該平台的爬蟲可能會快取重新導向的目標,而非標準網址本身。請務必在產生區塊之前先解析掉所有重新導向。

第三個陷阱是以為單一共享的圖片網址可以擴展到上千個頁面。圖片網址只會檢查形狀,並不會檢查內容是否合適;分享預覽會直接使用你所指向的圖片,即使該圖片是錯誤的也照樣採用。第四個陷阱是把 og:locale 當作裝飾性質的標籤。一個西班牙文頁面卻搭配英文的語系設定(反之亦然),將產生與實際點擊後體驗不符的分享內容。第五個陷阱是忘了公開頁面必須對該平台的爬蟲保持可存取;若 meta robots 規則阻擋了爬取,也會連帶阻擋分享預覽的更新;而需要登入憑證才能存取的測試環境網址,則永遠不會被抓取。

請撰寫與可見內容相符的中繼資料。誤導性的標題、說明或圖片即使成功吸引點擊,也可能讓訪客失望並損害信任。發佈之後,請比對原始程式碼、實際抓取到的圖片回應,以及平台上實際的預覽呈現;當頁面遷移或身分變更時,請一併更新所有呈現方式。

延伸閱讀:網站頁面的結構化資料產生器:工作流程。

延伸閱讀:批次網址產生器的祕訣與常見錯誤。