og标签必须放在中、之后、之前；需硬编码于服务端渲染HTML中，不可用JS动态生成，且og:image须为可公开访问的绝对URL、尺寸建议1200×630像素。
og标签加在哪儿才生效
必须放在 里，且要在 <title></title> 之后、<link rel="canonical"> 之前（如果用了 canonical）。浏览器和爬虫只认这个位置，放错地方等于没写。
常见错误现象：og:title 显示成页面标题，og:description 被截断或为空——大概率是标签被塞进了 ，或者被 JS 动态插入（爬虫不执行 JS）。
- 别用 JavaScript 动态生成 og 标签，Facebook、Twitter、微信内置浏览器都不解析
- 服务端渲染（SSR）或静态 HTML 中硬编码最稳妥
- 多个
og:image？只取第一个，其余忽略
og:image 为什么总显示默认图
不是尺寸不对，就是路径不可访问。社交平台会用自己的服务器去抓取 og:image 的 URL，所以它必须满足：可公开访问、返回 200、Content-Type 是图片类型、不带重定向跳转。
使用场景：分享文章页、产品页时想展示高清封面图。但本地开发时用 http://localhost:3000/cover.jpg 肯定失败——爬虫根本连不上你的本机。
立即学习“前端免费学习笔记（深入）”；
- URL 必须是绝对地址，比如
https://example.com/img/cover.jpg，不能是/img/cover.jpg - 推荐尺寸 1200×630 像素（Facebook 最佳），最小不低于 600×315
- 避免 CDN 缓存 404 图片：先 curl -I 确认返回 200 和
Content-Type: image/jpeg
微信和微博对 og 标签支持很有限
微信内置浏览器基本只认 og:title、og:description、og:image 这三个，而且优先级低于它自己的 data-share 属性；微博则更倾向读 weibo:card 和 weibo:title 等私有 meta。
参数差异明显：og:url 在微信里几乎无效，它强制用当前页面 URL；而微博会把 og:description 截短到 200 字以内，不管你怎么设。
- 想在微信里控制分享文案？得额外加
<meta name="wxshare:title" content="..."> - 微博建议补上
<meta property="weibo:card" content="image">，否则可能降级为链接卡片 - 不要依赖
og:site_name—— 微信、微博、QQ 都不显示它
调试 og 标签的正确姿势
别靠手动分享再截图看效果。Facebook 有 Sharing Debugger，Twitter 有 Card Validator，它们会真实模拟抓取过程，并告诉你哪条标签被忽略、哪个图片下载失败、是否重定向了。
性能影响很小，但兼容性陷阱多：HTTP/2 下某些 Nginx 配置会吞掉 Content-Type 头；HTTPS 页面里引用 HTTP 图片会被微信直接屏蔽。
- 调试前先用
curl -I https://yourdomain.com检查响应头有没有X-Frame-Options: DENY（可能阻断预览） - Facebook Debugger 会缓存结果，改完标签后要点 “Scrape Again”
- 微信调试只能真机——开发者工具里的“网页调试”不走分享逻辑
最常被忽略的是：og 标签必须随 HTML 一起输出，不能靠后端模板条件判断漏掉某类页面；一旦漏了，分享出来就是裸链接。
