og:description必须手动设置且独立优化，不能由name="description"自动回退；需用property="og:description"，长度控制在155字符内，纯文本无html实体，服务端渲染确保首屏输出，各平台有专属校验工具。
og:description 必须手动写，不能靠 <meta name="description"> 自动 fallback，且内容需独立优化、长度精准控制。
og:description 不生效的常见原因
多数人以为写了 SEO 用的 <meta name="description"> 就够了，但 Facebook、LinkedIn、微信等平台完全不读这个标签——它们只认 property="og:description"。漏写、值为空、含 HTML 实体（如 ）、换行符或超长字符，都会导致平台静默降级：要么截断显示，要么回退到抓取页面第一个 <p></p> 或 <h1></h1>，结果不可控。
- 微信会前置截取前 50–80 字，建议核心信息放最前面
- Facebook 和 LinkedIn 显示上限约 155–160 字，超长会被省略号截断
- Twitter（X）不解析 og:description，它只读
twitter:description；若没写，才 fallback 到 og:description - 避免广告语、敏感词、URL 或邮箱——微信可能直接降权或屏蔽整条卡片
怎么写才符合各平台要求
og:description 是纯文本字段，不是 SEO 描述的复刻。它要完成的任务是：在用户点击前，用一句话说清“这页到底值不值得点”。所以得短、准、有钩子。
- 长度控制在
155字符内（可用str.length检查），英文按字符数，中文按 Unicode 码点算（一个汉字 = 1 字符） - 别写“欢迎访问我们的网站”，改写成“教你三步调试 React SSR 中的 OG 标签失效问题”
- 禁用
<br>、"等实体，全部替换为空格或删掉 - 动态页面（如 Next.js）中，必须由服务端注入真实内容，不能靠客户端 JS 拼接后塞进
document.head
服务端渲染时如何安全注入
CSR（客户端渲染）页面里用 useEffect + document.createElement 动态加 og:description，对所有社交爬虫都无效——它们不执行 JS。
- Next.js v13.4+：优先用
generateMetadata函数返回对象，其中description字段会自动转为og:description和twitter:description - Nuxt 3：用
useHead({ meta: [{ property: 'og:description', content: '...' }] })，但必须确保ssr: true（默认开启） - 静态站点（Vite + Markdown）：构建时用
vite-plugin-html插件，在模板中根据 frontmatter 的description字段生成对应<meta> - PHP/Node.js 后端：直接在 HTML 模板中输出，例如
<meta property="og:description" content="<?= htmlspecialchars($pageDesc, ENT_QUOTES, 'UTF-8') ?>">，防 XSS 同时保原文本
调试时容易忽略的细节
改完 og:description 后刷新页面看不到变化？不是代码没生效，而是平台缓存了旧卡片。每次修改后必须强制重抓。
- Facebook：用 Sharing Debugger 输入 URL → 点
Scrape Again，重点看 “Response Code” 是否为200，“Redirect Path” 是否有跳转 - LinkedIn：用 Post Inspector，它会标出
og:description字段是否被识别、长度是否超限 - 微信：没有官方工具，但可在 iOS 微信中长按链接 → “在 Safari 中打开” → 查看源码确认标签存在，再粘贴到 opengraph.xyz 做基础校验
- 注意：所有平台都不接受空格开头、尾部换行、
\n或\t—— 服务端输出前务必trim()
真正卡住人的从来不是怎么写这行 HTML，而是忘了它必须随页面 HTML 一起发出去、必须被爬虫第一眼看到、且不能有任何格式污染。哪怕多一个不可见的零宽空格（\u200B），都可能导致整段描述被丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
