🔍 在线OG Meta Tag生成器

广告位 - 顶部 (728×90)

页面信息

建议尺寸 1200×630px,不超过5MB
例如 @webtools

生成的Meta标签

填写上方信息,点击「生成Meta标签」按钮

社交分享预览

🖼 图片预览区
example.com
页面标题将在预览中显示
页面描述将在预览中显示
广告位 - 中部 (728×90)

Open Graph Meta Tag 使用指南

什么是Open Graph标签?

Open Graph(OG)协议由Facebook于2010年推出,允许网页控制其在社交平台上的展示方式。通过添加OG meta标签,你可以指定分享时显示的标题、描述、图片和链接,确保社交分享效果符合预期。

标准OG标签列表

og:title — 分享标题(建议40-60字符)

og:description — 分享描述(建议60-160字符)

og:image — 分享图片(建议1200×630像素)

og:url — 页面链接

og:type — 内容类型(website/article/product等)

og:site_name — 网站名称

og:locale — 语言区域(如zh_CN、en_US)

使用场景

博客文章:为每篇文章添加OG标签,使用文章标题和特色图片,在Facebook和Twitter上获得精美的分享卡片,提高点击率。

产品页面:为电商产品页面添加OG标签,使用产品图片和价格信息,在社交分享时展示产品详情,提升转化率。

视频内容:为视频页面添加OG标签,使用视频封面作为分享图片,在社交平台上获得更吸引人的分享效果。

品牌页面:在网站首页和品牌页面添加完整的OG标签,确保品牌在社交分享时呈现统一的视觉形象。

最佳实践

• 图片建议使用1200×630像素,比例1.91:1,不超过5MB,使用高清晰度图片。

• 标题控制在40-60字符之间,描述控制在60-160字符之间。

• 每条URL使用唯一的OG标签,特别是图片和描述要根据页面内容定制。

• 使用Facebook Sharing Debugger(https://developers.facebook.com/tools/debug/)测试OG标签效果。

• Twitter Card建议使用summary_large_image类型,展示大图效果更佳。

• 在OG图片URL中使用绝对地址(包含https://),不要使用相对路径。

什么是Open Graph Meta标签?

Open Graph(OG)标签是HTML head中的meta标签,用于控制网页在Facebook、Twitter、LinkedIn等社交平台上分享时的标题、描述、图片和链接预览效果。

什么是Twitter Card?

Twitter Card是X(原Twitter)特有的meta标签格式,用于控制推文中链接的预览效果。支持Summary Card(摘要卡片)和Summary Card with Large Image(大图卡片)两种类型。

OG标签和SEO有什么关系?

虽然OG标签不直接影响搜索引擎排名,但能显著提升社交分享时的展示效果,吸引更多点击和分享,间接提升流量和品牌曝光。Google也在搜索结果中使用OG标签信息。

如何测试OG标签是否生效?

可以使用Facebook Sharing Debugger(https://developers.facebook.com/tools/debug/)、Twitter Card Validator(https://cards-dev.twitter.com/validator)或LinkedIn Post Inspector来测试你的OG标签效果。

OG标签需要放在HTML的什么位置?

OG标签应放在HTML文档的<head>区域中,通常在<title>标签之后。本工具生成的代码包含了标准OG标签和Twitter Card标签,可以直接复制使用。

OG图片有什么要求?

推荐使用1200×630像素的图片(比例1.91:1),文件大小不超过5MB,支持JPG、PNG、WebP格式。图片应包含页面核心视觉元素,避免使用过小的文字。

广告位 - 底部 (728×90)