📢 新文章推送 · 每周更新优质内容 · 订阅更新 →
向下滚动
技术笔记

Hugo 静态站点 SEO 全方位优化指南

AI 智能总结

为什么静态站也需要 SEO

静态博客不像 WordPress 有 Yoast SEO 等插件,所有 SEO 配置都需要手动完成。但 Hugo 提供了完善的内置机制,只要正确配置,静态站的 SEO 表现可以非常出色。

1. 基础 SEO 配置

站点元数据

hugo.toml 中设置:

1baseURL = "https://www.yourdomain.com/"
2title = "你的博客名"
3description = "博客描述"
4languageCode = "zh-cn"
5hasCJKLanguage = true
6defaultContentLanguage = "zh-cn"

robots.txt

Hugo 自动生成 robots.txt,前提是启用:

1enableRobotsTXT = true

自定义规则可在 layouts/robots.txt 中覆盖。

sitemap.xml

Hugo 自动生成站点地图:

1[sitemap]
2  changefreq = "weekly"
3  priority = 0.5
4  filename = "sitemap.xml"

2. Open Graph 与 Twitter Card

社交分享时需要展示标题、描述和封面图。在模板 <head> 中添加:

 1<meta property="og:title" content="{{ .Title }}">
 2<meta property="og:description" content="{{ .Description | default .Summary }}">
 3<meta property="og:image" content="{{ .Params.featured_image | absURL }}">
 4<meta property="og:url" content="{{ .Permalink }}">
 5<meta property="og:type" content="article">
 6<meta property="og:site_name" content="{{ .Site.Title }}">
 7
 8<meta name="twitter:card" content="summary_large_image">
 9<meta name="twitter:title" content="{{ .Title }}">
10<meta name="twitter:description" content="{{ .Description }}">
11<meta name="twitter:image" content="{{ .Params.featured_image | absURL }}">

3. JSON-LD 结构化数据

结构化数据帮助搜索引擎理解页面内容,生成富文本搜索结果。在文章页模板中添加:

 1<script type="application/ld+json">
 2{
 3  "@context": "https://schema.org",
 4  "@type": "Article",
 5  "headline": "{{ .Title }}",
 6  "datePublished": "{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}",
 7  "dateModified": "{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}",
 8  "author": {
 9    "@type": "Person",
10    "name": "{{ .Site.Params.author }}"
11  },
12  "description": "{{ .Description }}"
13}
14</script>

面包屑导航的 JSON-LD:

 1<script type="application/ld+json">
 2{
 3  "@context": "https://schema.org",
 4  "@type": "BreadcrumbList",
 5  "itemListElement": [
 6    {
 7      "@type": "ListItem",
 8      "position": 1,
 9      "name": "首页",
10      "item": "{{ .Site.BaseURL }}"
11    },
12    {
13      "@type": "ListItem",
14      "position": 2,
15      "name": "{{ .Title }}"
16    }
17  ]
18}
19</script>

4. 搜索引擎主动推送

被动等爬虫来抓取不如主动推送给搜索引擎。Hugo 构建后可以自动触发推送:

百度主动推送

百度站长平台提供推送接口,需要获取 Token。推送命令示例:

1curl -H 'Content-Type:text/plain' \
2  --data-binary @urls.txt \
3  "http://data.zz.baidu.com/urls?site=yourdomain.com&token=YOUR_TOKEN"

Bing IndexNow

IndexNow 是 Bing 和 Yandex 联合推出的即时索引协议:

1curl "https://www.bing.com/indexnow?url=https://yourdomain.com/new-article/&key=YOUR_KEY"

Google Indexing API

Google 提供 Indexing API,需要通过 Google Cloud 服务账号认证。适合及时让 Google 收录新内容。

5. 页面级 SEO

每篇文章的 meta 标签

1---
2title: "文章标题(60字以内最佳)"
3description: "文章描述,搜索引擎摘要使用,150字以内"
4tags: ["关键词1", "关键词2"]
5categories: ["分类"]
6---

URL 结构

清晰的 URL 结构对 SEO 有帮助:

1[permalinks]
2  "/" = "/:sections/:slug/"

URL 中包含分类路径,搜索引擎可以据此判断内容结构。

Canonical URL

防止重复内容被搜索引擎惩罚:

1<link rel="canonical" href="{{ .Permalink }}">

6. 性能优化

性能是 SEO 的重要指标(Core Web Vitals):

优化项方法
HTML 压缩hugo --minify
图片优化WebP 格式 + 懒加载 + 响应式图片
CSS/JS 压缩[minify] 配置 + 按需加载
CDN 加速Cloudflare Pages 自带全球 CDN
字体优化使用 font-display: swap 避免文字不可见

7. 站长平台验证

在各大搜索引擎站长平台验证站点所有权。Hugo 模板在 <head> 中插入 meta 验证标签:

1<meta name="google-site-verification" content="YOUR_GOOGLE_CODE">
2<meta name="baidu-site-verification" content="YOUR_BAIDU_CODE">
3<meta name="msvalidate.01" content="YOUR_BING_CODE">

检查清单

检查项完成
robots.txt 已生成
sitemap.xml 已生成
OG/Twitter Card 标签完整
JSON-LD 结构化数据已添加
Canonical URL 已设置
每篇文章有 description
图片有 alt 属性
HTML 压缩已启用
百度/Bing/Google 站长已验证
CDN 加速已配置
10 / 16
版权声明

本文作者 Lumin

本文链接 https://www.zhengquan.xyz/tech/hugo-seo-guide/

许可协议 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

请作者喝杯咖啡 ☕

  • 微信打赏
    微信支付
  • 支付宝打赏
    支付宝
点击按钮查看打赏二维码
🎁 推荐工具
试试这些实用在线工具,提升工作效率
前往工具集 →

留言评论

期待你的想法

评论加载中