博客建设 | Hexo微信分享显示卡片式链接

最近在分享个人博客链接的时候，发现微信分享显示的是一个文本链接，而不是卡片式链接，这样会导致分享的链接无法显示标题、图片等信息。为了解决这个问题，提升分享链接的用户体验，需要在Hexo博客中添加微信分享显示卡片式链接的代码。

不同分享方式

一、核心原理

  1. 微信安全校验，网站必须使用HTTPS协议，否则微信识别不出卡片。

  2. 微信分享卡片读取网页里的 4 个标签：

  • og:title：卡片标题
  • og:description：卡片简介
  • og:image：卡片缩略图（最关键，没有就不显示卡片）
  • og:url：博客链接

Open Graph 协议（OGP）是一种用于在社交媒体平台上分享网页内容的协议。拓展阅读：Open Graph 协议（OGP）

  1. 微信放开外部链接访问后，加了访问来源校验机制：
  • 聊天框直接点链接进入
    来源标记为「外部直链」，微信强制屏蔽 OG 卡片抓取，不管你 OG 标签多完美、HTTPS 多规范，一律只显示蓝色文字链接，不会出卡片。
  • 扫码 / 公众号菜单 / 收藏进入
    来源标记为「正规入口」，微信才会正常抓取 OG 标签、生成卡片。

二、解决方案

第一步 ：检查并修改Hexo博客核心配置

  1. 修改Hexo根目录_config.yml（统一HTTPS）

打开博客根目录的_config.yml文件，找到并修改以下配置，使用HTTPS协议：

1
2
3
# Hexo 主配置
url: https://mywebsite.cn  # 关键：改为HTTPS，替换成自己的域名
description: 你的博客简介  # 微信分享的默认描述，可自定义

  1. 修改Landscape主题head.ejs（配置完整OG标签）
    我的Hexo博客中，使用 landscape 主题默认没有og标签，所以微信识别不出卡片。
    路径：themes/landscape/layout/_partial/head.ejs，这是配置OG标签的核心文件，操作如下：
    删掉这一行：

    1
    <%- open_graph({twitter_id: theme.twitter, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %>

    替换成自定义OG标签：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <% 
      // 1. 生成分享图片 (优先文章封面 > 站点默认图)
      var ogImage = '';
      // 文章封面图 (在Markdown头部写: cover: /img/your-cover.jpg)
      if (page.cover) {
        ogImage = page.cover;
      } else {
        // 站点默认分享图 (自己上传一张到 source/img/og-default.jpg)
        ogImage = '/img/wechat-share.jpg';
      }
      // 转为绝对HTTPS地址
      if (!ogImage.startsWith('http')) {
        ogImage = config.url + ogImage;
      }

      // 2. 生成描述 (优先文章描述 > 站点描述)
      var ogDesc = page.description || config.description;

      // 3. 输出完整OG标签 (覆盖默认函数)
      %>
      <meta property="og:type" content="website" />
      <meta property="og:title" content="<%= page.title || config.title %>" />
      <meta property="og:description" content="<%= ogDesc %>" />
      <meta property="og:url" content="<%= page.permalink || config.url %>" />
      <meta property="og:image" content="<%= ogImage %>" />
      <meta property="og:site_name" content="<%= config.title %>" />

  2. 准备卡片缩略图

  • 图片要求：尺寸1200×630px（微信官方标准）、格式仅JPG（拒绝PNG、WebP）、大小≤500KB、无防盗链、无跨域；
  • 放置路径：在博客根目录的source文件夹下，新建img文件夹，将图片命名为wechat-share.jpg（与OG标签中的路径对应）；
  • 验证：浏览器直接访问https://你的域名/img/wechat-share.jpg，能正常打开即合格。

第二步 ：文章配置（让每篇文章都有专属卡片）

在你的 .md 文章最顶部这样写：

1
2
3
4
5
6
---
title: 文章标题
date: 2026-05-19
cover: /img/wechat-share.jpg  # 文章分享图
description: 这里写文章摘要，100字以内，微信会显示这句话
---

第三步 ：重新部署博客

在Hexo根目录下，执行以下命令重新部署博客：

1
2
3
4
5
hexo clean  # 清空缓存
hexo generate  # 重新生成博客
hexo deploy  # 部署到服务器
# 部署到腾讯云开发
tcb hosting deploy public -e 你的环境ID

第四步 ：解决微信平台限制

  • 方式 1：收藏法
    微信打开你的博客 https://你的域名
    点右上角「…」→ 收藏
    从「我的收藏」打开页面，再分享，100% 出卡片
  • 方式 2：二维码法
    把链接生成二维码，扫码进入分享，永久卡片。
  • 方式 3：公众号菜单法
    绑定公众号，把链接加到公众号自定义菜单，从菜单点开分享，必出卡片。
  • 方式 4：JS-SDK法（门槛高）
    接入微信JS-SDK，实现自定义分享卡片。需进行签名验证等操作，比比较复杂，可参考微信官方文档。
  • 微信JS-SDK文档

第五步 ：验证分享卡片

配置完成后，通过以下两步验证，确保卡片能正常显示：

  1. 网页源码验证：打开博客 → F12 → Elements → 搜索og:，能看到完整的OG标签，且og:image是HTTPS绝对地址；
    网页源码验证
  2. 微信测试：按对应方案（收藏/扫码/直接点击）打开链接，点击右上角“…” → 发送给朋友，聊天框能显示标题+描述+缩略图，即成功。
    微信测试

三、总结

Hexo博客添加微信分享卡片，核心就是“规范配置OG标签+满足微信抓取规则”。对于Landscape主题，重点是修改_config.yml和head.ejs，确保HTTPS和OG标签完整；对于微信的平台限制，不想折腾就用收藏/二维码，想完美解决就接入JS-SDK。
整个过程虽然踩了不少坑，但最终实现了微信分享卡片的正常显示，也对Hexo的配置和微信的抓取规则有了更深入的了解。

解决思路，个人浅见，如有巧合，以你为准