用语义化标签能提升SEO，但必须正确使用：<main>标识唯一核心内容区，<article>封装可独立分发的内容单元；标题层级需严格遵循逻辑结构；<figure><figcaption>提升图片SEO；JS渲染内容需避免空语义容器。
直接说结论：用 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 这些标签，比堆 <div> 更能让搜索引擎快速定位核心内容；但前提是标签用得对——错用或空挂语义标签反而会干扰爬虫判断。
为什么搜索引擎依赖 <main> 和 <article>？
爬虫不渲染页面，它靠标签名和嵌套关系推断“哪块是用户该看的”。<main> 是唯一性标签，告诉爬虫“这里就是本页最核心的内容区域”，跳过它等于让爬虫从页脚或广告里猜主题。<article> 则表示一块可独立分发、可被 RSS 订阅或单独索引的内容单元（比如一篇博客、一条新闻），Google 的移动优先索引会据此提升该区块的权重。
- 每个 HTML 文件最多只能有一个
<main>，重复使用会被忽略或降权 -
<article>可以有多个，但必须包裹完整、自包含的内容（含标题、正文、时间等） - 不要把
<article>当成样式容器塞进按钮或空白 div —— 空语义标签对爬虫是噪音
<h1> 到 <h6> 不是排版工具，是内容树骨架
标题层级不是为了“看起来有层次”，而是给搜索引擎建一棵内容逻辑树。跳级（如 <h1> 后直接 <h4>）、多个 <h1>、或把 <h2> 当作装饰性大字用，都会打乱爬虫对主题权重的判断。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每个页面只用一个
<h1>，且必须包含页面核心关键词（如页面讲“HTML语义化SEO”，<h1>就该是这个短语） -
<h2>对应一级模块（如“语义标签作用”“常见错误示例”），建议每页 3–5 个 - 避免用
<h3>包裹纯图标按钮或无文本区域——这不是标题，是交互元素
<figure> + <figcaption> 是图片 SEO 的关键组合
仅给 <img> 加 alt 属性只是基础；把图放进 <figure> 并配 <figcaption>，等于给这张图打上结构化标签。搜索引擎会把 <figcaption> 文本与图片内容联合分析，提升图文匹配度和长尾词覆盖能力。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<figure> <img src="semantic-tag-example.png" alt="article标签包裹独立博客文章的HTML结构示例"> <figcaption>图：<code><article></code> 用于封装可独立分发的内容单元</figcaption> </figure>
- 装饰性图片（如分割线、背景图）必须设
alt=""，否则会被当作缺失内容处理 - 不要把
<figure>当通用容器滥用——它专指“带说明的独立媒体内容”
最容易被忽略的点是：语义化失效往往不是因为没用新标签，而是 JS 渲染内容 + 空语义容器并存。比如用 <main> 包着一个空 div，等 JS 加载完才填入内容，爬虫抓到的就是空壳——它不会等 JS 执行。这类页面在 Google Search Console 里常显示“主要内容缺失”警告。
