SEO（搜索引擎优化）对技术博客来说至关重要 —— 好的内容需要被看见。PaperUI 继承了 PaperMod 完善的 SEO 体系，并在此基础上做了一些增强。这篇文章分享具体的优化实践。

PaperUI 内置的 SEO 能力

1. Open Graph 标签

每篇文章自动生成完整的 OG 标签，这是社交媒体分享时显示卡片的基础：

<meta property="og:title" content="文章标题" />
<meta property="og:description" content="文章摘要" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://你的域名/posts/xxx/" />
<meta property="og:image" content="https://你的域名/images/cover.jpg" />
<meta property="og:site_name" content="站点名称" />

2. Twitter Cards

同样自动生成 Twitter 分享卡片：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="文章标题" />
<meta name="twitter:description" content="文章摘要" />

3. JSON-LD 结构化数据

这是对搜索引擎最重要的部分。PaperUI 自动生成 Schema.org 的结构化数据：

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "文章标题",
  "datePublished": "2026-05-24T00:00:00+08:00",
  "description": "文章摘要",
  "author": {
    "@type": "Person",
    "name": "作者名"
  }
}

JSON-LD 帮助 Google 等搜索引擎理解你的内容结构，可能在搜索结果中展示富文本片段（Rich Snippets）。

4. Canonical URL

避免重复内容被搜索引擎惩罚：

<link rel="canonical" href="https://你的域名/posts/xxx/" />

5. robots.txt

自动生成，区分环境：

  • 生产环境：允许所有爬虫
  • 开发环境：禁止所有爬虫（避免开发站点被索引）

每篇文章的 SEO 优化清单

Front Matter 优化

每篇文章的头部信息直接影响 SEO：

---
title: '一个描述性强的标题'         # 包含关键词，60 字符以内最佳
description: '150 字以内的文章摘要'  # 这是搜索引擎显示的描述文字
categories: ["分类名"]               # 有助于内容归类
tags: ["关键词1", "关键词2"]         # 标签帮助搜索引擎理解内容主题
---

标题层级

  • 每篇文章只有一个 H1（即文章标题）
  • 使用 H2、H3 构建清晰的内容层级
  • 标题中包含自然的关键词

图片优化

![描述性的图片说明](/images/example.jpg)
  • alt 文本要有描述性，帮助搜索引擎理解图片内容
  • 使用 WebP 格式减小文件体积
  • 控制图片尺寸，避免过大的图片拖慢页面加载

URL 结构

PaperUI 默认使用 /posts/文章slug/ 的 URL 结构，这是 SEO 友好的：

  • 层级清晰
  • 包含有意义的路径段
  • 不包含日期或数字 ID

性能优化

页面加载速度是 SEO 排名因素之一。PaperUI 在这方面做得很好：

构建时的优化

  1. CSS 最小化：Hugo 自动压缩 CSS 文件
  2. JS 按需加载：搜索和轮播 JS 仅在需要时加载
  3. 无外部依赖：不加载第三方 CSS/JS 框架

你可以做的

配置 CDN：将静态资源部署到 CDN，加速全球访问

压缩图片：

# 使用 ImageMagick 批量转换 WebP
for f in *.jpg; do convert "$f" "${f%.jpg}.webp"; done

启用 Gzip/Brotli 压缩：在 Web 服务器配置中启用

使用 Hugo 的图片处理：

{{ $image := resources.Get "images/hero.jpg" }}
{{ $image := $image.Resize "1200x webp" }}

Sitemap 配置

Hugo 自动生成 XML Sitemap。确保在 Google Search Console 中提交：

https://你的域名/sitemap.xml

有用的 Hugo 配置

# 这些配置对 SEO 有帮助
enableRobotsTXT = true          # 自动生成 robots.txt
enableEmoji = true              # 支持 Emoji（不影响 SEO 但提升可读性）

[params]
description = '站点描述'        # 全局站点描述
keywords = ['博客', 'Hugo']     # 全局关键词（meta keywords 已不如以前重要，但仍可配置）

社交媒体预览调试

部署后，用以下工具检查分享卡片效果：

LLM 搜索引擎

PaperUI 新增的 llms.txt 文件位于 https://你的域名/llms.txt，方便 AI 搜索引擎发现和索引你的内容。如果你关注 AI 时代的搜索可见性，这个文件值得维护。

小结

PaperUI 在 SEO 方面提供了开箱即用的完善支持。你只需要做好内容本身的质量、合理配置 Front Matter、优化图片和加载速度，搜索引擎就会善待你的站点。

下一篇我们聊聊如何将 PaperUI 博客部署到生产环境。