Open Graph 标签生成器

工作原理

当指向您网站的链接在 Facebook、LinkedIn、Slack、Discord 或 X(Twitter)上被分享时,这些平台会在页面的 <head> 中查找 Open Graph meta 标签,以构建包含标题、描述和图片的预览卡片。如果没有这些标签,社交网络通常只会显示一个裸链接或缺乏吸引力的通用预览。该工具会生成 og:title、og:description、og:url、og:image 和 og:type 标签,以及相应的 twitter:card 标签,以确保卡片在 X 上也能正确显示。

这些标签应该放在哪里?

将结果直接粘贴到 HTML 页面的 <head> 部分,放在结束标签 </head> 之前。在大多数框架(Nuxt、Next.js 等)中,都存在一个专门管理 head 的组件,可以接受这些相同的 meta 标签。

og:image 应该使用什么尺寸的图片?

推荐尺寸通常是 1200x630 像素(比例 1.91:1),这符合 Facebook、LinkedIn 和 X 大卡片显示所期望的格式。尺寸过小或比例不当的图片可能会被平台以不美观的方式裁剪。

为什么我修改后预览没有变化?

大多数社交网络会在某个 URL 首次被分享时缓存其 Open Graph 标签。修改标签后,请使用平台官方的调试工具(例如 Facebook 的「Sharing Debugger」)强制对页面进行重新扫描。

在您的浏览器中 100% 本地生成——不会发送到服务器。