前置知识: CSS

HTML 语义化与 SEO 优化

2 min中级

HTML语义化标签与SEO优化详解：结构化标记、Schema.org、无障碍与搜索引擎友好实践。

1. 语义化标签体系

1.1 文档结构标签

<header>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/about">关于</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>文章标题</h1>
      <time datetime="2026-06-14">2026年6月14日</time>
    </header>
    <section>
      <h2>第一节</h2>
      <p>内容段落</p>
    </section>
    <section>
      <h2>第二节</h2>
      <p>内容段落</p>
    </section>
    <footer>
      <p>作者：张三</p>
    </footer>
  </article>

  <aside aria-label="侧边栏">
    <section>
      <h2>相关文章</h2>
      <ul>
        ...
      </ul>
    </section>
  </aside>
</main>

<footer>
  <p>&copy; 2026 示例网站</p>
</footer>

1.2 语义标签对照表

标签语义使用场景
<header>页眉/区块头部页面顶部、文章头部
<nav>导航主导航、面包屑
<main>主内容区页面唯一主内容
<article>独立内容博客文章、新闻
<section>内容分区章节分组
<aside>附属内容侧边栏、广告
<footer>页脚/区块尾部版权信息、链接
<figure>自包含内容图片、图表
<details>可展开详情FAQ、补充说明
<time>时间/日期发布日期、事件时间
<address>联系信息作者联系方式
<mark>标记/高亮搜索结果高亮

1.3 反模式

<!--  div 汤 -->
<div class="header">
  <div class="nav">
    <div class="nav-item">首页</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">标题</div>
  </div>
</div>

<!--  语义化 -->
<header>
  <nav>
    <a href="/">首页</a>
  </nav>
</header>
<main>
  <article>
    <h1>标题</h1>
  </article>
</main>

2. SEO 核心要素

2.1 页面元信息

<head>
  <!-- 基础元信息 -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>页面标题 - 网站名称（建议 60 字符以内）</title>
  <meta name="description" content="页面描述，建议 150-160 字符" />
  <meta name="robots" content="index, follow" />

  <!-- Open Graph（社交媒体分享） -->
  <meta property="og:type" content="article" />
  <meta property="og:title" content="文章标题" />
  <meta property="og:description" content="文章描述" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com/article" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="文章标题" />
  <meta name="twitter:description" content="文章描述" />
  <meta name="twitter:image" content="https://example.com/image.jpg" />

  <!-- 规范链接 -->
  <link rel="canonical" href="https://example.com/article" />

  <!-- 替代语言版本 -->
  <link rel="alternate" hreflang="en" href="https://example.com/en/article" />
  <link rel="alternate" hreflang="zh" href="https://example.com/zh/article" />
</head>

2.2 标题层级

<!--  正确的标题层级 -->
<h1>页面主标题（每页仅一个）</h1>
<h2>章节标题</h2>
<h3>小节标题</h3>
<h2>另一个章节</h2>

<!--  错误的标题层级 -->
<h1>主标题</h1>
<h3>跳过了 h2</h3>
<!-- 错误 -->
<h2>标题</h2>
<h1>又出现 h1</h1>
<!-- 错误 -->

2.3 结构化数据（Schema.org）

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "文章标题",
    "author": {
      "@type": "Person",
      "name": "张三"
    },
    "datePublished": "2026-06-14",
    "dateModified": "2026-06-14",
    "image": "https://example.com/image.jpg",
    "publisher": {
      "@type": "Organization",
      "name": "示例网站",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png"
      }
    }
  }
</script>

常见 Schema.org 类型：

类型用途
Article文章
Product商品
FAQPageFAQ 页面
HowTo教程
BreadcrumbList面包屑导航
Organization组织/公司
WebSite网站搜索

2.4 面包屑导航

<nav aria-label="面包屑">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">首页</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/blog"><span itemprop="name">博客</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">当前文章</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

3. 无障碍与 SEO 交集

3.1 图片优化

<!--  有 alt 文本 -->
<img src="chart.png" alt="2026年Q1销售增长趋势图，同比增长15%" />

<!--  装饰性图片 -->
<img src="divider.png" alt="" role="presentation" />

<!--  复杂图片配合长描述 -->
<figure>
  <img src="infographic.png" alt="信息图：全球碳排放趋势" />
  <figcaption>详细描述...</figcaption>
</figure>

3.2 链接文本

<!--  模糊链接 -->
<a href="/article">点击这里</a>
<a href="/article">了解更多</a>

<!--  描述性链接 -->
<a href="/article">阅读关于CSS性能优化的完整指南</a>

3.3 ARIA 地标

<header role="banner">
  <nav role="navigation" aria-label="主导航">
    <main role="main">
      <aside role="complementary">
        <footer role="contentinfo"></footer>
      </aside>
    </main>
  </nav>
</header>

4. 技术 SEO

4.1 页面加载性能

Core Web Vitals 对 SEO 排名的影响：

指标目标值优化方向
LCP< 2.5s关键 CSS 内联、图片优化
INP< 200ms减少主线程阻塞
CLS< 0.1预留尺寸、字体优化

4.2 robots.txt

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Sitemap: https://example.com/sitemap.xml

4.3 Sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-06-14</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
</urlset>

4.4 SSR/SSG 对 SEO 的影响

渲染模式SEO 友好度说明
SSR最佳服务端返回完整 HTML
SSG最佳构建时生成静态 HTML
CSR较差需要额外处理（预渲染）
ISR良好增量静态再生

动手试试

  1. 检查你的页面是否只有一个 h1，标题层级是否连续；
  2. 给文章页补全 title、description 与结构化数据；
  3. 用富媒体结果测试工具验证 JSON-LD；
  4. 进阶挑战：做一份 SEO 检查清单并在真实页面走查。

核心知识点

一句话记住 SEO 语义：语义化标签建大纲，标题层级连续，alt/description 补语义，结构化数据拿富媒体摘要。

  • 语义标签：header/main/article/section 构建大纲；
  • 标题：每页一个 h1，层级不跳级；
  • 元数据：title/description/canonical；
  • 图片：描述性 alt；
  • 结构化数据：JSON-LD + Schema.org；
  • 链接：语义化文案与站内结构。

注意事项与改进建议

问题点说明改进方案
标题跳级大纲断裂按层级使用
图片无 alt图片搜索丢失描述性 alt
结构化数据与内容不符被判作弊数据与页面一致
忽视移动端排名下降响应式 + viewport

扩展学习

  • 语义：html5/170-SemanticTag；
  • 元数据：html5/060-MetadataCharacterEncoding；
  • 结构化数据：html5/350-MicrodataJSONLD。