注意力机制详解：从QKV到Transformer与CV应用
2026/9/19 10:29:56
Front-End-Checklist 前端 SEO 指南：如何为每个页面编写唯一且描述性的 H1 标签
【免费下载链接】Front-End-Checklist🗂 The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist
本指南以 Front-End-Checklist 仓库中的 h1 规则文档为主体，系统讲解 H1 标签在页面 SEO、无障碍与用户体验中的核心作用，给出缺失、重复、空标签、纯品牌名等常见问题的判定方法与修复步骤，并深入仓库源码展示该规则在 MCP 代码审查工具中的自动化落地方式。读完本文，你将能够独立审计页面标题结构、编写合规的 H1 文案，并在 React/Next.js 项目中正确放置唯一的 H1 元素。
H1 规则是什么
<h1>元素是一个页面的主标题（primary heading）。在 Front-End-Checklist 的规则体系中，h1 规则被归类为seo / meta-tags类别，优先级为medium，难度为intermediate，预估耗时10 分钟。其核心约束是：
- 每个页面应且只应有一个描述页面主题的
<h1>标签； - H1 不必与
<title>标签完全一致，但主题上必须保持一致； - 空的
<h1>、页面上多个<h1>、以及只包含品牌名的 H1 都属于需要修复的问题。
规则原文位于 skills/h1/references/rule.md，同内容的结构化版本可在 packages/content/rules/en/seo/h1.mdx 中查看（该文件以 frontmatter 形式记录了优先级、类别、TLDR、检查提示、修复提示与关联规则）。规则同时被包装为可执行的 Skill 元数据（见 SKILL.md 中的description与metadata），供 LLM 或 Agent 在审计页面标题结构、为落地页或博客文章生成 H1 文案、或审查可能产生空/缺失 H1 的 CMS 模板时直接调用。
代码示例：从反例到正例
❌ 反例：页面完全没有 H1
<main> <h2>Welcome to Acme Corp</h2> <!-- No H1 — Google has no primary heading to use --> <p>We build enterprise software...</p> </main>页面只有<h2>，没有<h1>，搜索引擎便缺少一个明确的主标题信号来判断页面主题。
❌ 反例：多个 H1 标签
<main> <h1>Acme Corp</h1> <!-- Brand name only --> <article> <h1>Project Management Software for Teams</h1> <!-- Second H1! --> </article> </main>同一页面出现两个<h1>会稀释主主题信号，搜索引擎难以确定页面真正聚焦的主题。
❌ 反例：H1 只有品牌名
<h1>Acme Corp</h1> <!-- Does not tell Google or users what this specific page is about -->品牌名无法告诉 Google 或用户"这个具体页面在讲什么"，白白浪费排名机会。
✅ 正例：单一描述性 H1
<main> <h1>Project Management Software for Enterprise Teams</h1> <p>Acme Corp helps teams of 50+ manage projects with Kanban, time tracking, and automated reporting.</p> <h2>Key Features</h2> <!-- H2 and below for sub-topics --> </main>H1 精确描述页面主题并自然融入目标关键词，后续内容用<h2>及更低级别标题组织子主题。
✅ 正例：H1 与 title 对齐但不完全相同
<head> <!-- Title includes brand; H1 is content-focused --> <title>Project Management Software — Acme Corp</title> </head> <body> <h1>Project Management Software for Enterprise Teams</h1> </body><title>可以带上品牌名，H1 则聚焦内容主题，两者共享核心关键词但不必逐字相同。关于 title 标签的完整写作规范（如 50–60 字符长度建议、按页面类型的命名模式、Next.js 的generateMetadata与title.template实现），可参考配套规则 meta-title.mdx。
为什么 H1 重要
- 页面内 SEO（On-page SEO）：搜索引擎使用标题理解页面结构与主题相关性，其中 H1 的权重最高。H1 缺失、重复或缺乏关键词会削弱主题清晰度，直接影响目标词的排名表现。
- 无障碍（Accessibility）：屏幕阅读器会把 H1 播报为页面的主标题，辅助技术用户可以立刻感知页面上下文。标题层级语义（h1→h2→h3 不跳级）在配套的 heading-order.mdx 与 heading-hierarchy.mdx 中有更细的约束。
- 用户体验（UX）：清晰的 H1 锚定页面内容，帮助读者确认自己找到了想要的信息，避免出现与多个页面重复标题相同的歧义感。
检查清单：什么算 H1 问题
| 问题 | 影响 |
|---|---|
页面没有<h1> | Google 缺少清晰的标题信号 |
页面存在多个<h1> | 稀释主主题信号 |
空<h1> | 只有结构元素没有内容 |
| 仅品牌名的 H1 | 与页面主题无关，错失排名机会 |
| 通过 CSS 隐藏的 H1 | Google 可能直接忽略 |
如何修复 H1 问题
- 运行站点爬取或使用浏览器 DevTools，找出含 0 个或 2 个以上 H1 的页面。
- 对没有 H1 的页面：补充一个描述页面主题的 H1，并把当前最高级别的标题降级为 H2。
- 对多个 H1 的页面：保留最贴合主题的那个，其余降级为 H2，并确保与页面的 title 策略保持一致。
- 对仅品牌名的 H1：在品牌名旁边补充页面主题，或直接替换为包含主题的文案。
- 验证修复结果：务必检查渲染后的 DOM 而非源码，因为 JavaScript 框架可能改变标题结构。
React / Next.js 中的落地要点
Skill 文档明确给出了框架特定的审查建议：
In Next.js/React: ensure the H1 is in the page component, not in the shared layout.
即H1 应放在页面组件中，而不是放在共享的 layout 里。因为共享布局中的标题会在所有页面重复出现，导致每个页面产生相同的 H1（等价于"多个 H1"问题）；同时要留意 H1 出现在跨页面共享的<header>中（通常是站点 logo 的 alt 文本）而非页面专属内容的场景，代码审查时应将其标记为问题。
典型的修复对比：
Before: <h1>Acme Corp</h1> (brand only) After: <h1>Project Management Software for Enterprise Teams</h1>Front-End-Checklist 的 Web 应用本身就遵循了这套约定：例如 about/page.tsx/about/page.tsx#L20) 中每个页面只有一个语义明确的 H1，而内容子主题交由更低级别的标题组织，可以作为真实项目的参照样例。
仓库源码中的自动化验证
该规则不只是文档，它还以代码审查逻辑的形式落地在 MCP 服务器的 review-code.ts 中。从源码结构看，审查器把h1作为 slug 别名接入既有检查：
- 统计源码中
<h1的出现次数（h1Count）； - 若文档包含
<body且h1Count === 0，返回问题Page has no <h1> element — every page needs exactly one main heading； - 若
h1Count > 1，返回问题Found ${h1Count} <h1> elements — a page should have exactly one <h1>。
与之联动的是标题层级检查：当h1Count === 0但存在<h2时，会标记为"发现<h2>而没有<h1>（标题层级问题）"；heading-order检查则遍历h1–h6的级别序列，发现跳级（如 h1 后直接跟 h3）即报Heading level skipped。另外，空的标题元素由empty-heading检查负责，标记"标题必须包含描述性文本"。这几条检查共同构成了 H1 规则在代码层面的完整闭环，与 review-code.ts 中h1别名块的实现一一对应。
例外情况
- 必要的工具页或合规页面可以有意保持简短，不应以面向排名的内容深度标准来评判。
- AI 辅助起草本身不是失败；应标记的是无依据的论断、缺少人工编辑审查或低原创性输出。
- 当页面同时存在信任信号问题与爬取/索引问题时，应优先让页面获得可被索引的资格，再优化内容质量信号。
标准与验证
标准（Standards）：以 Google Search Central 关于标题（Headings and title tags）的官方说明与 MDN 的 The HTML Section Heading elements 文档作为最终面向搜索的 HTML、元数据与爬取行为的判定基准，在规则被视为满足前，需按这两份参考实现核对。
自动化检查（Automated Checks）：
- 检查渲染后的 HTML 与 HTTP 响应头，确认预期的元数据或可爬取性信号存在；
- 在适用时用 Google Search Console 或等效工具测试受影响的 URL；
- 部署后对代表性页面集合重新爬取。
手动检查（Manual Checks）：
- 确认修改不会与 canonical-url、robots 或结构化数据信号产生冲突。
对应规则的正规引用结构见 packages/content/rules/en/seo/h1.mdx 中的sources与resources字段；该规则与 heading-order、meta-title、meta-description、title-unique 在relatedRules中互为关联，审查时可一并核对。
【免费下载链接】Front-End-Checklist🗂 The essential checklist for modern web development, for humans and AI agents项目地址: https://gitcode.com/gh_mirrors/fr/Front-End-Checklist
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考