为什么静态站也需要 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 加速已配置 | ✅ |
留言评论
期待你的想法评论加载中