How images can affect positions and traffic of the website

How to influence rankings and website traffic using only images? 

According to current statistics for the United States, there is more traffic associated with images than from regular search results. People look for ordinary things with pictures.

However, there are no definitive guides on how images work from an SEO standpoint and what they should be. 

Google ranking

Key prerequisites in technical SEO


In 2016, the first semantic layout standard appeared. It explains how to use HTML tags so that the machine analysis algorithm correctly analyzes the page. Unfortunately, Google ignores it, despite being the developer of this standard. As a result, a new generation of layout designers has grown up, who stop paying attention to any standards.

In 2017, suddenly images were not just processed, but some of the information from them began to influence the formation of the search results. 

Classic experience with cups

A classic example with two photos of identical products:

  • Create a simple HTML page.
  • Place 2 identical products of different colors on it, for example, 2 cups.
  • Write "buy a green cup" in the title of the page.
  • Then try to search the page for "buy a green cup".
  • You will never see a red cup in the first place.

May 2020 Core Update


The latest Google update (the May 2020 update of the main algorithm) affected many technical factors. The influencing factors have changed: what used to be almost non-existent has now become critically important.

According to experts, today even 1 incorrectly placed tag can affect the page drop in the search results.

In addition, over the past 1.5 years, there have been more technical changes that have begun to affect rankings than in the entire history of Google.

Images have gained far more influence from a technical point of view than any other content on Google at all. And video, as a derivative of images, too. This is quite logical since it is much easier to generate text than images.

Is it possible to get TOP by having one image on the page?


Experts claim that it is impossible. A minimum of 12 images is required. The catch of the topic title is how we perceive images from a technical point of view, and how the search engine perceives them.

For a search engine, an image is not just an image, but a set of factors that include, among other things, different versions of the same image.

Why 12 images? It is one image that has different formats and functions. We will return to this later.

How we worked with images before:


Sample image code

The image for the search engine is the <img> tag, which contains the src attribute that contains the image, and the alt attribute.

An image <img> tag has three different roles:

  1. Most of all, the image itself affects the page, which is part of the content and complements or reveals its features. (This is an image that has a filled src attribute and a filled alt attribute.)
  2. Service images, which according to the standard should be ignored. They are embedded in the page for the purpose of implementing a specific design. The image has an empty alt.
  3. An image that doesn't have alt. The author who posted this image has no idea what's on it and doesn't know how to describe it.

This was the case until 2014.

Key factors for working with images now:


  1. The most significant factor is image quality.
  2. The context of the image.
  3. The least significant factor is the uniqueness of images.

Let's look at each of the factors in more detail.

Image quality


This is a fairly conventional thing. It relies on a metric related to image resolution. Higher-resolution images usually perform much better than lower-resolution images.

Context of the image


This term is based on the semantic layout and means the following: the image that works best is the one that has text inside its alt attribute describing the contents of that image. Google analyzes only the first 100 characters from this alt.

Useful: there is a public service from Google: Vision AI. In it, you can get information about your image: images and texts that Google recognizes in this image, and where the image was borrowed if the search engine knows the sources.

Uniqueness of images


Google's algorithms are constantly evolving. Today, it is almost impossible to find a way to modify an image in such a way that the search engine considers it unique. Even if the image is a collage of 10 different images, Google will tell you about each of them.

So, if all the factors match:

  • the alt attribute itself contains keywords that match the images in the image;
  • alt correlates with the text around this image (context);
  • the image itself is high quality;

- then you get an image that will have a huge impact on the page's ranking.

Main mistake: duplicate headers in alt. This is a signal to the search engine that this image should be ignored. In most cases, for example, in the news, this is what you should do. But if you want to get preferences from images in search results, you need to make the search engine think that the image reveals the content and is part of it.

IMPORTANT: the Alt attribute is not a place to put headers. This is an attribute for describing the image. Its essence is that if the image is deleted and this text is inserted instead, it should fit organically into the context.

How to index the maximum image quality. Issues related to Lazy Load


The resolution of the image increases its volume. What should be done? The first thing that comes to mind is the introduction of lazy load: when a stub is placed in src, and the original is in a certain data attribute and is loaded at the moment the image enters the browser display area.

But this plays against you since you are heavily dependent on jаvascript, and not all browsers index it.

<noscript> tag

