OGP 文本优化 - 改善社交媒体分享显示效果
OGP (Open Graph Protocol) 是控制网页在社交媒体上分享时显示内容 (需注意截断问题) 的协议。2010 年由 Facebook 提出，作为 RDFa 词汇表设计的该协议，目前几乎所有社交媒体和即时通讯应用都已支持。如果未正确设置，标题可能会被截断，或显示非预期的描述文本，导致点击率大幅下降。本文将详细解析 OGP 文本的优化方法和各平台的显示规格。关于 SNS 营销的深入知识，SNS 营销相关书籍 (Amazon) 也可作为参考。
Open Graph Protocol 的规范与历史
OGP 是 Facebook 在 2010 年 F8 开发者大会上发布的元数据规范。通过在 HTML 的 <head> 中添加 <meta property="og:..."> 标签，向爬虫传递页面的结构化信息。规范在 ogp.me 上公开，定义了 og:title、og:type、og:image、og:url 四个必需的基本属性。
在 OGP 出现之前，社交媒体通过读取页面的 <title> 标签和 <meta name="description"> 来生成预览。然而，这些内容是为搜索引擎优化的文本，在社交媒体信息流中显示时往往过于冗长或缺乏上下文。OGP 通过提供专用于社交媒体显示的元数据层来解决这一问题。
各平台的 OGP 显示规格
不同社交媒体的 OGP 文本显示区域各不相同。了解各平台的规格，调整字数以确保重要信息完整显示至关重要。以下表格为各平台移动端应用的实测值，桌面端通常会显示更多字符。
| 平台 | og:title 显示字数 | og:description 显示字数 | 推荐图片尺寸 |
|---|---|---|---|
| X (Twitter) | 约 70 字符 (移动端约 55 字符) | 约 120 字符 (卡片形式可能不显示) | 1200×628px |
| 约 60 字符 (移动端约 45 字符) | 约 80 字符 (移动端约 65 字符) | 1200×630px | |
| LINE | 约 50 字符 | 约 70 字符 | 1200×628px |
| 约 60-70 字符 | 约 100-150 字符 | 1200×627px | |
| Slack | 约 70 字符 | 约 150 字符 | 1200×630px |
限制最严格的是 Facebook 移动端，og:title 约 45 字符、og:description 约 65 字符就会被截断。要确保在所有平台上完整显示，og:title 控制在 40-45 字符以内最为安全。
og:title 的字数与 CTR 的关系
og:title 的字数直接影响点击率 (CTR)。一般趋势是 30-50 字符的 og:title 能获得最高的 CTR。过短则信息量不足，过长则被截断导致含义不完整。
特别有效的是包含数字的具体标题。"5 种方法""2025 年版"等表达方式，与抽象标题相比 CTR 可提升 20-30%。疑问句式的标题 ("你是否还在……？") 也能激发好奇心，促进点击。
og:title 的优化
og:title 是分享时最醒目的元素，是决定点击率的最关键项目。由于可以与页面的 title 标签分开设置，因此可以使用针对社交媒体优化的表达方式。
撰写高效 og:title 的要点如下：
- 控制在 40-45 字符以内：即使在 Facebook 移动端的严格限制下也不会被截断
- 省略网站名称：社交媒体的上下文不同，应将字数分配给文章内容
- 包含数字和具体信息："5 种方法""2025 年版"等表达可提高点击率
- 善用疑问句和呼吁式表达："你是否还在……？"等表达更能吸引眼球
og:title 与 HTML title 不一致时的行为
og:title 和 HTML 的 <title> 标签是独立的元素，可以设置不同的值。各平台的爬虫会优先读取 og:title，但如果 og:title 未设置，则会回退到 <title> 标签的值。
但需要注意的是，如果两者内容差异过大，Google 可能会在搜索结果中采用 og:title，导致为 SEO 优化的 title 标签内容无法在搜索结果中显示。建议 SEO 用的 title 标签包含关键词，og:title 则侧重于社交媒体上的点击率，使用更具感染力的表达，但两者的主题应保持一致。
og:description 的写作方法
og:description 是显示在标题下方的补充文本，承担着补充标题未能传达的信息、促进点击的作用。
og:description 以 70-100 字符为宜。将最重要的信息放在前 40 个字符中，确保即使被截断也能传达完整含义。内容可以与 meta description 相同，但针对社交媒体用户群体使用更轻松的表达方式也是有效的策略。
og:description 未设置时的回退机制
未设置 og:description 时，各平台会使用各自的逻辑生成回退文本。Facebook 会使用 <meta name="description"> 的值，如果也未设置则自动提取页面正文的开头文本。X (Twitter) 按 twitter:description → og:description → meta description 的顺序查找，均未设置时从页面正文中提取。
自动提取的文本可能混入导航菜单或侧边栏的文字，产生非预期显示的风险很高。务必明确设置 og:description。可以使用字符计数器确认 og:title 和 og:description (字数限制相关) 的字数，检查是否在各平台的显示限制范围内。
OGP 图片 (og:image) 的设计
OGP 图片是决定分享时视觉冲击力的元素。有数据显示，带图片的分享与纯文本分享相比，点击率可提升 2-3 倍。
OGP 图片中的文字以 20-40 字符为宜。由于图片中的文字需要在小尺寸的智能手机屏幕上也能清晰阅读，精简字数至关重要。不要将文章标题原封不动地放入图片，而应提取核心部分进行排版。
| 平台 | 最小尺寸 | 推荐尺寸 | 宽高比 |
|---|---|---|---|
| 200×200px | 1200×630px | 1.91:1 | |
| X (Twitter) | 144×144px (summary) / 300×157px (large) | 1200×628px | 1.91:1 |
| LINE | 200×200px | 1200×628px | 1.91:1 |
| Slack | 250×250px | 1200×630px | 1.91:1 |
- 图片尺寸：以 1200×630px (横向) 为基准。文件大小控制在 1MB 以下，确保加载速度
- 文字位置：放置在图片中央至上部，下部可能与平台 UI 重叠
- 字体大小：至少确保 40px 以上
- 背景色：确保与文字有足够的对比度。以 WCAG AA 标准 (对比度 4.5:1 以上) 为参考
各平台爬虫的行为特征
获取 OGP 信息的爬虫在不同平台上表现各异。Facebook 的爬虫 (facebookexternalhit) 可通过 User-Agent 头识别，且不执行 JavaScript。因此，使用客户端渲染 (CSR) 动态生成 OGP 标签的网站会出现 OGP 信息无法正确获取的问题。
X (Twitter) 的 Twitterbot 同样不执行 JavaScript。LINE 的爬虫 (Line) 也只解析静态 HTML。Slack 的 Slackbot 较为特殊，会追踪最多 5 次重定向，但不执行 JavaScript。
如果使用 React 或 Vue.js 等 SPA 框架，OGP 标签需要通过服务端渲染 (SSR) 或静态站点生成 (SSG) 输出。利用 Next.js 的 generateMetadata 或 Nuxt 的 useHead，可以在框架机制内正确输出 OGP 标签。
OGP 缓存机制与更新方法
各平台会缓存 OGP 信息，即使更新了页面的 OGP 标签也不会立即生效。缓存有效期因平台而异。
- Facebook：缓存约 24 小时。在 Facebook 分享调试器中输入 URL 并点击"重新抓取"可立即更新
- X (Twitter)：缓存期未公开，据估计约 7 天。在 X Card Validator 中输入 URL 可获取最新信息
- LINE：缓存约 1 小时至数小时。官方未提供手动清除缓存的方法
- Slack：重新粘贴 URL 可能仍显示旧缓存。可在 URL 末尾添加查询参数 (如
?v=2) 使其被识别为新 URL 来规避
更新 OGP 后，建议养成在 Facebook 分享调试器和 X Card Validator 中执行重新抓取、确认显示符合预期的习惯。
OGP 调试工具的使用方法
设置 OGP 后，使用各平台的调试工具确认显示效果是不可或缺的步骤。如果在未发现设置错误的情况下发布，每次被分享时都会传播非预期的显示效果。
主要调试工具及其确认步骤如下：
- Facebook 分享调试器：输入 URL 后会显示 og:title、og:description、og:image 的预览。"警告"部分会报告缺失的属性和尺寸不达标的图片
- X Card Validator：输入 URL 后会显示 Twitter Card 的预览。可根据 twitter:card 的类型 (summary / summary_large_image) 确认显示效果
- LinkedIn Post Inspector：可确认在 LinkedIn 上的分享显示效果。还会验证 og:image 是否满足最小尺寸 (1200×627px)
为防止 OGP 标签设置遗漏，建议养成使用字符计数器预先检查 og:title 和 og:description 字数、确认未超出各平台显示限制的习惯。
各 CMS 的 OGP 设置方法
主流 CMS 和框架的 OGP 标签设置方法各不相同。
- WordPress：可通过 Yoast SEO 或 All in One SEO Pack 等插件在 GUI 中设置。在文章编辑界面的"社交"选项卡中可单独指定 og:title 和 og:description
- Next.js：通过
generateMetadata函数返回openGraph属性，可为每个页面动态生成 OGP 标签 - Nuxt：使用
useHead组合式函数或nuxt.config.ts的app.head设置 OGP 元标签 - 静态 HTML：在
<head>中直接编写<meta property="og:...">标签。使用模板引擎时可通过变量动态插入值
动态 OGP 生成的注意事项
基于用户输入或数据库值动态生成 OGP 标签时，需要注意以下几点。
首先，必须彻底进行 HTML 转义。在 og:title 或 og:description 中包含用户输入时，如果未正确转义 <、>、&、"，将产生 HTML 注入漏洞。
其次，动态生成 og:image 时 (如使用 Vercel OG Image Generation 或 Cloudinary 的动态转换)，如果图片生成耗时过长，爬虫可能会超时。Facebook 的爬虫约 4 秒就会超时，因此建议预先缓存图片或通过 CDN 分发。
此外，当 URL 包含查询参数或片段标识符时，og:url 应设置为规范化的 URL (不含查询参数)。这可以防止同一内容的不同 URL 导致分享数分散。
OGP 的历史与规范变更
Facebook 在 2013 年大幅修改了 OGP 规范，将 og:image 的最小推荐尺寸提升至 600×315px。这一变更导致许多网站的 OGP 图片无法正常显示。2018 年推荐尺寸进一步提升至 1200×630px，以适应高分辨率显示屏的需求。
X (原 Twitter) 拥有独立的 Twitter Card 元标签 (twitter:card、twitter:title 等)，但当 Twitter Card 标签未设置时会回退到 OGP 标签。因此，只要正确设置了 OGP 标签，即使省略 Twitter Card 标签也能确保基本显示。不过，twitter:card 标签在 OGP 中没有对应属性，需要单独设置。
常见错误模式
- 将 og:title 与 title 标签设为完全相同，未能发挥社交媒体的吸引力。建议 SEO 用的 title 标签包含关键词，og:title 则使用更具感染力的表达来提升点击率
- 未设置 og:image 就被分享，平台自动选择了无关的图片。特别容易选中 logo 图片或图标，导致点击率大幅下降
- 未设置 og:url 或使用了相对路径。og:url 必须使用以
https://开头的绝对 URL。使用相对路径时，部分平台可能无法正确解析 URL，导致分享数在不同页面间分散 - 省略 og:type。未设置 og:type 时 Facebook 会将其视为
website，但为博客文章指定article可以利用发布日期和作者信息等附加元数据
专业技巧
- 将最重要的信息放在 og:title 的前 20 个字符中。社交媒体时间线的滚动速度很快，开头就需要有吸引眼球的表达
- 在 OGP 图片中添加文字时，控制在图片面积的 20% 以内。Facebook 旧版广告政策曾限制文字面积超过 20% 的图片的触达范围，这一标准对 OGP 图片同样具有参考价值
- 在 og:description 开头放置行动号召短语。"立即查看""免费试用"等表达可以提升用户的点击意愿
- 进行 A/B 测试。为同一文章设置不同的 og:title，比较社交媒体上的点击率，找到最优表达。在 Facebook 分享调试器中更新 OGP 后，向不同群组分享并比较反馈是一种实用的方法
总结
OGP 文本优化是提升社交媒体流量的基础策略。og:title 以 40-45 字符、og:description 以 70-100 字符为目标，根据各平台的显示规格进行调整。OGP 标签可以独立于 HTML 的 title 标签和 meta description 进行设置，因此针对社交媒体使用差异化的优化表达非常重要。设置后务必使用 Facebook 分享调试器和 X Card Validator 确认显示效果。养成使用字符计数器预先检查字数的习惯，可以有效防止因字数超限导致的显示异常。