Open Graph 元标签生成器

Open Graph 标签是一段小小的 HTML 代码，决定了你的页面被分享到 Facebook、LinkedIn、Slack、Discord 或 X（Twitter）时呈现的样子。在下方填写标题、描述、链接、图片及其他选项，分享卡片预览会实时更新，然后把生成的 <meta> 标签直接复制粘贴到页面的 <head> 中即可。整个过程都在浏览器本地完成，不会向任何服务器发送数据。

工具介绍

Open Graph 最初由 Facebook 提出，是一套协议，允许任何网页通过放在 HTML <head> 中的一小组 <meta property="og:..."> 标签来描述自身。当有人把你的链接粘贴到社交应用、聊天工具或即时通讯软件时，这些应用会读取这些标签来生成预览卡片——标题、描述和缩略图，而不是自行猜测页面内容。

Twitter（X）使用一套相关但独立的标签 <meta name="twitter:...">，专门控制链接在其平台上的预览效果。大多数网站会同时设置两套标签：Open Graph 标签保证广泛兼容性，Twitter Card 标签则用于精细调整 X 上的预览效果（例如选择大图卡片还是小图摘要卡片）。

如果没有这些标签，分享的链接要么完全不显示预览，要么平台会尝试从页面原始内容中猜测标题和图片——常常选错标题、抓到无关的插图，或者干脆什么都显示不出来。明确设置 og:title、og:description 和 og:image，能让你完全掌控内容在被点击之前呈现的方式。

为什么使用它？

实时预览——输入内容的同时即可看到分享卡片的真实效果，发布前就能确认样式。
一次生成 Open Graph 标签（og:title、og:description、og:image、og:url、og:type、og:site_name）和 Twitter Card 标签。
覆盖各平台真正会读取的字段：标题、描述、规范链接、图片、网站名称、内容类型以及 Twitter 卡片样式。
完全在浏览器本地运行——你的标题、描述和链接不会离开浏览器。
免费使用，无需登录，无次数限制——复制结果粘贴进 HTML 即可。

使用方法

填写页面标题和简短描述（标题建议控制在约 60 个字符以内，描述建议在 155–160 个字符以内）。
填写页面的规范链接和预览图片的绝对地址（图片链接必须是完整地址，如 https://example.com/image.jpg，不能用相对路径）。
根据需要设置网站名称，选择 og:type（网站、文章、产品、个人主页、视频、音乐），并选择 Twitter Card 类型（summary 或 summary_large_image）。
查看实时预览卡片，确认标题、描述和图片搭配是否合适。
点击“复制”，把生成的 <meta> 标签粘贴到页面 <head> 中，放在 </head> 结束标签之前。

示例

输入

标题：“10 款你会真正用到的免费开发者工具”
描述：“精选浏览器端工具，涵盖 JSON、正则表达式、UUID 等，无需安装。”
链接：https://example.com/blog/dev-tools
图片：https://example.com/images/dev-tools-cover.jpg

输出

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

只有你填写过的字段才会出现在结果中，例如不填网站名称，输出就不会包含 og:site_name。

常见错误

完全没有设置 og:image——缺少它，大多数平台要么不显示预览图，要么从页面中随机抓取一张图片，效果通常很糟糕、不够专业。
使用相对路径（如 /images/cover.jpg）而不是完整链接（如 https://example.com/images/cover.jpg）——社交平台的抓取程序通常无法解析相对路径。
图片比例不对——正方形或竖版图片被强行裁剪成 1.91:1 的横版比例后会显得很别扭，设计分享图时最好直接采用接近 1200×630 的尺寸。
标题或描述被截断——建议 og:title 控制在约 60 个字符以内，og:description 控制在约 155–160 个字符以内，避免在大多数平台上被省略号截断。
忘记刷新缓存的预览——在已上线页面上更新 og 标签后，旧预览可能仍留在 Facebook 或 LinkedIn 的缓存中，需要用它们的调试工具手动强制重新抓取。

各标签的用途

og:title、og:description 和 og:image 是几乎所有平台构建预览卡片时都会读取的三个核心标签。og:url 告诉抓取程序该预览应该关联到哪个规范链接，如果同一内容可以通过多个网址访问，这一点就很重要。og:site_name 会在某些平台（如 Facebook）上于标题上方显示一个小标签，比如出版方或品牌名称。

og:type 会改变页面在支持 Open Graph 更丰富对象模型的抓取程序眼中的类型——例如设为 article 会启用 og:article:published_time 和 og:article:author 等标签（部分平台会读取），不过大多数社交预览只会用到标题、描述和图片这三个核心字段，会忽略这些额外信息。

twitter:card 专门控制内容在 X 上的布局：summary 会在文字旁展示一张小方图，而 summary_large_image 会在文字上方展示一张通栏大图——对于有实际封面图的内容，后者几乎总是更好的选择。

常见问题

og:image 应该用多大尺寸？

推荐尺寸是 1200×630 像素——这个尺寸在高分辨率屏幕上也足够清晰，并且接近 Facebook、LinkedIn 和 X 裁剪使用的约 1.91:1 比例。文件大小建议控制在 5–8MB 以内，使用 JPG 或 PNG 格式，并确保图片链接是完整的绝对地址而非相对路径——大多数抓取程序无法正确解析相对路径。

为什么分享链接时看不到预览？

最常见的原因包括：缺少 og:image、图片链接是相对路径而非绝对地址、robots.txt 屏蔽了抓取程序，或者平台展示的是旧预览的缓存。Facebook 和 LinkedIn 都会积极缓存抓取到的预览内容——更新标签后，可以用 Facebook 的 Sharing Debugger 或 LinkedIn 的 Post Inspector 强制重新抓取。

og: 标签和 twitter: 标签有什么区别？

og: 标签（og:title、og:description、og:image 等）是 Open Graph 标准，被 Facebook、LinkedIn、Slack、Discord、WhatsApp 等大多数平台读取。twitter: 标签是 Twitter/X 自己的格式。如果没有设置 twitter:title 或 twitter:image，X 会自动回退使用对应的 og: 标签——但同时明确设置两套标签能给你更多控制权，比如选择 summary_large_image 展示更大的预览图。

og:type 应该选哪个？

对大多数页面（包括首页和一般内容）来说，“website”是最安全的默认选项。博客文章和新闻类内容建议用“article”（可以额外使用发布时间等文章专属标签），电商页面用“product”，个人或用户主页用“profile”。这个类型主要影响哪些额外的 Open Graph 属性有效，并不会改变基础预览卡片的样式。

这个工具会存储或发送我的数据吗？

不会。所有生成过程都在浏览器本地通过 JavaScript 完成，你输入的任何内容都不会被传输、记录或存储——关闭标签页后一切都会清空。