og:url 和 og:type 必须存在且准确,否则 Facebook、LinkedIn 会忽略全部 Open Graph 标签,仅回退抓取 title 和首段文本;og:url 需为与分享 URL 完全一致的 HTTPS 绝对路径,og:type 仅限 website/article/profile。

og:url 和 og:type 为什么必须存在且不能写错
缺这两个标签,Facebook、LinkedIn 会直接忽略其余所有 og:*,回退到抓取 <title> 和页面首段文本——你写的 og:image 和 og:description 全白搭。
常见错误包括:og:url 拼成相对路径(如 /article/123)、带 utm 参数(?utm_source=share)、尾部斜杠不一致(https://example.com/blog vs https://example.com/blog/);og:type 填了 page 或空字符串,而合法值只有 website、article、profile。
-
og:url必须和用户实际分享的 URL 完全一致,大小写、协议、斜杠都不能差 - 服务端生成时,若变量为空或未定义,建议 fallback 到首页 URL,避免输出
og:url="" - Next.js 的
generateMetadata中,openGraph.url接收字符串,不是对象;openGraph.type只能是字符串字面量,不能动态拼接
og:image 不显示的四个硬性条件必须同时满足
写了 og:image 却没图?90% 是因为只满足其中一两个条件,平台在解析阶段就跳过了整个字段。
必须全部满足:og:image 是 HTTPS 开头的绝对 URL;图片能被外网直接访问(Nginx 防盗链要放行爬虫 User-Agent 或允许空 Referer);显式声明 og:image:width 和 og:image:height(推荐 1200 和 630);格式为 JPG/PNG/GIF,文件大小 ≤ 5MB。
立即学习“前端免费学习笔记(深入)”;
- 相对路径
/img/share.jpg、协议相对路径//cdn.example.com/cover.png全无效 - CDN 图片需确认响应头含
Access-Control-Allow-Origin: *,否则 Facebook 爬虫加载失败 - 不要用
og:image:secure_url:已废弃,且与og:image不一致时,LinkedIn 直接拒载
Twitter 和微信根本不认 og:description
Facebook 和 LinkedIn 依赖 og:description,但 Twitter 只读 twitter:description,微信朋友圈则基本无视所有 og:* 标签——它优先取 <meta name="description">,其次才是 <meta itemprop="name"/> 和 <meta itemprop="image"/>。
这意味着:同一页面想在多平台正确展示,必须并存多套标签,且顺序无关紧要,但字段不能遗漏。
- Twitter 至少补
<meta name="twitter:card" content="summary_large_image">和<meta name="twitter:description" content="..."> - 微信内分享(非公众号)不走 Open Graph,静态页靠
<meta name="description">和首张<img>回退,所以这个name="description"标签不能省 - 微博 fallback 到
name="description",如果没写,它会截取页面 HTML 文本前 200 字——里面全是<script>注释就完蛋
改完 meta 标签后为什么还是旧卡片
不是代码没生效,是平台缓存了旧元数据。Facebook 缓存最长 24 小时,LinkedIn 可达 72 小时,微信无公开刷新机制——靠“重新发链接”完全没用。
唯一可靠方式是用官方调试工具强制重抓,并检查返回状态码和字段解析结果。
- Facebook:用 Sharing Debugger 输入 URL,点 Scrape Again;重点看
Response Code是否为200,Redirect Path是否有意外跳转 - LinkedIn:用 Post Inspector,它会标出缺失字段或无效 URL 状态码(如
403、404) - 微信没有调试器,但可在 iOS 微信中长按链接 → “在 Safari 中打开”,然后查看源码确认标签是否存在且值正确
最易被忽略的点:所有 og:* 和 twitter:* 标签必须由服务端渲染或静态 HTML 输出,JS 动态插入的 <meta> 对爬虫完全无效——它们不执行 JS。



















