Open Graph标签生成器

在线 Open Graph 标签生成器,填写标题、描述、图片和链接,生成 og:title、og:image、og:description 等标签,优化微信、微博、Facebook 分享卡片。

生成结果

分享卡片预览

工具介绍

Open Graph标签生成器可以帮你快速生成符合标准的 og 和 Twitter 元标签代码,用于社交平台分享时展示美化的卡片,提升点击效果。生成的代码可以直接复制到网页的 <head> 区域中。

使用方法

  1. 在对应输入框填写网页分享需要的信息:标题、描述、类型、网址、分享图片地址、网站名、Twitter卡片信息等。
  2. 填写过程中会实时生成对应的 meta 标签代码,并在「分享卡片预览」区域展示效果。
  3. 复制生成的代码,粘贴到你网页的 <head> 标签内即可。

参数说明

>
参数说明常用值
OG:标题分享时显示的网页标题建议不超过60字符
OG:描述分享时显示的网页描述建议不超过160字符
OG:类型分享内容的类型常用 website(网站)、article(文章)
OG:URL网页的正式 canonical 地址完整网址,带 http/https
OG:图片URL分享图片的完整地址建议尺寸1200×630像素
OG:网站名称你的网站名称品牌名或站名
Twitter:卡片类型Twitter/X 分享卡片样式常用 summary(小图)、summary_large_image(大图)
Twitter:账号你的Twitter账号格式为 @username

注意事项

什么是Open Graph标签?

Open Graph(简称OG)是Facebook推出的一套元协议,遵循该协议的网页可以让社交平台获取更丰富的展示信息,生成美观的分享卡片,提升分享效果。现在主流社交平台如微信、微博、X(原Twitter)、抖音等都支持Open Graph标签。

为什么我的网页分享到微信/微博不显示卡片?

一般是因为没有添加正确的Open Graph标签,或者分享图片URL无法访问、尺寸不符合要求。你可以使用本工具生成正确标签后添加到网页中,检查图片地址是否可公开访问,即可解决卡片不显示的问题。

Twitter卡片有哪几种常用类型?

常用的两种是 summary 和 summary_large_image。summary 显示小图+标题+描述,适合一般网页;summary_large_image 展示大图卡片,视觉效果更好,适合文章、图片类内容,更吸引点击。

生成的标签应该放在哪里?

将生成的标签代码复制后,粘贴到你网页HTML文件的 <head> 标签里面,也就是在 </head> 之前即可。如果你使用网站管理系统(如WordPress),也可以通过SEO插件直接填写对应字段,无需手动修改代码。