如何在微信里分享网站链接时显示图文卡片而不是链接
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
故障现象：
网站网址分享到微信，发现它显示为一串 URL 网址，而不是图文卡片
诊断过程：
微信内置浏览器会读取网页 <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。正方形最稳妥，微信在不同场景下裁剪时不会截掉关键内容。
如果你用 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，而不是卡片。这是因为微信对直接粘贴的链接默认按纯文本处理，只有通过内置浏览器打开后再分享，才会触发卡片抓取。
解决方式：
把链接发到微信文件传输助手，长按这条消息 → 选择「搜一搜」→ 点击搜索结果里的「访问网页」。
页面在微信内置浏览器打开后，点击右上角「···」→「分享给朋友」，这次弹出的就是图文卡片。
微信搜索相当于给这个链接做了一次内容抓取，后续再分享，就会优先显示卡片形式。
第二，新网站被微信拦截。
如果你的域名是新的，或者首次在微信生态中传播，微信可能会弹出提示："无法确认该网页的安全性，请谨慎访问"。
这属于微信的安全机制，新域名容易被误判。
解决方式：
到 微信公众平台 或腾讯安全中心https://urlsec.qq.com提交申诉，申请恢复访问。
通常填写域名、说明用途后，一到两个工作日即可解除。
