跨境男孩带你了解图片 SEO 优化，让网站在搜索引擎中脱颖而出

hwyzw · 发表于 2024-11-17 05:55:23

放眼未来，胸怀大计。大家好，我是Riven@跨境男孩。

欢迎来到我的“结交跨境朋友”频道，我主要分享独立网站和SEO方面的知识。互相交流，共同成长。

本文总共7000多字，预计阅读时间为6分钟。

什么是图像SEO优化？

图像搜索引擎优化是指优化网站内的图像，以从搜索引擎（例如您的搜索引擎）获得更多自然流量。

例如，图像的 SEO 优化可以帮助您的网站在图像搜索中排名更高。

下面（DJI ）在“（空中无人机）”的图片中排名第七和第九。

但大多数企业在处理图片搜索引擎优化（SEO）时，一般只优化ALT图片替代文字（连基本的图片属性ALT都忽略了）。

但图像 SEO 优化不仅仅是图像 ALT。

为什么图片如此重要？

图片搜索占所有搜索量的 22.6%，每天对图片的查询量超过 10 亿次。

这就是为什么关注图像搜索引擎优化如此重要。如果你不进行图片SEO优化，你就会错失很多流量。

图片SEO可以通过以下方式为您的网站带来大量流量：

1. 使用优化的图像可以增加您在图像中排名的机会

2.图像是“页面搜索引擎优化”的重要组成部分，谷歌越来越多地在常规搜索结果（SERP）中显示图像

此外，当用户进入网站时，图像可以增强用户体验并使您的页面更具吸引力。因为图片可以分解大段文字内容，帮助用户理解你的网站内容，从而提高用户参与度，促进转发、转化等（因为图片的接受度和理解度比整篇几千字更有吸引力）人们对内容的理解程度：视频>图片>文字）。

图像 SEO 的 16 个技巧

用户体验应该是图片SEO优化策略的核心

一方面，如果正确填写图片的 HTML 属性，可以帮助搜索引擎理解源代码中图片的内容。

另一方面，图像优化可以提高页面加载时间和用户体验：没有好的图像就没有好文章。

在这篇文章中，我将从三个部分（准备图片、添加图片、图片技术SEO）16个方面介绍您需要了解的图片SEO知识，从而充分实现您的图片对于搜索引擎和用户的价值：

为您的页面准备图像：

将图像添加到您的页面：

图片技术SEO优化：

一：为您的页面准备图像

在进行图片SEO之前，首先要准备好页面的图片资源。在添加图像之前，您需要考虑很多事项：

1.创建独特的图像

人们不喜欢虚假、重复、毫无价值的内容，谷歌也不喜欢。您的网站拥有的图像越独特、原创和创新，用户体验就越好，而且在搜索结果中排名也就越靠前。

当用户进入 SERP 或进入页面时，他们首先看到的可能是标题或图像。

这意味着页面上的第一张图片必须具有吸引力和原创性，这可以提高点击率，降低页面跳出率，有利于SEO，逐渐增加UA，提高页面和图像的SERP排名等。

如果你很少拍原创照片，这里推荐两个免费分享图库的网站：，。您还可以使用 Canva 创作精美的插图。

2. 压缩图像文件大小

您是否注意到，将未压缩的原始图像上传到网站后，页面加载变得非常慢？

图片太大会严重影响用户体验、SEO、购物转化。您的网站加载速度越快，用户和搜索引擎访问该页面就越容易。

越来越多的网站正在压缩图像，以将网站速度提高 33%/2 秒。

这就是为什么我强烈建议在上传到网站之前压缩图像，这有助于减少页面加载时间。

压缩图像只是最小化文件大小而不降低质量。本质上就是尽量减少图像中的冗余数据，以提高使用图像时的效率和更快的加载速度。

如何减小图像文件的大小？

推荐压缩工具：、、、、、jpeg.io、.io

如果您不确定图像如何影响页面速度，建议使用、、或等工具测试您的页面。

3. 选择最佳的文件类型/格式（图像类型）

