做一个真正利于 SEO 的静态博客

搜索引擎排名的单位是页面，不是页面里的某一段。这一条事实，决定了博客该怎么接进网站—— 也顺手化解了那个老矛盾：「想多写内容做 SEO」和「不想让首页变长」。

两者的答案其实是同一个：每篇文章一个独立 URL。

为什么独立 URL 更好

把博客铺在首页上，每篇文章的关键词都挤在同一个 URL 里互相稀释，Google 能拿来排名的只有这一页。 把每篇文章挪到自己的地址——/blog/<slug>/——你就多了一个可被收录的页面， 每一篇都能独立承接自己的长尾词。

首页保持精简，博客向外铺开。两者不再冲突。

每篇文章需要什么

逐篇手写元数据既繁琐又容易出错，所以我们在构建时从 Markdown 的 front matter 自动生成：

• 唯一的 <title> 和 meta description
• 指向自身的 canonical
• 指向另一语言版本的 hreflang
• BlogPosting 和 BreadcrumbList 结构化数据（JSON-LD）

驱动这一切的 front matter 长这样：

title: "做一个真正利于 SEO 的静态博客"
description: "如何给单页静态站加上 Markdown 驱动的博客……"
date: 2026-06-19
tags: [SEO, 前端开发]
slug: static-blog-seo

构建步骤

一段小小的 Node 脚本读取 content/blog/**/*.md，用 marked 渲染正文，套上共享模板， 直接把静态 HTML 写进 dist/。没有运行时 JavaScript，没有框架——只有又快又好爬的页面， 由 Cloudflare 从边缘节点分发。

1. 解析 front matter 和 Markdown
2. 注入每篇的 SEO 元数据和 JSON-LD
3. 重新生成 sitemap 和 RSS
4. 把最新的三篇放到首页作为预览卡片

最后这一步，正是让首页既保持新鲜又不变长的诀窍：一个固定的三卡位，构建时自动填充。

你正在读的这篇，本身就是用 Markdown 写、由这套管线渲染出来的——它自己就是最好的例子。 往后每多写一篇，无非是再加一个 Markdown 文件：写完跑一遍构建，一个新的可被收录的页面就自动上线了。