页面必须只有一个，因为搜索引擎依靠它判断核心主题，多个会混淆重点；到不可跳级，否则破坏内容结构逻辑，影响seo片段抽取；和须服务端直出且可被爬虫读取，否则首屏信息无效；语义标签必须用原生html元素（如、、），仅靠css类名模拟无seo价值。
唯一 <h1></h1>、连续层级、真实内容可被爬虫读取——这三点没做到，其他 HTML SEO 优化基本白忙。
为什么页面必须只有一个 <h1></h1>
搜索引擎靠 <h1></h1> 判断页面核心主题，多一个就等于主动告诉爬虫“我不知道重点在哪”。CMS 模板、Header 组件、SSR 渲染逻辑稍有疏漏，就容易在页头塞一个 <h1></h1>，再在正文又来一个。常见错误现象是：开发者工具里看到两个 <h1></h1>，但源码里只写了一个——说明 JS 动态插入或组件复用导致重复渲染。
检查方式很简单：document.querySelectorAll('h1').length 在控制台跑一下；更稳妥的是用 curl 或查看服务端返回的原始 HTML，确认 SSR/静态生成阶段输出的就是单个 <h1></h1>。
为什么 <h2></h2>→<h3></h3> 不能跳级
跳级（比如 <h1></h1> 后直接 <h3></h3>）会让搜索引擎认为内容结构断裂，部分 SEO 工具会标为“结构警告”，长期可能影响片段抽取和富摘要展示。
实际开发中容易踩的坑包括：
- 用
<h2></h2>做样式替代（如导航栏文字设成<h2></h2>只为加粗），结果正文真正的小标题只能用<h3></h3>，人为造成断层 - Vue/React 中用
v-if或条件渲染隐藏了某个<h2></h2>，但 DOM 结构已生成，层级依然断裂 - Markdown 解析器默认把二级标题转成
<h2></h2>，但你模板里已有<h1></h1>，却忘了统一降一级
建议所有标题层级从 <h1></h1> 开始，按内容逻辑逐级向下，不为省事跳过 <h2></h2>。
为什么 <title></title> 和 <meta name="description"> 必须服务端可读
Google 等主流爬虫对纯客户端渲染（CSR）页面的首屏内容抓取仍有限制。如果 <title></title> 是 JS 运行后才改的（比如 Vue Router 的 beforeEach 动态设 title），而服务端吐出的是空值或占位符（如 <title>{{ title }}</title>），那爬虫看到的就是无效信息。
关键参数差异：
-
<title></title>长度严格控制在 50–60 字符，超长会被截断，且中文字符算 2 字节，需实测 -
<meta name="description">不参与排名，但直接影响点击率，长度建议 150–160 字符，且必须是完整语句，不是关键词堆砌 - 两者都必须出现在
内，且不能被 JS 删除或覆盖（比如某些 SPA 框架会在 hydration 后清空）
验证方法：禁用 JS 后刷新页面，看浏览器地址栏标题和源码中的 <title></title> 是否一致；用 curl -s URL | grep -i title 查服务端原始输出。
为什么语义标签不能只靠 class 模拟
写 <div class="header"> 或 <code><span class="h2"></span> 对 SEO 几乎零价值。搜索引擎识别的是标签名本身携带的语义，不是 class 名称。CSS 样式再像 <h2></h2>，也不会被当作标题解析。
真正有效的语义化组合是：
- 用
<header></header>包裹站点头部区域，而非<div role="banner">（role 是辅助技术补救，不是语义替代） <li>主内容区必须是 <code><main></main>，且全站唯一 - 文章段落必须用
<p></p>，别用<div> + margin 模拟 <li>列表内容必须用 <code><ul></ul>或<ol></ol>，不要用<div> + <code>::before伪元素造点最容易被忽略的一点：即使用了正确标签，如果嵌套混乱（比如
<main></main>放在<footer></footer>里面），语义也会失效。浏览器开发者工具的“Accessibility”面板能快速暴露这类问题。
