OG 标签预览器是 Aibrify 提供的免费浏览器端 Meta 标签检查工具，无需将数据上传到任何服务器即可预览链接在 Facebook、Twitter/X、Google、Slack 和 Discord 上的展示效果。专为需要快速、隐私优先的 Open Graph 标签验证和优化的社交媒体营销人员和 Web 开发者打造。
什么是 Open Graph，为什么它很重要？
Open Graph 是由 Facebook 最初创建的协议，让你可以控制网页在社交媒体上分享时的展示方式。当有人在 Facebook、Twitter、LinkedIn、Slack、Discord 或 iMessage 上分享链接时，平台会读取你的 Open Graph meta 标签来生成包含标题、描述和图片的富预览卡片。
如果没有正确配置的 OG 标签，平台要么生成空白预览，要么从页面中随机提取文本和图片——导致不美观的分享，点击量大幅减少。研究表明，具有优化社交预览的链接比缺失或损坏预览的链接点击率高 2-3 倍。
每个页面都需要的必要 Open Graph 标签
四个必需的 OG 标签是：
- og:title - 页面在社交分享中显示的标题。保持在 60 个字符以内以避免截断。
- og:description - 页面内容的简要概述。目标 55-155 个字符。这是你编写吸引点击文案的机会。
- og:image - 要显示的图片 URL。使用 1200x630px 以在所有平台上获得最佳效果。必须是以 https:// 开头的绝对 URL。
- og:url - 页面的规范 URL。这告诉平台将分享内容与哪个 URL 关联。
此外，强烈建议设置 og:site_name 和 og:type。site_name 在 Facebook 上显示为标题上方的微妙标签，为分享提供品牌背景。
Twitter 卡片 vs. Open Graph
Twitter/X 有自己的 meta 标签系统，称为 Twitter Cards。两种最常见的卡片类型是：
- summary - 紧凑的卡片，左侧是小方形缩略图（120x120px），右侧是文本。最适合文章和文字为主的内容。
- summary_large_image - 大卡片，文本上方是宽幅图片（推荐 1200x628px）。最适合视觉内容、产品页面和着陆页。
如果你只设置了 OG 标签而没有 Twitter 专用标签，Twitter 会回退到你的 OG 值。但是，必须设置 twitter:card 来控制 Twitter 使用哪种布局。你还可以设置 twitter:title 和 twitter:description 来用 Twitter 专用文案覆盖 OG 值。
各平台预览差异
- Facebook：以 1.91:1 宽高比在标题和描述上方显示 og:image。og:site_name 以灰色文本显示在顶部。图片至少需要 200x200px。
- Twitter/X：布局取决于 twitter:card 类型。summary_large_image 使用 2:1 图片比例。域名显示在描述下方。
- Google：搜索结果使用 meta title 和 description（不是 OG 标签），但可能在 Discover 和新闻轮播中使用 og:image。
- Slack/Discord：两者都读取 OG 标签。Slack 显示彩色左边框、网站名称、标题链接、描述和图片。Discord 类似但使用嵌入样式。
常见 Open Graph 错误
- 使用相对图片 URL 而非以 https:// 开头的绝对 URL
- 将 og:image 设置为需要认证或在 localhost 上的图片
- 使用小于 200x200 像素的图片
- 忘记设置 og:type（默认为 "website" 但应明确设置）
- 在所有页面上复制相同的 OG 标签
- 更改后不测试——平台会积极缓存
- og:description 超过 155 个字符（会被截断）
- 缺少 twitter:card 标签，导致 Twitter 使用默认布局