预览页面在社交媒体分享时的显示效果。输入 URL 或手动填写 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 在粘贴时立即刷新。