Alt 属性（Alternative Text，替代文本）是 HTML <img> 标签中的一个属性，用于描述图片的内容。当图片无法加载时，浏览器会显示这段替代文本。

三大核心作用：

• SEO 优化：搜索引擎通过 Alt 文本理解图片内容，是图片搜索排名的重要信号。
• 无障碍访问：屏幕阅读器会朗读 Alt 文本，帮助视障用户理解页面内容。
• 用户体验：网络不佳或图片链接失效时，用户仍能通过替代文本了解图片含义。

优秀 Alt 文本的特征：

• 简洁准确：通常 5-15 个词即可，描述图片核心内容。
• 上下文相关：结合页面主题，突出图片在内容中的作用。
• 避免冗余：不要以「图片显示…」「一张…的图片」开头。
• 包含关键词：自然地融入目标关键词，但避免堆砌。

需要避免的常见错误：

• 使用文件名作为 Alt（如 alt="IMG_2024_01.jpg"）
• Alt 文本过长或过短（少于 3 个字符通常不够描述性）
• 关键词堆砌（如 alt="便宜手机 手机推荐 好手机 手机"）
• 多个图片使用完全相同的 Alt 文本

根据 WCAG 2.1（Web Content Accessibility Guidelines）规范：

• 装饰性图片应使用空 Alt：alt=""（注意是空字符串，不是缺失属性）。屏幕阅读器遇到空 Alt 会跳过该图片，避免干扰用户。
• 内容图片必须有描述性 Alt：传达信息的图片必须提供有意义的替代文本。
• 功能图片（如按钮图标）：Alt 应描述功能而非外观，如 alt="搜索" 而非 alt="放大镜图标"。
• 关键区别：缺失 Alt 属性 ≠ 空 Alt。缺失 Alt 是错误，空 Alt 对装饰性图片是正确做法。

💡 建议：优先完善 Alt 属性，Title 属性作为补充。两者不应完全相同，避免冗余信息。

Google 官方多次强调 Alt 属性是图片 SEO 的关键因素：

• Alt 文本帮助 Google 理解图片内容，直接影响图片搜索结果排名。
• 良好的 Alt 文本可以带来额外的搜索流量（通过 Google 图片搜索）。
• Alt 属性是页面整体质量评估的一部分，间接影响网页在常规搜索中的排名。
• Google 会惩罚关键词堆砌行为，Alt 文本应自然、准确地描述图片。
• 结合合适的文件名、图片周围的文字内容、结构化数据，可最大化图片 SEO 效果。

方法一：使用本工具 + 站点地图

将每个页面的 HTML 源代码粘贴到本工具中逐一检测，适合页面数量较少的网站。

方法二：SEO 爬虫工具

使用 Screaming Frog、Sitebulb、Ahrefs 等专业 SEO 工具，可自动爬取全站并生成图片 Alt 缺失报告。

方法三：浏览器开发者工具

在 Chrome 中打开开发者工具 → Lighthouse → 生成报告 → 查看「Best Practices」中的图片相关建议。

方法四：CMS 插件

WordPress 用户可使用 Yoast SEO、Rank Math 等插件，它们会在编辑器中提示 Alt 缺失问题。

• 法律合规风险：在部分国家和地区，网站不符合 WCAG 无障碍标准可能面临法律诉讼。
• SEO 流量损失：缺失 Alt 的图片无法在 Google 图片搜索中获得排名，错失流量来源。
• 用户体验下降：图片加载失败时用户看到空白区域，无法理解内容。
• 无障碍访问违规：视障用户无法获取图片信息，违反了包容性设计原则。
• 专业形象受损：代码质量低下可能影响品牌在技术用户心中的形象。

• 使用描述性文件名：将 IMG_001.jpg 改为 sunset-over-lake.jpg。
• 选择合适的图片格式：照片用 JPEG/WebP，图标用 SVG，透明背景用 PNG。
• 压缩图片大小：使用 TinyPNG、Squoosh 等工具压缩，提升页面加载速度。
• 使用响应式图片：通过 srcset 和 <picture> 标签适配不同屏幕。
• 添加结构化数据：使用 Schema.org 的 ImageObject 类型标记重要图片。
• 创建图片站点地图：帮助 Google 发现和索引网站中的图片。
• 使用 CDN 加速：通过内容分发网络提升图片加载速度，改善 Core Web Vitals。