Normally, when we search for an image via Google Images, the results we see are the images taken from the website where they are hosted. This way, Google shows the image in its original size and quality and allows us to download or open the URL directly from the image search without needing to visit the website to which the image belongs.
However, there are other images that, when we search for them via Google Images, appear to be of large size, but the preview appears blurry and small, and if we try to download it from Google, the image barely has any quality. If we attempt to click on this type of image, we find that it did indeed have a high resolution, but the link doesn't lead us to the image URL itself. Instead, it directs us to the web page where the image is displayed, forcing the user who wants the high-quality image to visit the original website.
This is a way to work on CTR with Google Images, and I’m going to explain step by step what it is, how to implement it, and for which projects this implementation might or might not be convenient.
Let's check the effect, since in theory, this image is 5051 pixels with a weight of 3.20MB, but it looks blurry on Google Images.
If we carefully check where the image comes from, we see that Google is not calling the original domain of the image through the src (as it usually does), but instead has its own version of the image, which only weighs 14kb and measures 211px in width:
Meanwhile, in other images, we can see that Google captures them exactly as they are from their original web source via the src, allowing the user to download the original image without needing to access the website.
These are visual examples. These images may not have this configuration at the time you are viewing the article.
This is not a casual or arbitrary matter from Google. It is an action taken by the website called inline image linking, which forces the user to visit the page where the image is linked if they wish to download the high-quality version of it. This avoids bandwidth usage if users don’t access the image and, most importantly, helps bring users closer to our conversion goals, as they must visit our website to view the image in good quality.
In the case of the page used as an example, the user will see more information about the article, more download options, and will “consume” the adverts present on the website.
In this particular page, we can check what happens if we access the sample image.
We can see that, from my website, I can link it by making an SRC call to their website (this image is not hosted on my server). Therefore, it’s not preventing hotlinking, but rather is another type of practice.
Image inserted and hosted on The Lancet's website
All this is called inline image linking. But perhaps the term might seem confusing, so I will explain it to make it clearer.
What are inline image links?
When we ensure that an image from Google Images does not display the original image but rather a "low-quality copy", it is known as an "inline image link". The term is somewhat clunky, but if we look at its origin and how it’s named in English, inline linking, it makes much more sense.
This practice means that Google embeds the image using a Data:uri.
Data URIs, URLs prefixed with the data: scheme, allow content creators to embed small files inline within documents.
This means that images and other elements can be incorporated into HTML without needing to reference external resources. It’s a way of "coding our image".
This code would have an equivalent weight, which is why Google, to avoid overloading its code and making it excessively heavy (since it can't call it externally from your domain), deploys a compressed version. Otherwise, the code could become excessively large (I make a curious reference).
Since it is "linked", as it refers to an external image but in an internal way within the code, the term would be: "inline linking". This type of terminology is common when dealing with code. For example: "inline CSS" or "inline Javascript", which refers to CSS or Javascript directly embedded in the HTML code.
The questions we might ask are:
What does Google think of this practice?
How can you force Google into inline linking?
Is it really useful?
So, let’s go step by step, answering each of these questions.
How does this practice affect Google?
We can see what Google says about this practice in its own documentation:
Disable embedded links from Google Images
If you want to prevent your images from appearing in full size on the Google Images search results page, disable the embedded links in these results.
To disable embedded links, follow these steps:
When one of your images is requested, examine the HTTP referer header of the request.
If the request is coming from a Google domain, send an HTTP 200 or 204 response, but no content.
Google will continue to crawl your page and detect the image in question, but a thumbnail generated during crawling will appear in search results. You can disable embedded links at any time; when doing so, you do not need to reprocess the images on your site. Disabling embedded links is not considered image cloaking, so no manual action will be taken.
You can also prevent your images from appearing in search results.
This practice, as we can see, does not cause a cloaking issue.
It’s important to highlight a point that may lead to confusion. In the documentation, it explains that the 204 response code (a code that indicates the page is valid but returns no content) should be offered to Google via the HTTP referer header (I’ll explain how in the next step) when the request comes from a Google domain. This 204 response code should never be used for its User-Agent (that is, the search engine bot). If you block images for a User-Agent, the crawler or user with a blocked User-Agent will not be able to view the images, meaning they cannot crawl or index them. With inline image links, you prevent Google from embedding those images from its domain, but they can still index and rank them on Google Images.
This means that to perform this practice correctly, you should not block the User-Agent but instead prevent the image from being embedded from Google's domain (in the next step, we’ll see how).
Configuring inline image links with htaccess
I will explain how to configure this using an Apache server. If anyone uses Nginx and would like to know how to configure it, they can request it by email.
Explanation of the codes to use
We must consider both the position of our htaccess file (the higher the better) and where our htaccess file is hosted. We might be using software that places an htaccess file exactly where the directory of our images is located.
Whenever possible, these codes should go inside an <IfModule mod_rewrite.c> and the Rewrite engine should be activated with RewriteEngine On.
Rewritecond and RewriteRule
With Rewritecond, we explain the condition. For example, that the request comes from a particular domain. And with RewriteRule, we define the rule to apply to those selected conditions.
In this case, I have used this example of code in a simulated htaccess located where the image directory of the WordPress back-end is used, in wp-content/uploads. However, you can place it in the directories you consider. And from RewriteRule or with RewriteCond, you can create a conditional so that it only happens in the directories you specify and only with images. For instance, with: RewriteRule ^(.*\.(gif|jpe?g|png|webp))$ - [R=204,NC,L] Instead of using the Rewrite I’ve shown in the examples, there are many cases and alternatives to select a specific directory or file extensions that should return a 204. In any case, the examples I provide below are for directories that only contain image files.
ErrorDocument 204
A particular document for the 204 response code will be generated, which is empty, to ensure no content is returned, as indicated in Google's documentation.
Preventing Hotlinking
We can prevent any domain that isn't ours from embedding our images using our URL. This practice is often done unknowingly or to save bandwidth. In fact, Google Images does this "hotlinking" by default. However, there are more fun ways to prevent it. With this practice, we prevent Hotlinking and make Google Images perform Inline Linking.
Clean practice of configuring inline image links [Recommended]
This way, we specifically prevent any Google subdomain or domain from embedding our images on their site. Meanwhile, other domains can embed them normally. And if we want to continue preventing hotlinking from other URLs, we can create another specific rule, such as redirecting to an image URL with a watermark of the relevant project.
To cleanly prevent Google hotlinking, the code would be as follows: <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_REFERER} ^https://(www\.)?google\. [NC] RewriteCond %{REQUEST_FILENAME} \.(jpg|jpeg|png|gif|webp)$ [NC] RewriteRule ^ - [R=204,L] </IfModule>
Blocking via User-Agent [DO NOT DO]
If we block via User-Agent, we prevent the image from being crawled, so this is not a recommended practice.
In this way, we block crawling entirely, meaning we will not be able to rank in Google Images properly. <IfModule mod_rewrite.c> # RewriteEngine On # RewriteCond %{HTTP_USER_AGENT} ^.*(Googlebot.*).*$ [NC] # RewriteRule ^.*$ - [R=204,NC,L] # ErrorDocument 204 '<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"></html>' </IfModule>
Is it useful to prevent embedded links from Google Images?
From both a technical and a marketing perspective, it makes sense. We avoid consuming bandwidth from our hosting whenever someone searches for images from our site and cannot download them in high quality from Google Images without visiting our website.
Depending on the user, they might initially think the image is of poor quality. However, on the other hand, we force the user to visit our website if they are interested in our content. In most cases, it is not useful for many users to download images from your site without even visiting it.
Why does CTR improve in Google Images?
With this practice, we will not directly make a user click on our image instead of the competitor’s. This is achieved with the image’s own appeal and characteristics, and with the title of the URL where it is linked, among other factors.
However, if the user finds our image relevant to their search, and if they want to see it in good quality, they will have no choice but to visit our website. This will make it easier for them to enter the funnel we have set up.
Video explanation
In a live session about SEO Facts, I addressed this topic, where you can see additional information:
Warning: The video is in Spanish Language
The effect, although I got confused during the live session. It is not done via User-Agent, but via domain.
