title与h1必须语义连贯，因google以title为页面第一意图信号、h1为正文确认，错位将被标“结构混乱”并影响e-e-a-t；h2须承载真实子模块内容，空挂或堆砌关键词属负面信号；main缺失或嵌套会导致爬虫误索页脚等非正文内容。
h1 和 title 不一致，页面核心意图会被打问号；h2 没配语义内容，等于白写；main 缺失或嵌套，爬虫可能把页脚备案号当正文索引。
为什么 title 和 h1 必须语义连贯
搜索引擎把 document.title 当作页面第一意图信号，h1 是正文里对这个意图的确认。两者错位（比如 title 写“React Server Components 入门”，h1 却是“欢迎来到我的技术博客”），爬虫会标记为“结构混乱”，影响 E-E-A-T 评估。
检查方法很简单：打开控制台，运行 document.title 和 document.querySelector('h1')?.textContent，比对是否指向同一主题——不要求字面相同，但得能逻辑闭环。
- Next.js 动态页常见坑：
generateMetadata中漏掉locale或query参数，导致title重复或错位 - CMS 模板常在
<header></header>里硬编码一个h1，又在正文区域输出一个——必须由后端或 SSR 统一控制，只让正文区域输出h1
h2 不是分段装饰，而是内容层级锚点
h2 的作用不是加粗换行，而是告诉爬虫“这里开始一个有独立语义的子模块”。它必须支撑真实内容，不能空挂，也不能堆砌关键词。
错误写法：<h2>SEO教程 SEO优化 HTML SEO技巧</h2>——这是明确的负面信号；正确写法：<h2>如何用 H2 标签组织长文结构</h2>，后面跟 200 字以上解释。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
section必须配h2–h6，否则语义断裂；没标题的<section><p>这是功能说明</p></section>，爬虫当普通段落处理 - 嵌套超过三层（如
<section><section><section></section></section></section>）会触发 Google “结构噪声”惩罚，关键词识别准确率下降约 22% - 导航栏、搜索框、筛选条件这类纯布局容器，一律用
div，哪怕加了 flex 或背景色
main 标签缺失或误用，会让核心文本边界失效
main 是移动优先索引中提取核心文本的边界锚点。它不加权，但划定范围——没它，爬虫可能把页脚备案号、底部友情链接甚至广告 JS 注入内容当主关键词索引。
必须满足两个硬约束：main 唯一、不可嵌套。别把导航栏、弹窗遮罩层、广告位塞进 main。
- 删掉
main标签后，里面内容还能自然嵌入上下文？能，大概率不该用main -
figure+figcaption是图文 SEO 隐藏开关：搜索引擎联合解析图+文语义，单独放图不加figcaption就等于丢掉一半上下文
alt 属性填错比不填更危险
alt 不是 SEO 加分项，而是图像的文本替代。填错会直接破坏上下文语义，甚至被识别为垃圾信号。
- 功能性图片（按钮、图标）：填作用，例如
alt="搜索"、alt="返回首页" - 内容型图片（产品图、截图）：填准确描述+关键信息，例如
alt="MacBook Air M2 2022 深空灰色正面图,带 MagSafe 接口" - 纯装饰性图片：必须写
alt=""（空字符串），不是省略，也不是填“无”或空格
最常被忽略的是动态生成图片：CMS 或 SSR 渲染时，如果后端没传 alt，前端不要 fallback 成 alt="image" 或空格——宁可留空，也别瞎填。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
