open graph generator on android
Android 上的 Open Graph 產生器:手機工作流程

在 Android 上執行 Open Graph 產生器

Android 裝置可以透過任何現代化的手機瀏覽器產生完整的 Open Graph 中介資料,使用一個直接在手機上從輸入文字建構四個必要 og: 屬性的用戶端工具即可完成。Open Graph 產生器在瀏覽器分頁本身執行所有檢查、正規化與 HTML 跳脫,因此只要手機執行 Chrome、Samsung Internet、Firefox 或任何其他現代化的 Android 瀏覽器,就能產生有效的 meta 區塊,無需安裝額外軟體、註冊帳號,或將草稿內容傳送到遠端伺服器。由於表單在本機裝置上執行,你的草稿標題、描述與圖片 URL 在產生過程中絕不會離開手機,而產生的區塊是乾淨的、僅含協定的片段,可直接貼到標準頁面的 head 中。對於外出時編輯部落格文章的獨立創作者,或從平板電腦修復單篇文章預覽的開發人員來說,這個行動工作流程消除了傳統上將 OG 標籤工作推回桌機的每一步。

大多數專用的 SEO 工具都是為桌機所打造,或隱藏在付費雲端儀表板後面,兩者皆不適合快速的 Android 工作階段。基於瀏覽器的產生器將手機轉變為四個必要屬性加上經驗證的選填欄位的完整編寫介面,無需配套應用程式、無需剪貼簿輔助工具,也無需擴充功能。

為何基於瀏覽器的工具適合 Android 工作流程

Open Graph 協定定義了四個基本必要屬性 - og:title、og:type、og:image 與 og:url - 每個可分享的圖譜物件都必須具備這些屬性。Open Graph 協定規格將這些屬性列為任何物件的最低要求,缺少其中一個的區塊將無法產生有效的預覽。基於瀏覽器的產生器在表單層級強制執行此最低要求,因此你不會因為點過某個欄位而不慎產生不完整的區塊。

Android 鍵盤鼓勵簡短、快速的輸入,這正適合表單中內建的保守限制。標題與描述欄位會進行修剪與長度限制,控製字元會被拒絕,而語系欄位僅接受保守的 language_TERRITORY 格式,例如 en_US。物件類型選擇器僅提供 website 與 article;諸如 music、video 或 profile 等更豐富的類型需要額外的結構化屬性,而表單刻意不開放自由文字類型,因為那樣會讓產生器輸出不受支援的組合。

在手機上處理 URL 也是容易出錯的地方。表單會透過瀏覽器的 URL 解析器對任何貼上的 URL 進行正規化,並拒絕內嵌的認證資訊、片段與非網路通訊協定。不含片段的物件 URL 可防止同一資源的分享被用戶端錨點拆分,而拒絕認證資訊則可避免將使用者資訊複製到公開的中介資料中。在小螢幕上,這種自動化比在桌機上更有價值,因為打錯的 URL 更難以目視察覺。

在手機上產生 Open Graph 標籤

  1. 在你的 Android 瀏覽器中開啟 Open Graph 產生器並點選標題欄位。輸入應在分享時顯示的精確物件文字,除非目標平台接受,否則不要使用夾雜表情符號的行銷標語。
  2. 從選擇控制項中選擇物件類型:首頁、區段頁面或登陸頁面使用 website,部落格文章、新聞項目或長篇內容使用 article。
  3. 將標準頁面 URL 貼到 URL 欄位。使用你想要建立索引的絕對位址,而非追蹤重新導向,並去除任何從登入或錨點檢視貼上的 #片段。
  4. 將絕對圖片 URL 貼到圖片欄位。該位址必須是 HTTPS 或 HTTP、指向可公開存取的檔案,且不含認證資訊或片段。此工具不會擷取圖片,因此請另行確認其狀態後再依賴。
  5. 選擇性填寫 og:description、og:site_name 與 og:locale。保持描述簡潔,並使用保守的兩個字母語言代碼與兩個字母地區代碼格式,例如 en_US。
  6. 點選產生並複製產生的區塊。屬性會以穩定順序出現,從四個必要屬性開始,且屬性值已針對 HTML 進行跳脫,因此引號、& 符號與角括號都不會破壞 meta 元素。
  7. 將複製的區塊貼到同一支手機上標準頁面的 HTML head 中,然後儲存或發佈,並檢視已發佈的原始碼以確認四個必要屬性仍以正確順序出現。