在开始向网站添加图片之前，您需要了解各种图片文件格式的最佳 SEO 实践，并根据您的实际应用场景选择最佳的文件类型。

图片格式

搜索引擎优化建议

JPG/JPEG

它们是网络上最常见的图像格式，可以压缩到非常小的尺寸。图像质量可能会有所损失（有损压缩），但您可以调整质量级别以找到良好的平衡。（首选 WebP）

巴布亚新几内亚

仅当您需要图像背景透明时才使用 PNG。

动图

仅当您需要为图片制作动画时才使用 GIF。

静止无功发生器

对于图标或徽标场景，尽可能使用 SVG，但不要从不受信任的网站下载 SVG。

网络P

如果您需要比 JPEG 或 PNG 更高的压缩率，或者不受透明度或动画限制时，您应该尝试使用 WebP 而不是其他格式（WebP 格式是由开发的）

对于我的独立网站的日常使用，我通常将图片 JPG/JPEG 转换为 WebP。

注意：当使用内联 SVG 格式的 .jpg 图像时，这些 .jpg 图像将不会被索引

注意：避免使用不会索引 CSS 图像的 CSS 样式

4. 适当命名图像（图像名称）

当谈到 SEO 时，创建描述性的、关键字丰富的文件名和 URL 非常重要。

如果不自定义图片文件名，则图片名称和URL路径不会

可读性，例如“”，

“/.jpg”

这样一来，对没有任何帮助。不利于 SEO。

图像 URL 的路径将提醒其他搜索引擎爬虫注意图像的主题。

但现在很多建站SaaS对于商家上传的图片URL不会使用图片名称作为URL slug，而是会进行转码，这样不利于SEO。（我测试过，不行）

作为商家，您应该尽可能更改默认的图片或文件名，并将其用作您的图片或文件 URL 的 slug，以帮助搜索引擎了解您的图片并提高您的 SEO 价值。

（例如，假设您有 S925 项链的图片，您可以简单地将它们命名为“S925”。但如果您在网站上销售女士 S925 项链，则可以将每张图片命名为“S925”、“S925”等。

图片URL是“/image/s925-”，让用户和搜索引擎能够理解这张图片。）

二：将图像添加到页面

找到正确的图像（图像内容、大小、格式、重命名）后，下一步是将其添加到您的网站页面或博客文章中并对其进行优化。

5. 图片标题 ()

当人们浏览网页时，他们倾向于浏览：页面标题、大字体、粗体文本、突出显示的文本、项目符号列表、图形、图像标题、主题句和目录等。

图片标题是指：页面图片下方所附的文字（每张图片下方灰色框中的文字）

为什么标题对于图像 SEO 很重要？

由于图像下的标题的阅读量平均比文本本身高 300%，因此不使用或错误使用它们意味着错过接触大量潜在读者的机会。

当涉及到图像 SEO 时，图像标题属性并不像 ALT 替代文本属性那么重要。但从用户体验的角度来看，当用户滚动页面和图片时，图片标题属性可以提高用户体验。

 <pre class="code-snippet__js" data-lang="cs"><code>[caption id="attachment_1370" align="alignnone" width="600"]</code><code>class="size-full wp-image-1370" </code><code>src="https://www.yourdomain.com/wp-content/uploads/2022/08/riven-product-name.jpeg" </code><code>alt="这是替代文本" width="600" height="601" /> </code><code>这是说明文字[/caption]</code></pre>
没有必要在每张图片下面都添加描述，以避免过度优化。仅在图像对访问者有意义的情况下添加带有说明的字幕。我们应该首先考虑用户，不要为了做SEO而做SEO。

6. 编写 SEO 友好的描述性替代文本 (ALT)

图像 ALT，或图像替代文本，是图像的书面描述。 SEO 有时将 ALT 文本称为“ALT 属性”或“ALT 标签”。

优化 ALT 标签对于将图像排名在其之上至关重要，并且也有利于您的整体页面 SEO 策略。

