open graph 标签不生效主因是 og:url 和 og:type 缺失或非法，二者必须同时存在且合规：og:url 需与分享 url 完全一致，og:type 仅限 website/article/profile；og:image 需 https 绝对路径、可外网访问、声明宽高、格式为 jpg/png/gif；各平台解析规则不同，需单独适配；调试须用官方工具强制重抓，js 动态注入无效。
Open Graph 标签不生效，90% 是因为 og:url 和 og:type 缺失或值非法——不是“写了就行”，而是平台一发现这两项不合规，直接放弃解析其余 og:* 标签，退回到抓取 <title></title> 和首段文本。
og:url 和 og:type 必须同时存在且合法
这两个字段是 Open Graph 协议的“门禁”，缺一不可。Facebook、LinkedIn、Twitter 都会先校验它们，失败则整块 og:* 被忽略。
-
og:url必须与用户实际分享的 URL 完全一致：协议（https://）、域名大小写、路径尾部斜杠（/blog/≠/blog）、无utm_*或ref=等参数 -
og:type只能填标准值：website、article、profile；填page、post或空字符串会被部分平台拒绝 - 动态页面中常见错误：
og:url拼出https://example.com/?id=123#top，或后端模板里输出og:type="undefined"—— 建议服务端加非空校验，fallback 到website
og:image 不是贴个链接就完事
它被静默忽略的概率远高于报错，原因全是硬性约束未满足。
- 必须是 HTTPS 开头的绝对 URL：
https://example.com/img/cover.jpg✅，/img/cover.jpg❌，//cdn.example.com/xxx.jpg❌ - 图片需可被外网直接访问：Nginx 或 CDN 若启用了 Referer 白名单（如只放行
yourdomain.com），微信 X5 内核和 Facebook 爬虫会返回 403 - 必须声明尺寸：
<meta property="og:image:width" content="1200">+<meta property="og:image:height" content="630">，否则 Slack 等平台可能延迟渲染或降级 - 格式仅支持 JPG、PNG、GIF（静态）；WebP 在 Twitter 已支持，但 Facebook 当前仍不认；SVG、AVIF 全部无效
不同平台根本不共享同一套标签
以为一套 og:* 能通吃所有渠道，是失效最频繁的认知偏差。
- Twitter 完全不读
og:type，但强制要求<meta name="twitter:card" content="summary_large_image">，且必须配twitter:image，否则只显示纯文本 - 微信基本无视
og:image，优先取页面第一个<img>；若要指定，得加<meta name="mp:wx:preview_image" content="https://..."> - 微博只认
<meta name="weibo:card" content="summary_large_image">+<meta name="weibo:image" content="..."> -
twitter:title和twitter:description不能复用og:title值——它们长度限制、截断逻辑、敏感词过滤规则都不同
调试必须用官方工具重抓，刷新页面毫无意义
所有主流平台都会缓存 OG 元数据长达 24–72 小时，改完 HTML 后本地刷新看不到效果。
- Facebook：用 Sharing Debugger，输入 URL 后点 Scrape Again，重点看
Response Code是否为 200、Redirect Path是否跳转 - LinkedIn：用 Post Inspector，它会标出
og:image返回 403 还是 404 - 微信没有公开调试器，但可在 iOS 微信中长按链接 → “在 Safari 中打开” → 查看源码确认标签是否存在；第三方工具如
opengraph.xyz只能验 HTML，不模拟微信抓取逻辑 - 任何平台都不支持 JS 动态注入：
document.head.appendChild()插入的og:*标签对爬虫完全不可见，必须服务端输出或 SSR 渲染
最容易被忽略的是：所有 og:* 标签必须在 HTML 初始响应中完整存在，且 og:url 的合法性决定了整套元数据是否被当作“有效卡片”处理——其他字段再准，只要它错，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
