二级页面的h1标签，必须是当前页面唯一的核心内容标题，而不是站点名称。如果搞错，不仅会稀释页面主题，还会损害SEO效果和无障碍访问体验。正确的做法是动态生成真实的标题，并确保整个页面只有一个h1。

简单来说，千万不要在二级页面用站点名称填满h1标签。这看似是个小细节，实际上对搜索引擎和依赖辅助技术的用户来说，是一个不小的障碍。

为什么二级页面使用h1站点名称是错误的

搜索引擎和屏幕阅读器等辅助技术，都依赖h1来定位页面的核心主题。在首页，用

我的网站

来标识品牌，这是完全合理的。但在产品详情页或技术文章页，如果还这样做，就等于向机器错误地宣告：“这个页面的主题依然是‘我的网站’”，从而完全掩盖了页面的真实内容。

这种错误在实际应用中会引发一系列问题：

• 开发体验受损：当你在控制台执行document.querySelector('h1')，拿到的却是模板里的站点名，真正的业务标题被迫降级为h2。像Lighthouse这样的审计工具会直接报错，提示“页面缺少主要地标（Page has no main landmark）”。
• 无障碍访问障碍：想象一下，使用VoiceOver的视障用户进入页面，首先听到的是“我的网站”，然后需要手动向下滚动好几屏，才能找到真正的标题“Vue 3响应式原理详解”。这无疑增加了操作负担。
• SEO效果打折：更直接的影响在搜索排名。Google等搜索引擎在生成搜索结果摘要时，可能会错误地截取站点名加上一段无关的副文本作为描述，导致摘要吸引力下降，直接影响点击率。

二级页面h1的正确来源

那么，正确的h1应该是什么？它必须是当前页面独一无二的内容主干，不能是复用的模板，不能是拼接的字符串，更不能靠CSS隐藏一个再另起一个。

具体到不同技术栈，操作要点如下：

• SSR/静态生成场景：关键在于确保服务端渲染出的HTML中，h1的内容是由路由参数或数据层动态决定的真实标题。例如，直接输出

  React Server Components入门指南

  。
• SPA应用路由切换：在单页面应用中，更新document.title的同时，必须同步更新DOM中的h1元素内容。千万不要只改了浏览器标签页的标题，却忘了改页面内的标题。
• CMS或模板系统：理想情况是禁用“全局页头自动注入h1”这类功能。如果无法关闭，一个不得已的权宜之计是：用CSS将模板中的h1设置为display: none，然后在页面主体内容区域插入真实的h1。但要注意，这种做法需要配合aria-live等无障碍属性，以确保屏幕阅读器能正确识别。

组件化开发时如何避免h1冲突

在现代前端开发中，组件化带来了便利，也带来了新的陷阱。在React或Vue组件里直接硬编码

{{ title }}

是一种高危操作——一旦父组件嵌套使用，很容易在页面上产出多个h1。

更优雅的做法是把标题层级的控制权交给调用方：

• 设计灵活的Header组件：让Header组件接收一个level属性，例如
  用户协议
  。组件内部根据这个属性动态渲染对应的h${level}标签。
• 在Layout组件统一管理：在根布局组件中明确规定，只在
  内容区域允许出现h1，其他所有子组件（如侧边栏、页头）默认从h2开始定义标题。
• 集成自动化检查：将检查逻辑集成到开发工具链中。比如在CI/CD流程中，使用axe-cli或编写Puppeteer脚本，运行document.querySelectorAll('h1').length !== 1这样的断言，确保每个页面有且仅有一个h1。

真正要保留站点名，就不要使用h1

如果品牌露出是硬性要求，也完全有更语义化、更安全的方式来实现，不需要牺牲h1的语义价值：

• 使用h2或其他标签：在
  区域使用

  我的网站

  。视觉上你完全可以通过CSS将其样式做得足够醒目（加大加粗），但在语义上，它只是一个页眉内的二级标题，不会与主内容标题冲突。
• 使用段落或div并明确语义：直接用

  我的网站

  配合CSS样式。为了更清晰，可以加上aria-label或role="banner"来明确其作用域。
• 利用元数据：将品牌信息放在标签和中。这样既能满足品牌曝光的需求，又不会污染页面的正文语义结构。

说到底，真正的难点不在于写出一个h1标签，而在于如何在组件封装、CMS集成、多语言切换等复杂场景下，确保每一个页面的h1，都能始终精准地指向那个不可替代的、此刻正被用户阅读的核心命题。它不应该为了模板的方便而妥协，也不应该为了视觉的一致性而让渡语义的主权。这才是对内容本身，也是对所有访问者最基本的尊重。