搜索引擎爬虫优先抓取语义结构合法的页面，要求<main>非空且唯一、<section>以<h2>起始、<article>用于独立内容、<time datetime>用标准格式，否则主内容不被识别。
搜索引擎爬虫不会“爱上”你的网页，但它会优先抓取、更准建模、更高权重分配给语义结构合法的页面——前提是
为什么没等于没主内容
Google 移动优先索引（2023 年起 100% 启用）根本不会从 <body> 顶部逐行解析。它直接跳过 <header>、<nav>、<footer>，定位第一个合法 <main> 开始提取首屏文本、链接和标题层级。
常见错误现象：
-
<main>为空，或仅含<div id="root"></div>（SPA 未服务端渲染） - 页面存在多个
<main>，或嵌套在<footer>里 -
<main>里塞了登录弹窗、客服电话、广告位
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个 HTML 文档有且仅有一个
<main>，不能嵌套在<article>或<section>内部 -
<main>必须包裹真实可索引的主内容：正文、核心 CTA、关键数据 - 首页是卡片流？
<main>包整个列表，别给每张卡片都套一个<main>
<section> 不是视觉分块，而是独立建模单元
<section> 在爬虫眼里不是“看起来像一块”，而是“可被单独识别、索引、甚至富摘要展示的内容单元”。它必须携带语义锚点，否则会被忽略。
使用场景：
- 单篇博客正文（用
<article>更准，见下条） - FAQ 列表中的每一项问答
- 商品详情页里的“规格参数”“用户评价”“售后政策”等模块
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
<section>必须以<h2>起始，或带aria-labelledby指向一个可见标题 - 纯
<section><p></p></section>不参与主题建模，等同于没写 - 新闻列表页中，应为每条新闻用独立
<article>包裹，而非整个列表套一个<section>——否则爬虫误判为“一篇长文”
<article> 和 <section> 混用会怎样
二者语义不可互换：<article> 表示可独立分发、复用、被 RSS 抓取的内容；<section> 只是逻辑子模块，无此能力。
错误现象：
- 把整页博客列表用
<section>包，每篇却只用<div class="post">—— 爬虫无法识别单篇独立性 - 在
<article>内部又套一层<section>做“相关推荐”，但推荐内容本身无独立语义
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单篇博客、新闻稿、论坛帖子 → 用
<article>，并确保它有明确标题（<h1>或<h2>）和发布时间（<time datetime>） -
<article>可嵌套<section>，但仅用于其内部逻辑分块（如“背景”“方法”“结论”） - 避免用
<article>包裹广告、侧边栏、导航菜单
<time datetime> 格式错，等于没标
“2024年3月15日”对爬虫只是普通字符串，需靠 NLP 推断；而 <time datetime="2024-03-15">2024年3月15日</time> 自带标准格式的 datetime 属性，Google 新闻/博客类页面会据此提升时效性排序权重。
常见错误：
-
datetime值用中文格式："2024年3月15日"或斜杠分隔："2024/03/15"→ 属性被忽略 - 页脚版权日期也加
<time>→ 干扰主发布时间识别 - 只写
<time>2024-03-15</time>，漏掉datetime属性 → 机器不可读
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主发布时间必须用
<time datetime="YYYY-MM-DD">（年月日）或datetime="YYYY-MM-DDTHH:MM"（带时间） - 装饰性日期（如 ©2024）不要用
<time> - 新闻类页面漏标 → “最新结果”排序失效，流量延迟 2–7 天
最常被忽略的一点：所有语义标签必须包裹真实、非 JS 动态生成的可索引内容。用 <main> 包一个空 <div id="app"></div>，等于贴了个假标签——爬虫拿到的是空容器，结构信号彻底失效。