这是因为替代文本可以让您了解该图像中显示的内容。

它还有助于让用户可以访问您的网站，并向用户解释图像损坏时应显示的内容。

看看下面的例子。您可以看到图像正确加载时、损坏且没有替代文本以及损坏且具有替代文本时的外观：

向网站上的图像添加适当的 alt 标签可以通过将关键字与图像相关联来帮助您的网站在搜索引擎中获得更好的排名。

还谈到了图像 ALT 的价值：ALT 提供了有关图像主题的有用信息。使用此信息可帮助确定为用户查询返回的最佳图像。

额外的 SEO 价值：当图像链接到网站上的不同页面时，替代文本可以充当内部链接的锚文本。

警告：不要在每个图像的替代文本中填充关键字。最重要的是，描述图像中的内容，以便搜索引擎和人们都能理解。图像周围的相关信息越多，搜索引擎就越容易理解图像。

并非每个图像都需要有替代文本。替代文本应被视为内容的一部分，并添加到有意义的位置。（例如，如果您有一张纯粹出于装饰目的的图像，则该图像不需要替代文本。在这种情况下，具有替代文本不会增加任何价值；此外，如果有一张带有统计信息的图像，例如上面是每个国家搜索S925女士项链的人数，那么这应该反映在替代文本中）

7.优化页面标题和描述（&）

当您的图像可供使用时，不要只是将其放入您的文章中。相反，将其添加到相关文本内容附近会很有帮助。确保文本内容与图像一样相关，这是用户所喜欢的。

还透露：使用您的页面标题和描述作为其图像搜索算法的一部分。

所有基本的页面搜索引擎优化因素（例如元数据、标题标签、页面副本、结构化数据等）都会影响图像的排名。

8. 优化开放图和卡片

图像也是社交媒体策略的重要组成部分。将使用开放图谱和卡片。

Open Graph 是最初由 . “开放图谱”选项卡允许您选择社交媒体帖子预览的显示方式，这意味着您可以为社交帖子选择预览标题、图像等。

例如：要确保在共享页面时显示您选择的图像，请在页面的 HTML 部分中包含图像标记，如下所示：

 <pre class="code-snippet__js" data-lang="xml"><code><meta property="og:url" content="https://site.com/image-link.jpg"></code><code><meta property="og:title" content="Product Name | Brand Jewelry"></code><code><meta property="og:type" content="product"></code><code><meta property="og:description" content="This is description "></code><code><meta property="og:image" content="https://site.com/image-link.jpg"></code></pre>
Open Graph 与卡片一起工作并同时使用卡片。

为此，您需要添加一些代码：

 <pre class="code-snippet__js" data-lang="xml"><code><meta name="twitter:card" content="summary_large_image"></code><code><meta name="twitter:title" content="Product Name | Brand Jewelry"></code><code><meta name="twitter:description" content="This is description "></meta></code></pre>
您可以使用 Yoast 或其他 SEO 插件来设置这些图像标签并预览您的社交帖子。

三：图片技术SEO优化

接下来我们来说说一些图像SEO优化的技术。如果您有兴趣，请继续阅读：

9.优化图片文件URL结构

更新了其图像指南。其中一项主要更新是：它们使用文件路径和文件名来对图像进行排名。

重要提示：文件路径（URL&Path level）和文件名（Slug）是实际排名因素。

例如，如果您是一个拥有多种产品的电子商务品牌，建议将您的媒体子文件夹构建为更多与类别相关的主题，例如 // 或 /denim/，而不是将所有产品图片放在公共目录中/媒体/文件夹。

10.添加结构化数据（富文本）

结构化数据是一种数据词汇。理论上，如果在页面中添加相应的结构化数据，就可以帮助搜索引擎更清楚地理解您网站的信息，还可以增加图像显示为“丰富结果”的视觉机会。

例如，如果您在产品页面上使用标记并将图像标记为产品，则可以将该图像与价格标签配对。搜索引擎跳过算法并使用结构化数据中提供的信息来提供正确的图片。

