Developer SEO Utility
Open Graph 图片预览
输入标题、说明、URL 和代表图片地址后，可预览 KakaoTalk、Facebook、Twitter 分享卡片，并生成 OG/Twitter meta 标签。
Open Graph 信息输入
请输入用于分享预览的标题、说明、URL 和代表图片信息。
0/推荐 60 字
0/推荐 150 字
用于 og:url 和 twitter:url。
用于 og:image 和 twitter:image。
用于 og:site_name。
分享内容的类型。
分享预览
请查看各个平台上的分享卡片可能如何显示。
分享说明将显示在这里。
win-j.com分享说明将显示在这里。
分享说明将显示在这里。
https://example.com/page/生成结果
将以下代码添加到 HTML 的 head 区域即可。
请输入信息后点击生成 OG 标签按钮。
Open Graph 检查项目
分享预览质量会根据标题、说明、图片和代表 URL 设置而变化。
这是分享卡片的核心标题。如果过长可能会被截断，建议简短明确地填写。
显示在分享卡片的说明区域。简洁概括页面内容有助于提高点击率。
这是链接分享时最显眼的图片。建议使用 1200×630px 横向缩略图。
帮助
什么是 Open Graph 图片预览？
Open Graph 图片预览是一款开发者 SEO 工具，可查看链接分享到 KakaoTalk、Facebook、Twitter 等平台时显示的卡片预览，并生成 meta 标签。
可以检查博客文章、工具页面、落地页、商品页面的分享标题、说明和代表图片会如何显示。
推荐 OG 图片尺寸
- 推荐比例：1.91:1 横向图片
- 示例尺寸：1200 × 630px
- 重要文字建议放在图片中央区域。
- 图片 URL 建议使用外部可访问的绝对 URL。
Open Graph 标签会直接影响 SEO 吗？
Open Graph 标签相比搜索排名本身，更直接影响 SNS 和即时通讯软件中的分享预览质量。清晰的标题、说明和图片可能提高用户点击链接的可能性。
为什么 KakaoTalk 中的图片不会立即更新？
KakaoTalk 或 SNS 可能会缓存已收集的 OG 信息。如果修改图片后没有立即反映，需要在各平台的分享调试工具中刷新缓存。
og:image 可以使用相对路径吗？
建议尽量使用以 https:// 开头的绝对 URL。相对路径在部分平台上可能无法正确抓取图片。
Twitter Card 标签也必须添加吗？
仅使用 Open Graph 标签，很多平台也可以显示预览。但如果考虑 X/Twitter 的分享质量，建议同时添加 twitter:card、twitter:title、twitter:description、twitter:image 标签。
生成的标签应该放在哪里？
生成的 meta 标签应添加到 HTML 文档的 head 区域。在 Django 模板中，可以放在 base template 的 meta block 或各页面的 SEO block 中管理。