4.3 SEO 搜索引擎优化
4.3 SEO 搜索引擎优化
本节摘要：SEO 的本质是帮助搜索引擎正确理解你的页面——爬虫读的正是那份裸 HTML，本章的结构质量直接兑换成搜索表现。本节讲爬虫的工作方式、页面级 SEO 要素清单（标题描述、标题层级、结构化数据、链接与图片）、黑帽的代价与白帽的长期主义，以及技术 SEO 的自检要点。
学习目标
阅读完本节，你应当能够：
- 描述爬虫抓取、索引、排名三步流程及每步对应的优化点；
- 写出合格的页面标题与描述，掌握长度与关键词的平衡；
- 用结构化数据给页面配"富摘要"资格；
- 检查链接与图片的 SEO 要素（可爬性、锚文本、alt）；
- 识别黑帽手法的风险，理解白帽的复利逻辑。
搜索引擎怎么读你的页面
搜索引擎的工作分三步，每一步都对应你能做的事：
抓取：爬虫顺着链接发现页面，下载裸 HTML。你的优化点：让页面可达——真实链接可导航（JS 动态渲染的内容要确认爬虫能拿到）、robots 约定可抓范围、加载速度别慢到爬虫放弃。
索引：解析内容，判断"这页讲什么"。优化点：语义结构（h1 主题、article 正文、nav 噪音分离）、标题描述的准确自述、规范的 URL 与编码（第 1 章字符编码的收尾在这里兑现：乱码页面无法被正确索引）。
排名：对同主题页面排序，依据相关性、质量、体验等数百个信号。页面级你能影响的：内容质量、结构清晰度、性能（第 5 章）、移动端适配。
这个流程揭示了 SEO 的第一原理：爬虫是一位"只有 HTML、没有眼睛"的读者。它看不到你的精美排版（样式是 CSS 的事），听不到你的视频（除非有文字轨），点不动你的交互（脚本渲染的内容要确认可获取）。对这位读者最有效的表达，恰恰是第 2 章的全部内容——又一次，语义结构是地基。
页面三要素：标题、描述、URL
搜索结果页上你的"门面"由三个 head 元素决定，也是页面级 SEO 投入产出比最高的地方：
<head> <meta charset="UTF-8"> <title>HTML语义化标签入门教程 - 造页手记</title> <meta name="description" content="用header、nav、article等语义化标签搭建页面结构的完整指南，含分区元素对照表与改造实例。"> <link rel="canonical" href="https://www.example.com/html-semantic-guide"> </head>
title 是排名权重最高的单点，也是搜索结果的第一行。写法要点：核心关键词前置（用户搜什么，标题就以什么开头）、每页唯一（重复标题浪费了页面间的区分度）、长度约三十字以内（超出被截断）、别堆砌（三个以上关键词的标题读起来像垃圾广告，用户不点，排名也受累）。站名后缀放尾部，用分隔符隔开。
description 不直接参与排名，但它是搜索结果里的"广告文案"，决定用户点不点。写好一条：把页面的核心价值一句话说清、含关键词（搜索词会被加粗显示）、长度七八十字。每页唯一、真实概括——描述与内容不符会透支点击信任。不写的话搜索引擎会自己从正文抓一段，通常抓得不如你写。
URL 与 canonical：URL 简短含关键词、用连字符分隔；canonical 标签声明"这个页面的规范地址"，用于合并重复内容的权重——同一内容带不同参数的多条 URL 会被视为重复，权重被稀释，一条 canonical 归拢。
正文结构：标题层级的搜索价值
head 之外，正文结构对索引质量的影响直接。h1 是页面主题的第一信号，必须与 title 呼应（都在说"语义化标签教程"，而不是 title 说教程、h1 写站点名）；h2 与 h3 构成内容大纲，搜索引擎用它理解篇章覆盖面——这也是内容能否被"精选摘要"（搜索结果顶部的直接答案）引用的结构依据。一篇 h2 清晰列出子主题的文章，比一整篇无层级长文更容易被拆解引用。
正文的另一个要点：真实文字。图片里的字爬虫读不到、canvas 绘制的文字读不到、视频里说的话要靠字幕轨。关键信息必须有 HTML 文本表达——这条与可访问性完全同源，又是"一份投入多方受益"的例证。
结构化数据：给爬虫的填空题
结构化数据用标准词汇在页面里显式声明"这是什么"：这是一篇文章、作者谁、发布于何时；这是一个产品、价格多少、评分几何。主流格式是把词汇表（由 schema.org 社区维护）写进脚本块：
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "HTML语义化标签入门教程", "author": { "@type": "Person", "name": "阿页" }, "datePublished": "2026-01-12" } </script>
声明的回报是富摘要资格：搜索结果里展示星级、价格、发布时间的条目就是结构化数据在起作用——不是排名提升，是展示增强，点击率常常显著高于普通条目。注意词汇要与内容真实对应：给普通页面标产品价格属于欺骗结构化数据，被发现直接取消资格。
链接与图片：可爬性的毛细血管
链接是爬虫的公路。要点四条：导航用真实 a 标签（onclick 加 span 的"伪链接"爬虫走不通，读屏键盘同样走不通——老朋友又一次同框）；锚文本描述目标页内容（"语义化标签教程"优于"点这里"）；重要页面别埋太深（离首页三四次点击内为佳）；死链定期清理（大量死链损耗爬虫对站点的信任）。
图片的 SEO 就是 alt：内容图的 alt 同时是图片搜索的匹配文本与第 4.2 节的读屏文本。文件名也参与（描述性文件名优于无意义编号），图片体积影响加载（第 5 章性能节的懒加载与格式选择会展开）。
黑帽与白帽：复利与高利贷
黑帽指欺骗搜索引擎的手法：关键词堆砌（title 塞满关键词）、隐藏文字（背景同色文字、尺寸一像素）、买链接农场、门页跳转。它们短期可能有效，代价是被降权或除名——搜索引擎的惩罚机制专门针对操纵排名行为，恢复周期以年计。把流量建立在欺骗上的生意，等于高利贷。
白帽是长期主义：结构清晰、内容真实、体验良好、更新稳定。它的回报慢但是复利——页面被正确理解、被引用、被收藏，信号随时间累积。本册不教任何黑帽技巧，不止因为风险，更因为黑帽与"把结构写对"的正道完全重叠冲突：堆砌的标题没法好好给用户看，隐藏的文字没法给读屏用，伪装的页面没法让访客停留。对用户与机器都诚实的页面，就是 SEO 最优解的大方向。
内容质量：排名的终极变量
工具维度之上必须补一句大实话：页面级 SEO 的全部技术手段，决定的是"你的内容被正确理解和呈现"；而排名竞争的终极变量是内容本身的价值——技术做得再满，一篇没有信息增量的页面也排不上去。搜索引擎十年演进的主线就是越来越接近"用户满意度的代理指标"：停留、回访、引用这些行为信号在排序里的权重持续上升。所以 SEO 的完整公式是：好内容乘以好结构。结构是乘号前的系数，上限由内容决定。本册能教你的是系数，内容的价值要靠你对领域的耕耘。带着这个认知回去看黑帽手法，它们的荒谬一目了然：在乘数不变的前提下试图伪造积。
技术自检清单
页面级 SEO 的自检，十分钟过完：
| 检查项 | 合格标准 | 工具 |
|---|---|---|
| title | 唯一、关键词前置、约三十字内 | 手查或抓取工具 |
| description | 每页唯一、真实概括 | 同上 |
| h1 | 每页一个、与主题一致 | 验证器或开发者工具 |
| 图片 alt | 内容图有描述、装饰图空值 | 自动扫描 |
| 链接可爬 | 导航为真实 a 标签 | 禁 JS 后走查 |
| 移动端 | viewport 配置、字号可读 | 手机模式走查 |
| 结构化数据 | 与内容真实对应 | 富媒体测试工具 |
| 重复内容 | canonical 归拢规范地址 | 站点分析工具 |
动手实验：给一份页面配齐门面
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>flex布局入门：五条声明解决常见排版 - 造页手记</title> <meta name="description" content="用justify-content、align-items等五条弹性布局声明实现居中、两栏、等宽卡片的实例教程，附可运行实验页。"> </head> <body> <header><h1>弹性布局入门：五条声明解决常见排版</h1></header> <main> <article> <section> <h2>居中：两条声明</h2> <p>display设为flex后，主轴交由justify-content、交叉轴交由align-items……</p> </section> <section> <h2>两栏自适应：flex配比</h2> <p>侧栏固定基准、主栏grow吃剩余……</p> </section> </article> <nav aria-label="本页目录"> <h2>本页内容</h2> <ul> <li><a href="#center">居中：两条声明</a></li> <li><a href="two-col">两栏自适应</a></li> </ul> </nav> </main> </body> </html>
对照清单检查这份样本：title 关键词前置且含具体收益、description 概括真实、h1 与 title 呼应、h2 构成大纲、导航锚文本描述目标内容。也留了一个错误等你抓：目录第二条链接的 href 少了井号前缀，指向了不存在的地址——死链就在这种手滑里产生，自检时"每个锚点都点一遍"是防漏网的笨办法，也是快办法。
💡 关键直觉：SEO 与可访问性的检查清单有七成重叠，因为爬虫与读屏都是"只读裸 HTML 的盲眼读者"。为其中一个做的优化几乎总是免费送另一个——质量四维的同源性在这一点上最直观。
高频疑问两则
问：meta keywords 还要写吗？
不写。这个字段多年前就被主流搜索引擎忽略（堆砌滥用太严重），写了无害但纯属性能安慰剂。把想塞进 keywords 的词检查一遍是否已出现在 title 与正文里，那才是有位置的地方。
问：单页应用（内容靠脚本渲染）怎么办 SEO？
三条路：服务端渲染（首选，爬虫直接拿到成品 HTML）、预渲染（关键页面生成静态快照）、确认目标搜索引擎的渲染爬虫能执行脚本。判断标准回到第一原理：禁用脚本后页面还有没有内容。这也是内容型站点慎选纯客户端渲染的原因——第 5 章工程化话题会再遇到它。
问：改了 title 多久见效？要不要频繁调整？
索引更新以天到周计，排名反馈周期更长，所以 title 与 description 的调整要"改定后观察一段"而不是天天微调——频繁改动本身会干扰搜索引擎对页面稳定性的判断。合理的节奏是：上线前认真写好，之后只在内容方向变化或数据证明点击率差时调整。SEO 的耐心成本常被低估，但这也是白帽复利逻辑的一部分。
本节要点回顾
- 爬虫是盲眼读者：抓取、索引、排名三步，每步的优化点都指向"裸 HTML 的表达质量"。
- 门面三件：title 关键词前置每页唯一、description 是广告文案、canonical 归拢重复。
- 正文结构即索引质量：h1 呼应 title、h2 构成大纲、关键信息必须有文本表达。
- 结构化数据换富摘要：词汇与内容真实对应，作弊取消资格。
- 链接与图片是毛细血管：真实 a 标签、描述性锚文本、alt 双重收益。
- 白帽是复利：好内容乘以好结构，系数由本章教，乘数靠耕耘。
下一节把四个维度的检查交给机器：验证器与它的报告怎么读。