🌐 OG标签生成器
为Facebook和LinkedIn分享生成完整的Open Graph meta标签代码
什么是 Open Graph 生成器？
Open Graph 生成器是一款帮助网站开发者快速生成 Open Graph 协议标签的在线工具。Open Graph 协议由 Facebook 于 2010 年推出，目的是让任何网页在社交网络中分享时都能呈现丰富的预览卡片——包括标题、描述、图片和类型等信息。如今 Open Graph 已成为所有社交平台（微信、微博、LinkedIn、Pinterest 等）通用的社交分享标准。当用户分享你的网页链接时，平台爬虫会读取页面中的 og: 标签来构建预览卡片。配置得当的 Open Graph 标签可以显著提升分享卡片的质量和点击率。本工具覆盖所有常用的 OG 属性，通过可视化表单填写即可生成规范的 meta 标签代码，同时提供实时预览功能，让你直观看到分享效果。
如何使用 Open Graph 生成器
- 步骤一：填写基础 OG 属性 — 输入 og:title（分享标题）、og:description（分享描述）、og:image（预览图片 URL）和 og:url（页面规范 URL）四个必填字段。标题建议不超过 60 个字符，描述不超过 200 个字符。
- 步骤二：配置高级属性 — 根据内容类型选择 og:type（article、website、video 等），设置 og:site_name（站点名称）、og:locale（语言区域）等可选属性，丰富分享卡片的元数据。
- 步骤三：预览并部署 — 工具右侧实时展示在不同社交平台上的分享预览效果。确认无误后，复制生成的 HTML 代码，粘贴到页面的 <head> 区域即可完成部署。
常见使用场景
场景一：提升文章社交分享效果
博客或新闻网站发布文章时，配置 Open Graph 标签确保在微信、微博等平台分享时显示正确的标题、摘要和封面图。精心设计的分享卡片能显著提升点击率和传播效果，远比默认的纯文本链接更有吸引力。
场景二：电商产品页社交营销
电商网站的产品页配置 OG 标签后，用户在社交媒体分享产品链接时会展示产品图片、价格和描述。这种富媒体分享卡片能有效提升产品的社交传播力和转化率。
场景三：企业官网品牌展示
企业官网的每个页面都应配置 OG 标签，确保在任何社交平台被分享时展示一致的品牌形象和规范的页面信息，提升专业度和可信度。
技术原理
Open Graph 协议使用 HTML meta 标签的 property 属性（而非 name 属性）来声明元数据。核心属性包括 og:title、og:description、og:image、og:url、og:type。社交平台爬虫（如 facebookexternalhit、Twitterbot）在抓取页面时会解析这些标签。图片推荐使用 1200×630 像素（1.91:1 比例），最小尺寸 600×315。对于视频内容，还可以使用 og:video 属性嵌入视频预览。
<!-- 基础 Open Graph 标签 -->
<meta property="og:title" content="文章标题">
<meta property="og:description" content="文章摘要描述">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/article">
<meta property="og:type" content="article">
<meta property="og:site_name" content="站点名称">最佳实践与注意事项
- og:image 必须使用绝对 URL，不能使用相对路径。图片建议使用 HTTPS 协议以确保兼容性。
- 使用 Facebook Sharing Debugger 工具验证 OG 标签是否正确配置，并清除缓存以查看最新更新。
- 不同平台对 OG 属性的支持程度不同，建议同时配置 Twitter Card 标签以获得最佳跨平台效果。
- 对于动态内容页面（如 SPA），使用 SSR 或预渲染确保爬虫能获取到正确的 OG 标签。
常见问题
Q：Open Graph 和 Twitter Card 有什么区别？
A：Open Graph 是 Facebook 提出的通用协议，被大多数社交平台支持；Twitter Card 是 Twitter 特有的扩展协议，提供了更多 Twitter 平台专属的属性（如 @twitter:creator）。最佳实践是同时配置两者，og: 标签用于通用平台，twitter: 标签用于 Twitter 优化。
Q：og:image 的图片有什么要求？
A>推荐尺寸 1200×630 像素（1.91:1），最小 600×315。文件格式支持 JPG、PNG、GIF（仅首帧）。文件大小建议不超过 300KB。图片必须是公开可访问的，不能需要登录或存在 robots 限制。
Q：SPA 单页应用的 OG 标签如何配置？
A>SPA 页面的内容通过 JavaScript 动态渲染，社交平台爬虫通常不会执行 JS。解决方案包括：使用 SSR（Next.js、Nuxt.js）在服务端渲染 OG 标签、使用预渲染工具（prerender.io）生成静态快照、或使用动态 meta 标签服务（如 MetaTags.io）。
Q：如何清除社交平台缓存的旧分享预览？
A>Facebook：使用 Sharing Debugger 工具点击 "Scrape Again"。LinkedIn：使用 Post Inspector 工具。微信：公众号文章会自动更新，普通网页可能需要较长时间。建议更新内容后主动触发各平台的缓存刷新。
Q：og:type 有哪些可选值？
A>常用的 og:type 包括：website（网站）、article（文章）、profile（个人资料）、video（视频）、music（音乐）、book（书籍）。选择正确的类型有助于平台更精确地理解和展示你的内容，其中 article 类型还支持 article:author、article:published_time 等扩展属性。