HTML SEO 基础

一、搜索引擎如何工作

1.1 爬取、索引、排名

搜索引擎的工作分为三个阶段：

爬取（Crawling）：搜索引擎使用爬虫（Spider/Bot）发现和获取网页。爬虫从已知页面出发，顺着链接发现新页面。

索引（Indexing）：爬虫获取的页面内容被分析和存储。页面内容被分解为关键词、标题、链接等元素，建立倒排索引。

排名（Ranking）：当用户搜索时，搜索引擎根据数百个因素对索引中的页面进行排序，返回最相关的结果。

理解这三个阶段，才能理解 SEO 的每个操作分别影响哪个环节。

1.2 爬虫如何发现页面

爬虫发现新页面的方式：

• 链接发现：从已索引页面的链接中找到新页面
• 站点地图：从 sitemap.xml 文件获取页面列表
• URL 提交：通过 Search Console 等工具直接提交

这意味着：没有链接指向的页面，爬虫可能永远无法发现。

二、标题和描述的最佳实践

2.1 title 标签

title 是搜索结果中最突出的元素，对点击率有巨大影响：

<!-- 推荐：清晰描述页面内容，包含关键词 -->
<title>CSS Grid 布局教程：完整指南 | 前端开发网</title>

<!-- 不推荐：过于简短或重复 -->
<title>首页</title>
<title>公司名 - 公司名 - 公司名</title>

最佳实践：

• 长度控制在 50-60 字符
• 重要关键词放在前面
• 每个页面有独特的 title
• 包含品牌名称（通常在后面）

2.2 meta description

meta description 虽然不直接影响排名，但会影响搜索结果的展示和点击率：

<!-- 推荐：准确概括页面内容，包含关键词，有行动号召 -->
<meta name="description" content="深入学习 CSS Grid 布局，包括网格容器、网格项、对齐方式等核心概念。免费教程，适合初学者到进阶开发者。">

<!-- 不推荐：与页面内容无关或关键词堆砌 -->
<meta name="description" content="CSS Grid CSS Grid CSS Grid 布局 Grid 布局 教程">

Google 可能会从页面内容中自动生成描述，而不是使用 meta description。因此 meta description 应该被视为"最佳努力"，而不是保证显示的内容。

2.3 标题层级

正确的 heading 结构帮助搜索引擎理解内容层级：

<!-- 每个页面一个 H1 -->
<h1>CSS Grid 完整教程</h1>

<!-- 层级连续 -->
<h2>什么是 CSS Grid</h2>
<h3>Grid 容器和 Grid 项</h3>
<h3>Grid 轨道和网格线</h3>

<h2>Grid 布局基础</h2>
<h3>grid-template-columns</h3>
<h3>grid-template-rows</h3>

<!-- 不要跳级 -->
<!-- ❌ <h1> → <h3> 跳过了 h2 -->

三、链接的作用

3.1 内部链接

内部链接帮助爬虫发现和索引页面，同时传递页面权重：

<!-- ✅ 使用描述性链接文本 -->
<a href="/css-grid-tutorial">学习 CSS Grid 布局</a>

<!-- ❌ 模糊或无意义的链接文本 -->
<a href="/page12">点击这里</a>
<a href="/page12">更多</a>

<!-- ✅ 链接到相关内容 -->
<p>如果你喜欢这篇 CSS Grid 教程，也可以看看我们的 <a href="/flexbox-guide">Flexbox 完整指南</a>。</p>

内部链接策略：

• 创建逻辑清晰的链接结构
• 重要页面应该有更多内部链接指向
• 使用描述性的锚文本
• 定期检查并修复死链

3.2 外部链接

外部链接（出站链接）到权威网站可以提升页面的可信度：

<!-- ✅ 链接到权威来源 -->
<p>根据 <a href="https://www.w3.org/TR/css-grid-1/" rel="noopener">W3C CSS Grid 规范</a>，Grid 是二维布局系统。</p>

<!-- rel="noopener" 防止反向标签页导航攻击，同时不传递 referrer -->

出站链接的最佳实践：

