谈谈本站是如何优化SEO的

#前言

想当初其实并没有建站的打算，一来是觉得建站还要维护一个服务器，很麻烦，二来是看到wordpress确实提不起兴趣，虽然遍地都是，但我天然的不想维护一个后台。大多数时候，建詀对我来说就是记个笔记的作用更多。随着markdown的越来越流行，用过几款笔记软件后，确实有想把自己记录的markdown笔记发布为博客的想法。直到后来的某天，看到安知鱼主题的博客。顿时就被吸引了，而当时的2025年，AI已经大流行，可以说建站所需要的知识积累已经不再是个问题。当时其实还想着买个服务器来建站的，然而咨询DeepSeek之这后，发现还有更接近于零成本的方法。那就是利用Github Pages实现。于是，就有了你们现在所看到的用 Hexo 7 + AnZhiYu 主题 + GitHub Pages + Cloudflare CDN 实现的近乎零成本的建站(当然，域名还是需要money的)。 如果你也是类似配置，这篇文章应该会对你有用。

博客搭好之后，其实也荒废了好一阵子，主要是懒加上失业，而且中年人精力确实不如从前了，所以博客一直放空着。直到最近，终于又下了决心想要好好的学习一下SEO。既然要学习，手边又刚好博客，就对着博客来一边学习一边优化SEO了。在如何让搜索引擎能找到你这件事情上，借助于AI的帮肫。折腾了好一阵子，踩了不少坑，也积累了一些经验。这篇文章把本站所有的 SEO 优化手段整理出来，同时也把那些”本来以为对的，结果全错了”的坑记下来，希望能帮到同样在用 Hexo 搭博客的朋友。

#一、URL 结构：从一团乱麻到清晰可读

URL 是搜索引擎最先接触到的信息之一。一个好的 URL 结构，既能让搜索引擎理解页面内容，也能让用户一眼看出这篇文章在说什么。

#迭代过程

第一版：posts/:abbrlink.html

短小精悍，但丢失了分类语义。搜索引擎看到 posts/58871.html 完全不知道内容是什么。

第二版（当前）：:category/:abbrlink.html

兼顾了分类语义和简洁性。URL 变成了 tech/58871.html，一眼就能看出是技术分类的文章。

1
2
3
4
5
6
# _config.yml
permalink: :category/:abbrlink.html
category_map:
  技术: tech
  生活: life
  推荐: recommends

这里有个细节：category_map 把中文分类名映射成英文 slug。如果不做这个映射，URL 会变成 /categories/%E6%8A%80%E6%9C%AF/（中文被 URL 编码），可读性大打折扣。

很多人喜欢用 :year/:month/:day/:title/ 的格式，但我不推荐：

  • 日期层级对非新闻类博客没有意义
  • 一旦文章发布日期确定，日期就写死了，如果想重发或改日期，URL 会变
  • 大多数人在搜索时更关注关键词，而不是文章是哪天发的

hexo-abbrlink 为每篇文章生成一个永不重复的短 ID（CRC16 十进制），确保 URL 永久稳定，不会因为标题修改而失效。

1
2
3
abbrlink:
  alg: crc16
  rep: dec

#二、Meta 标签：搜索引擎的”第一印象”

#全局描述与关键词

在 _config.yml 中设置好站点级别的描述和关键词，让搜索引擎知道你的博客是做什么的：

1
2
3
title: 番茄说
description: '番茄说 - 灿烂番茄的个人博客，分享 Hexo 博客搭建、GitHub Actions 自动部署、AI/LLM 应用、VPS 折腾与生活厨艺技巧'
keywords: 番茄说,灿烂番茄,Hexo,博客搭建,AI,LLM,VPS,厨艺

#文章级 Description

每篇文章在 frontmatter 中单独设置 description 字段（约 150-160 字符），这会被搜索引擎用作搜索结果摘要。如果不设置，Hexo 会取文章前 200 字当 description，万一前 200 字是代码或图片，搜索结果就会很尴尬。

1
2
3
4
---
title: 谈谈本站是如何优化SEO的
description: 基于 Hexo 7 + AnZHiYu 主题的个人博客 SEO 优化全记录，涵盖 URL 结构、JSON-LD 结构化数据、Sitemap、搜索控制台验证、性能优化，以及 10 个你可能也会遇到的 SEO 踩坑实录。
---

