Open Graph 測試器 / 社群分享預覽 / 元標籤生成器
預覽網站在社群媒體上的第一印象
輸入網址，立即查看你的網站在 Facebook、X、LinkedIn、Slack 和訊息 App 裡如何顯示；生成 Open Graph 元標籤，診斷中繼資料問題，並在客戶分享連結前修好預覽。
先看到客戶會看到的分享卡片
用正確的標題、描述、圖片與 Open Graph 標籤，把普通連結變成清楚、可信、值得點擊的社群預覽。
支援連結真正會被分享出去的平台
安全抓取、準確解析、可信預覽
OpenGraphy 不在使用者瀏覽器裡抓取目標網站，而是由後端模擬 crawler 行為：檢查 DNS 與重新導向、阻擋私有網段、解析初始 HTML、驗證圖片是否可訪問，最後把結果整理成診斷報告與修復建議。
SSRF 防護每次抓取都檢查 DNS、IP 範圍與每一步重新導向，避免訪問 localhost、內網與保留位址。
4 小時快取中繼資料與預覽結果暫存在 Redis，不長期保存 URL 歷史，也不保存使用者個資。
診斷建議檢查缺失標籤、相對圖片 URL、圖片尺寸、HTTP 狀態、標題長度與描述長度。
用 Open Graph 讓每一次分享都像精心設計的廣告位
Open Graph 是社群平台、即時通訊軟體和內容工具讀取網頁預覽的共同語言。只要在 HTML 的 head 裡放對標籤，你就能控制分享卡片的標題、描述、圖片、網址和內容類型。
Open Graph 是什麼？
OG 標籤是一組給 crawler 看的中繼資料。Facebook、LinkedIn、Slack、Discord、WhatsApp、Telegram、X 等平台在產生連結預覽時，通常會先讀取 og:title、og:description 和 og:image。
建議圖片尺寸
最穩妥的預覽圖尺寸是 1200 x 630，比例約為 1.91:1。圖片請盡量壓小，讓通訊工具更快生成預覽。
為什麼要從後端抓取？
大多數平台 crawler 不會執行瀏覽器裡的 JavaScript，也不會等待 SPA 完成渲染。後端抓取更接近平台實際看到的頁面。
最小可用的 Open Graph 標籤
如果你只能先做一件事，請先把標題、描述、圖片和 canonical URL 補齊。這幾個標籤能消除大部分預覽問題。
<meta property="og:title" content="你的頁面標題" />
<meta property="og:description" content="一段清楚、有吸引力的頁面摘要。" />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta name="twitter:card" content="summary_large_image" />不同平台會用不同規則解讀同一組中繼資料
重視 og:title、og:description 和 og:image。修改後可能需要用 Sharing Debugger 觸發重新抓取。
X / Twitter
可以回退讀取 OG，但建議另外加 twitter:card 和 twitter:image，才能穩定顯示大圖卡片。
通常會快取第一次抓到的內容；發布前先檢查，發布後若改圖或改標題，最好用 Post Inspector 重新整理。
WhatsApp / iMessage
圖片檔案太大時容易失敗或被截斷。請壓縮圖片，並明確提供寬高，讓預覽生成更快。
Discord / Slack / Telegram
偏好伺服器初始 HTML 裡就存在的標籤；不要只靠前端 JS 動態插入中繼資料。
Pinterest / Reddit
除了寬版圖，電商、作品集和文章頁也可準備方形或直式圖片，讓縮圖在內容流裡更醒目。
常見技術棧如何接入
Next.js / Nuxt / Astro
優先使用框架提供的中繼資料 API 或 SSR/SSG，在伺服器輸出的 HTML 裡直接生成 OG 標籤。
WordPress
可以使用 SEO 外掛，也可以在 theme 的 head hook 裡輸出文章標題、摘要、特色圖片和永久連結。
單頁應用 SPA
如果完全依靠客戶端渲染，許多平台 crawler 會看不到中繼資料。請加 SSR、預渲染，或為分享頁提供靜態 HTML。
常見問題
Open Graph 會直接影響 SEO 排名嗎？
它通常不是直接排名因子，但能提升社群點擊率和分享品質，間接帶來更多流量、引用和品牌曝光。
為什麼換圖後平台還顯示舊圖片？
平台會快取抓取結果。請使用 Facebook Sharing Debugger、LinkedIn Post Inspector 等工具強制重新抓取，必要時也可以替圖片 URL 加版本參數。
沒有 OG 標籤會怎樣？
平台會自行猜測：抓 title、meta description 或頁面裡第一張較大的圖片。結果不可控，常見問題是圖錯、標題太長或完全沒有卡片。
標籤大小寫有差嗎？
有。請使用規範的小寫名稱，例如 og:title，不要寫成 OG:Title。許多 crawler 對大小寫很挑剔。