在手機鍵盤上輸入時重要的輸入規則

欄位必要性驗證規則在 Android 上應注意的事項
og:title是已修剪、長度受限、拒絕控製字元避免自動校正可能插入的表情符號或零寬度字元
og:type是僅限 website 或 article任何非 article 介面請點選 website
og:image是絕對 HTTP 或 HTTPS,無認證資訊,無片段使用穩定的圖片主機,而非含權杖的私有 CDN 連結
og:url是絕對 HTTP 或 HTTPS,無認證資訊,無片段去除從登入檢視貼上的任何 #section
og:description選填已修剪、長度受限、已進行 HTML 跳脫保持在一般平台預覽限制之下
og:site_name選填已修剪、長度受限、已進行 HTML 跳脫使用出版物名稱,而非頁面標題
og:locale選填保守的 language_TERRITORY 格式接受 en_US;不接受更豐富的子標籤

文字會進行修剪與長度限制,因為分享平台會套用其本身的截斷規則;符合表單限制的描述仍可能在特定服務上被截斷。跳脫步驟會在產生器內部完成,因此你無需手動編碼。如果你將含有 & 符號、引號或角括號的內容貼到任何欄位中,輸出的 meta 元素仍能正確解析。

語系選擇刻意保持狹隘。保守的兩個字母語言代碼與兩個字母地區代碼格式是最安全的最低要求。替代語系及腳本子標籤需要超出此專注表單範圍的額外協定屬性與編輯決策。如果你發佈多語言網站,請單獨建構額外的替代項目,而非強行塞入語系欄位中。

將 Meta 區塊貼到行動版 CMS 或編輯器中

產生的區塊僅含協定中介資料,因此應放置於標準頁面的 HTML head 中。請勿將其作為可見的內文文字、請勿對整個區塊進行第二次編碼,也請勿同時透過佈景主題和外掛程式重複放置。建構工具可能會重新排序、覆寫或新增衝突的屬性,因此在你貼上之後,請檢視已發佈的原始碼以確認四個必要屬性仍然存在且順序正確。

在手機上,貼上的目的地各有不同。常見的編輯器提供頁首注入欄位、自訂 HTML 小工具,或可讓你在 head 結束標籤上方放置原始 meta 元素的程式碼檢視。部分行動版 CMS 應用程式會開啟程式碼編輯器,你可在其中捲動至 head 區段並貼在最上方;其他則透過標示為「header scripts」或「custom meta」的設定面板進行路由。請使用你的 CMS 所提供的任何方式,但請將區塊保持在單一位置。

如果你在產生器輸出之外還維護手寫的頁首模板,請參閱瀏覽器端標籤工作流程如何保持協定分離。為同一屬性混合使用手寫的 meta 標籤與產生器輸出的標籤,會導致後者覆蓋前者,而結果將是你的建構管線最後寫入的值。

發佈後檢查分享預覽

有效的 Open Graph 區塊並不保證在每個服務上都有乾淨的預覽。平台會裁剪圖片、截斷文字、忽略欄位、選擇快取資料,並套用帳戶層級的呈現規則。頁面上線後,請開啟每個平台目前的分享偵錯工具或分享檢查器並要求重新擷取。爬蟲存取、圖片處理與快取重新整理皆超出產生器的範圍,因此這些都會在偵錯工具中浮現。

你提供的圖片 URL 是最常見的失敗點。此工具不會擷取圖片,也無法驗證其 HTTP 狀態、MIME 類型、尺寸、位元組大小、長寬比、重新導向、robots 控管、認證或平台快取狀態。如果預覽為空白或錯誤,請逐項檢查該清單,然後再假設是產生器產生了錯誤的區塊。

保持可見頁面、原始中介資料與即時預覽三者的對齊。如果你重新命名頁面、變更標準 URL 或替換主視覺圖片,請同時更新這三項。服務在中介資料變更後可能繼續顯示較舊的快取預覽,因此透過偵錯工具進行手動快取重新整理是強制新值在測試期間浮現的最快方式。

最後,請撰寫與可見內容相符的中介資料。Open Graph 區塊控制了分享連結的第一印象,誤導性的標題、描述或圖片即使帶來點擊,也可能讓訪客失望並損害信任。請將產生器輸出視為你實際發佈頁面的忠實摘要,而非獨立的行銷介面。

如果你正在權衡選項,Mac 上的 QR Code 產生器:無需安裝的瀏覽器工作流程對此有詳細說明。