语义化布局是现代网页的底线要求，搜索引擎和屏幕阅读器依赖语义标签（如、、）而非class名识别内容结构；是google判断主体内容的首要信号，且每页仅能有一个；可位于页脚，自带aria role="contentinfo"；用于可独立分发的内容并须含标题，用于依赖上下文的逻辑区块；伪语义化（如误用）比不用更危险。

语义化布局不是“加分项”，而是现代网页的底线要求——搜索引擎不认 class 名，屏幕阅读器不读 div 层级，只认 <header></header>、<nav></nav>、<main> 这些标签本身携带的含义。</main>

为什么 <div class="header"> 会拖累 SEO？ <p>爬虫看到 <code><div class="header">，和看到 <code><div class="sidebar"> 没区别，它无法推断哪个是导航、哪个是主内容。而 <code><nav></nav> 明确告诉爬虫：“这里是一组跳转链接”，<main></main> 直接标记出页面唯一核心区域——Google 官方文档明确指出，<main></main> 是判断页面主体内容的首要信号。

• 多个 <main></main> 会导致爬虫忽略全部，每个页面只能有且仅有一个
• <nav></nav> 不一定非得在 <header></header> 里，页脚的友情链接区也可以用 <nav></nav>，只要语义匹配
• <div class="footer"> 在 Lighthouse 无障碍检测中会被标为“结构缺失”，而 <code><footer></footer> 自动带隐式 ARIA role="contentinfo"

  <section></section> 和 <article></article> 到底怎么选？

  关键看内容是否“可独立分发”。一篇博客正文、一条新闻、一个商品卡片，复制粘贴到别处仍完整有意义，就该用 <article></article>；而“关于我们”“服务流程”“客户评价”这类逻辑区块，依赖上下文存在，用 <section></section> 更准确。

  

  Google SEO GEO Auto Index

  Google索引API工具。用于提交URL以供Google索引。支持两种模式：“auto-index”（获取sitemap，与缓存对比差异并提交...）

  下载
  • <article></article> 内部必须有标题（<h1></h1>–<h6></h6>），否则语义断裂
  • <section></section> 可以没有标题，但建议加上——没有标题的 <section></section> 在文档大纲（Document Outline）中会消失，影响 SEO 结构识别
  • 嵌套关系合法：<article></article> 里可以有多个 <section></section>，但反过来不行

  容易被忽略的兼容性与性能细节

  IE11 及更老浏览器不原生支持语义标签，但仅需一行 document.createElement('header') 就能激活样式识别——现代项目基本不用 polyfill，真正要防的是“伪语义化”：比如把轮播图容器硬套 <aside></aside>，或给广告位加 <article></article>，这反而干扰爬虫判断。

  • <aside></aside> 不等于“侧边栏 CSS 位置”，而是指“与当前内容相关但非核心的信息”，如文章引用来源、作者简介
  • <time datetime="2026-06-12"></time> 这种写法能让 Google 抓取发布时间，直接用于富媒体摘要（Rich Snippet），比 meta 标签更可靠
  • 所有语义标签默认 display: block，但 <main></main> 在部分旧版 Safari 中有 margin-top 异常，建议重置： main { margin: 0; }

  最常被漏掉的一点：语义化不是贴标签游戏，而是重建内容关系。一个 <nav></nav> 里塞 50 个链接，或把整页内容塞进单个 <section></section>，比不用语义标签危害更大——结构失真时，机器比人更容易被误导。