<h1>内直接包<img>不会被当作标题文本，因搜索引擎只提取可索引文本节点，<img>为空元素且alt不自动升格为标题语义；必须确保<h1>含非空文本或alt精准承载主关键词并唯一表意。
h1里直接包img会不会被当成标题内容
不会。搜索引擎不把 <img> 的 src 或 alt 当作 <h1> 的语义文本，哪怕它视觉上占据整个标题区域。爬虫只提取 <h1> 内的**可索引文本节点**，<img> 本身是空元素，不贡献标题关键词。
常见错误现象：<h1><img src="logo.svg" alt="前端笔记"></h1> —— 这样写，Google 看不到“前端笔记”作为标题文本，只看到一个空 <h1>；Lighthouse 会报「Empty heading」警告。
- 必须确保
<h1>内至少有一个非空文本节点，或<img>的alt被显式读取为标题语义（仅当它是唯一内容且含核心词） - 若用
<img>替代文字标题（如品牌 logo），alt必须精准、简洁、含主关键词，例如alt="HTML SEO 结构指南"，而非alt="logo"或留空 - CSS 隐藏文字、仅靠图片呈现（如
text-indent: -9999px+<img>）属于过时且高风险做法，可能被判为隐藏文本
img在h1里对屏幕阅读器和可访问性的影响
影响很大，但取决于 alt 是否真实承载标题意图。NVDA、VoiceOver 在标题导航模式下会把 <h1><img alt="React Server Components 原理"></h1> 当作有效标题朗读；但如果 alt="" 或 alt="icon"，就会跳过或报“空标题”，用户无法感知页面主题。
使用场景：品牌页、单页应用首屏、营销落地页等需视觉优先的场合，但不能牺牲语义。
立即学习“前端免费学习笔记（深入）”；
- 禁止
alt=""或alt="图片"—— 这等于主动放弃标题语义 - 避免在
<h1>中混排文字 +<img>（如<h1>《<img src="react.svg"> Hooks 教程》</h1>），因图标alt和文字语义割裂，屏幕阅读器可能断句错乱 - 如果必须图文并存，用
<span aria-hidden="true">包裹图标，文字单独写进<h1>，确保语义纯净
SEO权重是否因h1内含img而稀释
不稀释权重本身，但会破坏两个关键信号：主题锚点明确性 + 文本可索引性。Google 不给标签打分，但它依赖 <h1> 文本与 <title> 的语义一致性来建模页面意图。如果 <h1> 没有可提取文本，这个信号就断裂了。
性能/兼容性影响：无渲染性能问题，但 SSR 输出时若 alt 未动态注入（比如 Next.js 中 alt 来自未 resolve 的 promise），会导致源码中 <h1><img alt=""></h1>，爬虫直接收到空标题。
- 检查方式：用
curl -s URL | grep '<h1>'查看原始 HTML，确认alt已存在且非空 - 不要依赖 JS 后置填充
alt—— 爬虫不执行 JS，document.querySelector('h1 img').alt = '...'无效 - 若图片是 SVG 内联（
<svg>...</svg>），必须加aria-label或包裹<title>元素，否则无语义
替代方案：比h1包img更稳妥的结构
真正安全的做法不是禁用图片，而是把语义和视觉解耦。标题文本必须可索引，装饰性图形另作处理。
- 用
<h1>HTML表格SEO优化技巧</h1>保证核心文本，再用 CSSbackground-image或伪元素添加装饰性图标 - 若必须用
<img>（如响应式 logo），确保它在<header>外独立存在，<h1>专注正文主题，二者不嵌套 - 对于 CMS 或组件库，统一约定：Header 组件输出
<div class="site-logo"><img></div>，正文区域由文章数据决定唯一<h1>，避免模板级冲突
最常被忽略的一点：很多人以为只要 alt 有字就行，但 Google 实际比对的是 <title> 和 <h1> 文本的**语义指向是否一致**。一个写“V60手冲教程”，另一个写“咖啡入门图解”，哪怕都含“咖啡”，也会被标记为结构混乱——因为主题粒度不匹配。
