og:image 必须在 html 的 中、 之后且 之前硬编码为 https 绝对路径，配合显式宽高声明，并通过 ssr 动态生成，否则社交平台爬虫无法识别。
og:image 必须写在 里且位置严格
社交平台爬虫（如 facebookexternalhit/1.1、Twitterbot）只解析 HTML 初始响应的
内容，不执行 JS，也不渲染客户端框架补丁。哪怕你用 React/Vue 在 mounted 阶段动态插入<meta property="og:image">，它也完全无效。
必须满足三个位置条件：
-
<title></title>标签之后 -
<link rel="canonical">之前 - 绝对不能出现在
或通过document.head.appendChild()注入
验证方法：右键「查看网页源代码」，手动搜索 og:image；再用 curl -s https://yoursite.com/page | grep 'og:image' 确认服务端吐出的内容是否真实存在且位置合规。
图片 URL 必须是 HTTPS 绝对路径，且能被公开访问
相对路径（如 /images/share.jpg）、协议相对地址（如 //cdn.example.com/img.jpg）、本地地址（如 http://localhost:3000/img.jpg）全部失效。爬虫没有 base URL 上下文，无法解析。
正确写法只能是：
<meta property="og:image" content="https://example.com/images/2026-cert.jpg">
关键检查点：
- 用
curl -I https://example.com/images/2026-cert.jpg确认返回状态码是200 OK，不是403、404或重定向 - 响应头中必须含
Content-Type: image/jpeg或image/png；text/plain或空值会导致留白 - 微信 iOS 版和 LinkedIn 旧版不识别
image/webp，优先用 JPG/PNG - CDN 域名需开启 CORS，且不能被
robots.txt屏蔽（爬虫会遵守）
尺寸、宽高比、格式三者不达标，图就显示不出来
不是“能打开就行”，而是平台会主动校验。微信最严：尺寸 直接拒载；Facebook/LI 推荐 <code>1200×630（宽高比 1.91:1），低于 600×315 可能被降权或忽略。
务必显式声明尺寸，避免加载时闪烁或裁剪异常：
<meta property="og:image" content="https://example.com/images/2026-cert.jpg"><br><meta property="og:image:width" content="1200"><br><meta property="og:image:height" content="630">
常见坑：
- 图片本身是
1200×630，但服务器响应头里Content-Length错误或压缩失败，导致实际尺寸不符 - 用了带查询参数的 URL（如
?v=2.1.0），部分平台缓存策略混乱，可能抓到旧图或拒绝请求 - 微信只认第一个
og:image，不会 fallback 到第二张；LinkedIn 要求og:image和og:image:secure_url值必须一致，否则丢图
动态页面必须服务端渲染（SSR），不能靠前端拼接
新闻页、商品详情页这类 URL 带 ID 的页面（如 /news?id=123），og:image 的值必须随数据实时生成并硬编码进 HTML 响应体。PHP/Node.js/Nginx SSI 等服务端方案可行；Next.js 的 getServerSideProps、Nuxt 的 asyncData 也可行。
以下方式全部无效：
- 用
useEffect+document.querySelector('head').appendChild() - Vue 的
mounted钩子里操作meta标签 - 纯静态生成但没为每个新闻 ID 单独产出 HTML 文件
本质问题：爬虫不等 hydration，不等 JS 执行，只信第一口 HTML。漏掉 SSR，等于没配。
