必须在服务端html的中静态输出og:url、og:title、og:description、og:image、og:type五个标签，且og:url须与分享链接完全一致（https绝对url），og:image需外网可直访并满足尺寸与格式要求，各平台解析规则不同，须用官方调试工具强制刷新缓存。
直接写对 og:url、og:title、og:description、og:image 和 og:type 这五个标签，且全部在服务端输出的 HTML 里静态存在，才能让 Facebook、LinkedIn 等平台正确抓取预览——少一个或写错位置，大概率 fallback 到乱码标题+首段文字+无图。
og:url 必须和用户实际分享的链接完全一致
这不是“差不多就行”的事。平台会拿你写的 og:url 去重新发起一次 HTTP 请求，如果它和用户粘贴的链接不一致（哪怕只差一个斜杠、大小写、或多了 ?utm_source=weibo），就可能抓到首页、404 页面，或缓存旧快照。
-
og:url必须是 HTTPS 开头的绝对 URL，不能是/blog/123或//cdn.example.com/img.jpg - 动态页面需在服务端剥离 query 参数，只保留语义化路径，比如把
https://example.com/article?id=42&ref=share规范为https://example.com/article/42 - 不要硬编码成首页地址；也不要读
window.location.href—— 客户端 JS 不会被爬虫执行 - 检查最终返回的 HTML 源码（右键 → “查看网页源代码”），确认
<meta property="og:url" content="...">的值和你分享出去的链接一字不差
og:image 不是“写了就能显示”，而是要过三关
90% 的图片不显示问题，不是路径写错，而是卡在服务器响应环节：平台在加载前就因校验失败跳过了这张图。
- 必须是 HTTPS 绝对 URL，
file://、data:、相对路径全无效 - 图片文件需能被外网直接访问：禁用防盗链（Nginx 中避免
valid_referers拦截facebook.com）、响应头含Access-Control-Allow-Origin: *、返回状态码是200 OK（不是302跳转或403） - 推荐尺寸为
1200×630像素（宽高比 1.91:1），并显式声明<meta property="og:image:width" content="1200">和<meta property="og:image:height" content="630">，否则 Slack 等平台可能延迟渲染或降级 - 格式只用
.jpg或.png；WebP 在 LinkedIn 和部分老版 Facebook 上仍不稳定
不同平台读的不是同一套标签
以为写全 og:* 就万事大吉？微信基本无视 og:image，Twitter 只认 twitter:description，LinkedIn 不看 twitter:* —— 它们各自有优先级规则，混用但不能替代。
- Facebook / LinkedIn：依赖
og:title、og:description、og:image、og:url、og:type（值只能是website或article） - Twitter：必须加
<meta name="twitter:card" content="summary_large_image">，且同步提供twitter:title、twitter:description、twitter:image；它不读og:description - 微信：静态
og:*标签基本无效；需调用 JS-SDK 的updateAppMessageShareData，且前提是已配置安全域名并引入官方 SDK - 避免在
里混写name="description"和property="og:description"—— 同一含义字段只留一个，优先用property（Open Graph） +name（Twitter）并列
验证必须用平台调试工具，而不是刷新页面
改完 HTML 后本地看源码没问题，不代表平台已更新——它们缓存卡片元数据长达 24–72 小时，且不会主动重抓。
- Facebook：用 Sharing Debugger 输入真实分享链接，点 Scrape Again；重点看
Response Code是否为200、Redirect Path是否异常、og:image是否标记为Invalid - LinkedIn：用 Post Inspector，它会明确标出缺失字段或图片 HTTP 错误码（如
404或403） - 微信：没有官方调试器；可在 iOS 微信中长按链接 → “在 Safari 中打开” → 查看源码确认标签存在；或用 opengraph.xyz（仅检测 HTML，不模拟微信抓取）
- 别信“清浏览器缓存”或“换设备测试”——这些对平台缓存完全无效
最常被忽略的其实是 og:type 和 og:url 的合法性校验：填空、填错类型（比如 page）、或服务端输出了 og:url=""，会导致整个 OG 块被平台静默丢弃——连 fallback 都不给你机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
