Alt Text 怎么写？完整教学：SEO 与无障碍的双重功能

Alt text（替代文字）是 HTML 图片标签中的一个属性，但很多网站主要嘛留空，要嘛乱填一通。事实上，alt text 做得好，既能提升 SEO，又能让视障用户正常使用你的网站。本文带你彻底搞清楚 alt text 的正确写法，附带大量实例对比。

什么是 Alt Text

Alt text 是 HTML <img> 标签的 alt 属性，基本语法如下：

<img src="running-shoes.jpg" alt="红色 Nike Air Max 90 运动鞋，白色鞋底">

当图片无法载入时（网路错误、图片失效、用户关闭图片载入），alt text 会显示在图片位置，告诉用户这里原本是什么图片。对于使用萤幕阅读器（Screen Reader）的视障用户，萤幕阅读器会朗读 alt text，让他们了解图片内容。

Alt Text 的双重功能

功能一：搜寻引擎优化（SEO）

Google 的爬虫能看懂图片的 alt text，但对图片本身的视觉内容理解仍然有限（尽管 Google Vision AI 持续进步）。Alt text 是搜寻引擎理解图片内容最直接的线索：

• 帮助图片在 Google 图片搜寻中出现，并排名于相关关键字下
• 为页面提供额外的关键字密度（自然融入，非堆砌）
• 让 Google 理解图片与页面主题的关联，强化整体主题相关性
• 在语义搜寻中，帮助 Google 建立更丰富的页面理解

功能二：无障碍（Accessibility）

根据世界卫生组织的数据，全球约有 2.85 亿视障人士，其中许多人使用萤幕阅读器（如 NVDA、JAWS、VoiceOver）浏览网站。缺乏 alt text 的图片对他们来说是“黑洞”——萤幕阅读器会说“image.jpg”或直接跳过，完全无法传递图片的资讯。

在许多国家（如美国的 ADA、欧盟的 EN 301 549），网站无障碍是法律要求，良好的 alt text 是其中的重要组成部分。

Alt Text 的写法原则

以下是写出有效 alt text 的核心原则：

1. 描述图片的实际内容：说明你看到了什么，不是说明你希望关键字排名什么
2. 自然融入关键字：如果关键字确实描述了图片内容，自然地包含它
3. 简洁但具体：通常 5–15 个词足够，避免写成长篇大论
4. 不要以“图片显示…”开头：Google 和萤幕阅读器都知道这是图片
5. 不要堆砌关键字：如 alt="跑步鞋 运动鞋 慢跑鞋 球鞋 跑鞋" 是反效果，Google 可能将其视为 spam
6. 不要完全复制图片旁边的文字：若图片旁已有相同文字描述，alt text 可以更简短，避免重复

好 vs 坏 Alt Text 范例对比

最好的学习方式是对比实例：

情境一：产品图片（跑鞋）

• 坏：alt=""（空白）
• 坏：alt="img0023"（无意义档名）
• 坏：alt="跑步鞋 运动鞋 慢跑鞋 球鞋"（关键字堆砌）
• 好：alt="红色 Nike Air Max 90 男款跑步鞋，侧面视角"
• 好：alt="Nike Air Max 90 running shoes in crimson red, men's size, side view"（英文版）

情境二：食谱图片（巧克力熔岩蛋糕）

• 坏：alt="甜点"（过于模糊）
• 坏：alt="蛋糕照片"（废话）
• 好：alt="巧克力熔岩蛋糕切开后流出液态巧克力，旁边搭配一球香草冰淇淋"

情境三：人物/照片

• 坏：alt="图片"
• 坏：alt="CEO 照片"（过于简略）
• 好：alt="公司创办人 Maria Chen，在办公室中微笑的半身照"
• 注意：若图片旁已有姓名和职称说明，alt text 可更简短：alt="Maria Chen 的个人照"

情境四：资讯图表（Infographic）

• 坏：alt="资讯图"
• 好：alt="2024 年全球智慧型手机市场份额：Samsung 22%、Apple 18%、Xiaomi 12%，其他品牌占 48%"（将图表的核心资讯纳入 alt text）
• 更好：在页面上另外以文字列出完整资料，alt text 则概述图表主题

情境五：纯装饰性图片

• 用于装饰、分隔线、背景花纹等无实际内容的图片，应设定空的 alt text：alt=""（注意：是引号中没有内容，而不是省略 alt 属性）
• 空的 alt text 告诉萤幕阅读器跳过这张图片，不要浪费用户时间

情境六：连结图片（可点击的图片）

• 若图片本身是一个连结，alt text 应描述连结目的地（而非图片本身）
• 坏：alt="LOGO"（当 LOGO 连结到首页时）
• 好：alt="返回首页" 或 alt="[品牌名称] 首页"

各场景的 Alt Text 范例

电商网站：

• alt="蓝色双肩背包，容量 30L，侧面置物袋设计"
• alt="不锈钢保温瓶 500ml，黑色哑光质感，附吸管盖"

部落格/新闻：

• alt="台北 101 夜景，城市灯光倒映在水面上"
• alt="科学家在实验室中操作显微镜"

公司网站：

• alt="公司位于台北信义区的办公室大厅，挑高设计搭配自然采光"
• alt="团队 2024 年年会合照，约 50 人在户外场地"

服务页面图示：

• alt="云端储存服务图示"
• alt="24 小时客户服务图示"
• （装饰性图示可使用 alt=""）

Alt Text 长度建议

多长算合适？一般建议：

• 简单图片：5–10 个词，描述主要元素即可
• 复杂照片：10–20 个词，描述主体、背景、重要细节
• 资讯图表：可以更长，包含关键数据，但超过 150 个字元的内容建议改放在页面正文中，alt text 仅概述
• 萤幕阅读器通常会在 150 个字元左右截断 alt text，设计上应考量此限制

常见问题解答

Q：每张图片都需要 alt text 吗？
A：有实际内容意义的图片都需要 alt text。纯装饰性图片（背景纹理、分隔线等）应使用空的 alt=""。

Q：相同的图片在不同页面使用，alt text 要一样吗？
A：不一定。Alt text 应根据图片在特定页面的语境来撰写。同一张图片在不同页面可能扮演不同角色，alt text 也应有所调整。

Q：我的 CMS（如 WordPress）让我填“Alt Text”和“Caption”，有何不同？
A：Alt text 是 HTML 属性，对萤幕阅读器和搜寻引擎可见，但不显示给一般用户。Caption（图说）是显示在图片下方的文字说明，对所有用户可见。两者各有功能，都应填写。

结语

Alt text 是一个小小的 HTML 属性，但它所承载的功能相当重要：帮助搜寻引擎理解图片、协助视障用户使用网站、在图片载入失败时提供后备资讯。好的 alt text 不是关键字堆砌，而是对图片内容的诚实、简洁描述。建立一个良好的 alt text 撰写习惯，是最性价比最高的 SEO 工作之一。

在浏览器里直接完成，档案不会离开你的电脑：图片工具