Hugo 静态网站构建实战手册

SEO 与性能优化

优化 Hugo 站点的标题、描述、结构化数据、Sitemap、RSS、图片、缓存和构建性能

SEO 与性能优化

Hugo 生成静态页面，天然具备很好的性能基础。但真正上线后，还需要处理标题、描述、语义结构、站点地图、RSS、图片尺寸、缓存策略和第三方脚本，才能让读者和搜索引擎都获得稳定体验。

SEO 基础配置

hugo.toml：

baseURL = 'https://example.org/'
title = '我的博客'
enableRobotsTXT = true
hasCJKLanguage = true

[params]
  description = '记录技术、生活和长期学习'
  keywords = ['Hugo', '博客', '静态网站']

关键点：

  • baseURL 必须是线上真实地址
  • enableRobotsTXT 生成基础 robots 文件
  • hasCJKLanguage 改善中文摘要和统计
  • 每篇文章尽量写 description

标题与描述

模板示例：

<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ .Title }} - {{ site.Title }}{{ end }}</title>
<meta name="description" content="{{ .Description | default .Summary | default site.Params.description }}">
<link rel="canonical" href="{{ .Permalink }}">

文章 Front Matter：

---
title: "Hugo SEO 优化指南"
description: "整理 Hugo 站点标题、描述、结构化数据和性能优化实践"
date: 2026-06-10T10:00:00+08:00
---

建议：

  • 每页只有一个清晰的 H1
  • 标题包含核心主题，不堆关键词
  • 描述控制在可读的一两句话
  • URL 稳定后不要频繁修改

Open Graph 与 Twitter Card

社交分享元信息：

<meta property="og:title" content="{{ .Title }}">
<meta property="og:description" content="{{ .Description | default .Summary | default site.Params.description }}">
<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
<meta property="og:url" content="{{ .Permalink }}">

{{ with .Params.cover }}
  <meta property="og:image" content="{{ . | absURL }}">
{{ end }}

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ .Title }}">
<meta name="twitter:description" content="{{ .Description | default .Summary | default site.Params.description }}">

如果使用 Page Bundle 封面，可以在模板中生成绝对地址：

{{ with .Resources.GetMatch "cover.*" }}
  {{ $img := .Fill "1200x630 webp q80" }}
  <meta property="og:image" content="{{ $img.Permalink }}">
{{ end }}

Sitemap

Hugo 默认会生成 sitemap.xml。可以配置：

[sitemap]
  changeFreq = 'weekly'
  priority = 0.5
  filename = 'sitemap.xml'

页面级配置：

---
title: "关于"
sitemap:
  priority: 0.8
  changefreq: "monthly"
---

上线后建议提交到搜索引擎站长平台。

robots.txt

启用：

enableRobotsTXT = true

如需自定义，创建：

layouts/robots.txt

示例：

User-agent: *
Allow: /

Sitemap: {{ "sitemap.xml" | absURL }}

RSS

Hugo 默认支持 RSS。配置输出：

[outputs]
  home = ['HTML', 'RSS']
  section = ['HTML', 'RSS']

模板中添加：

{{ with .OutputFormats.Get "RSS" }}
  <link rel="alternate" type="application/rss+xml" href="{{ .RelPermalink }}" title="{{ site.Title }}">
{{ end }}

中文博客建议保留 RSS，对长期读者很友好。

结构化数据

文章页可以添加 JSON-LD：

{{ if .IsPage }}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": {{ .Title | jsonify }},
  "description": {{ (.Description | default .Summary) | jsonify }},
  "datePublished": {{ .Date.Format "2006-01-02T15:04:05Z07:00" | jsonify }},
  "dateModified": {{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | jsonify }},
  "url": {{ .Permalink | jsonify }},
  "author": {
    "@type": "Person",
    "name": {{ site.Params.author.name | default site.Title | jsonify }}
  }
}
</script>
{{ end }}