#Canonical URL

重复内容是搜索引擎的扣分项。如果同一个页面可以通过多个 URL 访问（比如 fountainchan.github.io 和 blog.vastnext.com 都能访问到你的博客），必须用 canonical URL 告诉搜索引擎哪个是主版本。

AnZHiYu 主题会自动为每页生成 canonical URL：

1
<link rel="canonical" href="https://blog.vastnext.com/tech/55151.html">

#OpenGraph 与 Twitter Card

当你的文章被分享到社交媒体时，OpenGraph 标签决定了分享卡片长什么样。AnZHiYu 主题自动生成这些标签，关键是确保 og:image 是绝对路径（完整 https:// 开头），否则社交平台抓取不到图片。

#三、JSON-LD 结构化数据：让搜索引擎”理解”文章

这是 SEO 优化中容易被忽视但效果显著的一环。JSON-LD 是一种结构化数据格式，放在 <script> 标签里，告诉搜索引擎这个页面的具体内容是什么——是网站首页、博客文章、还是教程。

#主题级 Schema（自动）

AnZHiYu 主题的 json_ld.pug 会自动输出两层 JSON-LD：

非文章页（首页、分类页等）输出 WebSite schema：

1
2
3
4
5
6
7
8
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://blog.vastnext.com",
  "name": "番茄说",
  "description": "番茄说 - 灿烂番茄的个人博客...",
  "inLanguage": "zh-CN"
}

文章页输出 BlogPosting schema：

1
2
3
4
5
6
7
8
9
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "文章标题",
  "description": "文章摘要",
  "image": "封面图URL",
  "datePublished": "2026-01-15",
  "author": { "@type": "Person", "name": "灿烂番茄" }
}

#文章级 Schema（手动注入）

对于教程类文章，还可以在 Markdown 正文中手动插入更具体的 Schema。比如本站的”肉的嬾滑法”一文添加了 HowTo schema，在搜索结果中可以直接显示步骤列表：

1
2
3
4
5
6
7
8
9
10
11
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "肉的嬾滑法",
  "step": [
    { "@type": "HowToStep", "name": "物理方法", "text": "..." },
    { "@type": "HowToStep", "name": "化学方法", "text": "..." }
  ]
}
</script>

#JSON-LD 的中文转义陷阱

在 Pug 模板中写 JSON-LD 时，有一个容易踩的坑。如果直接用 "#{}" 插值中文字符，Pug 会把中文转义成 HTML 实体（如 &#x756A;&#x8304;），导致搜索引擎解析 JSON-LD 失败。

1
2
3
4
5
//- 正确做法
"headline": !{JSON.stringify(page.title || '')}

//- 错误做法（中文会被转义）
"headline": "#{page.title}"

用 !{JSON.stringify()} 能同时解决两个问题：不转义 HTML 实体，同时确保特殊字符（如引号、换行符）生成合法的 JSON。

#四、Sitemap、RSS 与 Robots.txt

这三个文件是搜索引擎爬虫的”导航地图”和”禁止通行牌”。

#安装的插件

1
2
3
npm install hexo-generator-sitemap --save
npm install hexo-generator-feed --save
npm install hexo-generator-robotstxt --save

#配置要点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
sitemap:
  path: sitemap.xml
  tags: true
  categories: true

feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  content: true

robotstxt:
  useragent: "*"
  disallow:
    - /js/
    - /css/
    - /fonts/
    - /img/
    - /libs/
  sitemap: https://blog.vastnext.com/sitemap.xml

robots.txt 禁止爬虫抓取静态资源目录（/js/、/css/、/img/ 等），避免大量无意义的资源请求消耗爬虫配额。同时明确告诉爬虫 sitemap 的位置。

#向搜索引擎提交

生成好 sitemap 后，需要手动提交到各大搜索引擎的站长工具：

  • Google Search Console：提交 sitemap.xml
  • Bing Webmaster Tools：提交 sitemap.xml
  • Yandex Webmaster：提交 sitemap.xml

#五、搜索引擎站长验证

要让搜索引擎认可你是博客的”主人”，需要在页面中加入验证标签。AnZHiYu 主题提供了统一的 site_verification 配置字段：

