text-indent:-9999px能兼顾视觉与seo，因文字仍在dom中可被爬虫读取，同时通过块级、宽高、背景图等css配合实现视觉隐藏；但需避免overflow:hidden及display:inline，并优先采用visually-hidden等更健壮的现代方案。
text-indent:-9999px 为什么能兼顾视觉与SEO
因为搜索引擎会解析 h1 标签内的纯文本内容，而 text-indent: -9999px 只是把文字向左推出可视区域，并未移除 DOM 结构或设为不可读——文字仍存在于 HTML 中，可被爬虫提取，同时用户看到的是背景图或 logo 图片。
关键点在于：h1 必须是块级元素（display: block），且设置了明确的 width 和 height（通常与背景图尺寸一致），否则 text-indent 不生效或布局错乱。
-
display: inline的h1或未设宽高的容器，text-indent无效 - 若父容器
overflow: hidden，文字虽被缩进，但可能被裁剪掉——反而影响可读性（对屏幕阅读器不友好） - 现代 SEO 已不强依赖“隐藏文字”，但保留语义化
h1仍是基础权重信号，不能省略
实际写法中必须配齐的 CSS 属性
单独写 text-indent: -9999px 很大概率失效。它需要一组配套样式才能稳定工作：
-
display: block（或inline-block，但需确保宽高可控） - 显式声明
width和height（值应匹配背景图尺寸） -
background-image设置 logo 图片，并用no-repeat防止平铺 - 避免同时使用
overflow: hidden—— 它会截断缩进后的文字，部分屏幕阅读器可能跳过该元素
典型结构示例：
h1.logo {
display: block;
width: 180px;
height: 40px;
background: url('logo.png') no-repeat;
text-indent: -9999px;
}
比 text-indent 更稳妥的现代替代方案
虽然 text-indent 在老项目中仍常见，但它有明显缺陷：对 RTL（从右向左）语言支持差、在高缩放或强制色彩模式下可能意外显示文字、部分辅助技术识别不稳定。
更推荐的写法是结合 clip-path 或 visually-hidden 类：
-
clip-path: inset(100%);—— 完全裁掉内容，但保留占位和可访问性 - 标准
visually-hidden模式（W3C 推荐）：position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; - 绝对不要用
display: none或visibility: hidden—— 搜索引擎会忽略整段内容
容易被忽略的语义与可访问性陷阱
很多人只盯着“让搜索引擎看到”，却忘了“让人也能合理访问”。一个仅靠 text-indent 隐藏文字的 h1，在以下场景会出问题：
- 开启系统“高对比度模式”时，文字可能重新浮现，覆盖背景图
- 使用键盘 Tab 导航时，焦点落在空
h1上，但无任何可见反馈 - 屏幕阅读器若检测到
text-indent+ 无其他文本，可能跳过或报“空标题”
补救方式很简单：给 h1 内的链接加 title 属性，或确保 h1 包裹的是带 alt 的 img（但注意：仅用 <h1><img></h1> 会丢失文本关键词，不推荐）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
