会，社交平台依赖Open Graph标签解析分享内容，未正确配置og:title、og:description、og:image会导致预览空白或乱码；微信要求og:image为HTTPS绝对路径且尺寸≥1200×630px，微博需手动刷新缓存，LinkedIn要求og:image与og:image:secure_url同时存在且一致。
会，而且影响非常直接——没有正确配置 og:title、og:description、og:image，社交平台抓取分享链接时大概率显示空白、乱码或默认页面内容。
为什么分享链接在微信/微博/LinkedIn里不显示预览图？
社交平台（包括微信客户端、Facebook、Twitter/X、LinkedIn）依赖 Open Graph（OG）标签解析网页元信息。它们不会执行 JavaScript，也不读取 <title> 或 <meta name="description">，只认 og: 前缀的 <meta> 标签。
- 微信内嵌浏览器（X5 内核）对
og:image要求严格：必须是 HTTPS 协议、尺寸建议 ≥ 1200×630 px、格式为 JPG/PNG、大小 ≤ 5MB；否则静默忽略， fallback 到页面首张图片（甚至不显示） - 微博会缓存 OG 信息，修改后需用其 调试工具 手动刷新，否则仍显示旧内容
- LinkedIn 不接受
og:image:secure_url单独存在，必须与og:image同时提供且值一致，否则图片加载失败
哪些 OG 标签是必须加的？
最低可用组合只有三个，缺一不可：
-
og:title：纯文本，建议 ≤ 60 字符（微信显示截断明显） -
og:description：纯文本，建议 ≤ 120 字符（微博限制更严，超长会被省略） -
og:image：必须是绝对 URL（如https://example.com/assets/share.jpg），不能是相对路径或 base64
其他推荐补充：
立即学习“前端免费学习笔记（深入）”；
-
og:url：指定 canonical 分享地址（防止参数干扰，如?utm_source=xx） -
og:type：常用website或article，影响 LinkedIn 卡片样式 -
og:locale：如zh_CN，避免 Facebook 错判语言导致翻译异常
常见错误写法和调试方法
以下写法看似合理，实际会导致社交平台完全无法识别：
- 把
og:image写成<meta property="og:image" content="share.jpg">（路径非绝对） - 在 Vue/React SSR 中漏掉服务端渲染 OG 标签，仅靠客户端 JS 注入（社交爬虫不执行 JS）
- 使用
og:image:width/og:image:height但值不是整数（如带小数点或单位），部分平台直接丢弃整条 image 配置 - 在
<head>外写 OG 标签（例如放在<body>里），所有平台均无视
调试建议：
- 微信：用「微信开发者工具」→「公众号网页调试」或发链接到「文件传输助手」观察预览
- Facebook：用 Sharing Debugger，注意点「Scrape Again」强制刷新缓存
- 通用检查：用 curl 查看原始 HTML 是否包含正确标签：
curl -s example.com | grep 'og:title'
真正卡住人的往往不是“要不要加”，而是图片协议、路径、缓存这三个点反复出错。尤其当站点启用了 CDN 或代理层，og:image 的 URL 必须能被外部网络直连访问——本地开发时一切正常，上线后全白屏，八成是这个原因。