1
2
3
4
5
6
7
site_verification:
  - name: google-site-verification
    content: yt9JI1SXRCzSYu6NoHDeXMMdBr0zIkPJMU29CykhA1U
  - name: msvalidate.01
    content: FC1D0DECB415E5163334BF3237806DA1
  - name: yandex-verification
    content: d4af64124b12b179

渲染后自动生成对应 <meta> 标签。本站已接入 Google、Bing、Yandex 三个平台，百度暂时未做。

#六、页面级 Slug SEO 与 301 重定向

#为什么需要 Slug

默认的 tech/60749.html URL 虽然简短，但搜索引擎更青睐包含关键词的 URL。对于核心文章，可以在 frontmatter 中设置 permalink 覆盖默认 URL：

1
2
3
4
---
title: 肉的嬾滑法
permalink: life/how-to-tenderize-meat/
---

注意：permalink 必须以 / 结尾，否则会生成没有扩展名的 URL，导致浏览器直接下载文件而非渲染页面。

#301 重定向

旧的 URL 已经可能被搜索引擎索引，不能直接废弃。需要在 Cloudflare（或 Nginx/CDN 层面）设置 301 重定向，把旧地址永久指向新地址。

Cloudflare Redirect Rules 操作步骤：

  1. 进入 Cloudflare Dashboard → 你的域名 → Rules → Redirect Rules
  2. 选择 Static 模式（不是 Dynamic！）
  3. 添加规则：来源填旧路径，目标填新路径，状态码选 301

踩坑提醒：Cloudflare 的 Dynamic 模式用表达式语法时很容易报错，Static 模式最简单可靠。

#七、性能优化

性能是 Google 排名因素之一（Core Web Vitals）。AnZHiYu 主题功能丰富，但有些功能对性能有影响，可以酌情关闭：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 关闭预加载动画 —— 减少首屏白屏时间
preloader:
  enable: false

# 关闭导航栏时钟 —— 减少 JS 执行
nav:
  clock: false
  music: false

# 关闭主要色调提取 —— 减少客户端计算
mainTone:
  enable: false

# 关闭 APlayer 和 PJAX
aplayerInject:
  enable: false
pjax:
  enable: false

这些改动对博客的视觉体验影响不大，但能显著降低首屏可交互时间（TTI）和 JS 执行线程阻塞。

#八、图片 SEO

#图片路径规范

Hexo 默认的 post_asset_folder 模式会把图片和文章放在同一个目录，但我更倾向于集中管理图片：

1
source/images/<abbrlink>/00.jpg

文章中使用绝对路径引用：

1
![封面](/images/60749/00.jpg)

#Alt 文本

每张图片必须有描述性的 alt 文本。这不仅是无障碍要求，也是搜索引擎理解图片内容的唯一途径：

1
![肉的物理嫩化方法示意图](/images/60749/01.jpg)

#懒加载

AnZHiYu 主题对文章配图默认启用懒加载（loading="lazy"），减少首屏带宽消耗，这也是性能优化的一部分。

#封面图

每篇文章设置 cover 字段，会让文章在首页、分享卡片、搜索结果中都有更好的视觉呈现：

1
2
3
---
cover: /images/60749/00.jpg
---

#九、SSL/HTTPS

HTTPS 已经是搜索引擎的基础要求（Google 明确将其列为排名信号）。本站通过 Cloudflare CDN 提供 HTTPS：

  1. Cloudflare 橙色云朵模式自动为边缘节点配置 SSL 证书
  2. 所有 HTTP 请求自动 301 重定向到 HTTPS
  3. 在 _config.yml 中将 url 设为 https://blog.vastnext.com

域名切换时的坑：从 fountainchan.github.io 切换到 blog.vastnext.com 时，记得更新 _config.yml 的 url 字段，并在 source/ 目录创建 CNAME 文件，否则所有 canonical URL 都会指向旧域名。

#十、SEO 踩坑实录

以下是在优化过程中遇到的实际问题，每一个都花了些时间排查。列出来帮你避开同样的坑。

#坑 1：Cover 图片 YAML 缩进错误导致 URL 乱码

现象：多篇文章的封面图在 HTML 中渲染为乱码 URL，比如：

