SEO 百科

图片搜索优化

本页目录

图片搜索优化

图片搜索优化指按图片检索的要求，把图片组织成引擎能发现、能判断的形态，让图片被抓取、进入图片索引，并在图片搜索结果里获得展示[3]。图片搜索是一条独立于网页搜索的入口，用户在这里先看图、再点出处，图片自己有一套被发现和被判断的条件。以图片为主要内容的站点要关心它，因为图文结果拿不到的访问，常常从这条入口进来[6]。这件事同时管两头：图片本身怎么标记、怎么命名，以及承载图片的那个页面怎么组织[5]。图片的体积与格式属于页面性能，能不能被检索属于搜索，两处各管一段。

可被抓取的条件

Google 在 <img> 元素的 src 属性里找图片，不会把 CSS 里的背景图编入图片索引[3]。背景图写在 background-image 属性上，页面上看得见，图片结果里却没有，原因就在这一条。

抓取工具要读的是一个能独立取回的地址，比如 <img src="/photos/kitten.jpg">。这一行里被索引的对象，就是 src 指向的那个文件。

支持的图片格式是 BMP、GIF、JPEG、PNG、WebP、SVG 和 AVIF，文件扩展名最好与实际类型一致[3]。扩展名写错的图，抓取工具可能解析不了。

自适应写法要留一个后备地址。多个版本写在 srcset 与 <picture> 两个地方，并不是所有抓取工具都读得懂这两处，<img> 自己的 src 要始终有值[3]。

<picture>
  <source type="image/avif" srcset="/photos/kitten-800.avif 800w">
  <source type="image/webp" srcset="/photos/kitten-800.webp 800w">
  <img src="/photos/kitten-800.jpg" width="800" height="600"
       alt="黑毛小猫趴在沙发上">
</picture>

同一张图在站点里被多处引用时，要用同一个网址。Google 说明，网址保持一致，它才能缓存并复用这张图，不必反复请求[3]。图片换过一次 CDN 域名，同一张图就会分散在几个地址上，信号被拆薄。

替代文本与文件名

alt 写的是图片的内容，不是安放关键词的位置。HTML 侧把它当作图片的文字替代：屏幕阅读器把这段值读给用户，图片因为网络故障取不回来时，页面上显示的也是这段文字；值写成空字符串，等于声明这张图只是装饰[1]。

Google 把替代文本与计算机视觉算法、页面文字合在一起，用来理解图片的主题；图片被用作链接时，替代文本还兼作链接文字[3]。第三方也把这一项排在图片优化的前列，理由是引擎要读这段文字，才能判断图片与查询是否相关[6]。

写 alt 时守三条：

  • 描述画面里的事实，例如 alt="达尔马提亚幼犬在草地上捡球"，这比 alt="狗" 给出的信息多；
  • 不与页面已有的说明重复，也不写图片的文件名；
  • 纯装饰图写 alt=""，把属性留着不赋值反而让读屏软件念出文件路径。

在 alt 里堆砌关键词属于关键词堆砌，会被判为损害用户体验的做法[3]。一串同义词塞进去，读屏的用户听到的是噪声，引擎也不会因此多出可辨认的主题。

文件名是一条弱信号。看两个例子：my-new-black-kitten.jpg 说清了画面，IMG00023.JPG 只有一串编号。image1.jpg、pic.gif、1.jpg 这类通用名不传递主题[3]。图片数量多的站点可以让程序自动生成描述性名字，做本地化时文件名要一起翻译。文件名用了非拉丁字符或空格，要按网址编码规则转义，写成 %20 这类形式[3]。

内嵌的 <svg> 元素没有 alt，主题写在它自己的 <title> 里，并用 aria-labelledby 把这个标题关联到元素上[3]。

图片来源页的结构

图片来源页指那张图片被嵌入、并配着文字一起展示的那个页面。Google 会读取图片所在页面的内容，从中提取与主题有关的线索，包括图片说明和标题[3]。图片放在相关文字旁边、放在主题一致的页面上，比塞在一堆杂图中间更容易判出主题。

落地页指用户点击结果之后到达的那个页面。百度在落地页体验白皮书里给主体内容下过定义，指的是一页中最想表达的内容总和；文章之后的评论、分享、推荐不算在里面[5]。图片只出现在推荐位或侧栏时，它和正文的关联读不出来，能借到的页面主题就少。

首选图片可以用元数据交给引擎。Google 会读取三种写法：primaryImageOfPage、image 与 og:image，前两种来自 schema.org[3]。描述图片有专门的类型，叫 ImageObject，同样出自 schema.org，用它还能带出创作者、出处和许可字段[2]。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "url": "https://www.example.com/posts/black-kitten",
  "primaryImageOfPage": "https://www.example.com/photos/black-kitten.jpg"
}
</script>

首选图要与页面内容相关。站点标志、纯文字截图和宽高比过于极端的图，都不适合充当首选图[3]。页面标题与说明文字仍会被引擎用来生成结果摘要，这一部分不受图片标记的影响[3]。

图片站点地图

图片站点地图用来交出一份图片清单，把抓取工具自己找不到的图说明白，例如由脚本注入页面的图片[4]。它挂在常规站点地图的 <url> 元素里，<image:loc> 写图片自身的地址。

<?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/posts/black-kitten.html</loc>
    <image:image>
      <image:loc>https://cdn.example.net/photos/black-kitten.jpg</image:loc>
    </image:image>
  </url>
</urlset>

一个 <url> 里最多带 1,000 个 <image:image>[4]。图片域名与主站不同也可以写进来，只要这两个域名都在 Search Console 里验证过，抓取错误才有地方通知站长[4]。

有四个标记已经弃用：<image:caption>、<image:title>、<image:geo_location>、<image:license>，它们已从图片站点地图的文档里移除[4]。站点地图生成工具里还留着它们的话可以删掉，说明文字回到 alt 和页面正文里去写。

展示与否的核对

图片没有出现在结果里，按这个次序查：

  1. 图片来源页在不在网页索引里，页面没进索引，挂在它上面的图片也进不去；
  2. 图片网址本身能不能独立取回，直接请求 src 的地址，看返回的是图片还是 404；
  3. 图片所在的页面与图片文件本身，看 robots.txt 和 noindex 有没有把它们挡住；
  4. 由脚本注入的图片，看渲染后的 HTML 里有没有那个 <img> 元素；
  5. 页面是不是需要登录或注册才能看图，需要登录的图不会被编入索引[3]。

站点图片量大时，同一张图在多个页面出现要复用同一个地址，否则重复请求会占掉抓取配额[3]。

常见误用

  • 把装饰图也写满 alt，读屏软件会把无关文字念给使用者；
  • 图片只写在 CSS 里，页面上有图，图片索引里没有；
  • 换 CDN 之后图片网址全部改动，同一张图分散在多个地址上；
  • 以为提交了图片站点地图就万事大吉，来源页仍是一屏杂图，主题判不出来；
  • 为了压体积把图片元数据全部抹掉，顺带把创作者与许可信息也抹掉了。

附录

参见

参考资料

官方（境外）

  1. 《<img> HTML image embed element》，MDN Web Docs。
  2. 《Full schema hierarchy》，schema.org。
  3. 《Google 图片 SEO 最佳实践》，Google 搜索中心。
  4. 《图片站点地图》，Google 搜索中心。

官方（国内）

  1. 《百度APP移动搜索落地页体验白皮书5.0》，百度搜索资源平台。

第三方

  1. 《How To Write the Best Alternative Text》，Moz，2025-03-24 更新。

外部链接

无。