用 jsonify 避免中文、引号和特殊字符破坏 JSON。

URL 与重定向

文章建议使用稳定 slug：

---
title: "Hugo 部署指南"
slug: "hugo-deployment"
---

迁移旧链接：

---
aliases:
  - /old/hugo-deploy/
  - /2024/hugo-deploy.html
---

Hugo 会为旧地址生成跳转页面。

图片性能

关键建议：

  • 上传前压缩原图
  • 使用 Page Bundle 管理文章图片
  • 生成 WebP/AVIF 等现代格式
  • 写 width 和 height
  • 非首屏图片使用 loading="lazy"
  • 首屏大图避免过大

响应式图片示例：

{{ with .Resources.GetMatch "cover.*" }}
  {{ $small := .Resize "480x webp q75" }}
  {{ $medium := .Resize "800x webp q75" }}
  {{ $large := .Resize "1200x webp q75" }}
  <img
    src="{{ $medium.RelPermalink }}"
    srcset="{{ $small.RelPermalink }} 480w, {{ $medium.RelPermalink }} 800w, {{ $large.RelPermalink }} 1200w"
    sizes="(max-width: 768px) 100vw, 800px"
    width="{{ $medium.Width }}"
    height="{{ $medium.Height }}"
    alt="{{ .Title }}"
    loading="lazy">
{{ end }}

CSS 与 JS 性能

生产环境：

{{ $css := resources.Get "css/main.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}" crossorigin="anonymous">

{{ $js := resources.Get "js/main.js" | js.Build (dict "minify" true) | fingerprint }}
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous" defer></script>

建议：

  • JS 默认加 defer
  • 非必要第三方脚本延迟加载
  • 不在每个页面加载只在少数页面使用的脚本
  • 使用 fingerprint 配合长期缓存
  • 避免过多字体文件和字重

缓存策略

带哈希的静态资源：

Cache-Control: public, max-age=31536000, immutable

HTML 页面：

Cache-Control: public, max-age=0, must-revalidate

RSS、Sitemap：

Cache-Control: public, max-age=3600

不同平台配置方式不同，部署章节会展开。

构建优化

常用命令：

hugo --minify
hugo --gc
hugo --templateMetrics
hugo --templateMetricsHints

说明：

  • --minify 压缩 HTML、CSS、JS、XML、JSON
  • --gc 清理构建中不再使用的缓存文件
  • --templateMetrics 查看模板耗时
  • --templateMetricsHints 给出 partial 缓存建议

大型站点建议：

  • 给不随页面变化的 partial 使用 partialCached
  • 图片处理结果缓存到 resources/
  • CI 使用缓存加速 resources/、Go modules、npm 依赖
  • 避免模板里重复做昂贵的 where 和 sort

Core Web Vitals

重点关注：

指标建议目标优化方向
LCP小于 2.5s首屏图片、服务器响应、关键 CSS
CLS小于 0.1图片尺寸、广告/评论区占位
INP小于 200ms减少 JS、避免长任务

静态站通常 TTFB 很好，真正拖慢页面的往往是图片、字体和第三方脚本。

第三方服务

评论、统计、广告、聊天插件都可能拖慢页面。

建议：

  • 统计脚本异步加载
  • 评论区滚动到附近再加载
  • 第三方字体优先本地托管
  • 删除不用的图标库和样式
  • 对外链图片保持谨慎

检测工具

本地也可以先看构建输出：

hugo --minify --printPathWarnings --printUnusedTemplates

发布前 SEO 检查

  • baseURL 是线上域名
  • 首页和重要页面有唯一标题、描述
  • 每篇文章有 description
  • 站点生成 sitemap.xml
  • RSS 链接可访问
  • canonical 指向正确地址
  • 图片有 alt
  • 旧链接配置了 aliases
  • 没把草稿发布到线上
  • 移动端阅读体验正常

下一步

继续阅读 自动化部署，把优化后的站点发布到线上。

评论

0%