图片alt属性优化：SEO和可访问性的双重收益实战

alt属性被严重低估

接手过一个图片站，每月30万流量里图片搜索流量只占2%。排查发现所有图片的alt属性要么是空，要么是”img001”这种垃圾值。

花了三周系统优化alt属性，三个月后图片搜索流量占比涨到18%，整体流量涨了23%。alt属性这种看起来不起眼的细节，收益超乎想象。

alt属性到底干什么用

三个核心用途：

Google图片搜索完全依赖alt属性理解图片内容。没有alt的图片等于没有描述，搜索引擎无法判断是否相关，排名自然上不去。

alt属性的写法原则

原则1：准确描述图片内容

<!-- 错误 -->
<img src="iphone15.jpg" alt="图片">
<img src="iphone15.jpg" alt="">
<img src="iphone15.jpg" alt="手机">

<!-- 正确 -->
<img src="iphone15.jpg" alt="iPhone 15 Pro Max钛金属原色背面图">

原则2：融入关键词但不堆砌

<!-- 错误：关键词堆砌 -->
<img src="shoes.jpg" alt="运动鞋 跑步鞋 篮球鞋 男鞋 女鞋 便宜">

<!-- 正确：自然融入 -->
<img src="shoes.jpg" alt="耐克Air Zoom Pegasus 40男款跑步鞋侧视图">

原则3：长度控制在125字符内

屏幕阅读器会分段朗读过长的alt，体验差。超过125字符考虑用 longdesc 属性或者图片下方加文字说明。

不同类型图片的alt策略

产品图： 包含品牌、型号、颜色、视角

<img src="macbook-pro.jpg" alt="MacBook Pro 14英寸深空灰色正面打开状态">

图表： 描述图表表达的数据

<img src="sales-chart.jpg" alt="2024年Q1-Q4季度销售额柱状图，从120万增长到280万">

装饰图： 用空alt

<img src="divider-line.png" alt="">

纯装饰的图片alt留空（不是不写alt属性，是写 alt=""），告诉屏幕阅读器跳过这张图。如果不写alt属性，屏幕阅读器会朗读图片文件名，体验更差。

按钮和图标： 描述功能

<img src="search-icon.png" alt="搜索">
<img src="cart-icon.png" alt="购物车，3件商品">

关键词研究的辅助

写alt不是瞎写，要基于关键词研究。用Google Keyword Planner或者Ahrefs看用户怎么搜图片：

alt里用的词要和页面标题、正文里的词呼应，但不要完全重复。

电商平台批量优化

电商站图片多，手动改不现实。写脚本批量生成：

import re

def generate_alt(product_name, color, view, category):
    '''根据产品属性生成alt'''
    template = f"{product_name} {color}{view}"
    if category:
        template += f" - {category}"
    return template[:100]

# 批量处理
products = [
    {"name": "Nike Air Max", "color": "黑色", "view": "侧面图", "category": "男款运动鞋"},
    {"name": "Adidas Ultraboost", "color": "白色", "view": "正面图", "category": "跑步鞋"},
]

for p in products:
    alt = generate_alt(p["name"], p["color"], p["view"], p["category"])
    print(f'<img src="{p["name"]}.jpg" alt="{alt}">')

模板生成后人工抽检，避免出现”iPhone 15 iPhone 15 iPhone 15”这种重复。

WordPress站的alt优化

WordPress上传图片时填的”替代文本”就是alt。但老文章的图片都没填，用SQL批量补：

-- 把图片文件名转成可读alt
UPDATE wp_posts 
SET post_excerpt = REPLACE(REPLACE(post_title, '-', ' '), '_', ' ')
WHERE post_type = 'attachment' 
AND post_excerpt = '';

再用插件自动把post_excerpt同步到img的alt属性。

可访问性合规

WCAG 2.1标准要求所有非装饰图片必须有alt文本。欧美市场这不仅是SEO问题，是法律问题。ADA诉讼里因为图片没alt被起诉的案例不少。

用Wave或者axe DevTools扫描页面，红色错误里就有缺alt的图片。

数据验证

优化完alt后，看Google Search Console的图片搜索报告：

图片搜索流量起来后，整体流量结构更健康，不依赖单一关键词。

图片Sitemap提交

给Google单独提交图片sitemap，加速收录：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/product/iphone-15</loc>
    <image:image>
      <image:loc>https://example.com/images/iphone15-front.jpg</image:loc>
      <image:title>iPhone 15正面图</image:title>
      <image:caption>iPhone 15钛金属原色正面实拍</image:caption>
    </image:image>
  </url>
</urlset>

避坑清单

• alt不要和图片下方的caption完全一样，重复内容
• 同一页面多张同类图片alt要差异化，别都写”产品图”
• SVG图片也要加alt或者用 <title> 标签
• 背景图无法加alt，确保信息在HTML文本里也能获取
• 别用alt做关键词堆砌，Google会判定为垃圾内容降权
• 图片文件名也要语义化，iphone15-front.jpg比IMG_1234.jpg好