必须唯一且包裹全部主体内容，因为搜索引擎将<main>视为页面核心内容区的唯一坐标，多出或遗漏会导致爬虫误判重点，如将页脚、广告当作正文索引；SPA路由切换后未清理旧<main>会触发Google“结构冲突”警告，造成收录延迟。
为什么必须唯一且包裹全部主体内容
搜索引擎把 <main> 当作页面“核心内容区”的唯一坐标，多出一个或漏掉一部分，爬虫就会误判重点——比如把页脚备案号、侧边栏广告当成正文索引。真实案例中，SPA 页面路由切换后未清理旧 <main> 节点，导致多个 <main> 共存，触发 Google 的“结构冲突”警告，收录延迟超 3 天。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个 HTML 文档只出现一次
<main>，且必须直接包裹所有用户真正要读的主体内容（不含导航、页脚、弹窗） - 服务端渲染（如 Next.js）需确保每次响应只输出一个
<main>；客户端路由（如 React Router）要在组件卸载时移除残留节点 - 不要用
<main>包裹登录框、广告位或工具栏——这些属于辅助内容，该放<aside>或独立区块
到必须严格递进，且只能有一个
必须严格递进，且只能有一个
跳级使用标题（比如从 <h1> 直接跳到 <h3>）或堆砌多个 <h1>，等于向爬虫传递“我不知道重点在哪”的信号。Google 明确将标题层级作为判断内容主次的第一依据，<h1> 中的词天然获得更高权重。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每页仅一个
<h1>，且必须包含本页核心主题词，例如文章页写<h1>HTML表格SEO优化技巧</h1>，而非<h1>前端笔记</h1> -
<h2>–<h6>按逻辑嵌套：章节用<h2>，子节用<h3>，禁止跳级；<h2>可自然带长尾词，但别硬塞“SEO 教程 优化 方法” - 避免
<h1>套在<header>里再嵌一层标题标签，造成冗余层级
这些标签不改变样式，但直接影响爬虫对页面功能区的识别效率。<nav> 内的链接会被标记为“站点导航链”，影响内链权重分配；<header> 和 <footer> 则帮助划分上下文边界——同样的关键词，出现在 <main> 段落里比出现在 <footer> 里可信度高得多。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<nav>只包主导航菜单（顶部/侧边主链接），勿塞友情链接、社交图标或登录入口 -
<header>放站点标识、主标题、搜索框等全局头部元素；单个文章页也可有自己的<header>（含发布时间、作者） -
<footer>仅限版权信息、备案号、隐私政策链接；把“热门标签”“相关推荐”塞进去会导致元信息过载，被误判为低质补充内容
误用语义标签比不用更伤SEO
堆砌标签却不匹配实际结构，会触发搜索引擎的结构校验机制。比如用 <section> 替代 <div> 却不配 <h2> 或 aria-labelledby，等于给爬虫一张没标注坐标的地图——它宁愿忽略这块区域，也不愿猜错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
<section>应有明确主题，且至少带一个标题级元素（<h2>或aria-labelledby） -
<article>用于可独立分发的内容单元（博客、新闻、评论），别用它包整个首页 -
<time datetime="2026-08-05">必须用 ISO 格式，纯文本“今天”或“8月5日”无法被富摘要识别
语义化不是贴标签比赛，而是让 HTML 结构如实反映内容逻辑——爬虫只信代码写的事实，不信你心里想的布局。
