多数社交平台抓取网页预览时不执行js，仅读取中静态open graph标签；缺失og:title、og:description、og:image三要素或og:image非绝对url、尺寸不足1200×630像素，将导致无图无标题。
为什么分享链接时没显示图片或标题
多数社交平台（微信、微博、Facebook、Twitter）抓取网页预览信息时，不解析 HTML 渲染结果，而是直接读取 中的 OpenGraph 元标签。如果缺失或写错，就会 fallback 到默认描述、无图、甚至抓取页面乱码文本。
关键点：OpenGraph 标签必须放在 内，且必须是静态 HTML 或服务端渲染输出——纯前端 JS 动态插入的 meta 标签基本无效（爬虫不执行 JS）。
-
og:title、og:description、og:image是最低限度三要素，缺一不可 -
og:image必须是**绝对 URL**（如https://example.com/img/share.jpg），相对路径或本地路径（/img/xxx.jpg）在多数平台被忽略 - 图片尺寸建议 ≥ 1200×630 px，否则可能被压缩变形或降权显示；文件大小建议 ≤ 5MB
- 微信内置浏览器对
og:url敏感——若与当前页面 URL 不一致，可能拒绝展示预览
如何验证 OpenGraph 标签是否生效
不能靠“刷新网页看效果”，必须用平台提供的调试工具实时检测原始抓取结果。
常用验证方式：
- Facebook：用 Sharing Debugger 输入 URL，点击 “Scrape Again” 强制重抓（注意：CDN 缓存可能延迟，需先清缓存或加时间戳参数）
- Twitter：用 Card Validator，只认
twitter:card等 Twitter 特有标签，但也会读取部分og:值作为 fallback - 微信：用「微信开发者工具」→「公众号网页调试」，或发链接到自己微信号，长按选择「查看详情」看是否出现卡片
- 通用检查：右键网页 →「查看页面源代码」→ 搜索
og:，确认标签存在、拼写正确、值非空
不同平台对 OpenGraph 的兼容差异
OpenGraph 是通用协议，但各平台支持程度和优先级不同，实际表现常有偏差。
- Facebook 严格依赖
og:image:width和og:image:height，缺这两个属性时，即使图片可访问，也可能不显示缩略图 - Twitter 优先使用
twitter:image，若未设置则 fallback 到og:image；但twitter:description不会 fallback 到og:description，必须显式声明 - 微信对
og:type有隐式要求：设为article更易触发图文卡片；设为website可能只显示标题+URL - 国内平台（如微博）识别
og:title和og:description较稳定，但对og:image:secure_url（HTTPS 图片）更敏感，HTTP 图片大概率被屏蔽
动态页面如何安全注入 OpenGraph 标签
单页应用（SPA）或 SSR 不足的场景下，容易误用客户端 JS 注入 meta，导致爬虫抓不到。真正可行的方式只有两种：
- 服务端渲染（SSR）：Node.js（Next.js/Nuxt）、PHP、Java 等在响应 HTML 时，根据路由或参数动态拼接
<meta property="og:title" content="..."> - 静态生成 + 构建时注入：如 VuePress、Hugo 在构建每个页面时，从 frontmatter 提取字段生成对应
og:标签 - 禁止做法：用
document.head.appendChild(...)或vue-meta等仅在浏览器运行的方案——除非你明确知道该页面只供用户手动分享，且接受预览失败 - 额外提醒：
og:url应始终等于当前页面可访问的真实 URL，不要写成带 hash 或 query 参数的临时地址，否则分享后跳转异常
og: 值必须经过 HTML 实体转义（比如把 & 写成 &），否则标签会被截断或解析失败。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
