聚合页必须每个新闻都包一层article，是因为搜索引擎和辅助技术依赖它识别独立内容单元：article触发独立建模、标题时间提取、长尾匹配及RSS推送；用section则导致爬虫误判、RSS抓取失败、屏幕阅读器跳过，且无语义锚点。
聚合页里用 article 不是为了“加权”，而是让搜索引擎和辅助技术能准确识别“哪一段是独立新闻”——不用它，整页内容可能被当成一块模糊文本处理。
为什么聚合页必须每个新闻都包一层 article
搜索引擎（尤其是 Google 移动优先索引）会把每个 article 当作可独立分发的实体建模：提取标题、时间、正文片段，参与长尾词匹配，并决定是否生成富摘要或 RSS 推送。用 section 替代会导致：
-
document.querySelector('article')查不到单条新闻，RSS 工具无法定位发布时间和链接 - 屏幕阅读器跳过整块内容，因为
section缺少语义锚点（比如没h2就等于“无标题区块”） - 爬虫无法区分“这是第 3 条新闻”还是“第 3 段背景说明”，内容被降权为普通段落
article 内部标题层级错位直接切断语义链
一个 article 没有明确标题，等于告诉爬虫“这条新闻没主干”。常见断链场景包括：
- 父级
section是<h2>国内要闻</h2>，子article里只放<p>北京发布新规…</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>—— 没有h3或<header></header>，语义链断裂 - 用
h1做每条新闻标题：违反“每页仅一个h1”原则，触发结构混乱标记 - 用
div class="title"模拟标题：辅助技术不可读，document.querySelector('article h2')查不到，SEO 信号归零
正确写法是：<header><h3>北京出台数据跨境新规</h3>
<time datetime="2026-06-12">6月12日</time></header>
嵌套 article 反而稀释主内容信号
在聚合页中，article 只应出现在 section 下一级，表示“一条新闻”。以下嵌套是错误的：
-
section → article → article（比如把“专家评论”再包一层article）：第二层article被视为可独立分发内容，但实际没有自己 URL 和发布时间，造成语义矛盾 -
main → 多个 article → 每个 article 再包一个 section 用于“相关推荐”：推荐区不属于该新闻的固有内容，应移出article，用aside或div放在article外侧 - 用
article包广告位或登录弹窗：破坏“可独立分发”前提，触发降权
真正容易被忽略的，是验证 DOM 是否形成新大纲：打开 Chrome DevTools → Elements 面板 → 右键任意 article → “Reveal in Accessibility Tree”，看它是否作为独立节点出现——而不是混在一堆 div 里被折叠掉。
