根本原因是open graph标签缺失或属性值不合法，导致社交平台爬虫fallback到title、description或正文；og:image必须为https绝对url且尺寸合规，og:url须与当前页面真实url完全一致，所有og标签须在head内静态声明。
为什么分享到微信/微博后卡片没图或标题错
根本原因是 Open Graph 标签缺失或属性值不合法，社交平台爬虫抓取时 fallback 到页面 <title></title> 和 <meta name="description">，甚至直接截取正文前几句。微信内置浏览器对 og:image 尤其敏感——尺寸不对、路径相对、HTTP 协议不匹配都会导致图片不显示。
og:image 必须是绝对 URL 且支持 HTTPS
常见错误是写成 <meta property="og:image" content="/assets/thumb.jpg"> 或 http://example.com/thumb.jpg。微信/QQ/微博等平台强制要求 HTTPS，且不解析相对路径。
- 正确写法：
<meta property="og:image" content="https://example.com/assets/thumb-1200x630.jpg"> - 图片尺寸建议至少
1200×630像素（Facebook 推荐），宽高比 1.91:1；微信对最小尺寸要求是300×300，但低于600×400容易被压缩失真 - 避免使用 CDN 参数签名（如
?v=123）或带 session 的动态 URL，部分平台缓存策略会失效
og:url 和 canonical 不一致会触发重定向警告
当用户分享的是带 query 参数的 URL（如 https://example.com/article?id=123），但 og:url 写成了无参地址（https://example.com/article），微博和 LinkedIn 可能报“URL 不匹配”，微信则可能抓取错误页面快照。
- 务必让
og:url与当前页面真实可访问 URL 完全一致（包括协议、域名、路径、query） -
<link rel="canonical">是给搜索引擎用的，和 Open Graph 无关；二者可以不同，但og:url必须真实有效 - 服务端渲染时注意：动态页需实时注入对应 URL，不能硬编码
调试时别只看网页源码，要模拟社交平台抓取
浏览器里右键“查看源代码”看到标签齐全，不代表生效——很多平台只认首屏 HTML 中的 OG 标签，JS 动态插入的 og: 元素会被忽略。
- 微信用 微信开发者工具 > 调试器 > Share 检查；微博用 微博调试工具；Facebook 用 Sharing Debugger
- 所有
og:标签必须在内，且不能包裹在<template></template>或<script></script>中 - 避免重复声明同一 property（如两个
og:title），平台通常只取第一个
最常被忽略的是 og:type ——不设默认为 website，但像文章页设成 article、视频页设成 video.movie，能让平台识别内容类型，影响卡片布局和交互样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
