语义化 HTML 与 SEO 基础：标签选对，一半工作就完成了
SEO 有很多玄学部分，但语义化 HTML 是确定的、可控的、且零成本的那一半。
一、语义标签怎么用
不要满屏 <div>。选标签的标准是「这个内容是什么」，不是「它长什么样」。
| 标签 | 用途 | 常见误用 |
|---|---|---|
<header> | 页头 / 区块头部 | 当成「顶部导航栏」专用 |
<nav> | 导航链接集合 | 塞进所有链接 |
<main> | 页面主内容，每页只能一个 | 出现多个 |
<article> | 可独立分发的内容（一篇文章） | 当成普通容器 |
<section> | 有标题的内容分区 | 当 div 用 |
<aside> | 侧边栏、补充内容 | |
<footer> | 页脚 / 区块底部 | |
<time> | 时间，用 datetime 属性 |
本站的结构：
<body>
<header class="site-header"> <!-- 整站页头 -->
<nav>...</nav>
</header>
<main id="app">
<section class="hero">...</section>
<article class="post">...</article>
</main>
<footer class="site-footer">...</footer>
</body>二、标题层级不能跳
<!-- 正确 -->
<h1>文章标题</h1>
<h2>一、小节</h2>
<h3>1.1 细节</h3>
<h2>二、小节</h2>
<!-- 错误：h1 直接跳 h3 -->
<h1>文章标题</h1>
<h3>小节</h3>规则：
- 一个页面一个 h1（站点名或文章标题）；
- 层级只能逐级下降，不能跳级；
- 标题是「内容大纲」，不是「字号大小」——想调大小用 CSS。
屏幕阅读器用户靠标题跳转浏览。层级混乱，等于给视障用户一份乱序目录。
三、meta 标签该写哪些
必需的几项：
<!-- 编码，必须放最前面 -->
<meta charset="utf-8">
<!-- 移动端视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 描述：搜索结果里显示的那段话，150 字以内 -->
<meta name="description" content="白泽网络的个人技术笔记：网站搭建、服务器运维、域名与 DNS 的实践记录。">
<!-- 规范化链接：避免多域名被判重复内容 -->
<link rel="canonical" href="https://www.bzii.cn/">可选的社交分享卡：
<meta property="og:title" content="页面标题">
<meta property="og:description" content="描述">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.bzii.cn/cover.png">
<meta name="twitter:card" content="summary_large_image">四、链接文字要写清楚
<!-- 不好 -->
<a href="/post/123">点击这里</a>
<!-- 好 -->
<a href="/post/123">域名注册与 DNS 解析</a>搜索引擎靠锚文本判断目标页面的内容；屏幕阅读器也会单独朗读链接列表，「点击这里」毫无信息量。
五、图片必须写 alt
<img src="a.webp" alt="Nginx 配置文件示例" width="800" height="450">
<!-- 纯装饰图，alt 留空让辅助技术跳过 -->
<img src="divider.svg" alt="">六、结构化数据（可选但有用）
用 JSON-LD 告诉搜索引擎「这是一个博客文章」：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "域名注册与 DNS 解析",
"datePublished": "2026-09-02",
"author": {"@type": "Person", "name": "白泽"},
"keywords": "域名, DNS, Cloudflare"
}
</script>可能带来富摘要（搜索结果里显示日期、作者等）。可以用 Google 富媒体测试工具 验证。
七、性能也是 SEO
Google 把 Core Web Vitals 纳入排名因素：
| 指标 | 含义 | 目标 |
|---|---|---|
| LCP | 最大内容渲染时间 | < 2.5s |
| INP | 交互响应 | < 200ms |
| CLS | 累积布局偏移 | < 0.1 |
这些指标的改善方式见「前端性能优化清单」。
八、一份页面模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>页面标题 · 白泽网络</title>
<meta name="description" content="150 字以内的描述">
<link rel="canonical" href="https://www.bzii.cn/this-page">
<link rel="alternate" type="application/rss+xml" href="/feed.xml">
<meta property="og:title" content="页面标题">
</head>
<body>
<header><nav>...</nav></header>
<main>
<article>
<h1>文章标题</h1>
<time datetime="2026-01-12">2026-01-12</time>
<h2>小节</h2>
<p>内容</p>
</article>
</main>
<footer>...</footer>
</body>
</html>九、验证
# 看 HTML 结构有没有明显问题
curl -s https://www.bzii.cn | grep -c "<h1>" # 应该正好 1 个
curl -s https://www.bzii.cn | grep -o "<title>[^<]*"工具：
- Lighthouse（Chrome DevTools 内置）：SEO 分项会给出具体问题；
- W3C HTML 校验：查语法错误；
- 关掉 CSS 看页面：内容顺序是否仍然合理。
语义化不需要额外成本，只是在写 div 之前多想一秒该用什么标签。
