语义化 HTML 标准、DOM 结构干净度排查与 SEO 影响分析

一、问题概述

格式化让源码便于检查，不代表排名或收录提升。本文用标题跳级和图片缺少 alt 两个具体问题建立检查流程，区分可执行的结构提示、人工可访问性判断及本站内部约定。

二、最小复现

下面片段包含跨容器的 h1→h3 和一张缺少 alt 的图片；另一张装饰图片使用空 alt。示例使用内联小图片，无需外部图片请求。保存为 HTML 后在浏览器运行第五节代码。

<main id="audit-fixture">
  <h1>Guide</h1>
  <section><h3>Skipped level</h3></section>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
</main>

三、根因分析

标题顺序应按文档顺序观察，不能只沿父子节点传递“父标题级别”，因为 h1 和 h3 通常是兄弟或分处容器。缺少 alt 与 alt="" 不相同：装饰图片通常需要空替代文本，信息图片则需有用描述。

四、推荐方案

用表达真实内容关系的标题组织段落，以 CSS 控制外观；选择语义标签要看用途，不把所有 div 机械替换为 section。本站文章采用单一主要 h1 是项目约定，不能把它或 DOM 深度 32 写成 Google 收录/排名硬标准。

五、完整代码

下面浏览器 TypeScript 示例按文档顺序遍历后代标题，标出向下跳级，并只检查 alt 属性缺失。它不检查 alt 文案质量，不计算排名，也不验证全部 HTML；根节点本身若是标题/图片，应把检查范围移到它的父节点。

function auditHtmlSemantics(root: ParentNode): string[] {
  const issues: string[] = [];
  let previousLevel = 0;
  for (const heading of root.querySelectorAll('h1, h2, h3, h4, h5, h6')) {
    const level = Number(heading.localName.slice(1));
    if (previousLevel && level > previousLevel + 1) {
      issues.push(`heading-order: h${previousLevel} -> h${level}`);
    }
    previousLevel = level;
  }
  for (const image of root.querySelectorAll('img')) {
    if (!image.hasAttribute('alt')) issues.push('img-alt-missing');
  }
  return issues;
}

const root = document.getElementById('audit-fixture');
if (!root) throw new Error('Missing fixture');
console.log(auditHtmlSemantics(root));
// ['heading-order: h1 -> h3', 'img-alt-missing']

六、常见错误方案

以为美化缩进能修复标签语义；把所有装饰图都加上冗余描述；将任意 DOM 深度阈值当作搜索规范；只按父节点标题级别检查导致漏报兄弟节点跳级。b/i 与 strong/em 语义不同，也不能互相机械替换。

七、边界条件

从 h4 返回 h2 是结束子节，不属于向下跳级。空 alt 仍需人工确认图片确实是装饰。隐藏、ARIA、Shadow DOM、iframe 和动态生成内容超出此轻量检查；ARIA 不能代替元素的行为实现。

八、如何验证

对复现片段应得到 heading-order 和 img-alt-missing 两条提示。把 h3 改成 h2 后标题提示消失；为第一张图片设置合适 alt 后缺失提示消失，装饰图 alt="" 不应被误报。再用键盘与辅助技术核对真实阅读顺序和替代文本。

九、FAQ

问：一个 h1 能保证 Google 收录吗？答：不能，这只是本站的内容组织约定之一。

问：alt="" 是错误吗？答：装饰图片通常应该使用空 alt，仍需判断实际用途。

问：标题回到更高层级是跳级吗？答：例如 h4→h2 是关闭子节，不属于本示例报告的向下跳级。

十、总结

先做可复现的标题顺序和 alt 缺失检查，再人工验证实际语义及可访问性。没有测试数据时不声明 DOM 深度影响排名。可用 /tools/format/html-formatter 整理源码；空白与嵌入代码分别见 /articles/html-formatter-inline-block-space-collapse 和 /articles/html-formatter-script-style-indentation-engine。