alt 属性是图片语义的强制声明，必须准确描述图在页面中的作用；信息图需详述内容与上下文，装饰图才可设为 alt=""；滥用关键词或留空将损害 SEO 与无障碍体验。
alt 属性不是可选的装饰项，而是图片语义的强制声明——没写或乱写 alt，搜索引擎会直接忽略该图片的关联性，无障碍用户也无法理解图意。
什么时候必须写 alt，什么时候可以为空
图片承载信息（如产品图、图表、界面截图、插图）时，alt 必须描述其内容与上下文作用；纯装饰性图片（比如仅作背景分隔的 <img>）才允许设为 alt=""。空字符串不是“留空”，而是明确告诉解析器“此图无文本等价物”。
- ✅ 正确：
<img src="chart-q2-sales.png" alt="2024年第二季度销售额柱状图：华东区达128万元，同比增长17%"> - ❌ 错误：
<img src="logo.png" alt="logo">（过于模糊，应写明品牌与用途，如alt="XX科技公司官网首页Logo"） - ⚠️ 风险：
<img src="spacer.gif" alt=" ">（含空格的非空字符串仍会被读屏软件朗读，应为alt=""）
alt 文本怎么写才对搜索引擎和用户都有效
核心是「用自然语言说清‘这张图在当前页面里干什么’」，而非堆关键词或写文件名。Google 明确表示滥用关键词（如 alt="SEO优化 HTML教程 网页设计 在线课程"）属于垃圾信号，可能触发降权。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 优先包含关键实体：人名、地名、产品型号、数字结论（如“iPhone 15 Pro 深空黑色正面图”）
- 长度控制在 125 字符内——多数读屏软件会截断，且 Google 图片搜索摘要也倾向简短描述
- 避免冗余词：不用写“图片”“图像”“照片”，屏幕阅读器已自动播报元素类型
- 链接中的图片需说明链接目的：如
<a href="/products"><img src="shop-btn.png" alt="进入全部商品列表"></a>
不写 alt 或写错的实际后果
影响不止于 SEO 排名下滑。真实场景中，这些问题是立刻可见的：
立即学习“前端免费学习笔记（深入）”；
- 图片加载失败时，浏览器只显示空白方框 + 一段不可读的路径（如
src="/imgs/err-404.jpg"），用户完全不知原图意图 - Chrome DevTools 的 Lighthouse 报告中，“
Image elements do not have <code>[alt]attributes” 是常见 A11y（无障碍）失败项，直接影响网页合规评分 - Google 图片搜索结果页里，缺失
alt的图片几乎不会被索引，即使页面本身排名靠前 - 部分 CMS（如 WordPress 旧版媒体库）上传时默认填
alt为文件名，而IMG_20240521_102345.jpg对任何人毫无意义
最常被忽略的一点：动态插入的图片（比如 JS 渲染的商品轮播图）往往漏掉 alt。哪怕用了 loading="lazy" 或 decoding="async"，只要它是 <img> 标签，就必须带有效 alt——否则它在 DOM 中就是个语义黑洞。
