AnyTools
👁

開啟 Graph 預覽工具

為社交媒體分享卡預覽和生成 開啟 Graph 元標籤

元資料輸入

標題
描述
圖片
URL

預覽

頁面標題頁面描述將在這裡顯示example.com

生成的元標籤

❓什麼是 開啟 Graph 預覽工具

開啟 Graph 預覽工具可視覺化和測試網頁在社交媒體上分享時的顯示效果。開啟 Graph 是 Facebook 建立的協定，將網頁轉化為社交圖譜中的豐富物件。它透過 meta 標籤（og:標題、og:描述、og:圖片、og:url）控制分享卡片的外觀。主要功能：即時分享卡片預覽（Facebook、Twitter、LinkedIn 等）、完整的 OG 標籤產生、圖片尺寸驗證、標籤語法檢查、多平台預覽。為什麼重要：正確的 OG 標籤提高點擊率、改善品牌展示、增加社交媒體參與度。不正確的標籤會導致圖片損壞、標題錯誤或描述缺失。必需標籤：og:標題（標題）、og:類型（型別 - website/article）、og:圖片（圖片 URL - HTTPS、1200x630px）、og:url（規範 URL）。可選標籤：og:描述、og:site_name、og:locale、圖片中繼資料。平台特定標籤：Twitter Cards（twitter:card、twitter:標題）、Facebook 特定（fb:app_id）。此工具幫助您編寫 OG 標籤、跨平台預覽，並提供優化建議。

✨功能特點

🔍

即時預覽

即時預覽頁面在社群媒體上的顯示效果
📝

完整 OG 標籤

生成所有必需的 開啟 Graph 元標籤
🌐

多平台支援

同時預覽 Facebook、Twitter、LinkedIn 效果
📋

複製標籤

一鍵複製生成的元標籤

📋使用指南

1️⃣
輸入中繼資料
填寫內容的標題、描述、圖片URL和頁面URL
2️⃣
配置選項
設定 開啟 Graph 類型、網站名稱、Twitter 卡片類型和社交媒體帳號
3️⃣
預覽外觀
檢視內容在不同社交媒體平台上的顯示效果
4️⃣
產生並複製標籤
產生元標籤程式碼並複製到網站的 <head> 部分

📚技術介紹

🏗️開啟 Graph 協定

開啟 Graph 使用 HTML <head> 中帶有 og: 前綴的元標籤來定義頁面中繼資料。核心屬性包括 og:標題（頁面標題）、og:類型（內容類型，如 article、website、video）、og:圖片（預覽圖片URL）、og:url（規範URL）和 og:描述（內容摘要）。可選屬性包括 og:site_name、og:locale、article:published_time 和 video:duration。社交媒體平台在分享 URL 時解析這些標籤以建立富預覽卡片。

🐦Twitter Cards

Twitter Cards 使用 twitter: 前綴標籤擴充 開啟 Graph，提供 Twitter 特定功能。提供四種卡片類型：summary（預設，方形圖片）、summary_large_image（大型矩形圖片）、app（行動應用推廣）和 player（影片/音訊播放器）。twitter:card 指定類型，twitter:site 和 twitter:creator 引用 Twitter @帳號。如果缺少 Twitter 特定標籤，Twitter 會回退到 開啟 Graph 標籤。

📐圖片要求

不同平台有特定的圖片要求：Facebook 推薦 1200x630px（1.91:1 比例），最小 200x200px，最大 8MB；Twitter summary_large_image 需要 2:1 比例（推薦 1200x600px），summary 卡片 1:1 比例（最小 144x144px）；LinkedIn 支援 1200x627px（1.91:1）；微信要求 300x300px 到 1068x455px。圖片應為 JPG、PNG 或 WEBP 格式。使用多個 og:圖片 標籤提供回退。

🔍測試和除錯

平台特定的除錯工具驗證 開啟 Graph 實作：Facebook Sharing Debugger (https://developers.facebook.com/tools/debug/) 顯示 Facebook 如何看到您的頁面並清除快取；Twitter Card Validator (https://cards-開發.twitter.com/validator) 預覽 Twitter 卡片；LinkedIn Post Inspector (https://www.linkedin.com/post-inspector/) 測試 LinkedIn 分享。這些工具識別缺失標籤、圖片載入問題，並提供最佳實務警告。
❓

常見問題

❓

什麼是 開啟 Graph 標籤？

開啟 Graph 標籤是控制 URL 在社群媒體平台上共享時顯示方式的元標籤。它們定義連結預覽的標題、描述、圖片和其他屬性。
💬

哪些平台使用 開啟 Graph？

Facebook、LinkedIn、Pinterest 等許多平台使用 開啟 Graph。Twitter 使用類似的 Twitter Card 標籤。兩者可以共存於同一頁面。
🔍

推薦的圖片尺寸是多少？

推薦：Facebook/LinkedIn 使用 1200x630px。最小：600x315px。使用 PNG 或 JPG 格式。檔案大小保持在 8MB 以下。
💡

如何除錯 開啟 Graph 標籤？

使用 Facebook Sharing Debugger、Twitter Card Validator 或 LinkedIn 發布 Inspector。這些工具顯示標籤的顯示效果並識別錯誤。
📚

是否需要為每個平台設定不同的標籤？

開啟 Graph 標籤適用於大多數平台。為 Twitter 特定功能新增 Twitter Card 標籤（twitter:*）。使用 og:* 標籤作為所有平台的後備。

💡使用方法

1️⃣

輸入頁面 URL

輸入頁面 URL 或貼上 開啟 Graph 標籤。工具擷取並分析元標籤。檢視跨平台預覽效果。
2️⃣

編輯 OG 標籤

修改 開啟 Graph 屬性：標題、描述、圖片、類型。工具即時更新預覽。針對每個平台最佳化。
3️⃣

預覽平台

檢視內容在 Facebook、Twitter、LinkedIn 上的顯示。檢查圖片尺寸、文字長度、格式。確保最佳顯示。
4️⃣

生成元標籤

工具生成完整的 HTML 元標籤程式碼。複製到頁面 <head> 部分。包含所有必需的 OG 屬性。
5️⃣

驗證和測試

使用平台驗證器測試標籤。Facebook Debugger、Twitter Validator、LinkedIn Inspector。修復任何警告或錯誤。

🔗Related Documents

📖開啟 Graph 協定-開啟 Graph 協定官方文件
🐦Twitter Card 標籤-Twitter Card 元標籤指南
📘Facebook 分享-Facebook 分享最佳實務
🔍LinkedIn 發布 Inspector-LinkedIn 貼文預覽和除錯工具
📊SEO 元標籤指南-SEO 和社交元標籤完整指南

📝更新日誌

📌v1.11.251102
v1.0.251026建立 開啟 Graph 預覽工具；支援多平台預覽（Facebook、Twitter、LinkedIn）；即時元標籤產生；圖片驗證和尺寸檢查；完整的 開啟 Graph 和 Twitter Card 標籤產生；一鍵複製和驗證功能(2025年10月26日)

📦推薦組件

User Comments

0 / 2000
Loading...