摘要：根据 Social Media Examiner 2024 年的一份报告，正确配置了 Open Graph 标签的内容在社交媒体上分享时，互动量最高可达未配置内容的 2.5 倍。
当您在 Facebook、LinkedIn、Twitter 或 WhatsApp 上分享链接时，平台会读取您页面的 Open Graph（OG）元标签，生成一张包含标题、描述和图片的丰富预览卡片。如果这些标签缺失或配置错误，预览可能显示异常、调用错误的图片，或者呈现一段无法吸引点击的通用描述。
sorank.com 上的免费 OG 预览工具让您在发布之前，就能准确看到页面在各大社交平台上分享时的样子。实时发现错误、优化视觉效果，把互动量提到最高。
Open Graph 标签是什么？
Open Graph 是 Facebook 于 2010 年首创的协议，它让网页在社交图谱中成为丰富的对象。只要在页面的 <head> 区域放置特定的 <meta> 标签，您就能控制各平台展示您内容的方式。
核心的 Open Graph 标签包括：
og:title，分享卡片中显示的标题。控制在 60 个字符以内效果最佳。
og:description，出现在标题下方的补充描述。建议 150 到 200 个字符。
og:image，预览图片。这是视觉冲击力最强的元素。推荐尺寸：1200×630 像素。
og:url，被分享页面的规范网址。
og:type，定义内容类型（网站、文章、产品、视频等）。
og:site_name，您的网站或品牌名称。
Twitter 使用自己的变体，称为 Twitter Cards，包含 twitter:card、twitter:title、twitter:description 和 twitter:image 等标签。不过，当自有标签缺失时，Twitter 会回退到 Open Graph 标签。
OG 预览为何对您的 SEO 策略重要
您也许会问：社交分享和 SEO 有什么关系？虽然社交信号并非 Google 的直接排名因素，但间接收益十分可观：
来自社交平台的流量更多：一张美观、格式规范的分享卡片能显著提升社交媒体的点击率。来自社交渠道的访客越多，就意味着越多潜在的外链、品牌提及和互动信号。
跳出率更低：用户在点击前看到准确的预览，就知道会得到什么。预览与内容之间的一致性能降低跳出率、延长停留时间，这两者都是正面的用户体验信号。
品牌一致性：在所有平台上保持统一、专业的分享卡片，能强化您的品牌形象，建立受众的信任。
放大链接传播：预览效果吸引人的内容更容易被分享。每一次分享都创造了一次被自然发现和获得外链的机会。
如何使用 Sorank 的 OG 预览工具
我们的 OG 预览工具帮助您排查并优化社交分享卡片：
第 1 步：输入您想预览的页面网址。工具会抓取该页面，并读取全部 Open Graph 和 Twitter Card 元标签。
第 2 步：查看为 Facebook、Twitter/X、LinkedIn 和 WhatsApp 生成的预览。各平台渲染分享卡片的方式略有差异，我们的工具会分别呈现在每个平台上的确切外观。
第 3 步：找出问题。工具会标出常见问题，例如标签缺失、图片过小、标题被截断，或描述超出推荐字符数。
第 4 步：修复并重新测试。修正元标签之后，再次输入网址，确认所有预览都完美无误。
常见的 OG 标签错误及修复方法
即便是经验丰富的开发者也会在 Open Graph 上出错。以下是我们最常遇到的问题：
缺少 og:image 标签：这是头号错误。没有图片时，平台要么显示空白卡片，要么从您的页面里随机抓取一张图片。请始终指定一张 1200×630 像素的高质量图片。
图片过小或宽高比不对：Facebook 要求图片至少 200×200 像素，但推荐 1200×630 像素以使用大卡片格式。尺寸过小或不符合 1.91:1 比例的图片会被生硬裁剪，或降级显示为小缩略图而非大卡片。
使用相对网址而非绝对网址：所有 OG 标签的值都必须使用绝对网址（以 https:// 开头）。像 /images/og.jpg 这样的相对路径在社交平台上无法生效。
标签重复或相互冲突：同一页面上出现多个 og:title 或 og:image 会让抓取工具无所适从。请确保每个 OG 标签只出现一次。
没有清除缓存：Facebook 等平台会强力缓存您的 OG 数据。更新标签之后，需要使用 Facebook 的分享调试工具强制重新抓取，清除缓存版本。
缺少 Twitter 专属标签：虽然 Twitter 会回退到 OG 标签，但明确指定 twitter:card（取值 summary_large_image）能确保您的内容以大图格式展示，而不是小尺寸的摘要卡片。
各平台的 OG 要求
每个社交平台都有自己的要求和特点：
Facebook：图片最小 200×200 像素，推荐 1200×630 像素。支持 article、product、video 等 og:type 取值。缓存力度大，请用分享调试工具刷新。标题最长 60 个字符，描述最长 200 个字符。
Twitter/X：需要 twitter:card 元标签。支持 summary（小图）和 summary_large_image（大图）两种卡片类型。图片最小尺寸：摘要卡片 144×144 像素，大图卡片 300×157 像素。缺少 Twitter 标签时会回退到 OG 标签。
LinkedIn：直接使用 OG 标签。推荐图片尺寸 1200×627 像素。支持 article 和 website 类型。拥有自己的 Post Inspector 调试工具。
WhatsApp：读取 OG 标签生成链接预览。要求 og:image 通过 HTTPS 提供。预览会缓存在设备上，清除缓存需要用户手动清理应用数据。
OG 图片设计的最佳实践
OG 图片是社交分享卡片中最重要的元素。请遵循以下设计准则：
• 使用 1200×630 像素（1.91:1 宽高比），以获得通用兼容性。
• 把重要文字和视觉元素保持在图片中央 80% 的区域内，以应对各平台的裁剪差异。
• 加入您的品牌标志或品牌色，便于一眼识别。
• 使用粗体、高对比度的易读文字，因为大量用户是在手机上浏览社交媒体。
• 文件大小控制在 5 MB 以内（最好小于 1 MB），以便快速加载。
• 照片用 JPEG，带文字叠加的图形用 PNG。
• 为最重要的页面制作专属 OG 图片，而不是全站共用一张通用图。
• 在深色背景上测试您的图片，因为 Twitter/X 等平台支持深色模式。
把 OG 标签接入您的 CMS
大多数现代 CMS 平台和框架原生支持 Open Graph 标签，或可通过插件支持：
WordPress：Yoast SEO 或 Rank Math 等插件会根据您的内容自动生成 OG 标签。您也可以为每个页面自定义社交图片和标题。
Webflow：Open Graph 设置位于页面设置面板的 Open Graph 选项卡中。您可以为每个页面设置标题、描述和图片。
Next.js / React：使用 <Head> 组件或 metadata API 以编程方式添加 OG 标签。next-seo 等库能简化这一过程。
静态 HTML：直接在每个页面的 <head> 区域添加 OG 元标签。可以使用 sorank.com 上的元标签生成器工具自动生成代码。
无论使用哪种平台，发布之前都请用我们的 OG 预览工具验证标签在所有社交平台上都能正确呈现。
.webp){kind=small}
.webp){kind=small}
.svg)
.svg)
