HTML 结构与 SEO
搜索引擎通过分析 HTML 结构来理解页面内容。语义化的 HTML 标签、正确的标题层级、合理的 URL 结构，都能帮助搜索引擎更好地索引和排名页面内容。本节将介绍 HTML 结构对 SEO 的影响、heading 层级最佳实践，以及 URL 结构优化策略。
前置知识
阅读本节前，建议先了解：HTMLLint 验证
语义化标签对 SEO 的影响
语义化 vs 非语义化
html
<!-- 不推荐：非语义化结构 -->
<div class="header">
<div class="nav">
<div class="nav-item"><a href="/">首页</a></div>
</div>
</div>
<div class="content">
<div class="title">文章标题</div>
<div class="text">文章内容...</div>
</div>
<div class="footer">版权所有</div>
<!-- 推荐：语义化结构 -->
<header>
<nav aria-label="主导航">
<a href="/">首页</a>
</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
</article>
</main>
<footer>
<p>版权所有</p>
</footer>各语义标签的 SEO 作用
| 标签 | SEO 作用 | 说明 |
|---|---|---|
<header> | 帮助识别页面/区域头部 | 可重复使用 |
<nav> | 帮助识别导航链接 | 搜索引擎关注导航结构 |
<main> | 标识主要内容区域 | 每页只应有一个 |
<article> | 标识独立内容块 | 博客、文章、产品 |
<section> | 标识内容分区 | 需配合 heading 使用 |
<aside> | 标识补充内容 | 侧边栏、广告 |
<footer> | 标识页脚信息 | 链接、版权信息 |
<figure> + <figcaption> | 图片描述 | 帮助图片搜索 |
<time> | 时间标记 | 发布时间、日期 |
<details> + <summary> | 可展开内容 | FAQ、额外信息 |
heading 层级
正确的 heading 层级
heading 层级是搜索引擎理解页面内容结构的重要线索：
html
<!-- 正确的 heading 层级 -->
<h1>网站名称 / 页面主标题</h1>
<h2>主要内容区域</h2>
<h3>子分类</h3>
<h4>详细内容</h4>
<h3>另一个子分类</h3>
<h2>侧边栏</h2>
<h2>页脚</h2>
<!-- 错误：跳级 -->
<h1>标题</h1>
<h3>跳过了 h2</h3> <!-- 错误 -->
<h4>又跳过了... </h4>
<!-- 错误：多个 h1 -->
<h1>网站标题</h1>
<h1>文章标题</h1> <!-- 每个页面只应有一个 h1 -->heading 使用规则
| 规则 | 说明 |
|---|---|
| 每个页面只有一个 h1 | h1 代表页面主标题 |
| 不跳级 | h1 → h2 → h3 → ... |
| heading 与内容匹配 | heading 要准确概括内容 |
| 不用 heading 控制样式 | 使用 CSS 控制大小和颜色 |
| article 中使用 h2 开始 | 每个 article 可以有自己的 h2 |
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5 教程 - 完整指南</title>
</head>
<body>
<!-- h1：页面主标题（每页一个） -->
<h1>HTML5 完整教程</h1>
<main>
<!-- h2：主要章节 -->
<section>
<h2>基础入门</h2>
<p>HTML5 是最新的 HTML 标准...</p>
<!-- h3：子章节 -->
<section>
<h3>HTML 语法基础</h3>
<p>HTML 文档由标签组成...</p>
</section>
<section>
<h3>常用标签</h3>
<p>以下是最常用的 HTML 标签...</p>
<!-- h4：更细的分类 -->
<section>
<h4>文本标签</h4>
<p>h1-h6、p、span、strong 等...</p>
</section>
<section>
<h4>列表标签</h4>
<p>ul、ol、li、dl、dt、dd...</p>
</section>
</section>
</section>
<section>
<h2>表单与验证</h2>
<p>HTML5 提供了丰富的表单控件...</p>
</section>
</main>
<aside>
<h2>相关资源</h2>
<ul>
<li><a href="#">CSS 教程</a></li>
<li><a href="#">JavaScript 教程</a></li>
</ul>
</aside>
</body>
</html>URL 结构
SEO 友好的 URL
| URL 类型 | 示例 | SEO 友好度 |
|---|---|---|
| 友好 | /products/wireless-headphones | 高 |
| 有参数 | /products?id=123 | 低 |
| 混合 | /products/wireless-headphones?id=123 | 中 |
| 过长 | /products/cat/electronics/headphones/wireless/brand-x | 低 |
URL 最佳实践
推荐格式：
- /articles/html5-tutorial
- /products/wireless-headphones
- /blog/2024/01/15/web-performance-guide
不推荐：
- /p?id=123
- /article?cat=html&sub=tutorial
- /page/1/2/3/4/5URL 与 heading 的关系
URL 路径可以与 heading 结构对应，帮助搜索引擎理解内容层次：
URL: /html/tutorial/semantic-html
对应 heading:
h1: HTML 教程
h2: 语义化 HTML结构化大纲
页面结构示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端开发学习路径</title>
</head>
<body>
<h1>前端开发学习路径</h1> <!-- 页面唯一 h1 -->
<main>
<section>
<h2>HTML 基础</h2> <!-- h2：第一个主要章节 -->
<section>
<h3>HTML 语法</h3>
<p>HTML 文档的基本结构...</p>
</section>
<section>
<h3>语义化标签</h3>
<p>header、nav、main、article...</p>
</section>
<section>
<h3>表单控件</h3>
<p>input、select、textarea...</p>
</section>
</section>
<section>
<h2>CSS 基础</h2> <!-- h2：第二个主要章节 -->
<section>
<h3>选择器</h3>
<p>类选择器、ID选择器...</p>
</section>
</section>
<section>
<h2>JavaScript 基础</h2> <!-- h2：第三个主要章节 -->
</section>
</main>
<aside>
<h2>推荐资源</h2>
<ul>
<li><a href="#">MDN Web Docs</a></li>
<li><a href="#">Can I Use</a></li>
</ul>
</aside>
<footer>
<h2>关于本站</h2>
<p>版权所有 2024</p>
</footer>
</body>
</html>注意事项
- 避免 div 滥用：使用语义化标签替代无意义的 div
- h1 唯一性：每个页面只有一个 h1
- 不跳级：heading 层级要连续
- URL 使用连字符：用
-分隔 URL 中的单词 - main 唯一性：每个页面只有一个 main
最佳实践
- 使用语义化 HTML 标签构建页面结构
- 维护正确的 heading 层级（h1 → h2 → h3）
- 每个页面只有一个 h1，对应页面主标题
- 使用 article、section 组织内容
- URL 结构清晰，使用连字符分隔单词
- 使用 figure/figcaption 为图片提供描述
- 使用 time 标签标记日期时间
下一节
继续学习：meta 标签 SEO 配置