根本原因是社交平台爬虫未重新抓取页面，OG信息被缓存（最长24小时），需用Facebook Sharing Debugger点击“Scrape Again”强制刷新；同时确保meta标签位于head内、服务端渲染、图片为HTTPS绝对路径且满足尺寸/CORS/格式等硬性要求。
为什么加了 meta property="og:title" 还不显示卡片？
根本原因通常是页面没被社交平台的爬虫重新抓取。Facebook、LinkedIn 等不会实时监听 HTML 变更，而是缓存你页面的 OG 信息（有时长达 24 小时）。必须主动触发刷新。
实操建议：
- 用 Facebook 的 Sharing Debugger 输入 URL，点「Scrape Again」强制重抓——这是最直接有效的验证方式
- 确保
<meta>标签在<head>内且没有 JS 动态插入（OG 信息必须服务端渲染或静态存在） - 检查 HTTP 响应头：若返回
Cache-Control: no-cache或max-age=0，部分平台可能跳过缓存更新，反而导致旧数据残留 - 避免重复声明：同一
property出现多次（比如两个og:title），爬虫通常只取第一个
og:image 显示失败的 4 个硬性条件
不是“只要放个图片链接就行”。社交平台对 og:image 有明确校验逻辑，任一不满足就会回退到默认图或空白卡片。
必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 图片 URL 必须是**绝对路径**（
https://example.com/img/card.jpg），不能是相对路径（/img/card.jpg）或协议相对（//example.com/img.jpg） - 图片需支持 **CORS**：服务器响应头中必须含
Access-Control-Allow-Origin: *（尤其当图片放在 CDN 或不同域名时） - 尺寸建议 ≥ 1200×630 px；宽高比严格限制在 1.91:1 到 1:1 之间（Twitter 接受 2:1，但 Facebook 会裁切）
- 格式仅支持 JPG、PNG、GIF（不支持 WebP、AVIF）；文件大小 ≤ 8MB（推荐 ≤ 5MB 以保兼容）
微信、微博、钉钉各自认什么 meta 标签？
Open Graph 是通用标准，但国内平台基本不认 og: 前缀，而是依赖自有 meta 规则，且优先级高于 OG。
关键差异：
- 微信分享（iOS/Android 客户端内）：
— 必须提供<meta name="wx.config" content="...">？错。实际只读取：
<meta itemprop="name" content="标题">
<meta itemprop="image" content="https://...">
<meta name="description" content="摘要">（注意是name不是property） - 微博：
— 认og:title/og:description，但og:image无效；必须用<meta property="weibo:article:create_at" content="...">等扩展标签？不必要。实际最简有效组合是：
<meta name="weibo:card" content="summary_large_image">
<meta name="weibo:title" content="标题">
<meta name="weibo:image" content="绝对URL"> - 钉钉：
— 仅识别<meta name="dingtalk-title" content="...">和<meta name="dingtalk-description" content="...">；og:image会被忽略，必须额外加<meta name="dingtalk-image" content="...">
如何让同一份 HTML 同时适配多平台？
不用写判断逻辑或动态注入。纯静态 HTML 就能覆盖主流平台，关键是按优先级叠写 meta 标签，并利用平台解析规则的“短路”特性。
推荐写法顺序（从上到下）：
- 先写微信所需：
<meta itemprop="name" ...>、<meta itemprop="image" ...>、<meta name="description" ...> - 再写微博专用：
<meta name="weibo:title" ...>、<meta name="weibo:image" ...> - 然后写钉钉专用：
<meta name="dingtalk-title" ...>、<meta name="dingtalk-image" ...> - 最后补 Open Graph 全集：
<meta property="og:title" ...>、<meta property="og:image" ...>等
这样做的依据是：各平台爬虫只读取自己识别的 name 或 property，互不干扰；而像微信客户端会优先读 itemprop，微博读 name="weibo:*"，Facebook 读 property="og:*"。顺序本身不影响，但集中分组更易维护。
容易被忽略的一点：所有图片 URL 必须走 HTTPS，HTTP 协议的 og:image 在 iOS 微信、新版 LinkedIn 等环境会直接拒绝加载，且不报错——只能看到空白卡片。
