做WordPress站点优化的时候,很多朋友最容易忽略的一个细节,就是图片的alt标签。我曾经帮一位做美食博客的朋友排查流量问题,文章写得扎实、配图也算精美,但搜索引擎图片搜索几乎不进流量。后来打开页面源码一看,好几篇核心文章的图片alt全是空值,甚至有直接显示成IMG_2031.JPG这种文件名的。问题就出在这里——搜索引擎读不懂图片内容,唯一能读懂的就是alt文本,结果你把唯一的路给它堵上了。
这篇博文我打算从一个小白也能上手的角度,把WordPress里图片alt标签的设置、批量补全、自动生成、质量验证到避坑经验,完完整整过一遍。适合刚开始接触WordPress的博主,也适合已经运营了一段时间、打算系统性清理旧图片的老站长。
1. 图片alt标签为什么值得专门花时间折腾
很多站长觉得alt标签只是给搜索引擎看的,实际上它有三个非常具体的用途,缺一个都容易吃亏。
第一个用途是帮助搜索引擎理解图片内容。搜索引擎的图像识别能力还做不到完全精准,alt是它判定“这张图片到底是什么”最主要的依据。你写清楚alt,图片才有机会在图片搜索里被搜到,也能帮助整篇文章判断相关性。这直接影响到图片搜索流量,甚至能影响文章排名的综合判断。
第二个用途是给无障碍访问者提供信息。有一部分用户使用屏幕阅读器浏览网页,阅读器会通过朗读alt文本让用户“看到”图片内容。你写了alt,这部分用户就能完整理解文章;不写,他们听到的就是“图片”或者一串乱码文件名。对于内容型站点来说,写alt本质上是在做内容可访问性。
第三个用途是被很多人忽略的兜底作用。当图片因为网络问题加载失败、或者被某些浏览器拦截时,alt属性里的文字会显示出来,用户至少知道这张图原本想表达什么。我见过不少站点图片挂了之后和出图位置一片空白,用户根本不知道那里有张图,体验非常差。
这三重价值叠在一起,alt已经不是一个可写可不写的优化项,而是一个低成本高回报的必要项。
不过我也总结过,alt标签写得再认真,也架不住这三种常见错误:
- 空alt:图片标签里压根没写这个属性。
- 文件名alt:WordPress里很多图片上传后没设置alt,搜索引擎看到的就是IMG_2301这样毫无信息量的内容。
- 关键词堆砌:比如一张红烧肉的图片,alt硬写成“美食美食家常菜做法网站推荐”,这种写法不仅对用户没有帮助,反而会让搜索引擎认为是垃圾信息。
补alt的前提,是先理解这三点价值,否则你很容易把它当成一个过场动作,做完没效果。
2. 手动设置alt标签的几种路径,新手从这里开始
对于刚运营的新站,最好从源头就把alt写好,这样可以避免后面返工。WordPress里手动设置alt有几个入口,我一个个说清楚,每个入口适用的情况不同。
2.1 古腾堡编辑器里最常用的两个入口
在古腾堡编辑器中,点击文章里的任意图片,右侧会弹出图片设置面板,里面有一个“替代文本”输入框,这就是alt标签的填写位置。填好之后图片标签里就会自动生成alt属性。这个路径最直接,适合在写文章的过程中顺手处理。
还有一个入口容易被忽略,就是双击图片或者点编辑按钮,会弹出“图像详细信息”窗口,同样可以设置替代文本。两个入口效果一样,只是有的朋友习惯用左侧工具栏,有的习惯用右键编辑,挑顺手的用就行。
2.2 媒体库直接编辑的另一种常见方式
如果图片已经上传到媒体库但没设置alt,不一定要回到文章里重新编辑,直接打开媒体库,点击对应图片,右侧属性面板里就有“替代文本”输入框。改完保存,文章里引用这张图片的地方会同步更新。
需要注意,这种“同步更新”有一个前提——文章里的这张图片是标准媒体库插入的引用。如果主题里自己写代码读图片的话,可能不会直接读取替代文本字段,这个在后面的避坑部分会细说。
2.3 设置默认alt文本的取舍
WordPress在媒体设置里有一个“默认替代文本”选项。有些教程建议在这里填一个通用词,比如站点名称,这样所有新上传的图片都会自动带上一个默认alt。
我建议不要这么设置。原因很简单:几十上百张图片全部使用相同的alt,比不写alt还要糟糕一点。搜索引擎看到一堆相同alt会判定为低质量信息,而且真正需要alt帮助理解的用户根本得不到有效信息。通用词的alt,基本等于没有alt。
与其设置默认通用值,还不如在每次上传图片时花十秒钟写一个具体描述。写alt有个简单公式,你直接套用就好:图片里的主体名词 + 具体特征描述 + 文章主题关键词。举几个例子对比一下:
| alt写法 | 效果 |
|---|---|
| “图片” | 无意义 |
| “IMG_2301” | 文件名,搜索引擎看不懂 |
| “美食 美食 菜谱 家常菜” | 关键词堆砌,容易被判低质 |
| “一盘红烧肉配白米饭” | 具体、自然,还有描述性 |
| “红烧肉配上白米饭的家常做法-我的美食博客” | 具体+特征+品牌词,比较理想 |
这个公式看起来很朴素,但能把alt写到及格线以上。新手只要按这个思路写,基本不会出大问题。
3. 老站存量图片批量补alt标签的三种方案,按量选择
老站的情况是完全不同的。文章已经发了上百篇,图片几百上千张,每一张都手动改不现实。我推荐按图片数量分三种方案处理,各有适用场景。
3.1 数据库批量更新方案,适合图片数量上千的站点
需要用MySQL在phpMyAdmin里操作。WordPress里图片的alt信息存储在wp_postmeta表里,对应的meta_key是_wp_attachment_image_alt。图片本身的基础信息存储在wp_posts表里,帖子标题就是图片标题字段。
先说一个最实用的SQL查询,用于查看有多少图是空alt:
SELECT COUNT(*) FROM wp_postmeta WHERE meta_key = '_wp_attachment_image_alt' AND meta_value = '';如果返回结果很大,说明大量图片需要处理。最简单的批量更新方式是直接把附件标题作为alt,因为WordPress上传时会把文件名去掉扩展名作为标题,所以你至少能拿到一个有点含义的中文或英文关键词。
UPDATE wp_postmeta pm JOIN wp_posts p ON pm.post_id = p.ID SET pm.meta_value = p.post_title WHERE pm.meta_key = '_wp_attachment_image_alt' AND (pm.meta_value = '' OR pm.meta_value IS NULL) AND p.post_type = 'attachment';执行之前必须做两件事:第一,备份数据库,这是绝对底线;第二,先跑第一条查询,确认你要更新的行数,避免误伤有正常alt的图片。
这里还要注意一个容易翻车的点:如果你网站的WordPress表前缀不是默认的wp_,上面的SQL要把wp_替换成你自己的表前缀,否则会报错。有些截图教程不会提这件事,真实执行时特别容易中招。
数据库更新完成之后,记得清理缓存,因为大部分站点都开了对象缓存或者页面缓存,不清理的话你看不到变化,会误以为SQL没执行成功。
3.2 批量媒体管理插件方案,适合图片几百张的中型站点
如果图片数量不是特别离谱,我更推荐用插件来管理。市面上有一类媒体管理插件,可以在后台以列表形式展示所有图片,直接就地编辑alt,还能按空alt筛选。可视化操作比SQL更直观,容错率也高。
选插件的时候留意一下这几点:界面是否支持一次加载所有图片、是否支持按“无alt”筛选、是否支持批量填充。很多插件能做到批量选中、统一填充的功能,这比一张张改快很多。
但用插件修改的话我不推荐把全部图片统一切换成文件名或者统一内容。可以结合2.3节的说法,用插件筛选出空alt的图片,然后逐张填写有意义的文本。几百张图认真填大概一个多小时,比用SQL做“文件名式alt”效果好很多。
3.3 functions.php里用代码自动兜底,适合不想动数据库的场景
还有一种情况是,你不想改数据库,或者数据库里的历史数据太多没有把握,这时候可以在主题functions.php里加一段代码,在图片输出时动态补充alt。
add_filter('wp_get_attachment_image_attributes', function($attr, $attachment) { if (empty($attr['alt']) && isset($attachment->ID)) { $title = get_the_title($attachment->ID); if (!empty($title)) { $attr['alt'] = $title; } } return $attr; }, 10, 2);这段代码的逻辑是:当WordPress输出媒体库图片时,检查alt是不是空的,如果为空就拿附件标题当alt。好处是改动可以随时撤销,不污染数据库。缺点是只在媒体库函数输出图片的时候生效,如果模板里用原生 写死了一些图片,这段代码就管不到。
我实际操作中会用这段代码作为“兜底方案”,先确保页面上不再出现空alt,再去慢慢优化数据库里的数据。如果你的主题比较复杂,也可以使用wp_get_attachment_image_src相关钩子输出替换,但原理是一样的。
4. 让alt自动生成得更聪明,从文件名到智能化提取
数据库和代码的方案只是解决了“有和没有”的问题,但没有解决“质量高不高”的问题。从文件名拿到的alt往往是英文文件名或者纯拼音,放在中文站点上并不理想。这一部分我来聊聊怎么让alt自动生成得更有语义。
4.1 利用文章标题生成带上下文的alt
如果一张图片挂在某篇文章下(WordPress里叫父级文章),那么可以通过父级文章的标题来生成alt。比如文章标题是“新手也能做的红烧肉,记住这三个步骤”,图片的根本没必要写成“红烧肉”,可以直接用文章标题里的核心词生成“红烧肉的做法教程”,语义就更贴切了。
实现思路是在the_content输出之前用正则匹配所有图片标签,然后通过图片ID反查它的post_parent是不是文章,再提取文章标题。写起来有些绕,但效果相当好用。实际中需要注意:如果文章标题本身就很烂(比如“标题党文”),这个方法生成的alt质量也会受影响。
4.2 从文章上下文关键词自动提取alt
还可以结合内容里的标题标签来提取上下文关键词。匹配到目标图片后,往上找最近的H2或H3标题,用这个标题来做alt的语义范围。比如图片位于“材料准备”小节之下,alt可以自动变成“红烧肉材料准备——五花肉与配料”。
这种自动方案我已经实测过一段时间,准确率大概是70%到80%,剩下的个别图片因为上下文太抽象,生成的alt还是会显得生硬。所以它的定位是帮你“批量处理可控的部分”,并不是完全取代人工。
4.3 云服务图像识别能力的边界问题
现在不少云服务商提供了图像识别接口,可以自动生成图片标签。用这些接口做一个批量脚本,把图片队列丢进去,自动拿到标签再回填写到WordPress里。这类方案听起来很酷,我实际试用过几次之后发现两个明显问题:
第一,免费额度消耗非常快,几千张图片跑下来可能就要升级付费包;第二,识别结果往往偏通用,它可能告诉你“食物”“菜肴”,却不会告诉你“红烧肉做法”,这远远达不到SEO期望的关键词粒度。
所以我对图像识别方案的态度是:可以用在为视觉障碍用户的“描述性alt”场景,不适合直接拿来做SEO关键词优化。它生成的alt做无障碍阅读没问题,做图片排名优化的话帮助有限。
综合考虑下来,我更推荐的组合是:核心首图、产品图、重要内容图手动写;普通正文配图用文章标题或上下文的自动生成;低价值装饰图保持简洁描述或不写。
5. 如何确认alt真的补上了,以及补得够不够好
改完之后最怕的是“虚假完成”。你以为批量更新跑完了,实际上因为缓存、模板逻辑其他问题,前端输出的图片压根没有alt。这一节我讲几个具体的验证方法。
5.1 用浏览器开发者工具看真实输出
最直接的验证方法,就是打开一篇文章页面,按F12打开开发者工具,切换到Elements面板,按Ctrl+F搜索“img”,然后一条条看这些标签里有没有alt属性、alt内容是否符合预期。注意,要看的必须是页面加载完成后的实际DOM,而不是查看源代码。
这里有个特殊的坑:很多站点为了图片懒加载,页面初始HTML里的图片src是一个占位图,真正的图片地址在data-src属性里。如果你只看初始HTML,可能会漏掉真正的图片;必须在开发者工具里确认懒加载已经触发、图片已经真正加载出来再看。
5.2 用SEO类浏览器插件的批量列表检查几百张图片
如果页面里图片特别多,逐个人工看效率太低。有些浏览器SEO工具插件可以列出当前页面的所有图片信息表格,包括alt、title、图片尺寸等属性。这类工具查看几十张上百张图片的alt状态就非常快。
用这类工具时我会盯三种情况:alt为空、alt和title完全不同但没有任何关联、alt出现重复文本。前两种好理解,第三种是最容易被忽略的:站点有大量的轮播图或装饰图,全部用同一个alt,这会被搜索引擎认为你在作弊刷图片标签。
5.3 合格alt的判定标准,不要只追求“有”
补alt不只是让属性存在。我给自己定了一个及格标准:图片如果不看屏,只靠alt能不能大致知道是什么;如果换成读屏用户,读出来后能不能理解上下文;如果搜索这个alt里的关键词,能不能和图片本身互相印证。三条全过,才算是合格。
举例来说:一张显示“蛋糕切面细节”的图片,alt写成“一款六寸的草莓奶油蛋糕切面细节与多层内馅结构”就很合格。但alt写成“蛋糕蛋糕图片蛋糕做法”虽然也是完整词汇,却只能算关键词堆砌,依然属于不合格。真正的指标在于信息量和可读性,不在于字数和关键词密度。
6. 实际操作中容易踩的坑,和我的应对习惯
前面几章都是操作方法,最后这一章我想把真实项目里踩过的坑集中说一下。这些问题不发生在你动手之前,但若干到中途才发现,往往很难回头。
6.1 数据库批量更新后,特色图片的alt可能没有变化
很多主题在显示首页文章缩略图时,会自己写一套逻辑,直接使用文章标题作为图片的alt,而不读取媒体库里设置的那个alt字段。这就导致你数据库里的alt已经更新了,但首页特色图区域输出的还是文章标题,或者还是空值。
处理这个坑的办法是:更新完数据库后,不要只看文章内页,还要去首页、列表页、标签页抽查特色图。如果主题有内置逻辑,可以通过子主题修改或钩子处理,让特色图也读取正确的alt。
6.2 懒加载插件会导致alt属性移动位置
现在主流懒加载插件都会对图片标签做处理,有些会把原始alt挪到data属性里,加载后再回写到alt上。这看起来没毛病,但万一插件配置不当,可能把alt给丢失了。所以检查alt时千万别只看初始源码,要等图片真正出现在视口内再检查一轮。
6.3 缓存清理的优先级
改完数据库或代码之后,至少要清理三个层级的缓存:WordPress对象缓存、页面缓存插件、CDN缓存。用对象缓存(比如Redis或Memcached)时有一个特点:数据库内容更新后前端可能仍然展示旧值,必须把对象缓存整个清理一遍。我吃过这个亏,当时跑了SQL后发现页面没变化,以为SQL写错了,来回折腾半天,结果只是缓存没清。
6.4 第三方主题或插件自带的图片,alt改起来很费劲
有些主题自带图标、背景图,配合页面构建器生成,这些图片的输出代码可能写死在模板或插件逻辑里,后台媒体库里看不到,也不归WordPress图片管理管。对于这类图片,可用CSS或模板修改来处理,或者干脆给它们一个简短且通用的alt描述,别让它们裸奔就好。
6.5 多语言站点要避免统一覆盖
如果你的WordPress站点是英文、中文等多语言混合的,那么批量SQL把alt统一改成标题会出大问题。因为不同语言版本的同一张图片可能会被不同语言的文章引用,统一的alt会让语言版本互相干扰。多语言站点建议分成语言版本分别处理,或者只用代码兜底方案,不写死数据库。
6.6 文件名的坑,执行前先检查附件标题的规范
用文件标题作为alt生成的前提,是文件名本身有一定含义。如果你历史图片全部是IMG_2312.JPG这种,拿到的alt就是“IMG_2312”,这等于没改。遇到这种情况,唯一的出路是用插件逐条人工填写,或者走文章标题上下文自动生成的方案,不能指望文件名兜底。
最后说个我自己的使用习惯:在模板代码里加一个“alt缺失提示”的功能——编辑文章时,如果检测到内容里有图片alt为空,就在发布按钮上方显示一句提醒。这样你能在内容第一次发布前就堵住空alt,比后面做批量处理省心得多。毕竟批量清理是补课,源头把关才是正经的上课方式。希望这篇文章能把你在WordPress图片alt这件事上的疑问一次性捋清楚,剩下的就是动手了。