og标签缺失或错误会导致社交平台抓取失败、显示空白；需在html head中静态写入og:title、og:description、og:image（绝对url、≥1200×630px、公开可访问）等基础标签，并用官方调试工具验证与强制重抓。
OG 标签本身不决定兼容性，但缺失或写错会直接导致社交平台抓取失败、显示空白或默认内容。
为什么分享链接后没图没标题？
绝大多数社交平台（微信、微博、LinkedIn、Facebook、Twitter/X）依赖 og:title、og:description、og:image 这三个基础标签生成卡片。如果它们缺失、路径错误、尺寸/格式不达标，或者服务器返回 404/跨域/CORS 拒绝，平台就无法渲染正确预览。
-
og:image必须是绝对 URL（如https://example.com/img/share.jpg），相对路径会被忽略 - 图片建议 ≥ 1200×630 px，小于 300×157 px 可能被微信等平台降级为纯文字卡片
- 图片需支持公开访问：不能带登录态校验、不能是本地
file://或开发环境localhost地址 - 微信内分享还额外依赖
twitter:card和twitter:image（部分版本），建议一并补全
HTML 中怎么加才有效？
必须放在 内，且在首次 HTML 响应中静态存在（SSR 渲染或服务端注入）。纯前端 JS 动态插入的 OG 标签对爬虫无效——因为社交平台的爬虫不执行 JS。
- 用
<meta property="og:title" content="页面标题">，不是name属性 -
og:type推荐设为website（通用）或article（博客类），避免空值或错拼成webiste - 务必加
og:url，它决定卡片点击后跳转的目标地址，不写可能跳到首页或错误路径 - 中文内容注意编码：确保 HTML 声明了
<meta charset="utf-8">，否则og:description可能乱码
怎么验证有没有生效？
别靠“点一下试试”，要用平台官方调试工具实时看抓取结果：
- Facebook：用 Sharing Debugger 输入 URL，点 “Scrape Again” 强制刷新缓存
- Twitter/X：用 Card Validator，注意它只认
twitter:*标签，但会 fallback 到og:* - 微信：用 微信公众号开发者工具 的“网页调试”功能，或发给测试号查看实际效果
- 所有平台都缓存 OG 数据（几小时到几天不等），改完必须主动触发重抓，否则看不到更新
真正容易被忽略的是缓存和路径：哪怕标签全对，只要 og:image 指向的图片 URL 返回了 302 跳转、或 CDN 配置了 referer 限制、或 Nginx 把 /img/ 路径代理错了，卡片照样白屏。先查图片 URL 是否能直接在浏览器打开，再查响应头里有没有 X-Robots-Tag: noindex 或 Content-Security-Policy 拦截了外域请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
