Heading 用来命名章节并表达不同概念之间的关系。它帮助读者扫读、辅助技术导航、生成目录，也让搜索系统更清楚地理解页面。它的价值来自真实内容大纲，不是重复关键词或把每行粗体都变成 Heading。
Browser 与 Google 可以处理不完美结构，多 H1 也不会自动造成处罚。不过当前 MDN 建议使用一个描述页面的 H1，再以逻辑嵌套的 H2–H6 展开。这让设计、无障碍与 Template QA 都有一个稳定主标题。
快速答案：每个层级只负责一个任务
| 层级 | 文件任务 | 常见用途 |
|---|---|---|
| H1 | 命名页面主要主题或任务 | 一个清楚页面标题 |
| H2 | 开启主要主题下的大章节 | 范围、流程、价格、证据、FAQ |
| H3 | 拆分一个 H2 的相关子章节 | 步骤组、选项或子问题 |
| H4 | 拆分真正的 H3 子章节 | 详细方法或嵌套例子 |
| H5–H6 | 服务特别深入的文件 | 技术规格或长篇标准 |
| CSS Class | 只控制视觉 | 字号、粗细、颜色与间距 |
Heading 表达结构，不负责字体大小
按照章节关系选择 Heading Level。H2 可以通过 CSS 显示较小，Paragraph 也可显示很大。一句粗体不自动成为 Heading。
W3C 建议按 Rank 嵌套，打开子章节时尽量不要跳级。从 H4 回到 H2 可以是结束深层章节；但 H2 下直接开启 H4 通常会令人困惑。
| 目的 | 使用 | 不要使用 |
|---|---|---|
| 命名页面 | H1 | Large Styled Paragraph |
| 开启主要章节 | H2 | 因为想小一点而用 H3 |
| 开启子章节 | H2 下的 H3 | 没有语义的 Bold Text |
| 显示短 Label | p/span + CSS | 只为 Typography 用 Heading |
| 组织 Navigation | Landmark + 必要的 Heading | 意外跟随 篇文章 深度 |
为什么一个 H1 是最稳健惯例
一个 H1 能让 CMS Template、Design System、Screen Reader Heading List 与自动检查都明确识别主标题。这是为了清楚与维护，不是隐藏 Ranking Factor。
现有页面有多个 H1 时先调查原因。Logo、Modal、Embedded 篇文章 或 Reusable Component 可能自动产生；不要不看关系就把全部改成 H2。
| 发现 | 可能含义 | 处理 |
|---|---|---|
| 一个描述性 H1 | 主主题清楚 | 保留并确认页面独有 |
| 没有 H1 | 视觉标题用错 Element 或数据缺失 | 加入真正可见 Page Title |
| 两个竞争 H1 | 看不出主标题 | 选择一个，重整另一部分 |
| Logo/Site Name 每页都是 H1 | Global Header 抢走标题 | Brand Link 不用 Heading；正文拥有 H1 |
| Widget 内多个 H1 | 组件语义没有协调 | 按所在页面决定 Level |
对齐 Title Element、视觉标题与 H1
HTML <title> 在 Browser 与搜索环境命名 Document；H1 命名可见页面。文字可不同，但必须承诺同一个主题与任务。Title 可加入精简品牌或搜索 Context，H1 则保持自然。
Google 生成 Title Link 时会参考 Title、Heading 与其他 Prominent Text。如果多个大标题竞争，可能使用第一个。配合Title Tag 流程保持一致。
| 元素 | 主要位置 | 良好关系 |
|---|---|---|
<title> | Browser Tab / 搜索 Source | Page Identity + Optional Brand |
| H1 | 可见主标题 | 同一目的、自然可读 |
| Hero Eyebrow | Category / Context | 短 Label，不竞争 |
| Hero Subheading | Audience / Outcome | 支持而不代替 H1 |
og:title | Social Preview | 同一 Destination Promise |
写章节前先建立大纲
先定义 Page Job，再列出访客需要的问题、决定或步骤。相关内容组成 H2，H2 真的有子主题才加入 H3。如果离开正文就看不懂大纲，Heading 可能太空泛或只为装饰。
- 把页面唯一目的写成 Draft H1。
- 列出访客主要问题、决定或阶段。
- 合并重叠项，删除不支持 Page Job 的章节。
- 把剩下主要组写成描述性 H2。
- H2 真有子章节时才加入 H3。
- 只读 H1–H3，检查是否像清楚目录。
- 顺序按 User Journey，不按任意 Keyword List。
Heading 离开正文也要看得懂
Screen Reader 用户可能打开 Heading List 或逐个跳转。“Why it matters”重复出现时会失去意义。应命名真正 Topic、Result 或 Decision，同时保持精简。
WCAG 2.2 要求已使用的 Heading 与 Label 描述 Topic 或 Purpose，并不要求很长。
| 较弱 | 更清楚 | 原因 |
|---|---|---|
| Why it matters | Why internal links improve discovery | 指出主题 |
| Our solution | 技术 SEO audit and implementation | 解释工作 |
| More information | Website maintenance response times | 预测章节内容 |
| Step 3 | Validate redirects before launch | 加入任务 |
| Amazing results | Organic leads after the migration | 以证据代替 Hype |
| FAQ | Backlink service frequently asked questions | 多个 FAQ Group 时更清楚 |
按页面类型规划 Heading
| 页面 | H1 任务 | 实用 H2 |
|---|---|---|
| 首页page | 品牌主要 Offer / Value | 服务、Proof、Work、Insights、联系 |
| Service | 服务结果与受众 | Best Fit、Scope、Process、Deliverables、Pricing、FAQ |
| 篇文章 | 回答 Query 或承诺任务 | Definition、Decision、Workflow、Example、Mistake、FAQ |
| Hub / Category | 集合与学习目的 | Start Here、Subtopics、Resources、Updates |
| Product / Tool | 产品与主要用途 | Use Case、Feature、Setup、Limit、Price、Support |
| 案例 | 项目与相关结果 | Context、Challenge、Approach、Work、Result、Lesson |
| 联系 | 联系或询盘任务 | 方式、准备资料、回应预期 |
| FAQ Page | 支持范围 | Topic Group + Individual Questions |
Card 只有构成真实章节才使用 Heading
Card Title 在 Service、篇文章 或 Project 有自己的内容时，可以是 Heading。Statistic、Badge、Button 与小 Label 通常不需要。
Repeated Card 的 Level 跟随 Container。H2 下的 Grid 通常使用 H3；Reusable Component 可能需要可配置 Level，不能永远 Hard-code H2。
| Component | Heading 决定 | 检查 |
|---|---|---|
| Service Card | 有独立内容时通常使用 | Level 跟随 Grid |
| 博客 Card | 篇文章 Title 可为 Heading | Linked Heading 描述目标 |
| Image-only 作品集 | Accessible Link Label 可能足够 | 不要 Hidden Keyword Heading |
| Statistic Card | 通常 Plain Text | Value / Label 关联 |
| Pricing Package | 独立 Option 可用 Heading | Feature 属于该 Package |
| CTA Panel | 是真章节才用 | Button Text 不是 Heading |
谨慎处理 Accordion、Tab、Modal 与 菜单
Interactive Control 需要 Accessible Name、Role 与 State。FAQ 问题同时是章节标题时，Accordion Button 可放在 Heading 内，但仍要有正确 Expanded State 与 Keyboard Behaviour。
Tab Panel 要和 Control 建立程序关系。Dialog Heading 用来命名 Dialog，不应成为第二个 Page H1。
| Component | 内容结构 | 无障碍检查 |
|---|---|---|
| Accordion | FAQ H2 下的问题可用 H3 | Button Name + aria-expanded |
| Tabs | Panel Title 跟随页面层级 | Tab / Panel Relationship |
| Modal / Dialog | 使用描述性 Dialog Title | Label 与 Focus Management |
| Mega 菜单 | Navigation Group 与 Label | 不扭曲 篇文章 Outline |
| Carousel | Slide 真是章节才用 Heading | Hidden Slide 不制造重复 |
| Tooltip | 不是 Document Section | 使用 Control Description |
固定区域在不同 Template 保持一致
Navigation、Sidebar 与 Footer 可以有自己的 Heading 和 Landmark。W3C 指出固定 Page Region 应保持一致 Heading Rank，不要因为 Main 篇文章 深度不同而改变。
适当使用 <nav>、<main>、<aside> 与 <footer>。
- Main Content 有一个稳定 H1。
- Header Logo 不成为每个 Route 的 H1。
- Navigation Group Label 跨 Template 一致。
- Sidebar 不复制 篇文章 H1。
- Footer Heading 描述真实 Link Group。
- Mobile / Desktop Navigation 副本不会同时暴露 Heading。
- Cookie Banner 与 Popup 不产生 H1。
- Main 与 Fixed Region 一起看仍有逻辑。
为目录使用稳定 Heading ID
页面足够长时可使用 Table of Contents。以编辑控制的 Slug 或 Stored Identifier 生成 Unique Stable ID，让 Visible Heading 改字时不必破坏所有 Shared Deep Link。
Sticky Header 遮住目标时可用 scroll-margin-top。同时测试 Keyboard Focus、History、翻译与 Duplicate Heading。
| 风险 | 例子 | 控制 |
|---|---|---|
| Duplicate ID | 两个 “Examples” | Unique Stored ID |
| Broken Deep Link | Heading 改字 | Purpose 相同时保留 ID |
| 目标被挡 | Sticky Header | 滚动 Offset + Focus Test |
| Non-Latin Slug | 编码中文 Fragment 难分享 | Stable Readable Convention |
| Collapsed Section | Anchor 进入关闭 Accordion | 自动 Reveal Target |
| Empty TOC | Script 在内容前执行 | 从 Final Rendered Headings 生成 |
本地化意义，不只翻译 Heading 文字
每个语言页面需要自然完整的大纲。不要让英文 Heading 留在马来文或中文正文，也不要强迫三个语言使用相同语序。Hierarchy 与 Page Job 等同即可。
Google 建议 Prominent Text 与页面主要 Language 和 Writing System 一致。
- H1 已本地化且在该语言内独有。
- Title 与 H1 描述同一个本地化目的。
- Template Fallback 不留下混合语言。
- 对应翻译保持相同 Heading Level。
- Heading 仍描述后续章节。
- TOC Label 与 Fragment 在每种语言可用。
- 文字扩展不破坏 Mobile Layout。
- Hreflang 与 Canonical 对齐正确页面。
防止 CMS 与 Page Builder 制造噪音
Template 往往比 Writer 制造更多问题。Logo Widget、Reusable Block、Card、Hidden Responsive Copy 与 Empty Field 可以影响几百个 URL。
应修复 Source Component，不要逐页改 Generated Output。修改 Shared Template 前先 Sample 多种 Page Type。
| Pattern | 可能来源 | 修复 |
|---|---|---|
| 每页同一 H1 | Global Template / Logo | 绑定 Page Title；更换 Brand Markup |
| Empty H2/H3 | Optional Field 仍 Render Tag | 有 Content 才 Render |
| H2 后直接 H4 | Visual-size Dropdown | Semantic 与 Style 分开 |
| 几十个 H2 Card | Hard-coded Component | Contextual Level 或 Plain Text |
| Mobile Heading 重复 | 两个 Layout 同时 Exposed | 一个 Semantic Source 或正确隐藏 |
| Icon-only Heading | Decorative Widget | 移除或提供真正 Label |
| 每题都是 H2 | FAQ Component 忽略 Container | FAQ H2 下适当使用 H3 |
结合 Crawl 数据与人工 Outline Review
Crawler 可找 Missing、Empty、Duplicate、Multiple H1 与 Rank Jump，但不能判断 “Overview” 是否清楚、两个 H2 是否应合并，或 Mobile Reading Order 是否正确。
把自动发现当成 Review Queue，检查代表 Template 与高影响页面，再优先修复 Shared Cause。
| 自动发现 | 能证明什么 | 人工问题 |
|---|---|---|
| Missing H1 | Parsed Output 没有 H1 | Visible Title 是否用了错误 Element？ |
| Multiple H1 | 存在超过一个 H1 | 互相竞争还是独立 Context？ |
| Duplicate H1 | 不同 URL 重复文字 | Duplicate Page 还是有效相同 Product Name？ |
| Skipped Rank | 数字层级跳过 | 开启子章节还是结束前一章节？ |
| Very Long Heading | 超过工具 Threshold | 真的不清楚还是只是具体？ |
| Empty Heading | 没有 Accessible Text | Icon 或 CSS 是否隐藏问题？ |
从页面到 Template 完成审核
- 导出可索引 URL、Title、H1 与 Heading Count。
- 按 Template 与业务重要度分组。
- 检查每个核心 Template 的 Desktop 与 Mobile。
- 确认可见主标题是一个描述性 H1。
- 比较 Title、H1 与 Opening Answer 是否同一目的。
- 离开 Paragraph 阅读 H1–H6 Outline。
- 标记空泛、空白、装饰、重复与错误 Rank。
- 测试 Card、Accordion、Tab、Dialog、菜单 与 Hidden Content。
- 测试 Keyboard 与 Screen Reader Heading Navigation。
- 检查所有语言是否混合并保持等同层级。
- 优先修复 Reusable Component。
- 重新 Crawl、比较 Template 并记录 QA。
衡量清晰度，不制造 Ranking 声明
Heading Cleanup 可能改善导航与理解，但不能把排名改变只归因于 Heading Order。Intent、Content、Link、Competition、Technical Eligibility 与 Result Presentation 都会影响。
衡量 Page Task：Guide 可看 TOC 使用、Section 合作方式 与 Next Step；Service Page 应看 Qualified Enquiry，而不只 滚动 Depth。
| 目标 | 证据 | Guardrail |
|---|---|---|
| 更快找到章节 | TOC、Navigation Test、User Observation | 更多 Click 不一定更好 |
| 理解页面承诺 | Task Test、减少即时困惑 | Title/H1/Content 对齐 |
| 改善无障碍 | Screen Reader Outline + WCAG Review | 自动工具不完整 |
| 减少 Template 缺陷 | Missing/Empty/Competing H1 减少 | Clean Report 不证明文字好 |
| 支持搜索理解 | 稳定 Query Relevance 与 Page Performance | 不承诺 Heading-only Lift |
| 改善转化路径 | CTA Progress 与 Qualified Enquiry | 考虑同时发生的 Content Change |
常见 Heading 错误
- 用 Heading Level 控制 Font Size。
- 每句粗体或 Card Label 都变 Heading。
- 大部分 Heading 重复 Exact Keyword。
- Brand Logo 每页都是 H1。
- 两个同样突出的 Page Title。
- 打开子章节时从 H2 跳 H4。
- 没有 Context 就修复所有 Multiple-H1 Warning。
- Card Component Hard-code Heading。
- 重复使用空泛 “Learn More”。
- Optional Field 留下 Empty Heading。
- Mobile 与 Desktop Markup 同时暴露重复 Heading。
- 以为完美 Outline 能让弱或不相关内容排名。
常见问题
每个页面都需要 H1 吗？
多数有意义、可索引页面应有一个清楚可见 H1。Utility Screen 可能有不同界面需要，但仍须 Accessible Title 或 Label。
一个页面可以多个 H1 吗？
Browser 与 Google 能处理，所以不是自动处罚。不过普通网页与 Template QA 仍以一个描述性 H1 最可靠。
Title Tag 与 H1 必须完全相同？
不需要。可因为品牌、长度或页面可读性改变文字，但必须描述同一个 Page Purpose。
H2 可以直接跳 H4 吗？
开启子章节时尽量避免。前一个深层章节结束后从 H4 回到新 H2 则没问题。
Heading 需要 Exact-match Keyword 吗？
不需要。使用读者理解章节所需的自然文字。
文章应有多少个 H2？
没有固定数量。按照 Page Task 需要的主要章节决定，并删除没有帮助的部分。
每张 Card Title 都要 Heading？
只有 Card 构成有意义章节时。小 Label、Statistic 与 Button 通常不需要 Heading。
FAQ 问题使用 H2 还是 H3？
看 Container。如果 “常见问题” 是 H2，单独问题通常是 H3。
Heading Structure 会影响排名吗？
它帮助表达结构，但改变 Level 没有保证排名提升。应为清晰、无障碍与维护改善，再衡量整个页面。
自动 SEO Tool 能修好层级吗？
Tool 可找 Pattern，但人必须判断关系、文字、Component Context 与 Reading Order。
官方参考资料
- Google 搜索 Essentials
- Google SEO Starter Guide
- Google 搜索 Central: Influencing title links
- MDN: HTML heading elements
- W3C WAI: Headings
- W3C WAI: Headings and Labels
- W3C: Web Content Accessibility Guidelines 2.2
- W3C WAI: Easy heading checks
- WHATWG: HTML headings and sections
- Ahrefs: H1 tag best practices
- Semrush: Heading tags and SEO
分享代表 Template 或 Crawl Export。Jack 可以整理 H1–H6、移除 Page Builder 噪音、对齐 Title 与 Heading，并优先处理可复用修复。
Google 排名如何演变：从 PageRank 到现代搜索系统2026年9月2日
Google AI 内容与 SEO：什么被允许、什么是垃圾内容，以及怎样安全发布2026年9月2日
Google Florida Update 2003：事实、理论与 SEO 教训2026年9月2日