知识库首页 seo-llm 资料 html-semantics.md

html semantics

本地来源：seo-llm/skill/google-seo-skill/references/html-semantics.md

语义化 HTML 与图片优化

1. 语义化 HTML 标签

<!-- ✅ 正确的语义化结构 -->
<header>
  <nav aria-label="主导航">
    <ul>
      <li><a href="/">首页</a></li>
      <li><a href="/blog">博客</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>文章标题</h1>
    <p>文章内容...</p>

    <section>
      <h2>子标题</h2>
      <p>段落内容...</p>
    </section>

    <aside>
      <h3>相关阅读</h3>
      <ul>
        <li><a href="/blog/related">相关文章</a></li>
      </ul>
    </aside>
  </article>
</main>

<footer>
  <p>&copy; 2025 网站名称</p>
</footer>

<!-- ❌ 错误做法 -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">首页</a></div>
  </div>
</div>

2. 标题层级（Heading Hierarchy）

<!-- ✅ 正确的标题层级 -->
<h1>页面主标题</h1>           <!-- 每页只有一个 H1 -->
  <h2>主要章节</h2>            <!-- H2 紧跟 H1 -->
    <h3>子章节</h3>            <!-- H3 紧跟 H2 -->
    <h3>另一个子章节</h3>
  <h2>另一个主要章节</h2>
    <h3>子章节</h3>
      <h4>更深层内容</h4>      <!-- 按顺序递进 -->

<!-- ❌ 错误做法 -->
<h1>标题</h1>
<h3>跳过了H2！</h3>            <!-- 不要跳级 -->
<h1>又一个H1</h1>              <!-- 不要多个H1 -->

标题优化规则： - 每页有且仅有一个 <h1> 标签 - 标题层级不跳级（H1→H2→H3，不直接从H1到H3） - H1 包含页面主关键词 - 标题应描述其下方内容的主题

3. 图片优化

Google 图片 SEO 关键规则

image_seo_rules:
  discovery:
    - "必须使用 <img> 元素（CSS background-image 不会被索引）"
    - "图片站点地图可帮助 Google 发现难以通过链接发现的图片"
    - "CDN 图片可放入 sitemap，但需在 Search Console 验证 CDN 域名"
  naming:
    - "文件名使用描述性词语：black-kitten.jpg ✅ / IMG00023.JPG ❌"
    - "文件扩展名与实际格式匹配"
  formats:
    supported: ["BMP", "GIF", "JPEG", "PNG", "WebP", "SVG", "AVIF"]
  responsive:
    - "srcset/<picture> 必须提供 fallback src 属性（部分爬虫不识别 srcset）"
  placement:
    - "图片放在相关文字附近，增强语义上下文关联"
    - "多页面引用同一图片时使用一致的 URL（避免浪费抓取预算）"
  schema:
    - "使用 primaryImageOfPage 或 og:image 指定首选图片"
    - "配合 schema.org image 属性可在 Google Images 获得富媒体标记"

Alt 文本规范

<!-- ✅ 描述性 alt 文本 -->
<img src="product.jpg" alt="红色运动鞋 Nike Air Max 侧面展示" />

<!-- ✅ 功能性图片 -->
<img src="search-icon.svg" alt="搜索" />

<!-- ✅ 装饰性图片 - 空 alt -->
<img src="decorative-line.svg" alt="" role="presentation" />

<!-- ❌ 错误做法 -->
<img src="product.jpg" alt="图片" />              <!-- 无意义 -->
<img src="product.jpg" alt="product image photo" /> <!-- 关键词堆砌 -->
<img src="product.jpg" />                           <!-- 缺少 alt -->

Next.js 图片优化

import Image from 'next/image'

// 关键图片（首屏 LCP 元素）
<Image
  src="/hero.jpg"
  alt="产品展示主图"
  width={1200}
  height={630}
  priority              // 关键图片使用 priority
  placeholder="blur"    // 模糊占位
  blurDataURL={shimmer}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

// 非关键图片（懒加载）
<Image
  src="/feature.jpg"
  alt="功能介绍图"
  width={800}
  height={450}
  loading="lazy"        // 默认即为 lazy
/>

图片技术规范

image_optimization:
  formats:
    preferred: ["WebP", "AVIF"]
    fallback: ["JPEG", "PNG"]

  dimensions:
    always_set: true
    use_width_height: true  # 防止 CLS

  lazy_loading:
    default: "loading='lazy'"
    above_fold: "priority 或 eager"
    native: true  # 使用原生 loading="lazy" + src

  responsive:
    use_srcset: true
    sizes_attribute: true
    art_direction: "使用 <picture> 标签"

  compression:
    quality: "80-85%"
    max_file_size: "200KB"

4. 链接优化

<!-- ✅ 描述性锚文本 -->
<a href="/guide/seo">SEO 优化完整指南</a>

<!-- ❌ 避免的锚文本 -->
<a href="/guide/seo">点击这里</a>
<a href="/guide/seo">了解更多</a>

<!-- 外部链接 -->
<a href="https://external.com"
   rel="noopener noreferrer"
   target="_blank">
  权威来源参考
</a>

<!-- 内部链接 - 使用 Next.js Link -->
import Link from 'next/link'
&lt;Link href=&quot;/blog/seo-guide&quot;&gt;SEO 优化指南</Link>

html semantics

语义化 HTML 与图片优化

1. 语义化 HTML 标签

2. 标题层级（Heading Hierarchy）

3. 图片优化

Google 图片 SEO 关键规则

Alt 文本规范

Next.js 图片优化

图片技术规范

4. 链接优化

相关文档