必须显式设置og:title、og:description、og:image，否则社交平台分享卡片将退化或报错；og:url需规范化且与当前url一致；各平台标签不可互换，须按规范分别配置。
og:title、og:description、og:image 必须显式设置
社交平台抓取分享卡片时，如果缺少这三个基础字段，多数会退化为默认标题+页面首段文字+随机图片，甚至显示为空白卡片。Facebook Debugger 和 Twitter Card Validator 都会直接报 Missing required property 错误。
实操建议：
-
og:title建议控制在 60 字符内，避免被截断；不要动态拼接 URL 参数或未转义的用户输入 -
og:description最好在 155–160 字符之间，适配 Facebook 和 LinkedIn 的显示长度 -
og:image必须是绝对 URL（如https://example.com/assets/share.jpg），相对路径会被忽略；推荐尺寸 1200×630 像素，格式优先用 JPG 或 PNG；需确保该图片可被公开访问（无登录拦截、CORS 限制或 robots.txt 屏蔽）
不同平台对 og:type 和 card 类型的处理差异
Facebook 依赖 og:type（如 article、website）决定卡片布局逻辑，而 Twitter 完全不读这个字段，只认自己的 twitter:card。两者共存时不能互相替代。
常见错误现象：只加了 og:type 却没设 twitter:card，结果推特分享出来是纯链接无图；或者把 twitter:card 设成 summary_large_image 却没配 twitter:image，导致大图失效。
实操建议：
- Facebook 场景下，
og:type推荐设为article（内容页）或website（首页），避免用自定义类型除非已通过 Facebook App 验证 - Twitter 必须显式声明
twitter:card：静态图用summary_large_image，纯文本用summary；且必须同步提供twitter:title、twitter:description、twitter:image - LinkedIn 主要依赖
og:title、og:description、og:image和og:url，不识别twitter:系列标签
og:url 必须指向规范化的最终页面地址
如果页面存在多个可访问路径（如带 trailing slash / 不带、含 utm 参数、有 A/B 测试 query），而 og:url 指向其中一个非主版本，会导致分享后点击跳转到非预期页面，甚至被平台判定为重复内容。
性能与兼容性影响：部分爬虫（如 LinkedIn Bot）会以 og:url 为基准重新发起请求，若该 URL 返回 301/302，可能中断解析或缓存错误快照。
实操建议：
-
og:url应与浏览器地址栏当前 URL 一致（服务端渲染时需动态输出），禁止硬编码为首页或模板占位符 - 所有 query 参数（如
?ref=share）应在生成og:url前过滤掉，只保留语义化路径 - 务必确保
og:url返回状态码为 200，且响应中仍包含相同的og:url值（避免循环重定向）
调试时别只信“预览正常”，要验证实际抓取行为
Facebook Sharing Debugger 显示“Success”不代表真实用户分享时一定正确——它会缓存元数据长达 24 小时，且不模拟移动端或旧版客户端的解析逻辑。更隐蔽的问题常出现在微信内置浏览器、Discord 或 Slack 中，它们用的是自研解析器，对标签顺序、大小写、空格容忍度更低。
容易踩的坑：
- 把
og:image:width和og:image:height写成字符串（如"1200"）而非纯数字，部分解析器会静默忽略整组 image 属性 - 在
中混用property和name属性（如<meta name="twitter:title">写成<meta property="twitter:title">），Twitter 要求严格使用name - 服务端渲染时漏掉异步加载的内容（如 React SSR 后由 JS 补充的
og:image），爬虫无法执行 JS，只会读取初始 HTML
复杂点在于：没有统一标准规定哪个字段优先级更高，各平台自行实现解析逻辑。最稳妥的方式是每次上线前，用三台设备分别打开 Facebook Debugger、Twitter Card Validator、以及微信中粘贴链接测试真机渲染效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
