必须在服务端html中静态写入og标签，因社交平台爬虫不执行js；微信要求og:image为https绝对url且≥300×300px；facebook、微信、微博、twitter对og支持差异大，需按平台适配。
不需要专门写 HTML OG 标签来“解决社交分享”，但不加或加错，分享到微信、微博、Facebook、Twitter（X）等平台时，大概率会显示默认标题、乱码描述、或缩略图缺失——这不是前端没渲染完的问题，是爬虫根本没抓到你想要的信息。
OG 标签必须放在
所有主流社交平台的分享预览爬虫（如 Facebook 的 facebookexternalhit、微信的 MicroMessenger UA）都是服务端直取 HTML，不执行 JS。这意味着：
-
<meta property="og:title">这类标签必须在首屏 HTML 中静态存在，不能靠 React/Vue 在客户端动态注入 - 如果你用 Nuxt/Next.js 等 SSR 框架，得确保
useHead或getServerSideProps真正输出了这些 meta 标签，而不是只在浏览器里 patch - 微信内嵌浏览器对
og:image特别敏感：必须是绝对 URL、HTTPS、尺寸建议 ≥ 300×300px，否则 fallback 到页面首张图片（可能拉伸或截断）
og:image 加载失败的常见原因和验证方式
分享后图挂了？先别改代码，用工具确认是不是真的没返回正确内容：
- Facebook 调试：直接访问
https://developers.facebook.com/tools/debug/，输入 URL，点 “Scrape Again” —— 它会显示实际抓到的og:值、HTTP 状态码、重定向链、图片响应头（比如是否含Content-Type: image/jpeg） - 微信调试：用「微信开发者工具」切换到「公众号网页调试」，或让朋友在微信里长按链接 → 「浮窗」→ 再点开，观察预览图是否加载成功
- 常见坑：
og:image指向相对路径（如/img/share.jpg），服务端未配置好静态资源 CORS（尤其跨域图片），或图片文件本身 404 / 权限为 403
微信朋友圈和微博对 OG 标签的支持程度差异
别以为写了全套 OG 就万事大吉——不同平台“认不认”差别很大：
- 微信朋友圈：基本只认
og:title、og:description、og:image，其他如og:url或og:type几乎无效；且强制要求og:image是 HTTPS 绝对地址 - 微博：优先读
weibo:card和weibo:title等自有 meta，OG 标签只是备选；如果没配微博专用标签，它会 fallback 到og:，但描述长度会被截成 140 字以内 - Twitter（X）：已弃用
twitter:*以外的 OG 行为，必须单独加name="twitter:card"、name="twitter:title"等，否则预览极简甚至无图
最常被忽略的一点：同一页面多个分享入口（比如文章页、商品页、用户主页）必须动态生成对应 OG 标签，而不是全站共用一套固定值。服务端模板或构建时静态生成容易漏掉这个逻辑，导致分享出去永远显示首页信息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
