微信分享卡片 — 微信分享不显示卡片？5行代码让网页变图文展示

Q: og:image没有显示怎么办？

最常见原因是图片路径不是绝对路径，或图片大小超过2MB。可以用微信官方调试工具 https://developers.weixin.qq.com/debug 输入网址查看实际抓取结果。

ivye
免费干货
8小时前
17热度
0评论

```html

最近我也遇到这事。

做好的页面分享到微信，居然只显示一串URL，连个图都没有。真的绝了。

说实话，一开始我还以为得申请公众号、接JS-SDK、搞签名验证。折腾半天才发现，完全没必要。

普通网站，加几行代码，微信就能自动抓取生成图文卡片。就这么简单。

微信为啥不显示卡片？

微信内置浏览器会读取网页 <head> 里的 Open Graph 标签。这是Facebook早年推出的协议，现在几乎成了分享标准的标配。

如果缺少这些标签，微信就不知道该显示什么标题、描述和图片，只能退而求其次，渲染成纯文本URL。

解决方法：加5行meta标签

在你每个页面的 <head> 里加上这几行：

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://你的域名.com/share.jpg">
<meta property="og:url" content="https://你的域名.com/当前页面.html">
<meta property="og:type" content="website">

og:image 有几个硬要求：

必须是绝对路径（以 https:// 开头），相对路径微信抓不到
不同页面用不同的标题和描述
建议尺寸 478×478 像素，文件 2MB 以内，格式JPG或PNG
正方形最稳妥，微信在不同场景裁剪时不会截掉关键内容

懒人方案：让AI帮你改

如果你用 Kimi Code、Claude Code 或 Cursor，直接把下面这段提示词丢给它就行：

请分析我当前项目的所有HTML页面（或模板文件），为每个页面添加Open Graph协议标签，使微信分享时自动生成图文卡片。

具体要求：
1.在每个页面的<head>标签内添加以下meta标签：
   - og:title：页面标题，不超过30字
   - og:description：页面描述，不超过60字
   - og:image：分享封面图URL，尺寸478×478像素，文件<2MB
   - og:url：当前页面的完整绝对URL
   - og:type：固定为website

2.og:image必须使用绝对路径。
3.如果页面已有<title>和<meta name="description">，优先复用它们的内容。
4.如果项目使用模板引擎（Vue/React/Next.js等），请在模板层面动态注入。
5.修改完成后，列出所有被修改的文件路径和变更说明。