1
/images/37655/00.jpg - 开源项目 - AI - Vibe Coding - Claude Code.jpg

原因：YAML 中 tags 数组的缩进与 cover 字段同级，导致 tags 内容被合并到了 cover 字段中。

错误示例：

1
2
3
cover: /images/37655/00.jpg
  - 开源项目      # 缩进错误！被解析为 cover 的子元素
  - AI

正确示例：

1
2
3
4
cover: /images/37655/00.jpg
tags:
  - 开源项目
  - AI

教训：YAML 对缩进极其敏感，尤其在手写 frontmatter 时要注意。

#坑 2：评论模块”泄露”到分类页

现象：配置 Twikoo 评论系统后，发现分类页面出现了评论区。

原因：AnZHiYu 主题的 page.pug 对所有自定义页面（分类、标签、归档等）统一使用同一个模板。只要 page.comments 不是 false，就会加载评论。

修复：在不需要评论的页面 frontmatter 中显式声明 comments: false：

1
2
3
4
5
---
title: 分类
type: "categories"
comments: false
---

#坑 3：留言板 Description 被 CSS 代码污染

现象：留言板页面的 <meta name="description"> 显示的是一段 CSS 代码。

原因：hexo-butterfly-envelope 插件生成的页面，第一段内容是一个 <style> 代码块，Hexo 提取摘要时取了第一段内容。

修复：在插件的 front_matter 配置中显式添加 description 字段：

1
2
3
4
envelope_comment:
  front_matter:
    title: 留言板
    description: "番茄说博客的留言板页面，欢迎在这里留下你的想法..."

#坑 4：中文 URL 被编码

现象：不使用 category_map 时，分类页 URL 为 /categories/%E6%8A%80%E6%9C%AF/。

影响：可读性差，复制粘贴不便，搜索引擎对中文 URL 的处理不一致。

修复：用 category_map 将中文分类映射为英文 slug。

#坑 5：JSON-LD 中文被转义

现象：JSON-LD 中的中文字符被转义成 HTML 实体，搜索引擎无法正确解析。

原因：Pug 模板的 #{} 插值会对中文做 HTML 实体编码。

修复：用 !{JSON.stringify()} 替代 #{}。

#坑 6：域名切换后 Canonical URL 不一致

现象：从 fountainchan.github.io 切换到 blog.vastnext.com 后，没有及时更新 _config.yml 的 url 字段。

修复：更新 url + 创建 CNAME 文件 + Cloudflare 配置，三步缺一不可。

#坑 7：首页重复 H1 标签

现象：首页可能同时存在站点标题和文章标题两个 <h1>。

修复：AnZHiYu 主题在这点上处理得不错，站点标题使用 <div> 而非 <h1>，确保每页只有一个 <h1>。

#坑 8：og:description 默认值为文章开头内容

现象：文章没有设置 description 字段时，og:description 取文章前 200 字，如果前 200 字是图片链接或代码，搜索结果摘要就很奇怪。

修复：每篇文章添加 description 字段覆盖默认值。

#坑 9：og:image 相对路径问题

现象：OpenGraph 要求 og:image 必须是完整 URL（https:// 开头），但某些主题配置使用相对路径。

修复：AnZHiYu 主题在 json_ld.pug 中自动拼接了 config.url + cover，确保 og:image 为绝对路径。

#坑 10：Cloudflare 重定向规则语法

现象：在 Cloudflare 的 Dynamic 重定向模式中使用表达式语法（如 concat(...)）容易报语法错误。

修复：直接用 Static 模式，来源填旧路径，目标填新路径，最简单可靠。

#总结

SEO 优化没有银弹，但把基础打好，搜索引擎自然会给你应有的排名。回顾本站的优化过程，最核心的几点是：

  1. URL 结构：有语义、稳定的 URL 是 SEO 的基石
  2. 结构化数据：JSON-LD 让搜索引擎理解你的内容
  3. Sitemap 与 Robots.txt：引导爬虫高效抓取
  4. 性能优化：少即是多，关闭不必要的功能
  5. 检查细节：YAML 缩进、JSON-LD 转义、meta 标签——魔鬼都在细节里

你的博客用了什么 SEO 技巧？欢迎在评论区分享你的经验。