HTML页面SEO权重提升的语义化标签实战

爬虫不会读 CSS 类名，也不会猜你写在 div.content 里的到底是文章、广告还是版权声明。main 是唯一被 HTML5 规范明确定义为「页面主体内容容器」的标签，Google 移动优先索引会优先提取它内部的文本、链接和结构信号。

• 每个页面只能有一个 main，嵌套在 header、footer 或 aside 里会被忽略
• 如果 main 里塞了大量 JS 渲染的空占位符（比如 <div id="article-root"></div>），而首屏无实际 HTML 内容，爬虫大概率跳过该区域
• 搭配 h1 使用时，main > h1 的组合比散落在各处的 h1 更易被识别为页面核心主题

article 和 section 到底该用哪个

article 表示可独立分发、复用的内容单元（如一篇博客、一条新闻、一个用户评论）；section 只是按主题划分的区块，没有独立语义价值。用混了，会导致内容被降权或误判为重复。

• 博客列表页：每篇摘要都应包裹在单独的 article 中，而不是全塞进一个 section
• 单篇博客内：「背景介绍」「技术原理」「实操步骤」这些模块用 section + 对应 h2 划分，而非多个 article
• article 内部可以嵌套 section，但反过来不行；section 里没 h2 或其他标题，会被视为结构缺失

nav 和 aside 的边界在哪

nav 只用于站点级导航路径（首页、分类、搜索、登录），不是所有带链接的区域都叫导航；aside 是辅助性内容，和主内容相关但可剥离——比如「作者简介」「推荐阅读」，不是「友情链接」或「底部备案信息」。

立即学习“前端免费学习笔记（深入）”；

• 页脚里的「关于我们」「隐私政策」链接不要放 nav，它们属于全局信息，用 footer + 普通 a 即可
• 侧边栏广告、第三方推荐卡片，不属于 aside 的语义范围，应使用 div 并避免加语义类名误导爬虫
• 同一页面出现多个 nav（如顶部主导航 + 文章内目录）是允许的，但每个都要有明确用途，不能只为样式隔离而滥用

figure/figcaption 对图片 SEO 的真实作用

单独给 img 加 alt 是基础，但搜索引擎对图文关系的理解依赖结构。把图和说明一起放进 figure，相当于告诉爬虫：“这段文字不是随便写的，它是这张图的官方解释”。

• 必须成对使用：figure 包裹 img + figcaption，缺一不可；只用 figcaption 会失效
• figcaption 文本需自然描述图像内容，比如 <figcaption>图：<code>main 标签在 Chrome DevTools 中的 DOM 结构高亮效果</figcaption>
• 装饰性图片（分割线、背景图）必须设 alt=""，否则会被当作缺失语义内容处理，拉低页面质量分

最容易被忽略的是：语义标签只有在首屏静态 HTML 中存在才有效。JS 动态插入的 main 或 article，在多数爬虫快照中仍是空的——别等上线后才发现内容没被索引。