• 链接到权威、可信的来源
• 使用 rel="noopener" 保护安全性
• 不要吝啬出站链接——这对用户和 SEO 都有价值

3.3 获取外部链接

外部链接（入站链接）是 SEO 中最重要的排名因素之一。高质量的外部链接表示其他网站认为你的内容有价值。

获取外部链接的方法：

• 创建高质量、有深度的内容
• 进行原创研究和数据发布
• 客座博客或合作内容
• 创建有价值的工具或资源

四、robots.txt 和 sitemap.xml

4.1 robots.txt

robots.txt 告诉爬虫哪些页面可以或不可以抓取：

# 允许所有爬虫访问所有页面
User-agent: *
Allow: /

# 禁止爬虫访问管理后台
User-agent: *
Disallow: /admin/

# 禁止爬虫访问某些路径
User-agent: Googlebot
Disallow: /private/

# 站点地图位置
Sitemap: https://example.com/sitemap.xml

robots.txt 的注意事项：

• 禁止抓取不等于禁止索引（如果页面被链接，搜索引擎可能仍会索引）
• 路径是前缀匹配，/admin 会匹配 /admin、/admin/、/admin-panel
• 爬虫可以不遵守 robots.txt（恶意爬虫会忽略它）

4.2 sitemap.xml

sitemap.xml 列出网站的所有重要页面，帮助爬虫发现页面：

<?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-04-08</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/tutorial/css-grid</loc>
    <lastmod>2026-04-08</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

sitemapindex 用于大型网站，包含多个 sitemap 文件。

五、Core Web Vitals 对 SEO 的影响

5.1 Core Web Vitals 是什么

Core Web Vitals 是 Google 定义的衡量用户体验的核心指标：

LCP（Largest Contentful Paint）：最大内容绘制时间，衡量加载性能。目标是 2.5 秒以内。

INP（Interaction to Next Paint）：交互到下次绘制，衡量响应性。目标是 200 毫秒以内。2024 年 3 月取代了 FID。

CLS（Cumulative Layout Shift）：累积布局偏移，衡量稳定性。目标是 0.1 以内。

5.2 如何优化 LCP

<!-- 1. 确保 LCP 图片是预加载的 -->
<link rel="preload" href="/hero-image.webp" as="image">

<!-- 2. 使用现代图片格式 -->
<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero">
</picture>

<!-- 3. 关键 CSS 内联 -->
<style>
  /* above-the-fold styles */
</style>

<!-- 4. 服务器响应时间优化 -->
<!-- 使用 CDN、压缩、缓存 -->

5.3 如何优化 INP

// 1. 长任务分解
button.addEventListener('click', async () => {
  // 使用 requestIdleCallback 或 setTimeout 分解任务
  await performHeavyTask();
});

// 2. Web Worker 处理计算
const worker = new Worker('worker.js');
worker.postMessage({ data: largeData });

// 3. 事件处理防抖
let timeout;
input.addEventListener('input', () => {
  clearTimeout(timeout);
  timeout = setTimeout(() => search(input.value), 300);
});

5.4 如何优化 CLS

<!-- 1. 为图片和视频指定尺寸 -->
<img src="/image.jpg" width="800" height="600" alt="">

<!-- 2. 为动态内容预留空间 -->
<div style="min-height: 100px;">
  <!-- 动态加载的内容 -->
</div>

<!-- 3. 字体加载优化 -->
<link rel="preload" href="/font.woff2" as="font" crossorigin>
<style>
@font-face {
  font-family: 'MyFont';
  src: url('/font.woff2') format('woff2');
  font-display: swap; /* 防止字体加载时的布局偏移 */
}
</style>

六、结构化数据与 SEO

6.1 为什么需要结构化数据

结构化数据帮助搜索引擎更好地理解页面内容，可以导致 Rich Snippet 展示：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "CSS Grid 完整教程",
  "author": { "@type": "Person", "name": "张三" },
  "datePublished": "2026-04-08",
  "image": "https://example.com/og-image.jpg"
}
</script>

6.2 常见结构化数据类型

延展阅读

• Google Search Central
• MDN: SEO
• web.dev: Core Web Vitals
• Schema.org