h1 包裹 logo 文字（如“小米官网”）并用 CSS 视觉隐藏，是兼顾语义、SEO 和可访问性的标准做法；必须含真实可读文本，结构为 品牌名，样式作用于 标签，内页标题须降级为 h2 起。
用 h1 包裹 logo 文字（如“小米官网”），再通过 CSS 隐藏文字只显示背景图，是兼顾语义、SEO 和视觉效果的标准做法。
必须用文字包裹，不能只放图片
h1 是页面主标题，搜索引擎和屏幕阅读器靠它理解页面主题。纯 <img alt="HTML5 中 h1 标签怎么配合 logo 使用才能兼顾美观与SEO" > 标签即使带 alt，也缺乏 HTML 语义层级；空 h1 或 display: none 会被直接忽略。文字必须真实存在、可被爬虫读取，但对用户不可见。
- h1 内必须包含有意义的可读文本，例如“京东”“知乎首页”，不能是空格、占位符或无意义字符
- 避免使用
aria-hidden="true"或visibility: hidden，它们可能让读屏器跳过内容 - 不要把
<a></a>放在 h1 外层，正确结构是<h1 class="logo"><a href="/">品牌名</a></h1>
推荐的隐藏文字方案
比起老式 text-indent: -9999px，现代更稳妥的方式是组合定位与裁剪，兼容性好且不受 flex/grid 影响：
-
标准 .visually-hidden 类（推荐）：用
position: absolute+clip移出视区，设width: 1px、height: 1px、border: 0、padding: 0、margin: 0，兼顾 SEO、可访问性和 RTL 支持 -
font-size: 0 方案：简单直接，适用于块级链接，但需确认父容器未设置异常
line-height导致高度残留 -
伪元素覆盖法：用
h1::before插入背景图，原文字设font-size: 0，不依赖缩进，响应式表现稳定
CSS 实现要点
样式应作用在 <a></a> 上，而不是直接给 h1 设背景图——因为 h1 是语义容器，a 才是可点击、可链接的交互主体：
立即学习“前端免费学习笔记（深入）”；
- 给
<a></a>设置display: block、明确宽高、background-image和background-size: contain（或cover） - 确保
<a></a>有href属性，否则无法传递 SEO 权重，也失去导航语义 - 暗色模式下检查 logo 图是否为透明 PNG，必要时补充
background-color适配 - 移动端缩放时，若用
text-indent，建议改用-999em而非固定 px 值，防止文字半露
结构与层级别踩坑
首页用 h1 表达站点主标题（即 logo 文字），内页必须降级从 h2 开始，避免多 h1 混乱文档结构：
- header 内只放一个 h1，且仅用于表达整个页面的主题，不是频道名、栏目名或 Banner 标题
- 不要把导航栏整体套进 h1，也不要用 div 替代 h1 来“假装”标题
- 组件内部的标题（如卡片标题、侧边栏标题）应按上下文使用 h2–h6，不破坏全局层级
