让 Hexo 博客分享到微信变成精美卡片——Open Graph 完整配置指南

前言

很多博主发现：别人分享链接到微信是漂亮的卡片（大图+标题+描述），而自己的只是裸链接。核心原因只有一个——缺少 Open Graph meta 标签。

本文以 Butterfly 主题为例，手把手教你配齐 OG 协议，顺便避开 HTTPS 混合内容、爬虫 User-Agent、图片防盗链等常见坑。

一、Open Graph 核心字段速览

Meta 标签	作用	微信渲染位置
`og:title`	卡片标题	大字标题行
`og:description`	摘要/描述	标题下方灰字
`og:image`	缩略图（关键）	左侧/上方大图
`og:url`	规范链接	点击跳转目标
`og:type`	内容类型	内部判断用
`og:site_name`	站点名	角标/来源行

微信硬性要求：og:image 必须 ≥300×300px、≤5MB、HTTPS、无防盗链，否则抓取失败直接退化成纯文本。

二、Butterfly 主题一键开启

_config.butterfly.yml 默认已开启，确认如下：

Open_Graph_meta:
  enable: true   # 已是 true
  option:
    # twitter_card: summary_large_image
    # twitter_site: @yourname

关键点：文章 Front-matter 必须写 cover，否则首页/列表页用 default_cover 兜底，详情页会 fallback 到 top_img 或第一张内容图。

---
title: 文章标题
date: 2026-07-10 14:30:00
cover: https://cdn.example.com/cover.jpg   # ← 必填，推荐 800×450 以上
top_img: https://cdn.example.com/banner.jpg # 可选，文章页顶部大图
---

三、站点 URL 必须是真实 HTTPS 域名

_config.yml 里的 url 直接拼接成 og:image 完整链接：

1 2	url: https://blog.jiumi.vip # ✅ 你的真实域名 # url: http://example.com # ❌ 默认占位符，会导致 og:image 变成 http://example.com/img/xxx.jpg

改完 hexo clean && hexo g 重新部署。

四、常见坑 & 避坑指南

1. 混合内容：页面是 HTTPS，图片却是 HTTP

现象：微信卡片无图、控制台报 Mixed Content
修复：所有图片链接、API 请求、CDN 域名全站强制 HTTPS

2. 图片防盗链/Referer 限制

现象：浏览器能看，微信爬虫抓不到（返回 403/空图）
修复：
- 图床开启「允许空 Referer」或「允许微信域名」
- 或把图片存自己服务器/CDN，配置 Referrer-Policy: no-referrer-when-downgrade

3. 爬虫 User-Agent 被拦截

现象：微信分享卡片长期不更新、或永远是旧图
微信爬虫 UA：MicroMessenger / MQQBrowser / WeChat 关键字
修复：Nginx/Cloudflare/WAF 白名单放行包含上述关键字的 UA

4. 纯 SPA / JS 动态渲染 meta

现象：查看网页源代码（Ctrl+U）里没有 og: 标签
修复：Hexo 是静态生成，天然不存在这个问题；若用 Next.js/Nuxt 等 SSR 框架，务必在 head() / useHead() 里静态输出。

5. 微信服务端缓存

改完标签后微信端不生效 → 用官方工具强刷：
- 微信开放平台 → 网页开发 → 清理缓存 → 输入文章链接 → 提交
- 或在链接后加 ?v=20260710 触发重抓

五、本地调试：不用等微信缓存

方法 1：浏览器扩展「Open Graph Preview」

安装后直接在页面右键预览卡片长相。

方法 2：curl 抓取源码验证

1	curl -sL "https://blog.jiumi.vip/xxx/" \| grep -i 'og:'

能看到完整 og:image og:title og:description 即通过。

方法 3：微信开发者工具真机调试

手机连同一 WiFi，电脑开微信开发者工具 → 真机调试 → Console 看网络请求。

六、进阶：自定义 Twitter Card / 结构化数据

Butterfly 同目录下还有：

# Twitter 卡片（微信不看，但 Twitter/X、Telegram、Discord 会用）
Open_Graph_meta:
  option:
    twitter_card: summary_large_image
    twitter_site: "@yourname"
    twitter_image: https://cdn.example.com/twitter-card.jpg

# JSON-LD 结构化数据（SEO 加分，Google 搜索结果出缩略图）
structured_data: true

七、一张图总结排查清单

flowchart TD
    A[分享链接无卡片/无图] --> B{查看源码有 og:image 吗?}
    B -- 否 --> C[检查 cover / top_img / default_cover 配置]
    B -- 是 --> D{og:image 是 HTTPS 吗?}
    D -- 否 --> E[全站强制 HTTPS / 图床开启 HTTPS]
    D -- 是 --> F{图片 ≥300×300 且 ≤5MB?}
    F -- 否 --> G[压缩/裁剪图片]
    F -- 是 --> H{图床防盗链/Referer 限制?}
    H -- 是 --> I[允许空 Referer 或白名单微信 UA]
    H -- 否 --> J[微信缓存未刷新 → 官方工具强刷]