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 状态码，而不是只看浏览器能不能打开。
