og:title、og:description、og:image 必须显式声明且缺一不可，社交平台爬虫不回退到HTML默认标签；og:url需与分享URL完全一致并动态生成；Twitter Card标签须与Open Graph共存；国内平台需单独适配。
og:title、og:description、og:image 必须显式声明，缺一不可
社交平台爬虫（Facebook、LinkedIn、Twitter）不 fallback 到 <title> 或 <meta name="description">，而是直接报错或退化为无意义文本。比如 Facebook Sharing Debugger 会明确提示 Missing required property 'og:title'。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
og:title控制在 60 字符内，避免被 Twitter 或 Slack 截断；不要带模板变量（如{{ title }}）或未转义的用户输入 -
og:description建议 155–160 字符，内容需独立优化——它不是 SEO 描述的复用，而是面向点击前预览场景的“第一句话说服力” -
og:image必须是 HTTPS 绝对 URL（如https://example.com/img/card.jpg），相对路径、//协议相对路径、http://都会被忽略
og:url 必须与分享目标 URL 完全一致，且服务端静态输出
og:url 不是“你想让它显示什么”，而是“用户实际点击后该跳转到哪”。如果页面有多个可访问路径（如 /article/123 和 /article/123/、带 ?utm_source=share），而 og:url 指向其中任意一个非规范版本，会导致平台缓存错误快照、点击跳转异常、甚至判定为重复内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁止硬编码
og:url（如写死成https://example.com/）；服务端渲染时必须从当前路由或数据源动态生成 - 所有 query 参数（
?ref=、&v=2）应在生成前过滤，只保留语义化路径 - 确保该 URL 返回 HTTP 200 状态码，且响应 HTML 中仍含相同
og:url值（避免重定向链中断解析） - 配合
<link rel="canonical">使用，二者值必须严格一致
Twitter Card 标签不能省略，且必须与 og: 标签共存而非互换
Twitter 完全不读 og:type 或 og:image:alt，只认自己的 twitter:* 系列标签。只加 og:image 不加 twitter:image，结果就是推特分享出来没图；设了 twitter:card=summary_large_image 却漏掉 twitter:title，卡片会降级为纯链接。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时提供：
<meta name="twitter:card" content="summary_large_image">、<meta name="twitter:site" content="@YourHandle">、<meta name="twitter:title">、<meta name="twitter:description">、<meta name="twitter:image"> -
twitter:image和og:image可指向同一张图，但必须分别声明；不能只靠 Open Graph “顺便兼容” Twitter - 国内平台（微信、微博）基本不认
og:前缀：微信优先读<meta itemprop="name">和<meta itemprop="image">，微博则依赖<meta name="weibo:card">，不能假设一套标签通吃
验证必须用平台调试工具强制重抓，不能刷页面看效果
Facebook、LinkedIn 等平台缓存 OG 数据长达 24–72 小时，改完 HTML 后刷新浏览器毫无意义。更隐蔽的问题是：部分平台（如 LinkedIn Bot）会以 og:url 为基准重新发起请求，若该地址返回 301/302 或 404，就会中断解析并缓存失败状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Facebook：用 Sharing Debugger 输入 URL → 点
Scrape Again；注意检查Redirect Path和Response Code - LinkedIn：用 Post Inspector，它会标出
og:image的 HTTP 错误码（如 403 表示权限拒绝） - 微信：无官方调试器，iOS 微信中长按链接 → “在 Safari 中打开” → 查看源码确认标签存在；或用 opengraph.xyz 检测 HTML 结构（仅检测，不模拟抓取）
- 务必确保图片服务器响应头含
Access-Control-Allow-Origin: *，尤其当图放在 CDN 或不同域名时
