Google图片SEO优化:使用图像排名更高
Google 与您和我的阅读方式不同。当然这不是一个很有争议的声明。 但是由于一直坚持为“人类”创建页面(至少从 2006 年开始),因此忽略某些技术基础变得越来越容易。这就是为什么在本文中,我将讨论有时被忽略的技术 SEO,尤其是如何完美优化图像以提高排名。
我将讨论什么是图像优化及其重要性。 将图像集成到您的网页的详细步骤; 以及我们可以用来确保完美优化的工具(专为 Google Vision API 设计)。
图片 SEO:它是什么以及为什么很重要
什么是图像优化?
图像优化指的是遵循最佳搜索引擎优化实践时,添加图片到我们的网页,以尽可能获得最大的排名收益。
实际上,这意味着实施最佳编码实践,为图像对象添加架构标记,使用可用的最高分辨率以及使用WebSite Auditor审核页面。
为什么技术图像优化很重要
现在有数百万的 SERP,其中包含许多完全可读的副本,涵盖了所有正确的关键字簇,每个簇都有大量的反向链接进行备份。
人类无法将这些页面从 1 到 10 进行排名,在我们看来,它们都是非常出色的。 不过,在找出前三名的结果方面,Google 几乎没有问题,获得了约 55%的点击。 这全都是 Google(而非人类)查看我们网页的方式。
查看这两页,并尝试找出使另一页比另一页更可排名的关键差异:
您发现差异了吗? 因为没有任何东西,所以它们是副本,对于一个人来说,没有办法找到比另一个更可排名或更相关的东西。
现在,让我们再看看这两个页面,也许您会以这种方式看到不同之处:
左图
<style>
.image {
height: 140px;
background: url(1.jpg) top left no-repeat;
background-size: contain;
}
.description:before {
content: attr (data-shortname);
}
</style>
<h1>Duis aute irure dolor</h1>
<p class="image"> </p>
<p class="description" data-shortname=In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
右图
<style>
</style>
<h1>Duis aute irure dolor</h1>
<p class="image" > <img src="1.jpg" alt=""/> </p>
<p class="description" >In reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
尽管页面上的结果完全相同,但是它们在代码方面没有什么不同,以至于左侧的代码可能根本不会排名。 代码是搜索引擎实际读取的内容,而不是页面本身。
这就是为什么在将图像添加到页面时遵循最佳实践如此重要的原因。 如何添加这些图像并将其放置在页面周围,使用的标签,在描述符标签中编写的内容,显示的图像-所有这些都与读取该代码的搜索引擎有关。
专业提示:谁需要优先考虑图像优化
尽管看起来任何一个网站都可以从更好的图像优化中获益,但排名第一的绝对是电子商务网站。高竞争力和对视觉内容的高度依赖使其成为最需要优化图像的行业。
试想一下:电子商务网站有成百上千的网页,每一个网页上至少有一到两张有关产品的图片,因此电子商务网站有很多机会搞砸。此外,正确的优化为实现正确的关键字提供了更大的空间,因此对图像优化的需求就变得显而易见了。
优化图像的最佳做法
现在,我已经确定了什么是图像优化以及为什么它如此重要,我将介绍如何实际优化图像。尽管我将介绍一些实践证明可行的原则,以及任何 SEO 建议,但您还是需要一听即可,因为在不同的主题,行业, 和竞争性垂直行业。
您需要了解的有关<img>标签
图像优化建议是使用<img>标记和<alt>属性来实现,如下格式:
<img src="seoeri.jpg" alt="SEO 大学">
<img>标签在其中添加图像,而<alt>属性对其进行描述。从一般意义上讲,这是一个好习惯,但是像往常一样,事情要比看起来复杂得多。
为什么要填写<alt>属性
Google 抓取您的页面时,它首先以大量代码的形式下载在那里找到的所有文本内容。然后,它开始将其分为几类-这就是 HTML-5 发挥作用的地方,因为语义标记可帮助 Google 围绕您的文本定位自己并弄清楚是什么。
此时,具有<alt>属性的<img>标记的读取方式与您其他文本内容的读取方式完全相同,例如 按<p>标签分组。Googlebot 进入您的图片标签后,将发生以下情况之一,具体取决于您实现<alt>属性的方式:
- 根本没有<alt>属性这是最糟糕的情况,因为 Google 将无法获取图片本身的任何上下文,并将其视为对网页不重要的内容。这种图片永远不会排名,甚至可能会损害你的页面排名。
- 有一个空的<alt>属性-一个更好的情况。看到空的<alt>文本,搜索引擎会自动将您的图像视为装饰,并尝试通过其周围段落的上下文来获取其含义。
- 有一个正确填写的<alt>属性-对于排名来说最有用的东西。爬虫程序将使用<alt>属性来确定图像的含义,然后通过分析周围的文本来补充该属性,以正确评估图像的含义、上下文和搜索者的相关性。
在爬虫程序呈现页面的非文本内容之前,您的<img>标记实际上不会被读取,而您的<alt>属性的读取方式与网页中任何其他短语内容的方式相同。
这正是为什么使用图像进行更好的优化要求您首先始终添加<alt>属性,即使您没有足够的资源来填充它们。第二,为什么你需要知道如何正确地将关键词添加到<alt>属性以提高你的排名潜力。
不用担心<title>属性和标题
在<img>标记中,有一个<title>属性,指定图像的标题,但与图像的实际名称分开。<title>属性可能很重要,但只有在没有<alt>属性的情况下,它才会用于评估图像。一、 即使你有一个空的<alt>属性,<title>仍然不重要。
因此,除非你故意无视我的建议,根本不放任何<alt>文本,否则改变你的图像文件名不会影响你的排名。
现在来谈谈标题。即使是我们在 Ahrefs 的同事也建议使用字幕,但是,事情并不是那么简单。在<img>标记(您应该使用它来实现图像)中,没有类似于<caption>的属性。相反,它是一个<figure>标记的属性,有时也用于向网页添加图像。
为什么我们不使用<figure>作为图像,它甚至拥有一个<caption>属性!这里的问题是,<figure>与<img>不同,它有一个非常特殊的目的——它用来告诉搜索引擎,其中的图像是自包含的。
<figure>明确地告诉搜索引擎,它应该独立于页面的其余部分来解释图像,页面不需要它,没有它就可以完美地工作,等等。换句话说,它完全抵消了图片可能给页面带来的任何排名提升。
但是,如果您最终需要大量文本,而这些文本并不能作为<alt>文本工作,那么您需要的是简单的 HTML5。在特定的文本中,你添加。与任何文本相比,文本都不会受到任何文本的影响。
如何为图片优化编写<alt>属性
要充分利用图像,可以遵循的两种最佳实践是:
- <alt>标签不仅需要作为图像描述来实现,而且还必须作为您正在编写的文本的一部分来实现(更多内容请参见下文)。
- 您所描述的图像实际上必须与周围的文本相关。
你不需要记住它的标题,也不需要记住它的文件名是什么。
与这两个不同的是,<alt>文本应该能够代替你的图像,并且在它周围的网页环境中工作得很好。
我看到的站长最常犯的两个错误:
- 复制图片或网页的标题,并将它们用作您的<alt>文本;
- 对一些不同的图像使用完全相同的<alt>文本。
尽量避免这种情况,因为重复的<alt>文本通常会被爬虫程序忽略,因为任何完全相同的文本都会被爬虫程序忽略。
填写<alt>文本只是为了让它被填充,这肯定不会促进优化,而且会削弱图像的有效性,如果你正确地填写了<alt>文本,那么这些图像本来可以帮助你排名更高。
在段落的结尾加上一个大写的标记,这样你就可以理解了。
检查图片<alt>属性优化和损坏的图像
管理一个拥有数十万图像的网站的图像优化是一项不小的壮举,如果没有专用工具,这显然是不可能的。在 WebsiteAuditor 中,有几种方法可以跟踪您是如何填写<alt>属性的:您可以鸟瞰视图,也可以逐页分析图像优化。首先,如果您想要的是图像优化的总体情况,可以使用 SiteAudit 模块,然后向下滚动到 Images 列。
这样,您将获得在网站上找到的所有损坏的图像和 WSA 的空白<alt>文本属性的概述。但是,如果要检查特定的图像组,可以转到“页面”模块,其中保留了所有已爬网的图像。在这里,您可以添加图像过滤器,并检查最需要图像优化的特定页面数。
如果你发现大部分页面图片没有填写<alt>属性,那么从最需要排名提升的页面开始就很有意义:你的主页、登录和产品页面。由于整合一个经过适当优化的图像是一项耗时的任务,所以要对其进行结构化,以最大限度地提升最需要它的页面。
一旦你将注意力集中到你想要更好地优化的特定页面上,右键单击,选择分析页面内容,然后在页面审计模块中处理它,在这个模块中,你不仅可以看到文本是否被填充,还可以看到是否在那里输入了相关的关键字。
使用 src 和 srcset 属性索引最高质量的图像
在<img>标记中,SEO 的两个非常重要但有时被忽略的属性是 src 和 srcset。下面是代码中这两个的样子:
<img alt="useful alt text" src="/img/tags/1/image.jpg" srcset="/img/tags/1/370/image.jpg 370w, /img/tags/1/600/image.jpg 600w" sizes="370px">
src 属性是一个旧的但很好的特性,它从<img>标记创建以来就一直在这里,并指定要实现的图像的源 URL。srcset 属性在大约六年前才在 HTML-5 中出现,它的任务是定义一组具有不同大小、分辨率等的图像(因此是 src_ 集)。这样做是为了让 web 浏览器只显示完全适合访问页面的设备的图像。
一个搜索引擎优化专家在这里会问的逻辑问题是:但是这个集合中的哪个图像被谷歌索引了?很简单:对于要索引的图像,使用 src 属性。对于要显示的图像,请使用 srcset 属性。这意味着,除非你需要支持旧的浏览器,否则你可以让 Google 索引你最好的、最高分辨率的图像,而访问你的页面的用户将得到最适合他们设备的图像。
考虑到图像质量是谷歌的最佳优化手段之一,也是谷歌排名的重要因素,这一点非常有帮助。
提高图像分辨率
当您尝试对视觉内容进行排名时,图像分辨率很重要。 当然,Googlebot 可以发现您使用了软件来拉伸图像,并且能够判断出图像模糊,难以阅读等。
但是,即使考虑到索引最高分辨率的图像还是值得的,因为即使将其视为模糊图像,它也仍会被索引并被认为是非常高分辨率的图像。
真正有效的功能性免费应用程序是ImageMagick,因为在其中,您不仅可以在降低质量的同时拉伸图像,还可以添加层和滤镜层。 您决定“拉伸”的次数越多,所讨论的图像将变得越模糊,但这仍然是当今最好的免费解决方案之一。
使用 ImageObject 模式标记来提高排名潜力
我们青睐结构化数据的,因为这是获得一些丰富的 SERP 特性的好方法,而这些特性又会导致更高的 CTR。也就是说,谷歌可以阅读数百种标记。它们根本不会影响你的代码片段,所以很不幸,它们经常被忽略。
图像搜索引擎优化最重要的标记是 imageobjectschema。它用来指示图像的位置,并提供有关它的信息。以下是它的基本版本:
<span itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="contentUrl" alt="Useful image description" src="image.url.jpg"/>
<span itemscope itemprop="thumbnail"
itemtype="https://schema.org/ImageObject">
<meta itemprop="contentUrl" content="imagethumbnail.url.jpg"/>
我们需要使用此属性的主要原因是<thumbnail>属性。
缩略图属性
对于商品图片和商品图片,Google 都有一条准则:“为获得最佳结果,请提供具有以下纵横比的多个高分辨率图像:16x9、4x3 和 1x1。
意思是,对于您上传的每个图像,您还需要另外三张具有这些宽高比的图像。当然,这里的窍门是用户永远不会看到这三张其他图片,我们也不会想要它们。
通过其<thumbnail>属性,您可以为页面上的每张图片添加三张其他图像。反过来,这些缩略图将被抓取并建立索引-它们还将是搜索查询时出现的图像。
换句话说,该网页包含一个标记,该标记继而包含指向用户的图像的链接,这要归功于 meta 标签,因为 meta 标签的全部工作是告诉搜索引擎该特定图像具有这些预览缩略图。搜索引擎依次在其搜索结果中使用这些缩略图。
图片来源:复制其他网站图片还是自己原创图片
图像搜索引擎优化中一个非常重要的问题是唯一性问题。不言而喻,你不应该窃取其他网站的图片内容,因为这很容易成为 DMCA 通知的理由,之后你将承担一些严重的损害赔偿责任。
虽然我们都承认图像的唯一性是优化的一个重要因素,但我们中的一些人仍然引用其他站点的图像(包括我自己),仅仅因为它更简单、更快。不过,就严格的优化工作而言,最好创建自己的图像,而不是使用库存图片,即使你购买了它们。想想这个:即使你买了一张股票图片,谷歌也没有这个信息。它所拥有的是一个很久以前被索引的图像。
谷歌知道它来自哪里,它的创造者,发布日期等等。这意味着,即使你已经把它发布到你的网站上,从中榨取一些好处的唯一方法就是确保你获得最高的质量,最好是比股票一开始索引的质量更高。那样的话,你真的没什么好担心的。不幸的是,这是一个众所周知的做法,股票图像供应商出售的图像,要么是一个相等的,甚至是一个显着降低了分辨率比他们在网站上。
在这种情况下,该图像对优化工作没有任何帮助。
避免按行,来源和 CopyrightNotice 属性图像
图像盗窃在网上经常发生。 由于 Google 喜欢页面上有图片的页面,并且创建自己的页面需要花费时间和金钱,因此您经常会遇到这样的情况,即另一个网站完全用您的代码窃取了图像,并试图使用它们进行排名。为了避免这种情况,您始终必须要求您的编码部门通过 IPTC 标准或 ImageObject 标记添加特定的属性,以指出图像的所有者。
这里的三个最重要的属性是:
- 作者(艺术家;创作者)—图片作者
- copyrightNotice-在此处放置版权许可及其说明的链接
- 来源(来源)-您将链接添加到您的网站或从中获取图像的网站。
哪种图像格式最适合 SEO
曾几何时,有许多可能的图像格式可供选择:在某些情况下为 JPEG,在其他情况下为 PNG,第三种是 GIF。在这一点上,“最佳”扩展名的问题更容易解决:如今,WebP 格式还没有真正的竞争对手。
简短而简单的是,当今几乎每个流行的 Web 浏览器都原生支持 webP,转换几乎不需要时间,并且与 JPEG 和 PNG 中的相同图像相比,webP 中的图像尺寸要小 25%,无论我们是否在谈论无损图像。
当然,有些扩展甚至可以被更有效地压缩,但是相同数量的 Web 浏览器根本不支持它们。归根结底,这要归功于业务成本-全球 80%以上的全球 Internet 用户浏览器都支持 webP。这意味着继续投资于 80%的用户并使用 webP 更为明智。不过,对于其他 20%的用户,我们会选择使用较旧的 JPEG。
我强烈建议您对处理 WebP 进行简短介绍:它涵盖了我们为什么需要移动以及如何将当前图像转换为该新扩展名。
图片延迟加载和 CDN 影响优化吗
您可以找到有关图像 SEO 的一个非常流行的建议是:对图像使用延迟加载和 CDN。 如果您不想降低页面速度,它们被认为是必不可少的。当然,页面速度很重要。 但是,何时应该牺牲优化的其他方面来略微提高页面速度呢?让我们更深入地研究这个问题,看看延迟加载和内容交付网络是否真的可以破解,以及何时(如果有)使用它们。
1. 我们应该信任图片延迟加载吗?
含义:延迟加载是一种编码技术,当您没有立即立即在页面上实际加载所有对象,而是诱使浏览器在图像出现时立即加载它们,从而提高了页面速度。
简而言之:如果你不需要图像本身的优化,而想专注于速度,那就用它吧。尽管名字叫 Lazy load,但它对速度非常好。但是,如果你想要提升排名,而且你没有每页数百张图片,那么我会避免延迟加载。
问题是,很难确保 Googlebot 100%地解释我们网页上的 js 逻辑。正因为如此,延迟加载可能会破坏我们的图片可能给我们带来的所有排名优势。反过来,页面速度的权衡往往是不值得的,有时甚至可以忽略不计。
关于为什么不使用延迟加载的详细详细说明
你看,Google 一再建议延迟加载。这让很多人感到愤怒和困惑,因为,尽管谷歌多年来一直在建议延迟加载,但在这段时间里,Googlebot 无法读取延迟加载指令,因为它只是以一大堆 HTML 文本的形式爬行我们的代码。
这意味着,听从建议,尝试偷懒加载你是在开枪打自己的脚。当然,有一种方法可以解决这个问题,那就是<noscript>标记,但这仍然不是一个完美的解决方案,因为爬虫程序无法正确地解释 js 逻辑并获取我们想要的东西。当然,自从 Googlebot 开始使用 chrome76 对我们的页面进行爬网以来,情况有所好转。
然而,问题仍然存在:爬虫程序不能总是有效地遵循这样的指令:不真正地索引您放入 src 中的内容,而是提取您放入数据中的内容。除此之外,实际上,在一个页面上添加延迟加载(例如,10 张图片)的功能不是很好——你的大多数读者都能很好地访问你的图片。在这种情况下,延迟加载甚至对您的速度没有多大帮助,因为速度一开始就非常快。
总的来说,我想说,如果你不真正关心来自图片的有机流量,而你有一个页面有几十张图片,那么绝对可以随意使用懒加载。如果没有,就不会。
2. 应该使用 CDN 图片缓存吗?
CDN(内容交付网络)是一个服务器系统,可以分布到不同的网站以提高其页面速度并处理过多的流量。本质上,您的用户可以更快地响应您的网页,因为他们实际访问的服务器离他们更近。
如果您要与庞大的全球用户打交道,并且对您的服务器的 ping 超过 80 毫秒,那么可以肯定! 但是,如果不是这样,CDN 最终弊大于利,因为我们正在使 Web 浏览器工作更长的时间以获得大致相同的结果。
关于何时使用 CDN 图片缓存的详细解释
就实际结果而言,CDN 仅在非常特定的情况下才有用,例如:
- 您突然突然收到大量服务器无法处理的流量。
- 当 CDN 为您提供一些其他服务或功能时,例如-将批量图像转换为上述 webP 格式。
除此之外,CDN 并不是非常有用,这是由于 CDN 的本质。DN 在功能上是另一个你租用的服务器,因为它离你的用户“更近”,所以可以为他们提供更快的体验。
但是,对于一个功能性 CDN 的实际情况是,无论您如何设置它,您都会强制浏览器创建两个连接:一个连接到您,一个连接到您的 CDN。浏览器最快需要 30 毫秒才能创建到 CDN 的连接。这还不包括 TLS/SSL 握手、拥塞、糟糕的路由等等。这意味着,在一天结束时,ping 不会是广告中所说的 30 毫秒,而是更高。
在服务器和浏览器之间创建连接所需的实际时间可能长达数百毫秒。而这些损失的毫秒正是站长试图通过使用 CDN 获得的好处。因此,CDN 肯定是有帮助的,但前提是你的用户对你的服务器的 ping 超过 80-100ms,但要考虑到,这是浏览器访问半个地球之外的服务器的 ping(不包括技术问题)。我很难想象一个拥有大量读者的网站,他们的服务器离他们的读者更近。
另外,在过去的十年中,我们被告知主机位置会影响我们的排名,最好让服务器离您的观众更近一些。而且,在 ping 低于 80ms 的情况下,CDN 框架最多也不会带来任何好处,最坏的情况是,提供的性能比其他情况下更差。
利用 GoogleVision 人工智能检查图像
Google 的 Cloud Vision API 是 SEO 专家优化武器库中最有用的工具之一。 幸运的是,对于我们所有人来说,这里都有一个免费的试用版,试用完成后再使用它也非常容易。
您所能做的就是将要添加的图像添加到网页中,并确切了解 Google 将如何解释您的图像。 看起来是这样的:
这是一个非常有用的工具,不仅因为它表明 Google 可以看到城堡,而且可以识别它。 通过它,您可以看到 Google 如何阅读网页上的文本,图像如何与 Google 的安全搜索结合使用,等等。
在 Google Vision API 的“标签”列中,您基本上将要查看在对图像进行爬网,索引和分析之后,媒体分析将指向哪些搜索查询。从中受益最大的行业是医疗服务。 不幸的是,在医疗服务网站上上传的大量图片最终都标记为“成人内容”。 这样,这些图像将获得所有相应的处罚,最终不会显示为安全搜索结果。
而且由于安全搜索是大多数人搜索的默认设置,而且我们自己通常在搜索医疗服务时不会将其关闭,因此这些网站最终会遭受排名和点击率的损失。
总结
如果你已经阅读了这篇文章的所有内容,恭喜你!你现在知道了几乎所有你需要知道的事情,以便开始从你的图片中获得一些重要的排名提升。如果你选择了某些章节,只阅读它们-这也很酷,很高兴你找到了一些有用的东西。
图像优化被忽视是有原因的-这是困难的,耗时的,困难的。但是,如果你把这里的所有建议都放在心上,再多走一步去实现它,排名红利很快就会随之而来。