Hexo 博客全方位速度与 SEO 优化实战（2026年实测）

AI 摘要

前言

本文记录了在 Hexo + Fluid 主题博客上的一次完整性能与 SEO 优化实践。优化工作基于真实域名 https://www.amubk.cn 进行，旨在解决首屏加载慢、第三方资源阻塞、SEO 元数据错误以及内容可被搜索引擎正确识别等问题。

全过程约耗时 2 小时，主要涉及：

  • 主题接管与定制（让根目录副本真正生效）
  • 资源本地化与 defer 加载（消除外部阻塞）
  • 图片压缩（Banner 392KB → 10KB）
  • SEO 基础设施（canonical、robots、sitemap）
  • 结构化数据注入（JSON-LD WebSite / BlogPosting）

下面逐节展开。

1. 主题接管

Hexo 默认从 node_modules/hexo-theme-fluid 加载主题。根目录的 fluid/ 文件夹是一个残缺副本，里面缺少大量 .styl 样式文件，导致你的 Amu 开机动画（source/js/events.js）从未生效。

做法：

  1. 将 node_modules/hexo-theme-fluid 完整复制到 themes/fluid/：
    1
    cp -r node_modules/hexo-theme-fluid themes/fluid/
  2. 删除根目录下未被使用的 fluid/ 副本（防止路径混淆）。
  3. 重新生成：hexo clean && hexo g。

效果：主题 CSS/JS/图片现在全部来自 themes/fluid/，你的自定义脚本也能被正确编译和加载。

2. 访问速度优化

2.1 页脚音乐播放器本地化

原配置引用 jsdelivr 的 APlayer CSS/JS 和 Meting JS，国内访问 jsdelivr 可能较慢，且无 defer 导致首屏白屏。

做法：

  • 下载 APlayer.min.css、APlayer.min.js、Meting.min.js 到 source/lib/aplayer/。
  • 在 _config.fluid.yml 的 custom_js 列表中保留 /js/custom.js（已重写，见下文），并把原本的音乐脚本改为指向本地路径。
  • 在 themes/fluid/layout/_partials/scripts.ejs 中把 js_ex 改为 import_js ... 'defer'。

关键片段（scripts.ejs）：

1
2
<%- import_js(theme.static_prefix.internal_js, 'aplayer/APlayer.min.js', 'defer') %>
<%- import_js(theme.static_prefix.internal_js, 'aplayer/Meting.min.js', 'defer') %>

同时把页脚 shields.io 三张徽章的图片请求改为下载的本地 SVG，放在 source/img/badges/。

2.2 脚本统一 defer

原本有 13 个 <script src="..."> 全部同步加载，拉慢 DOMContentLoaded。

做法：

  • themes/fluid/layout/_partials/scripts.ejs 中把所有 js_ex / js 加上 'defer' 参数。
  • typed.ejs 中把 typed.js 的加载改为 defer 并用 DOMContentLoaded 包裹，确保仅在首页加载（scope: ["home"] 已在 _config.fluid.yml 中设好）。
  • navigation.ejs 中 local-search.js 也加 defer。

2.3 点击烟花特效

source/js/custom.js 原本混入了 markdown 文档说明，导致 node --check 报错、浏览器完全不执行。我把它重写为「离开标签页标题崩溃+点击页面绽放烟花」的功能，代码通过 node --check 通过，现在已在每篇文章页可点击绽放。

2.4 Banner 头图 WebP

source/img/default.png 为 1920×1080 PNG，392KB。将其转为 WebP，在视觉质量基本不变的情况下体积压到 10KB，直接影响 LCP。

做法：

1
sharp source/img/default.png .webp --quality 80

随后在 _config.fluid.yml 将 banner_img 全部改为 /img/default.webp。

验证：hexo generate 后 public/img/default.webp 确实 10KB 左右，且在 Chrome DevTools 中首屏图片体积相应下降。

3. SEO 优化

3.1 站点域名与 canonical

_config.yml 中 url 还是占位符 http://example.com 是大忌，会导致生成的 sitemap、OG 标签、JSON-LD 都错误。改为真实域名后，所有自动生成的链接都正确指向 www.amubk.cn。

做法：

1
2
# _config.yml
url: https://www.amubk.cn

同时开启 Fluid 的 canonical.enable: true。Fluid 模板已经在 head.ejs 里把 index.html 片尾去掉，使得 canonical URL 更干净。

3.2 robots.txt 与 sitemap

新建 source/robots.txt：

1
2
3
User-agent: *
Allow: /
Sitemap: https://www.amubk.cn/sitemap.xml

hexo-generator-sitemap 和 hexo-generator-baidu-sitemap 已在 package.json 中，重新生成后 sitemap 所有 <url><loc> 均为 https://www.amubk.cn/...。

3.2 结构化数据（JSON-LD）

我编写了 scripts/seo-jsonld.js，利用 hexo 的 after_render:html 钩子，在首页注入 WebSite、在文章页注入 BlogPosting 结构化数据。

脚本要点：

  • 只有在 layout: post 或 layout: index 时注入，其他页面不添加。
  • url 使用确认的真实域名 https://www.amubk.cn。
  • image 优先使用文章的 index_img， fallback 到 banner_img（已转 WebP）。
  • description 从 front-matter description / excerpt 或全局 fallback。
  • author 从 front-matter 或站点配置。

效果验证：public/index.html 与 任意一篇 *.html 里均能看到 <script type="application/ld+json">...</script>，且 google-rich-results-test 可以直接检查通过。

3.3 文章 tags 与元数据

  • 把 Vercel CLI 那篇的 tag hexo 统一改为 Hexo（大小写一致）。
  • 给 4 篇缺标签的文章分别加上 tech、blog 或 hexo 等常见标签，利于分类聚合页的 SEO。
  • 给 AI 摘要提示这篇文章的 excerpt 重写，不再错误引用 umami-view.js，而是正确插件功能。

4. 验证与部署

所有改动后执行：

1
hexo clean && hexo g
  • HTML 检查：打开 public/index.html，搜索 defer，确保所有 script 都有 defer 属性；搜索 application/ld+json，确保 JSON-LD 结构正确。
  • 本地冒烟：hexo server -p 4123，用 curl 检查关键资源返回 200（WebP、custom.js、APlayer.js、Meting.js、badge SVG 等），gen-thumb.js 应该 404（已从 custom_js 移除）。
  • 搜索结果预览：在 Vercel 部署后，可用 site:www.amubk.cn 在 Google/Bing 中快速检查是否收录，或用 Rich Results Test 检查结构化数据。

结语

这次优化不仅让博客的首屏加载时间明显缩短（WebP、defer 直接减少了关键渲染路径的阻塞），也让博客在技术层面更符合现代搜索引擎的抓取与索引要求（canonical、robots、sitemap、JSON-LD）。Fluid 主题的二次开放性让我们能够在不牺牲原有视觉设计的前提下，大幅提升性能与搜索友好度。

如果你也在使用 Fluid 主题，建议先按 canonical 与 robots 这两步跑通，再逐步进行资源本地化与脚本优化，效果会非常明显。

本文基于 2026-10-21 的博客环境（Hexo 8.1.2 + Fluid 1.9.9）实测而成。若你的环境版本不同，部分配置路径可能略有出入，核心思路（主题接管、本地化、defer、canonical）是通用的。

Hexo > 站点优化 > SEO
#hexo #fluid #performance #search
Hexo 博客全方位速度与 SEO 优化实战（2026年实测）
https://www.amubk.cn/2026/10/21/Hexo 博客全方位速度与 SEO 优化实战（2026年实测}/
作者
阿木
发布于
2026年10月21日
许可协议