Lighthouse基于静态DOM分析实现SEO与无障碍审计，不执行JavaScript，仅解析已渲染的HTML结构、语义标签、属性及元信息。它检查title长度、alt属性、标题层级、链接文本、HTTPS、lang声明等SEO要素；评估label关联、role与tabindex、SVG可访问性、颜色对比度、表格语义等无障碍项。所有审计均依赖真实HTML输出，无需JS参与，修复HTML结构即可提升分数。
Lighthouse 不需要你改 HTML 就能直接审计原始 DOM 的 SEO 和无障碍表现，它的核心能力正是基于静态结构分析——不执行 JavaScript，只读取已渲染的 DOM 树、属性、标签语义和元信息。只要页面加载完成，Lighthouse 就能准确捕捉当前 HTML 状态下的合规问题。
SEO 友好度审计依赖真实 HTML 元素与属性
Lighthouse 的 SEO 类别会逐项检查原始 DOM 中是否存在、是否合法、是否符合搜索爬虫预期的结构信号：
-
<title>是否存在且长度在 30–60 字符之间 -
<meta name="description">是否存在且长度在 50–160 字符之间 - 所有
<img>是否带有非空、有意义的alt属性（装饰图需为alt=""并配合role="presentation"） -
<h1>是否唯一且不为空，标题层级是否合理（如跳过 h2 直接用 h4） -
<a>链接文本是否具备描述性（避免“点击这里”“了解更多”等无上下文文字） - 页面是否使用 HTTPS、是否有
<html lang="xx">声明语言
这些全靠解析 HTML 源码或最终渲染的 DOM 节点，不依赖 JS 注入或动态生成。
无障碍得分完全由原始 DOM 结构决定
Accessibility 审计是纯静态扫描，只看 DOM 层面的语义、属性与关系，常见扣分项全部来自 HTML 写法：
- 表单控件缺失
<label for="id">或未用<label>包裹对应<input> - 按钮类元素（如
<div role="button">）缺少tabindex="0"和aria-label - SVG 图标未包裹
<title>或未设置aria-hidden="true"（若为装饰） - 文本节点颜色对比度不足，Lighthouse 会提取其计算出的
color与background-color值，但前提是该文本在 DOM 中有明确的样式继承链 -
<table>缺少<caption>或表头未用<th>标注 scope
这些都不需要 JS 运行，只要 HTML 输出正确，分数就能立刻提升。
如何确保审计反映真实原始结构
- 在 Chrome DevTools 的 Lighthouse 面板中，勾选 SEO 和 Accessibility，取消其他类别，选择 Desktop 设备（避免移动端 UA 切换带来的服务端渲染差异）
- 确保测试前页面已完成服务端渲染（SSR）或静态生成（SSG），不要在 hydration 前截图；若用 React/Vue，建议等
useEffect或mounted后再运行 - 不要勾选 “Clear storage” 或 “Disable cache”，否则可能触发重定向或加载失败，导致 DOM 不完整
- 若页面依赖登录态，直接在已登录状态下打开 DevTools 运行，Lighthouse 会保留当前 Cookie 和会话
快速修复建议（不动逻辑、不写 JS）
- 给所有
<img>补alt：功能性图片写描述，装饰图统一用alt="" role="presentation" - 把
<div onclick="...">改成<button type="button">，或至少加role="button" tabindex="0" aria-label="说明作用" - 每个
<input>必须有显式<label>关联（for/id匹配或嵌套） -
<html>标签加上lang="zh-CN"（或其他实际语言） -
<meta name="description">内容重写，确保每页唯一、含主关键词、语义完整
Lighthouse 的 SEO 和无障碍报告不是预测，而是对当前 HTML 输出的客观快照。改好结构，分数就升——不需要构建流程改造，也不依赖运行时环境。
