6 Tips to Optimize Images for SEO

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 alt attribute 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. website.com/images/person-with-phone.jpg and not website.com/images/photo-1.jpg?session=067168

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.

Displaying images when JavaScript is disabled

When Google first crawls a website, it only grabs the HTML. If your images rely on JavaScript to be rendered (which is the case if you’re using context-aware optimization with TwicPics), you can choose to include <noscript> tags in place of images that load with JavaScript.

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?twic=v1/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>

That being said, implementing a solid JavaScript-free strategy for your website can be challenging. Plus, it might not be worth it: Martin Splitt, Developer Advocate at Google, revealed that it was likely for Google to drop support for <noscript> tags for images in the future. Altogether, this reinforces JavaScript server-side rendering as the better long-term solution.

Conclusion

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.

About TwicPics

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.