og:url 和 og:type 必须存在且准确，否则 facebook、linkedin 会忽略全部 open graph 标签，仅回退抓取 title 和首段文本；og:url 需为与分享 url 完全一致的 https 绝对路径，og:type 仅限 website/article/profile。
og:url 和 og:type 为什么必须存在且不能写错
缺这两个标签，Facebook、LinkedIn 会直接忽略其余所有 og:*，回退到抓取 <title></title> 和页面首段文本——你写的 og:image 和 og:description 全白搭。
常见错误包括：og:url 拼成相对路径（如 /article/123）、带 utm 参数（?utm_source=share）、尾部斜杠不一致（https://example.com/blog vs https://example.com/blog/）；og:type 填了 page 或空字符串，而合法值只有 website、article、profile。
-
og:url必须和用户实际分享的 URL 完全一致，大小写、协议、斜杠都不能差 - 服务端生成时，若变量为空或未定义，建议 fallback 到首页 URL，避免输出
og:url="" - Next.js 的
generateMetadata中，openGraph.url接收字符串，不是对象；openGraph.type只能是字符串字面量，不能动态拼接
og:image 不显示的四个硬性条件必须同时满足
写了 og:image 却没图？90% 是因为只满足其中一两个条件，平台在解析阶段就跳过了整个字段。
必须全部满足：og:image 是 HTTPS 开头的绝对 URL；图片能被外网直接访问（Nginx 防盗链要放行爬虫 User-Agent 或允许空 Referer）；显式声明 og:image:width 和 og:image:height（推荐 1200 和 630）；格式为 JPG/PNG/GIF，文件大小 ≤ 5MB。
- 相对路径
/img/share.jpg、协议相对路径//cdn.example.com/cover.png全无效 - CDN 图片需确认响应头含
Access-Control-Allow-Origin: *，否则 Facebook 爬虫加载失败 - 不要用
og:image:secure_url：已废弃，且与og:image不一致时，LinkedIn 直接拒载
Twitter 和微信根本不认 og:description
Facebook 和 LinkedIn 依赖 og:description，但 Twitter 只读 twitter:description，微信朋友圈则基本无视所有 og:* 标签——它优先取 <meta name="description">，其次才是 <meta itemprop="name"> 和 <meta itemprop="image">。
这意味着：同一页面想在多平台正确展示，必须并存多套标签，且顺序无关紧要，但字段不能遗漏。
- Twitter 至少补
<meta name="twitter:card" content="summary_large_image">和<meta name="twitter:description" content="..."> - 微信内分享（非公众号）不走 Open Graph，静态页靠
<meta name="description">和首张<img>回退，所以这个name="description"标签不能省 - 微博 fallback 到
name="description"，如果没写，它会截取页面 HTML 文本前 200 字——里面全是<script></script>注释就完蛋
改完 meta 标签后为什么还是旧卡片
不是代码没生效，是平台缓存了旧元数据。Facebook 缓存最长 24 小时，LinkedIn 可达 72 小时，微信无公开刷新机制——靠“重新发链接”完全没用。
唯一可靠方式是用官方调试工具强制重抓，并检查返回状态码和字段解析结果。
- Facebook：用 Sharing Debugger 输入 URL，点 Scrape Again；重点看
Response Code是否为200，Redirect Path是否有意外跳转 - LinkedIn：用 Post Inspector，它会标出缺失字段或无效 URL 状态码（如
403、404） - 微信没有调试器，但可在 iOS 微信中长按链接 → “在 Safari 中打开”，然后查看源码确认标签是否存在且值正确
最易被忽略的点：所有 og:* 和 twitter:* 标签必须由服务端渲染或静态 HTML 输出，JS 动态插入的 <meta> 对爬虫完全无效——它们不执行 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
