如何让网站链接在微信里显示卡片?
很多人做完网页、产品页面分享到微信时，都会遇到一个很烦的问题：链接直接变成光秃秃的 URL，没有预览图、没有标题、没有简介，观感差还没信任感。原本我以为要对接公众号、配置 JS-SDK、后端签名才能解决，后来实测发现根本不用这么麻烦，普通静态网页只需加几行 OG 标签，就能让微信自动生成精美图文分享卡片。
原因
微信内置浏览器会读取网页<head>里的 Open Graph 标签。如果缺少这些标签，它就不知道标题、描述和图片是什么，只能退而显示纯文本 URL。
做法
在网页<head>中加入以下 meta 标签：
<metaproperty="og:title"content="页面标题"> <metaproperty="og:description"content="页面描述"> <metaproperty="og:image"content="https://你的域名.com/share.jpg"> <metaproperty="og:url"content="https://你的域名.com/当前页面.html"> <metaproperty="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> 和 <metaname="description">，优先复用它们的内容。 4. 如果项目使用模板引擎（Vue/React/Next.js 等），请在模板层面动态注入。 5. 修改完成后，列出所有被修改的文件路径和变更说明。
两个注意事项
代码加好后，实际使用中还会遇到两种情况。
第一，直接粘贴的链接显示为纯文本。
如果你把链接复制粘贴到微信聊天框，它仍然显示为一串 URL，而不是卡片。这是因为微信对直接粘贴的链接默认按纯文本处理，只有通过内置浏览器打开后再分享，才会触发卡片抓取。
解决方式：把链接发到微信文件传输助手，长按这条消息 → 选择「搜一搜」→ 点击搜索结果里的「访问网页」。页面在微信内置浏览器打开后，点击右上角「···」→「分享给朋友」，这次弹出的就是图文卡片。微信搜索相当于给这个链接做了一次内容抓取，后续再分享，就会优先显示卡片形式。
第二，新网站被微信拦截。
如果你的域名是新的，或者首次在微信生态中传播，微信可能会弹出提示：”无法确认该网页的安全性，请谨慎访问”。这属于微信的安全机制，新域名容易被误判。
解决方式：到 微信公众平台 或 腾讯安全中心 提交申诉，申请恢复访问。通常填写域名、说明用途后，一到两个工作日即可解除。
总结
不需要公众号，不需要小程序，不需要后端。准备好一张 478×478 的图，加上几行<meta>标签，处理一下新域名的安全申诉，再用微信搜索”激活”一次即可。我在接 AI 应用落地的顾问和小型开发委托，有具体问题可以留言或私信。
以上关于如何让网站链接在微信里显示卡片?的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 如何让网站链接在微信里显示卡片?