OGP 與 Meta 標籤驗證器
貼上 HTML 原始碼，即可一次性驗證 Open Graph Protocol（OGP）和 Twitter Card 的 meta 標籤。檢測缺失的標籤以及不是絕對路徑的 og:image，並以卡片形式預覽在社交媒體上分享時的效果。
檢視決定分享外觀的中繼標籤
把連結貼到社群網站時所顯示的標題、說明與圖片，是由頁面 <head> 裡的 Open Graph 與 Twitter Card 中繼標籤所決定的。本工具會從您貼入的 HTML 中把它們抽出來，指出缺失的標籤與有誤的取值，並以接近實際卡片的樣子預覽出來。
最常見的毛病，莫過於把 og:image 寫成相對路徑。 各家的爬蟲是從自己的伺服器去取圖的，像 /img/ogp.png 這樣的路徑解析不了，卡片送到時圖片便缺了一塊。 請務必寫成以 https:// 開頭的絕對網址。另一件值得知道的事是：這些服務會把爬取的結果快取起來。 改了標籤，顯示的仍可能是舊的內容，這時便須藉各家的偵錯工具促其重新抓取。另外，Twitter Card 在沒有 twitter: 標籤時會回落到 og:，故不必兩套都寫。
使用方法
-
貼入 HTML 原始碼
只放
<head>的內容即可，整頁貼進來也無妨。 - 先試一試範例 好例與壞例都已備好，動手之前便可看出判定的分別。
-
閱讀所提出的各點
缺失的標籤，以及並非絕對網址的
og:image，都會被點名。 - 在預覽裡確認外觀 貼出去之前，便可看出標題如何折行、說明在何處被截斷。
用好本工具的小技巧
- og:image 推薦尺寸為 1200×630px（寬高比 1.91:1）。尺寸過小或比例不對的圖片，在社交平臺上可能會被意外裁剪。
- Facebook、LINE、Slack 等平臺的爬蟲讀取的是 og:title/og:description。X（Twitter）的卡片在缺少 twitter:title、twitter:description、twitter:image 時也會使用對應的 og: 標籤，因此只要設定好 og: 系標籤，就無需重複書寫 twitter: 系標籤。只有想讓 X 顯示不同內容時，才需要另外新增 twitter: 系標籤。
- twitter:card 是沒有對應 og: 標籤的標籤，用於指定卡片類型（summary、summary_large_image 等）。X 的官方指南也是從指定卡片類型開始講解的，因此建議明確設定該標籤。
- og:url 應填寫頁面的規範化絕對路徑（https:// 開頭）。這也有助於避免帶引數的 URL 被誤判為重複內容。
- 剛修改完 meta 標籤後立即分享，社交平臺可能仍顯示舊的快取預覽。可以使用各平臺提供的重新抓取工具（例如 Facebook 的分享偵錯程式）來重新整理快取。
這些情境會用到
文章發布前先行確認
一旦發出去才發現連結顯示錯亂，因有快取在，改了也未必挽得回。 先看一眼才穩妥。
檢驗範本的產出
把 CMS 或框架所輸出的 <head> 貼上，便可確認所期望的標籤是否都在。
檢視圖片的更換
新的 og:image 是否為絕對網址，正是最容易被漏看的地方。
借鑑他人網站的寫法
把顯示良好的頁面原始碼貼上，看看它把哪些標籤備齊了。
Open Graph 的術語
- og:title
- 卡片上所顯示的標題。它可與
<title>不同，從而為社群媒體改寫得更簡短。 - og:description
- 卡片上的說明文字。過長會被截斷，故應把要緊的放在前頭。
- og:image
- 卡片上的圖片。務必以絕對網址給出。 約 1200×630 像素是便於處理的尺寸。
- og:type
- 頁面的種類。文章通常用
article，其餘則用website。 - twitter:card
- 卡片的形態。設為
summary_large_image，圖片便以大圖顯示。 - og:url
- 該頁面的正規網址。分享的權重會歸攏到此處，故切莫寫上帶查詢參數的網址。
常見問題
/img/a.png）。大多數爬蟲無法解析相對路徑，請務必使用以 https:// 開頭的絕對路徑。此外，伺服器遮蔽了爬蟲的 User-Agent，或圖片尺寸過小，也可能導致無法顯示。<title> 用於搜尋結果標題和瀏覽器標籤頁，og:title 用於社交媒體分享時的卡片標題。若缺少 og:title，多數爬蟲會回退使用 <title>，但結果未必符合預期。summary_large_image。如果只需要小圖縮圖，可使用 summary。app 和 player 分別用於引導下載應用和嵌入影片/音訊，通常不適用於普通網頁。<title> 和 meta description 生成預覽，但不會顯示圖片，呈現出樸素的連結加文字效果。由於這會影響點選率，建議至少設定 og:title、og:description、og:image 這三項。
閒話 ― OGP 誕生的原因 ― Facebook 為了讓「贊」按鈕發揮作用而創造的機制
Open Graph Protocol（OGP）是 Facebook 於 2010 年為推廣自家「贊」按鈕而制定的規範。當時的網頁在 Facebook 上被分享後，往往只顯示一個簡單的連結和標題，點選率難以提升。Facebook 的思路是：如果頁面本身能夠宣告在社交媒體上應呈現的內容，就能打造更具吸引力的分享體驗。於是他們設計了 <meta property="og:xxx"> 這一獨立名稱空間，追加到普通 HTML 之上。
有趣的是，OGP 實際上建立在 RDFa（一種用於在 HTML 中嵌入結構化資料的 W3C 規範）之上。通過沿用已有標準，Facebook 無需瀏覽器廠商或其他公司的配合，只需在現有 HTML 中追加幾個 meta 標籤即可實現新功能。這種「不破壞向後相容性的擴充套件」思路取得了成功，OGP 逐漸成為事實標準，被 Slack、LINE、Discord 等 Facebook 以外的平臺廣泛採用。
X（Twitter）最初並未直接採用 OGP，而是設立了獨立的名稱空間 Twitter Cards（twitter:xxx）。據說這與其說是技術上的必然，不如說也帶有「不想直接採用競爭對手 Facebook 制定的規範」的考量。不過，Twitter 的解析器在缺少 twitter: 系標籤時會讀取對應的 og: 系標籤，真正需要與 og: 系分開書寫的只有 twitter:card 等少數標籤。即便如此，哪個標籤由哪個代替並不直觀，這也是本類驗證工具至今仍然有用的原因之一。