seo 图片怎么做：六个属性，搜索引擎只读其中两个

seo 图片这件事，落到一个标签上只有六个属性，而搜索引擎真正会读的只有两个：alt 文字和文件名。另外四个——srcset、sizes、width 与 height、loading——管的是图片多快到达、以及加载时页面会不会跳一下。两半都要做，但它们不是一回事。把它们混成一张清单，正是图片审计做完之后没有结果的原因。

读这篇前

这一篇刻意不讲 alt 文字本身怎么写，那是单独一页的事：图片 alt 怎么写 里有搜索引擎读的是哪几样、以及哪四种情况该留空。下面全部默认 alt 已经处理好了，问的是这个标签上还剩什么。

seo 图片为什么要拆成两半，而不是一张清单

搜索引擎面对一张图，要回答两个互不相干的问题：这是什么，以及这张图能不能被送到。

第一个问题只能靠文字回答，因为图片本身不含词。Google 的图片文档点了名：「The most important attribute when it comes to providing more metadata for an image is the alt text.」紧跟着是文件名，规则十秒钟就能用上：「When possible, use filenames that are short, but descriptive. For example, my-new-black-kitten.jpg is better than IMG00023.JPG.」

第二个问题靠投递属性回答，而同一份文档把它们当成体验问题而不是语义问题：「Make sure to apply the latest image optimization and responsive image techniques to provide a high quality and fast user experience.」它把 srcset 描述成一种投递手段——「The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes」——然后立刻要一个安全网：「We recommend that you always specify a fallback URL using the src attribute.」

两个属性告诉引擎这张图是什么。另外四个告诉浏览器怎么把它拿回来。把它们当成一张清单去审，清单就废了。

六个属性，各自是谁在读

这就是全部可动的面。<img> 上剩下的东西要么是样式，要么是框架自己的记账。

被省得最多的恰恰是最便宜的那一行。2026-08-27 我们抓了 26 个首页，1,664 张图里有 811 张既没有 width 也没有 height，另有 51 张只写了其中一个——只写一个等于什么也没占。完整数字在 srcset 实测 1,664 张首页图片。

对做出海独立站的人，这一行还有一层额外意义。海外访客的网络条件比国内测试环境更参差，图片到得晚是常态；提前把盒子占住，是在网络最差的那一档用户身上兑现的收益，而它只是两个数字。

五分钟审一个页面

按顺序跑。每一步都以一个能写下来的数字结束，数字不对就知道该修哪一处。

1. 数图片总数：curl -sL --compressed -A 'Mozilla/5.0' https://example.com/ | grep -o '<img[^>]*>' | wc -l。如果这里是 0 而页面上明明有图，说明图是脚本插进去的，任何不执行脚本的东西都看不见它们。
2. 数其中有多少张带真的 src：同一段输出接 grep -c 'src='。两个数对不上，说明页面在用 data-src 加一段懒加载脚本，这些图对「取到 HTML 就停」的客户端是不存在的。
3. 数有多少张写全了两个尺寸：grep -c 'width=.*height='。差额里的每一张都是一次可能的版面跳动。
4. 随手打开三个图片地址，看文件名。只要出现 IMG_4821.jpg 或者 hero-final-v3-2.png 这种，就在源头改名，不要靠跳转补救。
5. 核一遍格式。Google 明确写了它支持哪些：「Google Search supports images referenced in the src attribute of img in the following file formats: BMP, GIF, JPEG, PNG, WebP, SVG, and AVIF.」

可以直接带走的检查表

粘进你的发布清单。六行，因为就六个属性，每一行对着一张图非过即不过。

[ ] alt      写清这张图是什么，或者刻意留空（装饰图）
[ ] filename 短、有描述性、连字符、小写
[ ] src      存在且是绝对地址 —— 不能只有 data-src
[ ] width    文件的原始像素宽
[ ] height   文件的原始像素高
[ ] loading  首屏之下写 lazy，第一张图不写或写 eager

另有两件不是逐图的、做一次就够的事。一是图片站点地图，Google 把它当成发现手段：「You can provide the URL of images we might not have otherwise discovered by submitting an image sitemap.」二是选格式，那是文件体积的决定，不是排名的决定。

这张表最好落在模板上，不要落在人身上。图片是内容里唯一一类每篇都要新增、又每篇都长得不一样的东西，靠人记住六行，第三个月一定开始漏。把前四行做成组件的必填参数，让缺一个就报错；后两行交给构建脚本按位置自动填。真正需要人判断的其实只有第一行——这张图是装饰，还是它自己就在说一件事。

做错了会怎样：三种

三种都能在标记层看出来，不用打开任何性能工具。

1. 图片要等脚本跑完才存在。标签发出来时是 data-src，src 为空或干脆没有。你的浏览器里图片正常显示，取到 HTML 就停的客户端看到的是空元素。26 个首页那次抓取里，四个站合计 117 张图是这样。
2. 写了宽度描述符的 srcset，却没写 sizes。浏览器于是当这张图占满视口宽，常常下载一个大于所需的文件。这是字节问题不是语义问题，也因此最容易漏——页面看起来完全正常。
3. 尺寸和文件对不上。width 与 height 要填的是资源的原始像素，浏览器才能在字节到达之前算出宽高比。把 CSS 显示尺寸抄进去，占出来的是一个形状错误的盒子，那是换了一种跳，不是不跳。

这套做法到什么地方就不管用了

两条边界，都值得在动手之前说清楚。

第一条：用 CSS 背景图放的图片，这一整套都不适用。它们在文档里没有标签、没有 alt、也没有文件名，而 Google 的图片文档讲的是 img 元素。一张图如果对理解页面是重要的，它就该待在 HTML 里。

第二条：我们说不出这些做法能把排名抬多少，也不认为有谁能给出这个数字。有文档支撑的说法要窄得多，也更实用——alt 是元数据来源，文件名提供语境，投递属性影响速度与版面。把那六行当成每套模板做一次的卫生工作，不是可以反复拉的杠杆。

常见问题

seo 图片最该先做的是哪一件？

有描述性的 alt 文字和有描述性的文件名，按这个顺序，因为这是搜索引擎当成语义来读的两样东西。标签上其余的属性改变的是文件多快到达，对访客和 Core Web Vitals 有意义，但它们不描述这张图。

图片文件名真的影响 SEO 吗？

Google 的文档要求短而有描述性，并且拿 my-new-black-kitten.jpg 和 IMG00023.JPG 做了对比。它是个比 alt 弱得多的信号。但它在发布那一刻是免费的，事后改就贵了——给线上图片地址改名就是一次跳转。

该用 WebP 还是 AVIF？

两个都被支持。Google 列出的支持格式是 BMP、GIF、JPEG、PNG、WebP、SVG、AVIF，所以这是文件体积和构建流水线的选择，不是「能不能被读到」的选择。挑你的工具链能稳定产出的那个，受众里还有老客户端就留一份兜底。

懒加载会不会影响收录？

用 loading="lazy" 属性不会，它是 HTML 的一部分，不需要脚本。把地址藏进 data-src 的那种实现会，因为真实地址压根不在文档里。属性是安全的，被它取代的那种做法不安全。

一个页面放多少张图合适？

没有公开的数字，我们也不会编一个。真正值得盯的是总重量而不是张数，以及第一张可见的图有没有被推迟——那一张会实打实地让首屏晚出来。想看引擎在这些属性生效之前从你的页面上拿到了什么，可以 看看 QueryWin 怎么运转。