下面是一个示例食谱。此类型显示相关图片、食谱评论、制作食谱所需的时间以及简短的成分列表：

虽然谷歌表示结构化数据并不能帮助你获得更好的排名，但它确实有助于在搜索结果（SERP）中显示“丰富的结果”，这可以改善用户体验、SERP曝光面积、吸引用户注意力、提高点击率率等

有关如何在独立站点上实现结构化数据的信息，您可以阅读该指南。如果还是不明白可以私信我。

11. 创建图像站点地图()

为了使您网站的图像包含在 SERP 中，它们需要包含在索引中。

图像索引由算法确定，但您可以通过创建图像站点地图来影响该过程并帮助搜索引擎。

什么是图像站点地图？

站点地图是一个 XML 文件，您可以在其中提供有关站点上的页面、视频和图像以及它们之间的关系的信息。它可以帮助搜索引擎抓取您的网站。

简而言之，创建图像站点地图将增加图像出现在搜索结果中的机会。

将图像添加到现有站点地图，或仅为您的图像创建单独的站点地图。将图像添加到站点地图可以帮助发现我们可能无法找到的图像（例如您的网站使用代码访问的图像）。

主要区别：图像站点地图可以包含来自其他域的 URL，这意味着您可以在内容交付网络 (CDN) 上托管图像。

如何编写图像站点地图？

您可以按照示例和说明手动或使用站点地图生成器创建图像站点地图。

（以下示例显示了页面的站点地图

，其中包含两个图像，

并且，它包含一张图片。）

使用图像站点地图，每页最多可以包含 1,000 张图像。

 还提供了图像标签列表。您需要使用标记为“必需”的。另一方面，可选标签可以为搜索引擎提供更多上下文和更好的用户体验。

当您的图像站点地图准备就绪时，请不要忘记使用站点地图工具提交它们。对于所有其他搜索引擎，请在 .txt 文件中添加以下代码行：

 <pre class="code-snippet__js" data-lang="javascript"><code>Sitemap:http://mysitemap.com/sitemap_location.xml</code></pre>
+ 上提供的所有主要 SEO 插件都具有图像站点地图创建功能。如果是WP，建议使用Yoast和.如果是or，会自动生成.xml

12.提供响应式图片（M/PC等）

假设您将 720 像素宽的图像上传到您的网站。当用户在具有较小显示屏（例如，320 像素宽）的移动设备上访问时，他们的浏览器仍然需要加载 720 像素图像。

你看到问题了吗？

加载720像素的图片会浪费带宽，只会减慢页面加载速度，增加网站跳出率，不利于搜索引擎优化。

解决方案是设置图像的属性。

它告诉浏览器针对不同的屏幕分辨率加载不同版本的图像。这意味着无论用户使用 PC 还是移动设备，图像都会缩放以适应设备的尺寸。

 <pre class="code-snippet__js" data-lang="makefile"><code></code><code> url size, </code><code> url size " </code><code>src="default url"></code></pre>
您可以通过图像宽度 (w) 或图像密度 (x) 定义尺寸。

 <pre class="code-snippet__js" data-lang="makefile"><code>" image/photo1.jpg 900w, </code><code> image/photo2.jpg 1080w,</code><code> image/photo3.jpg 2x,</code><code> image/photo4.jpg 1x,"</code><code>src="default image/photo.jpg" /></code></pre>
// 上传后会自动提供多种尺寸的图片和响应式图片。下面的示例代码完全由生成，我没有上传多个版本的图像。

如果你不使用这些SaaS或WP建站，可以使用GIMP、、、或来处理。

13.定义图像尺寸属性

如果您使用AMP或PWA，则需要在源代码中定义图像尺寸。

但是，如果您不使用这些，定义宽度和高度是最佳实践。它允许浏览器在加载 CSS 之前调整图像大小，从而防止加载时页面跳转，从而提供更好的用户体验。

