关键是要在HTML的中正确添加Open Graph协议的标签：必须包含og:title、og:description、og:image（HTTPS绝对路径，1200×630）、og:url；推荐补充og:type、og:site_name、og:locale；注意图片协议、尺寸、CORS及URL一致性。
要让网页在微信、QQ、微博、Facebook 等平台分享时显示美观的标题、描述和图片，关键不是“HTML5 特性”，而是正确使用 Open Graph（OG）协议的 <meta> 标签——这些标签写在 里，对所有现代浏览器和主流社交平台都有效。
必须写的 4 个基础 OG 标签
这四个是绝大多数平台（包括微信内置浏览器、QQ、微博、钉钉等）识别分享卡片的最低要求，缺一不可：
-
<meta property="og:title" content="页面主标题，20字内最佳">—— 别用原内容，要专为分享优化，避免堆关键词 -
<meta property="og:description" content="简洁有力的摘要，60–80 字为宜">—— 不是 SEO 描述，是让人想点开的“钩子” -
<meta property="og:image" content="https://example.com/share.jpg">—— 必须是绝对路径 HTTPS 图片，推荐 1200×630 像素（宽高比 1.91:1），文件大小控制在 1MB 内 -
<meta property="og:url" content="https://example.com/page-path">—— 指向当前页规范 URL，确保无参数或统一处理 utm 参数
提升兼容性与点击率的加分项
加了这些，能更好适配微信公众号文章页、微博长链接、Facebook 动态流等场景：
-
<meta property="og:type" content="article">或"website"—— 微信会据此调整卡片样式（article更倾向显示作者+发布时间） -
<meta property="og:site_name" content="你的品牌名">—— 出现在标题下方小字，增强可信度 -
<meta property="og:locale" content="zh_CN">—— 明确语言地区，避免被误判为英文页 - 微信特别建议加：
<meta name="wx.config" content="...">不是 OG，但配合 JS-SDK 可定制分享文案（需后端签名）
常见踩坑点（微信最敏感）
很多页面分享图不显示、描述为空，几乎都栽在这几处：
立即学习“前端免费学习笔记（深入）”；
- 图片路径是相对地址（如
/img/share.png）或 HTTP 协议 —— 微信强制拒绝加载 - 图片尺寸严重变形（比如 400×400 正方形）—— 微信裁剪后只剩头像大小，文字糊成一片
-
og:url和实际访问 URL 不一致（含 hash、临时参数、重定向跳转）—— 导致缓存错乱，改了 meta 也不生效 - 服务端未配置 CORS 头（
Access-Control-Allow-Origin: *）—— 部分安卓微信版本会拒绝加载跨域图片
调试与预览工具
别靠反复发链接测试，用官方工具一次看清解析结果：
- 微信：用「微信开发者工具」→「公众号网页调试」粘贴 URL，实时看卡片渲染效果
- Facebook：[Sharing Debugger](https://developers.facebook.com/tools/debug/) —— 支持强制抓取最新 meta
- 微博：[微博开放平台调试器](https://open.weibo.com/tools/debug) —— 查看是否识别为文章/链接类型
- 通用检查：在 Chrome 打开网页 → 右键「查看页面源代码」→ 搜索
og:确认标签存在且值非空
