SEO中文网

图片SEO ​

图片SEO，一方面让图片能被图片搜索收录获得流量；另一方面图片体积、加载性能会直接影响页面核心Web指标，间接影响网页整体排名。搜索引擎无法真正看懂图片像素，依靠文件名、alt文本、周边文字、图片尺寸、加载速度综合判断图片内容。

SEO文件名（上传之前修改，非常关键） ​

SEO文件名（上传之前修改，非常关键） 上传之后再改页面里的名字，不会改变服务器上真实文件名，SEO无效，必须本地改名再上传。

✅ 正确规则

  1. 小写英文，用连字符 -分隔，不要空格、下划线
  2. 简短描述图片内容，不要 IMG_1234.jpg、截图001.png
错误正确
IMG_8234.jpgrust-box-structure.webp
产品图片.pngshop-mall-product-shoes.webp

中文文件名不推荐，部分CDN、爬虫会出现编码异常。

alt属性SEO ​

alt 是图片的替代文字，爬虫靠它理解图片；图片加载失败、读屏软件也会展示这段文字。

✅ 写法原则

  1. 描述图片画面，不要堆砌一堆关键词，不要写“图片、照片”这类冗余词
  2. 长度控制50‑120字符；装饰性无关图片写 alt=""（空字符串）
  3. 内容和页面正文主题匹配
html
<!-- 不好，关键词堆砌 -->
<img src="shoes.webp" alt="鞋子跑鞋运动鞋男鞋跑步鞋">

<!-- 好 -->
<img src="shoes.webp" alt="男士轻量化灰色跑鞋侧面实拍">

title 属性（鼠标悬浮提示）对SEO几乎没有作用，可以不用写，不要把alt的工作交给title。

图片格式、压缩、尺寸SEO ​

图片格式、压缩、尺寸（影响页面速度，间接SEO） 图片占网页50‑70%体积，大图拖慢LCP最大内容绘制，直接扣分。

格式选型 ​

  1. WebP（首选）：比JPG小30‑40%，兼顾照片、透明图标，兼容性极好
  2. AVIF：压缩率更高，兼容性略差，可以用<picture>做降级
  3. JPG：老照片兼容兜底；PNG仅用于小图标、透明截图；Logo图标优先 SVG矢量图（体积极小无限放大）

压缩工具 ​

  • 在线：TinyPNG、Squoosh（谷歌官方）
  • 本地批量：XnConvert

普通网页图片单张尽量控制 100‑200KB以内，不要直接上传相机原始几千像素大图。

图片尺寸 ​

不要上传4000px原图，页面只显示800px。

  • 网页最大展示1200px，原图输出1200‑1600px即可（适配视网膜2倍屏）。
  • HTML写上 width height 属性，防止页面布局抖动CLS，属于Core Web Vitals考核项。

图片加载属性 ​

  1. 非首屏图片：loading="lazy" 懒加载，滚动到视口才加载，减少首屏压力
  2. 首屏主图（LCP图片）千万不能加 lazy，会严重降低页面评分

示例

html
<!-- 屏幕下方，非首屏 -->
<img src="xxx.webp" alt="描述" width="800" height="450" loading="lazy">

<!-- 首屏大图，不要lazy -->
<img src="hero.webp" alt="网站主图" width="1200" height="600">

周边内容与布局 ​

  1. 图片放在相关文字附近，图片前后段落文字会辅助爬虫理解图片含义；不要图片和文章完全无关。
  2. 图片可以搭配图注文字（<figcaption>），对图片搜索有增益。
  3. 重要分享封面图：配置 og:image，社交分享、AI搜索会抓取这张图，写在页面head里面。
html
<meta property="og:image" content="https://xxx.com/cover.webp">

站点地图 sitemap.xml ​

如果网站大量图片，把图片加入图片sitemap，加速爬虫收录图片，静态站VitePress/Hugo都支持生成图片sitemap。

Markdown/VitePress图片SEO实操 ​

VitePress底层编译为HTML，markdown语法设置alt：

markdown
![男士轻量化灰色跑鞋侧面实拍](/images/shoes.webp)

![]()方括号里面内容，编译出来就是img的alt，一定要填写，不要留空。

