Open Graph 生成
生成 Open Graph 与 Twitter Card 标签。
什么是Open Graph 生成？
Open Graph 生成工具用于生成网页在社交平台（微信、微博、Facebook、X/Twitter、LinkedIn、Slack 等）被分享时展示预览卡片所需的 meta 标签，包括 Open Graph 协议标签（og:title、og:description、og:image、og:url、og:type 等）和 Twitter Card 专属标签（twitter:card、twitter:title、twitter:image 等）。 Open Graph 是 Facebook 最早提出的一套网页元数据协议，通过在 HTML 的 head 里加入一组 meta 标签，让分享者平台在抓取这个链接时能拿到标准化的标题、描述、封面图，而不是随意抓取页面正文拼凑预览。
为什么使用Open Graph 生成？
如果不配置 Open Graph 标签，链接被分享到社交平台或聊天工具时，预览效果通常是抓取页面 title 和第一段文字、甚至没有封面图，显得很简陋，直接影响点击率。做内容运营、产品官网、博客文章推广时，配置好的 og 标签能让分享出去的链接展示统一、美观、信息完整的卡片。 这个工具和纯手写标签相比，能避免遗漏必填字段（比如 og:image 建议用绝对路径而非相对路径）、自动生成 Twitter Card 对应字段（twitter:card 通常设为 summary_large_image 配合大图展示），一次填写多平台标签就都生成好了。
使用示例
生成一篇博客文章的分享标签
输入标题“如何用 CIDR 划分子网”、描述“面向运维新手的子网划分实操教程”、封面图 https://example.com/cover.jpg、页面地址 https://example.com/blog/cidr，生成： <meta property="og:title" content="如何用 CIDR 划分子网"> <meta property="og:description" content="面向运维新手的子网划分实操教程"> <meta property="og:image" content="https://example.com/cover.jpg"> <meta property="og:url" content="https://example.com/blog/cidr"> <meta property="og:type" content="article">
补充 Twitter Card 大图卡片
在上面基础上勾选大图卡片，额外生成 <meta name="twitter:card" content="summary_large_image"> 和 twitter:title、twitter:image 等标签，这样在 X/Twitter 上分享时会展示大图预览而不是小图摘要。
商品页配置 product 类型
og:type 选择 product 而非默认的 website，部分平台会据此展示价格、库存等专属信息卡样式，实际展现效果取决于分享平台是否支持该类型的扩展解析。
使用提示
og:description 建议控制在 100-200 字符左右，太长会被平台截断；同一个页面不要写多个同名 og:title，容易导致平台只取第一个或行为不一致，保持标签唯一、简洁最稳妥。
常见问题
Open Graph 标签有什么用？
og:image 图片尺寸有要求吗？
数据会上传吗？
og:image 一定要用绝对路径吗？
为什么改了标签，分享出去的预览还是老样子？
og:image 图片有尺寸要求吗？
这个工具会帮我把标签发布到网站上吗？
相关工具
← 返回工具箱· 数据均在浏览器本地处理，不上传服务器。