如何让网站链接在微信里显示卡片

风之吻网站开发 2026-09-24 154

　　很多人把做好的产品页分享到微信，发现它显示为一串 URL，而不是图文卡片。

如何让网站链接在微信里显示卡片-第1张图片-风享汇

　　原以为，这需要申请微信公众号、接入微信 JS-SDK、后端生成签名。后来查了一下，发现完全不需要。普通网站只要加几行代码，微信就能自动抓取生成卡片。

原因

　　微信内置浏览器会读取网页 <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 自动修改

　　如果你用 CodeBuddy、Trae、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. 修改完成后，列出所有被修改的文件路径和变更说明。