讲解

SEO（搜索引擎优化）的技术根基就埋在 HTML 里。搜索引擎的爬虫读的就是你的 HTML 源码，结构清晰、语义明确的页面天然更容易被正确理解。最重要的三个字段都在 head 里：<title> 是搜索结果里那行蓝色标题，要具体、唯一、含关键词且控制在约 30 个汉字内；<meta name="description"> 是标题下的摘要，虽不直接参与排名，但直接影响用户点不点你；规范链接 <link rel="canonical" href="..."> 告诉搜索引擎「多个相似 URL 里哪个是正主」，避免权重分散。

body 里的内容结构同样影响收录质量：每页一个 <h1> 点明主题，h2–h6 层级递进不跳跃，搜索引擎据此提取页面大纲；图片的 alt 是搜索引擎理解图片内容的唯一途径（它不会「看」图）；语义化元素（main、article、nav）帮爬虫区分正文与样板区域；链接文字写「查看 HTML 教程」而不是「点这里」，等于给目标页投了一票相关性。还有一个常被忽视的点：爬虫现在能执行 JS，但纯客户端渲染的页面仍有收录延迟和不彻底的风险，重要内容应尽量直接出现在 HTML 里（服务端渲染或静态生成）。

社交分享场景由 Open Graph 协议控制：og:title、og:description、og:image 决定链接被分享到微信、X、Facebook 时卡片显示什么，不配的话平台只能瞎猜。更进一步，还可以在页面里嵌入 JSON-LD 结构化数据（Schema.org 词汇表），让搜索结果直接展示评分、价格、面包屑等富摘要。最后记住技术 SEO 的铁律：内容是王，以上所有手段只是让好内容被正确看见，而不是把平庸内容推上去。

示例

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- 搜索三件套 -->
  <title>HTML 教程：从零基础到语义化 | ohmydocs</title>
  <meta name="description" content="系统讲解 HTML 核心概念：文档结构、文本、链接、图片、表单与语义化，配大量示例，零基础可学。" />
  <link rel="canonical" href="https://docs.ohmygp.com/html" />

  <!-- 分享卡片 -->
  <meta property="og:title" content="HTML 教程 | ohmydocs" />
  <meta property="og:description" content="零基础系统入门 HTML。" />
  <meta property="og:image" content="https://docs.ohmygp.com/og-cover.png" />

  <!-- 结构化数据：帮搜索引擎理解页面类型 -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Course",
      "name": "HTML 教程",
      "description": "零基础系统入门 HTML"
    }
  </script>
</head>
<body>
  <main>
    <h1>HTML 教程</h1>
    <article>
      <h2>文档结构</h2>
      <p>正文内容直接写在 HTML 里，爬虫无需执行 JS 即可读取……</p>
      <img src="skeleton.png" alt="HTML 文档结构示意图：doctype、head、body 三层" width="640" height="360" />
    </article>
  </main>
</body>

常见坑

  • 全站 title 千篇一律：每个页面的 title 都应描述本页内容，重复标题让搜索结果无法区分，也浪费关键词机会。
  • 重要内容靠 JS 渲染后才出现：收录延迟、摘要抓取失败都可能发生。核心内容进 HTML 初始文档，JS 只做增强。
  • 图片无 alt、链接文字无意义：搜索引擎对图片和链接目标的理解直接归零，等于自动放弃这部分流量。
  • 迷信 meta keywords：keywords 元标签早已被主流搜索引擎完全忽略，堆砌关键词反而可能被判作弊，不用再写。

小结

title/description/canonical 是 head 三件套；一页一个 h1、层级递进、图片有 alt、链接文字有意义、语义化分区；OG 标签管分享，JSON-LD 管富摘要，内容直接进 HTML。下一章学习与 SEO 同源的无障碍基础。