og:url 和 og:type 缺一不可，否则社交平台因元数据不完整而 fallback；og:url 必须匹配实际分享链接且合法，og:type 仅限 website/article/profile；og:image 需 https 绝对路径、可外网访问、声明宽高；跨平台需补 twitter:card、twitter:title 等非 og 标签；所有 meta 必须服务端输出，且需用官方工具强制刷新缓存。
og:url 和 og:type 缺一不可，否则卡片直接 fallback
很多页面只写了 og:title 和 og:image，结果分享到 LinkedIn 或 Facebook 时标题正常但没图、没描述——根本原因是 og:url 和 og:type 没写，平台判定元数据不完整，直接退回到抓取 <title></title> 和首段文本。
必须确保这两项存在且值合法：
-
og:url必须是用户实际分享的 URL，含协议、大小写、尾部斜杠（如https://example.com/blog/），不能带 utm 参数或哈希 -
og:type常见值只有website、article、profile，填错（比如写成page或空字符串）会导致部分平台拒绝解析其余 og 标签 - 动态生成时，若后端拼接出
og:url=""或og:type="undefined"，整个 OG 块会被忽略——建议加服务端校验，空值 fallback 到默认页
og:image 不是“写了就行”，HTTPS + 绝对路径 + 尺寸声明三者要同时满足
90% 的图片不显示问题，不是链接失效，而是平台在加载前就因格式校验失败直接跳过。Facebook 和 Twitter 对 og:image 的检查比你想象中严格得多。
关键约束点：
-
og:image的值必须是完整 HTTPS 开头的绝对 URL，/images/cover.jpg或//cdn.example.com/xxx.jpg都无效 - 必须能被外网直接访问：微信 X5 内核、Facebook 爬虫不带 Referer，若你的 CDN 或 Nginx 启用了防盗链（比如只放行
yourdomain.com），会返回 403 - 显式声明
og:image:width和og:image:height（推荐1200和630），否则某些平台（如 Slack）会因比例未定而延迟渲染或降级为占位图 - 不要依赖
og:image:secure_url：它已废弃，且和og:image不一致时，LinkedIn 会拒绝加载
不同平台读取逻辑差异大，twitter:* 和 mp:wx:preview_image 不能省
以为写了全套 og:* 就能通吃所有平台？现实是 Twitter 只认 twitter:description，微信朋友圈基本无视 og:image，它们各自有优先级规则。
跨平台兼容必须补的非 og 标签：
-
twitter:card必须设为summary_large_image，否则 Twitter 默认用纯文本卡片 -
twitter:title和twitter:description要单独写，内容可微调（比如更短、加 emoji），Twitter 优先读这两个而非og:* - 微信公众号文章页才支持
mp:wx:preview_image；普通网页在微信内分享，微信根本不解析og:image，而是取页面第一个<img>或twitter:image—— 所以务必同时写twitter:image - 微博 fallback 到
meta name="description"，如果没写这个标签，它会截取正文 HTML，可能把导航栏或脚本注释当描述
改完代码不等于生效，缓存机制让调试必须走官方工具
本地刷新页面看到 meta 标签存在 ≠ 社交平台能抓到。Facebook 缓存卡片元数据最长 72 小时，微信无公开刷新机制，改完 HTML 后直接发链接，大概率还是旧卡片。
验证和强制更新的实操路径：
- Facebook：用 Sharing Debugger 输入 URL → 点
Scrape Again，重点看Response Code是否为 200、Redirect Path是否有跳转 - LinkedIn：用 Post Inspector，它会标出缺失字段和 HTTP 错误（如
og:image返回 404） - 微信：没有官方调试器，最可靠方式是 iOS 微信长按链接 → “在 Safari 中打开” → 查看源码确认标签是否真实输出；或用 opengraph.xyz 检查 HTML 结构（但不模拟微信抓取行为）
- 注意：所有平台都不执行 JS，
document.write或 React useEffect 注入的 meta 标签完全无效——必须服务端输出或静态生成
最常被忽略的其实是 og:url 和实际分享链接的一致性。同一个页面，用户分享带参数的链接（如 ?ref=twitter），而你写的 og:url 是无参版本，平台就会认为这是两个不同页面，缓存两套卡片，导致数据分散、统计错乱。动态站点必须在 SSR 阶段根据当前请求 URL 动态生成 og:url，而不是写死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