图像大小属性对于防止可能干扰核心 Web 优化的累积布局偏移 (CLS) 问题也很重要。确保包含每个图像和视频元素的宽度和高度属性非常重要。这会告诉浏览器为资源分配多少空间，并防止令人讨厌的内容被移动，这会降低您的 CLS 分数。

14.考虑延迟加载（lazy ）

当页面加载缓慢时，图像通常是罪魁祸首。

解决这个问题的最好方法之一：使用“延迟加载”。

延迟加载是一种延迟图像加载的技术，“不出现在屏幕上”，直到用户需要图像。仅当用户向下滚动页面到达您的内容时，延迟加载才起作用。

这意味着当用户第一次登陆页面时，页面加载速度会更快。它不仅仅适用于图像；它还适用于图像。像这样的资源也可以通过这种方式加载。

延迟加载图像不会阻止它们被机器人索引，因此不必担心影响 SEO。

这是博客延迟加载的直观示例：

如果用户从不向下滚动到页面的后半部分，则下面的资源将永远不会加载。这带来了显着的性能提升。但是，请注意：您不应延迟加载所有图像。如前所述，应避免延迟加载首屏图像，因为这会造成较差的用户体验。

15.利用浏览器缓存

工具通常建议利用浏览器缓存。

什么是浏览器缓存？

浏览器缓存是指访问者浏览器存储的文件。它减少了 Web 服务器上的负载，最终减少了用户的加载时间。

每次浏览器加载网页时，它都必须下载所有网页文件才能正确显示页面。这包括所有 HTML、CSS 和图像。

这会导致两个问题：

1. 页面中的大文件需要更长的时间来加载，如果用户的互联网连接（或移动设备）速度较慢，这可能会特别痛苦

2. 每个文件向服务器发出单独的请求。您的服务器同时收到的请求越多，它要做的工作就越多，这只会进一步减慢您的页面速度。

通过浏览器缓存将某些页面或部分页面标记为：需要以不同的时间间隔更新才能工作。（例如，您网站上的徽标不太可能每天都发生变化。通过缓存此徽标图像，我们可以告诉用户的浏览器每周只下载此图像一次。用户每次访问时都不需要再次下载下载徽标图像）。

他们第一次访问您的网站时，将花费相同的时间来加载，但是当该用户重新访问您的网站、刷新页面，甚至移动到您网站上的其他页面时，他们已经拥有了一些文件需要本地。

这意味着用户的浏览器必须下载更少的数据并向服务器发出更少的请求。通过浏览器缓存节省用户时间和网络服务器带宽。

16.使用内容交付网络（CDN加速）

我们都知道CDN是最流行的网站速度优化之一。内容交付网络 (CDN) 可以更快地加载图像和其他内容。

CDN 是一组位于世界各地不同地点的服务器。这允许更快地将内容分发到不同的位置。

假设您位于美国，从美国服务器加载内容比从亚洲服务器加载内容快得多。

下图。除了源服务器之外，还显示许多位置的 CDN 服务器。

您可以看到用户将从距离他们最近的 CDN 服务器获取内容：

一些提供 CDN 的公司也有专用的图像 CDN。图片CDN使命目标：优化图片并尽快将其提供给访问者。运行图像 CDN 可以将图像的传输速度提高很多很多倍。

图像 CDN 允许您处理图像的转换、优化和交付。您可以确定加载的时间和方式。（例如，您可以说所有 PNG 图像都应该即时转换为 webp，因为它们加载速度最快且图像质量最好。图像 CDN 有很多用于微调过程的选项，但通常有默认设置可能最适合大多数网站。）

市场上有大量的图片CDN可供选择，例如Sirv、.此外，等平台允许您确定如何调整图像大小、重新格式化和提供图像。但如果您使用等方式搭建网站，则会自带图片CDN加速，无需您额外处理。

如何快速诊断网站图片问题？

我们已经介绍了如何优化网站的图像。那么如何快速找到需要修复的现有问题呢？

跨境男孩带你了解图片 SEO 优化，让网站在搜索引擎中脱颖而出

更多帖子推荐