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教程 网页设计 在线课程"）属于垃圾信号，可能触发降权。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 优先包含关键实体：人名、地名、产品型号、数字结论（如“iPhone 15 Pro 深空黑色正面图”）
- 长度控制在 125 字符内——多数读屏软件会截断，且 Google 图片搜索摘要也倾向简短描述
- 避免冗余词：不用写“图片”“图像”“照片”，屏幕阅读器已自动播报元素类型
- 链接中的图片需说明链接目的：如
@#@#@#@#@#@#@#@#@#@0
不写 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 src="shop-btn.png" alt="进入全部商品列表"> 标签，就必须带有效 alt——否则它在 DOM 中就是个语义黑洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
