必须添加og:title、og:type、og:url、og:image四个og标签，否则社交平台分享时无图无摘要；og:url和og:image需为绝对路径且可公开访问，服务端渲染最可靠。
OG标签不加，社交分享就只能显示网页标题和空白图
绝大多数社交平台（微信、微博、Facebook、LinkedIn）在用户粘贴链接时，会自动抓取页面里的 <meta property="og:xxx"> 标签来生成分享卡片。没加 OG 标签，平台就退而求其次：用 <title></title> 当标题、<meta name="description"> 当摘要、随便挑一张图片（甚至不显示图），体验非常差。
常见错误现象：
- 微信里点开分享链接，只显示“网页标题 | 网站名”，无图、无摘要
- 微博自动抓取到的是首页的描述，不是当前文章内容
- Facebook 调试工具报错
Missing required property "og:url"
必须加的 4 个 OG 标签：og:title / og:type / og:url / og:image
这四个是 Facebook Open Graph 协议强制要求的最低字段，缺一不可；其他平台（包括微信内嵌浏览器）也基本遵循这套规则。
实操建议：
-
og:title：别直接复用<title></title>，要控制在 60 字符内，避免被截断；中文注意全角空格也算字符 -
og:type：静态页用website，文章页推荐article（微信对article类型更友好，可能触发「阅读模式」） -
og:url：必须是当前页面的**绝对 URL**，且与用户实际访问地址完全一致（含https、www、尾部斜杠等），否则微信会判定为“非本域链接”而禁用预览图 -
og:image：必须是**可公开访问的绝对路径**（如https://example.com/img/share.jpg），相对路径或带 session 参数的 URL 会被忽略；推荐尺寸 1200×630 像素，最小不低于 600×315
微信特别认 twitter:card 和 weibo:webpage？其实不用
微信官方文档从未要求或支持 twitter:card；它只识别 Open Graph 标签（og:*）和自己的 jsapi 分享接口。微博虽曾用 weibo:webpage，但新版已降级为可选，优先读 og:title 和 og:description。
真正影响微信分享效果的关键点：
- 服务器必须允许微信爬虫（User-Agent 包含
MicroMessenger）访问该页面和og:image地址（不能 403 或跳登录） -
og:image的响应头需包含Content-Type: image/jpeg或image/png，不能是text/html（常见于 Nginx 配置漏写 MIME 类型） - 不要用 CDN 缓存了过期的 OG 图片——微信会缓存首次抓取结果，更新后需用 Facebook Sharing Debugger 或微信“网页开发者工具”里的“清除分享缓存”功能强制刷新
动态页面怎么生成 OG 标签？服务端渲染最稳
纯前端 Vue/React 页面，如果依赖 JS 注入 <meta>，微信和微博的爬虫大概率抓不到——它们不执行 JS，只解析初始 HTML 文本。
可行方案对比：
- SSR（Next.js / Nuxt / 服务端模板）：在 HTML 返回前就把
og:title、og:image拼进，100% 可靠 - 预渲染（Prerender.io / Puppeteer 静态快照）：适合小站，但维护成本高，图片 URL 易失效
- 服务端代理 + 动态重写：Nginx/Apache 根据 URL path 注入对应 OG 标签（需正则匹配，适合博客类固定结构）
- 纯前端硬扛：用
history.pushState后手动调用微信 JS-SDK 的updateAppMessageShareData，但仅限用户点击“转发给朋友”时生效，链接直接粘贴仍无效
最容易被忽略的是：本地开发环境常把 og:url 写成 http://localhost:3000，上线后忘了替换成正式域名——这种低级错误会导致所有分享卡片都指向本地地址，且很难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