VitePress Markdown原生不支持写 loading="lazy"，两种解决：

  1. 直接写原生HTML <img>标签，可以完整写alt、width、height、loading属性。
  2. 使用 vitepress 图片插件自动给非首屏图片加懒加载。

注意：不要使用第三方图床外链大量图片；如果图床防盗链、失效，会造成大量图片无法抓取，严重伤害SEO。建议图片放在自己站点域名/CDN。

商城网站图片SEO额外要点 ​

  1. 商品图alt：描述商品型号外观，例如 alt="黑色无线机械键盘87键"，不要统一写“商品图片”。
  2. 商品多图：每个图片alt写差异化描述，不要全部复制一模一样。
  3. 商品详情长页面，下方全部图片加上 loading="lazy"。
  4. 结构化数据Schema，Product里面填写image字段，搜索结果会展示商品图片卡片。

JS操作图片 ​

利用JS可以对图片进行很多常用的操作

  1. 增加按钮对图片进行放大，缩小。
  2. 对图片透明度，模糊度进行处理。
  3. 弹窗大图预览（常见点击图片放大）。
  4. 对图片进行平移、旋转、翻转、拖拽。
  5. 对图片遮罩、弹窗预览。 JS对图片的操作还有很多，在专业的网站，强烈建议对图片加入这些操作 顺便说一句，markdown对图片的处理非常简单，原始，这些简单的处理是远远不够的。

对图片进行组件式SEO ​

通常我们讨论的是对单张图片的处理，但很多情况下，比如旅游，产品介绍，头图等等的，对图片配合各种网页组，进行更多的排列组合

  1. 图片的轮播（Carousel），自动播放、左右切换按钮、指示器小圆点、无限循环、手势滑动、动画过渡。分 原生手写 CSS+JS、CSS 纯 CSS、第三方库、框架组件
  2. 图片画廊（多个图片有序排列），文字配合图片，显示丰富的内容。
  3. 卡片式：上部是图片，下部是文字，然后多张卡片排列。

多图片 ​

在一篇文章中，搜索引擎是喜欢多图片的（10张以上），正如搜索引擎偏爱长文章一样。 多图片集中在一篇文章中，说明内容更丰富，表现力更好 每一张图片，强烈建议单独为此图片，结合html和css，以及文字及图片标题，再结合<figcaption>标签，特别是文章开头的首张图片。这样，搜索引擎的搜索结果中，图片就会非常容易的出现在结果的左侧。这是个人经验的总结 当然，随着图片的增多，工量会几何级的增加，这是没办法的事情，但是现在可以结合AI进行处理了。

常见错误避坑 ​

  1. ❌ alt塞满一堆关键词，堆砌会被判定作弊。
  2. ❌ 图片本地不改文件名，上传后页面改名字。
  3. ❌ 首屏关键图片加 loading="lazy"，导致LCP性能暴跌。
  4. ❌ 图片几千像素原图直接上传，不压缩。
  5. ❌ Markdown图片 ![]() 方括号留空，alt为空，爬虫不知道图片是什么。

图片SEO速查清单 ​

上传图片、写页面的时候逐项核对，适合文档站、商城商品页

文件预处理（上传前完成） ​

HTML / Markdown 属性 ​

html
<!-- 首屏 -->
<img src="product.webp" alt="黑色无线机械键盘87键" width="1200" height="800">

<!-- 下方内容图 -->
<img src="detail.webp" alt="键盘背光效果" width="800" height="600" loading="lazy">

markdown写法（VitePress）

markdown
![黑色无线机械键盘87键](/img/product.webp)

方括号内就是alt，禁止 ![]() 空着；需要懒加载就改用原生img标签。

页面与站点层面 ​

html
<meta property="og:image" content="https://域名/img/cover.webp">

商城商品图片额外检查 ​

高频错误避坑 ​

  1. 不要堆砌关键词到alt，属于过度优化
  2. 只改网页显示名字，不改服务器真实文件名，SEO无效
  3. 首屏大图加懒加载，造成LCP性能扣分
  4. 原图不压缩直接上传，拖慢网页速度
  5. alt留空，爬虫无法识别图片语义

Copyright © 2026 SEO中文网