Whether your run a blog or are in charge of the SEO of a website with thousands of pages, improving image SEO should be on your radar in order to improve rankings.

In a previous post, I provided a summary of all the tactics and techniques I could get my hands on for improving image and infographic SEO in a beginner-friendly manner.

Now, I want to focus on more technically-heavy tips and tricks for making the most out of the images on your site. These are the 5 best practices for advanced image SEO.

1. Use semantic markup for images

Semantic markup is a way of writing and structuring your HTML (Hypertext Markup Language) so that it reinforces the semantics, or meaning, of the content rather than its appearance.

Google parses the HTML of your pages to index images but does not index CSS images. Hence why it is best to use the following markup when uploading images to help with their discovery.

• Recommended: <img src="puppy.jpg" alt="A golden retriever puppy" />
• Not great: <div style="background-image:url(puppy.jpg)">A golden retriever puppy</div>

2. Use responsive images

In 2021, 35% of the internet is powered by WordPress. Thankfully, after version 4.4., all images uploaded are automatically made responsive. But how about any other sites?

Images should have the srcset attribute, which makes it possible to serve a different image per screen width. This is especially useful for mobile devices, which are currently used by the majority of web surfers (62%, to be exact) to access the internet.

The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes. Essentially, this piece of HTML code tells the browser to load different versions of an image for different screen resolutions.

Example: <img srcset>

<img srcset="example-320w.jpg 320w,
       example-480w.jpg 480w,
       example-800w.jpg 800w"
   sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"
   src="example-800w.jpg" alt="responsive web!">

3. Add Structured Data

Structured data in SEO is a standardized format to mark up the information about the web page. It helps search engines better understand what the web page is about.

If you include structured data, Google Images can display your images as rich results, including a prominent badge. This gives users relevant information about your page and can drive better-targeted traffic to your site.

Google Images supports structured data for the following types:

• Product
• Video
• Recipe

Follow the general structured data guidelines as well as any guidelines specific to your structured data type. Failing to do so could result in your structured data being ineligible for rich results display in Google Images.

In each of these structured data types, the image attribute is a required field to be eligible for badge and rich results in Google Images.

4. Implement lazy loading

Lazy loading is a web-design technique that intentionally postpones the loading of offscreen images until the moment a user scrolls down the page. Meanwhile, placeholders are used.

Without lazy loading enabled, all graphic elements on a page are loaded at once. This could significantly disrupt the user experience, affecting the site-s bounce rate. It can also affect overall page load speed. Both of these are ranking factors Google uses, so any negative observations could result in lower rankings, less impressions, clicks and conversions. All things best avoided.

There are two ways of doing so: using a native lazy tag in the browser, or through JS site-wide implementations.

In Google Chrome, starting from August 2019, you can use the loading attribute to lazy-load images without the need to code or employ a JavaScript library.

The attribute has three values:

• "eager": fetch an image right on page load
• "lazy": fetch an image when it’s in the viewport or close to it
• "auto": let the browser decide how to load (used if the attribute is omitted)

<img src="cat.jpg" loading="lazy" alt=".."/>

The key benefit of native lazy loading in a browser is the ease of implementation. All you need is some basic HTML knowledge to add loading="lazy" to img elements. This tag does not always work outside of Chrome through so an audit in Google Analytics on the type of browsers your site visitors are using is paramount to the successful implementation of this solution.

Alternalitively, more technical solutions include implementing JS libraries that Google recommends for the purpose of lazy loading, namely:

• lazysizes
• lozad.js
• blazy
• yall.js
• react-lazyload

This is also not a perfect solution as open source solutions such as these are rarely tailored to specific site needs. Lastly, you can always implement lazy lading from scratch, for which I recommend following the Uploadcare Blog’s tutorial on the topic.

If you want to read in-depth about how to implement lazy loading on images, videos and other media aspects, I suggest checking out the following resource library by the Web.dev team:

• On using lazy-loading to improve loading speed
• How to apply lazy-loading to images
• How to apply lazy-loading to video
• Browser-level image lazy-loading for the web
• On using lazy sizes to lazy-load images

5. Use XML image sitemaps

XML sitemaps are a way of organizing a website, identifying the URLs and the data under each section. Sitemaps help crawlers to better navigate a site, and quicker. The best thing is, you can use Google image extensions for sitemaps to give Google more information about the images available on your pages.

Google is clear about this:

‘Image sitemap information helps Google discover images that we might not otherwise find (such as images your site reaches with JavaScript code), and allows you to indicate images on your site that you want Google to crawl and index.’

Adding images to your XML sitemaps helps Google index your images, so be sure to do so for better page SEO.

The best implementation recommendations I can give align with that of Google themselves. To elaborate, be sure to follow best practices for publishing images and the Webmaster Guidelines, as well as all tips given in the article thus far.

If you have already read the beginner’s image SEO guide,you would know the importance of adding image metadata, including contact information and licensing information.

Lastly, review Google’s tutorials and example image sitemap for important tags and captions its crawlers will be looking out for.

Image SEO is definitely worth paying attention to. I would argue it will become even more important in the years to come. Having one eye on performance metrics of images on your site is, to put it lightly, recommended. Hopefully, these guides will help do just that, and more.

Takeaway

To summarize, here are best practice tips for advanced Image SEO:

1. Use semantic markup for images to reinforce image semantics and help image discovery.
2. Use responsive images to improve the UX for mobile device visitors.
3. Add structured data to help search engines understand what the page is about and appear in rich results in Google Images.
4. Implement lazy loading to improve page load speed and UX.
5. Use XML image sitemaps to help Google discover your images.