Until 2014, there were only two ways to solve the problem: don't use lazy load or use a "crutch" in the form of a <noscript> tag.

Sample image code with noscript tag

This tag carries a certain semantic meaning. It says that the content inside the <noscript> tag should be shown while the browser is running without executing jаvascript logic. Therefore, this "crutch" began to work.

Creating a similar construction, you duplicate the image in the <noscript> tag, and lazy load the first image, changing the src to a stub. A situation occurs when a bot, indexing without executing JS logic, stumbles upon the <noscript> tag, interprets it, picks up an image from it.

The problem is that, for a search engine, your page with such designs is made up of low-quality stubs. There is no guarantee that the search engine will correctly interpret your markup. And this is confirmed by numerous cases.

Responsive layout. src and srcset attributes


Since 2014, the situation has changed significantly, as most browsers are beginning to use the concept of "responsive layout".

Now you can specify 2 more attributes besides the src tag: srcset and sizes.

Sample image code with src and srcset attributes

srcset is an attribute that contains an array of images with dimensions specified: by width, or by pixel density.

When the browser encounters such an image, it chooses from this array which image to show it. The choice depends on the conditions in which the site visitor is: Internet speed, screen resolution, phone, or PC.

Since then, a clear rule has appeared, which is now implemented by both Google and all search engines: the browser always shows, and the bot indexes, what is in the srcset attribute.

In the src attribute, you should put the coolest large image. And put a preview (at least 4) in the srcset attribute.

Responsive srcset and sizes images allow the bot to index the highest quality image from src in the first phase, and you can show your previews in srcset. Another plus is that you are completely independent of the jаvascript.

Image size requirements

Simple formula: just make the image better than the competition.

The minimum lower bound to start with is 1080 px in height.

Minimum image size requirements

As part of his experiment, when the resolution of images increased to 20,000 px, all test pages began to sag.

The reason is that when the bot came to index test pages, downloading these pictures, it occupied its entire gigabit channel. At this time, another bot, which must index HTML, simply could not reach the project, since the channel was busy. This led to the pages sagging in the SERP.

The high-quality images themselves do not affect page performance (page speed). The problem is that you didn't explain to the browser how to behave with this image.

The decoding attribute and its async value


The <img> tag has a long-standing decode attribute, which is still not widely used. It has three values. You should always be interested in one thing: decoding=async.

With it, you tell the browser that the image can be interpreted asynchronously, i.e. loaded in a parallel thread, and should not affect the main render thread of the page.

Important: during the loading process, the browser skips over the image area, not knowing what size to leave room for it, and renders what goes below. At the same time, in a parallel stream, it loads the image, learns about its size and fits it into the page. And when the image is loaded, the layout can jump.

New CLS feature

Until the last update, these shifts in content when uploading images to Google experts did not care. But now there is a new feature (still in beta versions) called cls, which measures the content shift during the download process.

Therefore, now we need to make sure that the people responsible for the layout correctly allocate the area for the image, accurately indicating the dimensions or proportions of the image. So that when the picture is loaded, this content does not jerk up and down.

It is not the quality of the images or their volume that affects your page speed scores. And what kind of load they create. And this load can be leveled by entering: decoding = async.


The <picture> tag and why you should forget about it


The syntax used for srcset and sizes is difficult to understand and not intuitive. And many people have no understanding of what the browser is doing.

A simpler syntax is achieved with the <picture> tag. The <picture> tag itself is a more advanced analog of the <img> tag and has intuitive syntax.

Example of syntax for the picture tag

With this tag, it is easy and painless to switch to the implementation of alternative graphic formats. It is enough just to list our images (jpeg, png, webp) inside this tag, and the browser itself will decide which one to take.

If you decide to seriously engage in technical optimization, then you should forget about the <picture> tag.

Because when you start rendering with the <picture> tag the same thing as with the <img> tag - this will give at least a threefold increase in the nodes in the DOM tree for each image. The top of your DOM tree should optimally average 1500 nodes. For many, this border has already been exceeded. And each node of the DOM tree is a memory waste and script slowdown.

Basic layout on a project with Lazy Load


The decoding=async attribute should be set by default, even if you don't understand what's going on there. Read the spec if you want to figure it out.

Example of correct code for Lazy load with decoding = async attribute

