main标签是HTML5中唯一明确定义的页面主体内容容器，搜索引擎和屏幕阅读器依赖它定位核心信息；缺失、重复或嵌套错误会导致SEO降权与辅助技术失效。
main 标签不是装饰性标签，它是 HTML5 中唯一被规范明确定义为“页面主体内容容器”的语义锚点——搜索引擎和屏幕阅读器都依赖它快速定位、提取并信任当前页面的核心信息。
main 是搜索引擎判断内容可信度的第一依据
Google 移动优先索引会优先解析 main 内部的文本、标题层级（h1–h4）、链接结构和语义元素（如 article、figure）。如果 main 缺失、重复或嵌套错误，爬虫可能把页脚版权、侧边广告甚至导航栏误判为主内容，导致关键词相关性计算偏差、摘要错乱，甚至触发“结构冲突”警告，直接削弱该区域的内容权重。
- 多个 main：Lighthouse 报 duplicate-main，Google 可能降权整页内容可信度
- main 嵌套在 header 或 footer 中：辅助技术大概率跳过，SEO 信号失效
- main 内混入登录框、全局搜索、友情链接：构成“元信息污染”，稀释正文语义密度
什么该进 main，什么坚决不能进
判断标准非常明确：这块内容是否独一无二、不可跨页复用？ 能复制粘贴到其他页面还能原样用的模块，就不属于 main。
- ✅ 应放入：article（单篇博客正文）、商品详情区、独立表单（如注册/下单流程）、搜索结果列表、仪表盘核心数据区块
- ❌ 必须排除：nav（全站导航）、footer（版权与备案）、aside（侧边“推荐阅读”）、网站 Logo、面包屑、客服入口按钮
- ⚠️ 特别注意：header 可作为 main 的直接子元素，但仅限本页专属标题（如文章 h1 + 发布时间），不是全站头部
main 与 article、section 的语义分工
main 定义“页面层级”的主体范围；article 和 section 则在内部组织内容单元。它们不是替代关系，而是嵌套协作：
- main 包裹整个页面核心区域（如博客列表页的全部摘要容器）
- 每个摘要条目用单独的 article 包裹——它可被 RSS 抓取、单独分享、独立索引
- 单篇文章内，“背景”“原理”“步骤”等逻辑模块用 section + 对应 h2 划分；没有标题的 section 会被视为结构缺失
- article 可嵌套 section，但 section 里不能塞 article —— 否则破坏内容单元的独立性语义
动态渲染场景下的常见翻车点
在 React、Vue 或 Next.js 等框架中，main 极易因路由切换或模板复用而失控：
- 每个页面组件都写
<main>{children}</main>→ hydration 后 DOM 出现多个 main - 服务端模板未做路由判断，首页和详情页共用同一套 main 包裹逻辑
- SPA 切换路由时旧 main 未销毁，新内容挂载到另一个 main 中
- Next.js 的
app/layout.tsx里放 main —— 这是全局壳层，主体必须落在page.tsx内
验证方法很简单：打开 DevTools → Elements 面板 → Ctrl+F 搜索 <main，只允许出现一对开始与结束标签；滚动到底部再搜一次，避免漏掉异步加载残留节点。
