第六课：网站图片优化进阶指南-《Google Seo，每天五分钟轻松学会》

今天是《Google Seo，每天五分钟轻松学会》第六课，主讲图片优化，因为搜索引擎对图片的可读性差，所以需要对图片进行优化，目的是让Google抓取工具更好的索引收录网站的图片，从而获的排名，给网站带来流量！

一、玩转Alt属性

1、原理

官方解释：使用标准 HTML 图片元素，有助于Google抓取工具找到和处理图片，Google通过解析网页中的  <img> 元素，通常使用alt元素，将图片编入索引，但不会将 CSS 图片编入索引。

也就是说，Google抓取工具会根据图片的alt属性来读取图片的内容，从而将其编入索引收录，通常这个图片是用于src属性调用的，如果是用CSS样式的background属性调用的图片，Google无法将其图片编入索引。

所以alt属性的作用，主要是描述图片的内容，让视力障碍人士以及Google抓取工具理解图片内容，并且在图片加载失败的时候，可以显示出来，我们正常的用户即使没看到图片，也能看到文字信息，从而知道这张丢失的图片的意思。

总结就是：利于用户体验以及搜索引擎理解，从而利于Google Seo优化。

2、Alt属性使用方法

alt属性用于img标签里面，常用方法如下：

60分的使用：

<img src="https://www.example.com/images/001.jpg" alt="图片1"/>

70分的使用：

<img src="https://www.example.com/images/clothing.jpg" alt="衣服"/>

80分的使用：

<img src="https://www.example.com/images/T-Shirt.jpg" alt="T恤"/>

90分的使用：

<img src="https://www.example.com/images/Black-T-Shirt.jpg" alt="一件黑色T恤"/>

100分的使用：

<a href="https://www.example.com/Product/Black-T-Shirt.html">

<img src="https://www.example.com/images/Black-T-Shirt.jpg" alt="一件黑色T恤" title="一件黑色T恤"/></a>

这个分数主要是吸引大家注意，目的也是让大家知道如何做，才能做的更好！

总结如下：

① alt属性中的描述文本尽量精简，字符不要过多，最好不要超过125个字符。

② 图片的命名，最好是描述性语言，试想下Black-T-Shirt.jpg是不是比001.jpg要好。

③ 图片再加上title属性，更利于用户体验。

④ 图片类的页面可以考虑使用H1标签在图片上面，强化其页面主题内容，利于页面seo优化，获取更多流量。

⑤ 如果图片的内容和你想要优化的关键词有关联的话，最好加入这个关键词，利于优化，但是记住，一定不要在alt属性里面乱堆积关键词，合理的使用，表达其意就好。

⑥ 图片尺寸不要过大，符合网站使用即可，不然体积太大，容易影响网站加载速度，最好能用图片压缩工具（例如：Optimizilla），压缩一下。

⑦ 目前Google 搜索支持以下格式的图片： BMP、GIF、JPEG、PNG、WebP 和 SVG，其他形式的最好不用。

⑧ 如果是图片网站，或者图片较多的网站，可以考虑用延迟加载的方式，来加载网站首屏部分的图片，当用户鼠标光标往下滑的时候，再加载出后面的图片，这样能大大加快网站的访问速度，利于用户体验。

⑨ 图片可以当作锚文本一样添加链接

二、内嵌SVG图片优化

现在有不少站点的图标、矢量图形使用SVG文件格式，SVG适用于高质量图形渲染，有着很强的伸缩性，所以它可以在不失真的情况下放大和缩小，非常利于用户体验，但是搜索引擎对其的可读性不高，为了加强搜索引擎的可读性，我们可以给SVG加上title元素。

例如：

<svg aria-labelledby="svgtitle1">

  <title id="svgtitle1">描述</title>

</svg>

三、自适应网站图片优化

自适应网站，也就是为了用户可以在多种设备（包括移动端，PC，Ipad等设备）上访问网页有着更好的体验，使其页面会随着设备的尺寸变化而发生变化，从而图片展示的尺寸也会不一样，这时，保持图片的清晰度就非常重要。

用法：

为了满足不同设备特性而更改图片，这里我们需要使用到picture元素，它常常用于定义一个声明性解决方案，用于根据设备尺寸、设备分辨率、屏幕方向等不同特征提供图片的多个版本。

例如：

<picture>

  <source media="(min-width: 800px)" srcset="Black-T-Shirt.jpg, Black-T-Shirt-2x.jpg">

  <source media="(min-width: 450px)" srcset="Black-T-Shirt-small.jpg, Black-T-Shirt-small-2x.jpg">

  <img src="Black-T-Shirt-fb.jpg" srcset="Black-T-Shirt-fb-2x.jpg" alt="一件黑色T恤">

</picture>

这里的picture元素类似于Video元素，包含了很多Source元素。

其中Srcset 属性，它包含多种尺寸的图像链接，每个图像的大小由宽度指定，这有助于浏览器根据屏幕尺寸和分辨率选择最合适的图像展现给用户。

四、制作图片站点地图

创建图片站点地图，目的同样也是为了Google抓取工具更好的索引收录，增加图片出现在搜索结果中的机会，从而获得流量。

小知识：

① 图片站点地图可以使用在站点地图里，也可以单独制作图片站点地图。

② 图片站点地图的url，可以使用其他网址的图片或者包括放在CDN的图片

标记方法：

<image:image>

<image:loc>图片url地址</image:loc>

</image:image>

每个 <url> 标记最多可包含 1000 个 <image:image> 标记。

这里我们用官方案例作为参考：

假设sample1.html页面有2张图片，sample2.html有一张图片。

<?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/sample1.html</loc>

    <image:image>

      <image:loc>https://example.com/image.jpg</image:loc>

    </image:image>

    <image:image>

      <image:loc>https://example.com/photo.jpg</image:loc>

    </image:image>

  </url>

  <url>

    <loc>https://example.com/sample2.html</loc>

    <image:image>

      <image:loc>https://example.com/picture.jpg</image:loc>

    </image:image>

  </url>

</urlset>

好了，今天就分享到这里，期待能帮助你！

2024，我会持续分享优质内容，我们一起成长！

文章为网络运营J先生原创，转载请标明出处，谢谢！