Page performance is a key enabler of search engine optimization (SEO). In a media-rich web, the relation between image and performance is tighter than ever. But to achieve the best rankings for your images, it is necessary to understand the fundamentals of Google indexing of images.
Optimizing for user experience
Even when optimizing search engine results, we need to keep in mind that websites are for users, not search engines. The first priority is to create a good image experience for users. This will prove virtuous, as criteria affecting user experience are highly valued by the ranking algorithm.
As such, your images should:
- have an
altattribute that describes the image
- be positioned close to the related text, eg. above a caption, or below a product name
- have a stable, descriptive URL, eg.
Handling URL redirects
One thing that is often overlooked is that images, like pages, are represented by a URL. This means the base principle of SEO ranking applies to images too. As such, image URL should not change unless necessary. And in case of a change, we should implement proper 301 redirection.
Unfortunately, Google currently ignores the
rel="canonical"header on images, as explained by John Mu, Search Advocate at Google, in this Google Office Hours.
Ranking for Google Images search
In 2017, more than 25% of traffic acquisition in the US was made through Google Images, making Google Images optimization an important part of SEO. But the Google Images crawler will only index semantic images, not CSS images.
In other words, we should use a semantic
<img> tag for images to appear in Images search results. Images implemented with the
background-image CSS property will be ignored.
It is important to note that Google Images will always rank images in association with the page they belong to. As such, implementing SEO best practices for the entire page is just as important as optimizing ranking for the image.
Serving specific image variants to crawlers
Google associates a crawling quota to each website. Say you’re using TwicPics to generate on-demand optimized variants for your image, you don’t want Google to waste your quota indexing multiple variants of the same image.
To account for that, it is recommended to create bot-specific variants of your images made for indexation. The example below shows how to use TwicPics to generate a variant specifically for crawlers:
<img data-twic-src="image:smelly-cat.jpg" data-twic-bot="cover=1200x960" />
Studies show that images with 10/8 ratio are more likely to be displayed as a featured snippet.
Future-proofing with custom domains
Contrary to a common belief, there is no SEO bonus for hosting images on the same domain. However, hosting images on your subdomain means that you are in control of the URL.
Consequently, if you were to switch CDNs (or change storage server if you’re not using a CDN), you could do so without affecting your URLs—and thus your SEO. Plus, you retain control to implement the 301 redirects needed in case of such migration.
Consider the following image example that uses the TwicPics script:
<!-- We use TwicPics script to optimize image on demand --> <img data-twic-src="image:cat.jpg" /> <noscript> <img src="https://demo.twic.pics/cat.jpg?resize=800/output=webp" /> <!-- We can't use the browser context, so we generate an image using TwicPics API. We choose an arbitrary median variant of the image for indexing. --> </noscript>
To sum things up, search engine optimization for images requires:
- Creating a user-friendly image experience
- Handling 301 redirects for images
- Using semantic image tags
- Generating specific image variants for crawlers
- Use custom domains for serving images
- Include noscript tags for JS-dependent images
Finally, it is primordial to consider the ranking of images in the context of their page too. Improving the overall website performance is equally key to achieving good SEO. Google’s Core Web Vitals encompass all aspects that translate into good user experience. Implementing best practices that address the Core Web Vitals is thus necessary to score good results in the ranking.
Using TwicPics, you can benefit from improved UX, performance, and bandwidth savings out-of-the-box. All best practices come baked-in with our framework-specific integrations for React, Vue, Svelte, Angular, and Web Components. Deliver world class image experience today with TwicPics components.