預覽頁面在社群媒體分享時的顯示效果。輸入網址或手動填寫 Open Graph 元標籤查看即時預覽。
Open Graph
Twitter / X
社群預覽 — Facebook
Page Title
產生 Meta HTML
<meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
<head> <!-- Open Graph (for Facebook, LinkedIn, Slack…) --> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A concise page description" /> <meta property="og:image" content="https://example.com/image.jpg" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="My Site" /> <!-- Twitter Cards (also used by X / formerly Twitter) --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Page Title" /> <meta name="twitter:description" content="A concise page description" /> <meta name="twitter:image" content="https://example.com/image.jpg" /> </head>
| Platform | Recommended Size | Min Size | Aspect Ratio |
|---|---|---|---|
| 1200×630 px | 600×315 px | 1.91:1 | |
| Twitter / X | 1200×628 px | 300×157 px | ~1.91:1 |
| 1200×627 px | 200×200 px | 1.91:1 | |
| Slack | 1200×628 px | — | ~1.91:1 |
Keep under 60 characters. Match the page <title> for consistency.
150–160 characters. Write a compelling summary, not just keywords.
Use HTTPS. Minimum 1200×630 px. Avoid text-heavy images.
Use the canonical URL. Avoids duplicate content issues when pages share images.
Open Graph（OG）元標籤是 HTML 元資料標籤，用於控制內容在 Facebook、LinkedIn、Slack 等社群媒體平台上分享時的顯示方式。由 Facebook 於 2010 年創建，允許您為社群分享卡片指定標題、描述、圖片和其他屬性。
推薦的 Open Graph 圖片尺寸為 1200×630 像素，寬高比為 1.91:1。Twitter/X 建議 summary_large_image 使用 800×418。圖片大小應在 8MB（Facebook）或 5MB（Twitter）以下。PNG 或 JPG 格式效果最佳。
是的。Twitter 使用自己的 twitter: 前綴標籤（twitter:card、twitter:title、twitter:description、twitter:image），但如果缺少 twitter: 標籤，Twitter 會退回到 og: 標籤。建議同時設定兩者以實現跨平台最大相容性。
平台會快取 OG 資料。Facebook 可能需要 24 小時刷新；使用 Facebook Sharing Debugger 強制清除快取。LinkedIn 通常在幾分鐘內更新。Twitter 在每次偵測到新的分享連結時刷新。Slack 在貼上時立即刷新。