<main>必须唯一且不能嵌套在页脚中，它是搜索引擎定位正文的结构锚点；错用会导致权重打折、降权或收录失败。
<main></main> 必须唯一，<nav></nav> 不能塞进页脚，<article></article> 不等于“每条微博都套一个”——语义化标签不是换掉 <div> 就完事，而是让搜索引擎在毫秒级解析中，准确锁定“哪段是正文”“哪块是导航”“哪个时间是发布日”。
为什么 Google 把 <main></main> 当作结构锚点
Google 明确将 <main></main> 视为页面“内容可信度”的第一判断依据。它不关心你写了多少字，只看是否被正确包裹：
- 多个
<main></main>或嵌套在<footer></footer>里，会触发“结构冲突”警告，整块内容权重直接打折 - SPA 路由切换后没销毁旧
<main></main>节点，DOM 中残留两个，Google 会降低对全页内容的评分可信度 -
<main></main>内部混入登录框、客服电话、友情链接——这些本该属于<header></header>、<aside></aside>或普通<div>，否则被判定为“元信息污染”
<article></article> 和 <section></section> 的使用边界在哪
二者都划分内容区块，但语义完全不同：
-
<article></article>表示**可独立分发、复用、索引的内容单元**，比如一篇博客、一条新闻、一个用户评论。搜索引擎会把它当作一个完整实体来建索引 -
<section></section>只表示**主题相关的内容分组**，必须配<h2>或aria-labelledby，否则爬虫视为空白语义块；纯无标题的<section></section>不仅无效，还稀释结构信号 - 常见误用：
<article></article>套列表项（如商品卡片）、<section></section>包单个按钮或广告位——这会让爬虫丢失上下文，也破坏屏幕阅读器导航流
<time></time> 和纯文本日期对索引的影响差异
“2024年3月15日” vs <time datetime="2024-03-15">2024年3月15日</time>，对爬虫来说是两种信息密度：
立即学习“前端免费学习笔记（深入）”；
- 前者只是字符串，需靠周边词（如“发布于”“更新于”）+ NLP 推断，容易漏判或误判
- 后者自带机器可读的
datetime属性，Google 在新闻/博客类页面中会赋予更高时效性权重，直接影响“最新结果”排序 - 同理：
<address>明确标记联系信息，有助于本地 SEO；<figure><figcaption>让图片说明被单独识别，提升图搜命中率
最容易被忽略的兼容性陷阱
语义化不是写完就生效，实际部署中几个点常被跳过：
- 旧版 IE 不支持新语义标签？不是问题——现代 polyfill（如 html5shiv）已能兜底，真正问题是**未声明 DOCTYPE**，导致 IE 进 quirks mode，所有语义标签退化为普通
<div> - React/Vue 组件中动态生成 DOM 时，
<main></main>或<nav></nav>可能被重复挂载，需在组件卸载时手动移除或用 key 控制生命周期 - 服务端渲染（SSR）若未同步输出语义结构，首屏 HTML 缺失
<main></main>，而 JS 加载后才补上——爬虫抓取的是初始 HTML，此时结构信号已丢失
语义化真正的难点不在“用不用”，而在“用得准不准”：每个标签背后都有明确的机器解析规则，错位一次，可能让整块内容在搜索结果中降权、延迟收录，甚至被完全忽略。
