面向社交网络传播优化的HTML Open Graph标签配置方案

og:title、og:description、og:image三者必须显式写死在HTML初始响应中且缺一不可，否则平台抓取时报错；og:title≤60字符，og:description155–160字符，og:image须为HTTPS绝对URL且尺寸1200×630像素。

og:title、og:description、og:image 必须显式写死在里

这三者缺一不可，不是“写了就生效”，而是平台抓取时直接校验——Facebook Sharing Debugger 会报 Missing required property，Twitter Card Validator 同样拒绝解析。常见错误是只设 <title> 和 <meta name="description">，但社交爬虫根本不读它们。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• og:title 控制在 ≤60 字符，避免被 Twitter 或 Slack 截断；别用模板变量如 {{ pageTitle }}，服务端必须渲染成真实文本
• og:description 建议 155–160 字符，面向点击前的预览场景，不是 SEO；中文站点尤其注意别混入全角空格或换行符，会导致截断或乱码
• og:image 必须是 HTTPS 绝对 URL（如 https://example.com/img/cover.jpg），相对路径、// 协议、data: 或本地 file:// 全部失效

og:url 必须与用户实际分享的链接完全一致

这是卡片静默失效最隐蔽的原因：哪怕只差一个尾部斜杠、大小写差异、或多了 ?utm_source=weibo，平台就会用你声明的 og:url 重新发起请求，结果可能抓到首页、404 或旧缓存。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 动态页面（如 Next.js、Nuxt）不能读 window.location.href，必须从路由参数或数据源提取 canonical 地址
• 服务端需过滤所有非语义 query 参数（ref、utm_*、ab_test 等），只保留路径部分
• 确保 og:url 返回状态码为 200，且响应头不含 Transfer-Encoding: chunked（Express 默认启用流式响应，需手动设 res.setHeader('Transfer-Encoding', 'identity')）

微信和 Twitter 不认 og:image，得额外配 twitter:image

微信 X5 内核基本忽略 og:image，优先读 twitter:image 或页面第一个 <img>；Twitter 则只认自己的 twitter:* 标签体系，og:type 对它完全无效。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 必须同时写 <meta name="twitter:card" content="summary_large_image"> 和 <meta name="twitter:image" content="https://example.com/img/twitter-cover.jpg">
• twitter:image 尺寸建议 1200×1200（正方形），适配微信朋友圈缩略图；而 og:image 保持 1200×630（宽屏）供 Facebook/LinkedIn 使用
• 微信还需检查图片服务器是否允许无 Referer 请求——若启用了 Referer 白名单，X5 内核抓图必返回 403

客户端 JS 注入 og 标签等于没写

React/Vue 的 useEffect 或 mounted 里用 document.head.appendChild() 动态加 <meta property="og:xxx">，对 Facebook、LinkedIn、微信、QQ 全部无效。爬虫不执行 JS，只解析初始 HTML 响应体。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• Next.js v13.4+ 用 generateMetadata 函数返回对象，框架自动注入静态 <meta>
• Nuxt 3 用 useHead({ meta: [] })，但确认 ssr: true（默认开启，手动关了就白配）
• 纯静态站点（Vite + Markdown）靠构建时插件（如 vite-plugin-html）注入，不是运行时逻辑

真正卡住效果的，往往不是标签漏没漏，而是 og:url 和分享链接差了一个斜杠，或是 og:image 被防盗链拦住却没报错——得用 curl -I 直接测图片 URL 状态码，而不是只看浏览器能不能打开。