On the second line of the slide is the <img> tag, which demonstrates the most basic markup for the proper lazy load. Where in the src tag is the highest resolution picture.

In data-srcset (custom attributes that can be set in any quantity), put the original preview (for example, 100 pixels wide). And in srcset we put a preview (usually 1x1 px).

This basic layout should be in the case when your project uses Lazy load and you need organic traffic.

Which image formats to choose


In theory, there are many algorithms that shake the image well, but in terms of support, there is no alternative to the WebP format. According to statistics, about 80% of all browsers on the Internet are guaranteed to show the user .webp.

Vector graphics (SVG) and what to do with it


Google claims to index this format. But it has little or no effect on the pages. Over the past 3 years, on dozens of test domains, vector images have never had any positive impact on page ranking.

As a result, this format is assigned one role – working as a service function: creating interfaces. You can't use it as a format that should enhance the page.

However, you can safely put SVG in the srcset attribute. If you can afford vector thumbnails, then you don't need to generate the 12 images mentioned above. One vector is enough, which scales perfectly to any size.

Where do the 12 image files mentioned in the beginning come from?


The first 4 are high-quality original and three previews. They should be duplicated three times since Google has a recommendation:

Each uploaded image must be duplicated in three additional formats: 16:9, 4:3, and 1:1.

Here are two ways to inform Google that previews exist:

  1. use the ImageObject micro-markup;
  2. indicate these images side by side through the attribute of the <link> tag, in which you indicate links to these images.

Google indexes these images and uses them in the SERP.

An interesting fact: after a while, if Google sees that you have a good channel, high-quality images, high page loading speed, the following situation may arise - links to previews in the search results do not lead to Google's cache, but to your servers.

In this situation, you may be in the top position only because Google "trusts" you and takes these images from your server.

When certain Google servers find it necessary to severely limit their resources, Google tries to give out pages with images that are sure of their quality. By directing image traffic to your servers, it takes the load off its own servers.

Why you shouldn't use the <figure> tag for images

Figure is a semantic tag that affects the page. It has a very specific meaning that is outside of the area of SEO interest. It tells the search algorithm that the content that is inside the figure should be considered as something independent, not related to the current content. By doing so, you neutralize the SEO impact of this image.

If the image is related to the surrounding content and at the same time contains the semantic <figure> tag, this tag should be removed from there immediately.

What should not be in the image

It should be free of watermarks and any text on the image.

An important characteristic is related to secure search: images that can be interpreted as pornography, violence, personal abuse, or medical topics.

Make sure that images do not fall into this category of content, because you will not be found if the user's browser has the "search only for safe content" checkbox.

How to deal with image theft


For this purpose, meta tags are used inside the image itself according to the IPTC standard. If your image contains such tags (and it should), then you are still the source of the image if it is stolen for Google.

Even if the image was stolen and your tags were removed from it, Google still sees you as a source, because it gives priority to sources with meta tags. Google's documentation describes this standard.

The minimum number of parameters that must be specified:

  1. By-line, Artist, Creator - interchangeable;
  2. copyright notice (link to the license and description of the license);
  3. Source, Credit - here you can put a link to your website or image source.

If your image is stolen and they forget to remove these meta tags, then you will get a positive effect.

The only drawback is the 30-day time lag. For some reason, Google analyzes and determines the source/authorship of the image within 30 days. This is often used in gray niches.

Another option is to use the DMCA and pay people to track who is stealing your pictures and respond immediately.

Image URL


Until now, the image URL still has an impact. You can get low-frequency traffic for low-frequency queries that are present in the URL of your high-quality image.

The image name must be in English or transliterated.

The Alt attribute must contain the keywords you need while describing what is on the image and correlating with the context.

To make sure that Google understands the wording in alt correctly, use the Natural Language API: https://cloud.google.com/natural-language.

Google selects 13 images from a new page


When a new page appears and it contains high-quality images, Google selects 13 images from the new page. Why exactly 13 is unknown.

Summary


  • High-quality images have a big impact on page rankings.
  • Images that have an impact are those that:
    • have a responsive layout, i.e. the src attribute contains the highest quality image, and the srcset contains an array or at least one preview image.
    • the description in alt is correct.
    • the image fits into the context of your content.
  • The uniqueness of the image with the prescribed meta tags according to the IPTC standard.

Add comment

Add comment