Developer SEO Utility
Open Graph 预览
输入标题、描述、URL 和代表图片地址，预览 KakaoTalk、Facebook、X/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 设置。
这是分享卡片的主标题。标题过长可能被截断，建议简短明确。
这里显示分享卡片的描述。简洁总结页面内容有助于提升点击率。
这是链接分享时最醒目的图片。建议使用 1200x630px 的横向缩略图。
帮助
什么是 Open Graph Preview？
Open Graph Preview 是面向开发者的 SEO 工具，可预览链接在 KakaoTalk、Facebook、Twitter 等平台分享时的卡片效果，并生成 meta 标签。
你可以检查博客文章、工具页面、落地页和商品页的分享标题、描述与代表图片显示效果。
使用方法
- 输入分享标题、描述、页面 URL、代表图片 URL 和站点名称。
- 选择标题/描述长度检查、图片 URL 检查以及是否包含 Twitter Card 标签。
- 在 KakaoTalk、Facebook、Twitter 标签中比较分享卡片预览。
- 生成 OG 元标签，并添加到 HTML 的 head 区域。
推荐 OG 图片尺寸
推荐比例：1.91:1 横向图片
示例尺寸：1200 x 630px
推荐文本长度
标题保持在约 60 个字符、描述保持在约 150 个字符，可以减少分享卡片中的截断。
推荐图片比例
代表图片建议使用 1200x630px 或 1.91:1 的横向图片。
Open Graph 标签会直接影响 SEO 吗？
Open Graph 标签对搜索排名本身的直接影响有限，但会直接影响 SNS 和聊天工具中的分享预览质量。清晰的标题、描述和图片可能提高用户点击分享链接的可能性。
为什么 KakaoTalk 中的图片不会立即更新？
KakaoTalk 和社交平台可能会缓存已抓取的 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。