How to Outrank Your Competition With a Smart Image SEO Strategy

While everyone is mostly focused on regular snippets in search engine result pages, you can be developing a smart image SEO strategy. If you’re having a hard time outranking your competitors, smart image SEO is a clever way to outflank them.

Search engines know what types of content to return for each query, and queries often produce image results in the top five. If you’re regular page isn’t landing in the top 20, an image can help.

What Influences Your Images’ Rankings?

Search engines need to be able to easily discover, crawl and index your images. But in the end, popularity, providing context and being fast influence your images’ rankings the most.

1. Discoverability

Make sure your images can be discovered easily. Including images on pages isn’t always enough, so I recommend creating image XML sitemaps that list all of your images. You can either go for XML sitemaps that list just your images, or include the images in your regular XML sitemap. Both are fine for search engines.

2. Crawlability

Once search engines learn about the existence of your images, they need to be able to access them as well. In the context of SEO, we call this crawlability.

Make sure your robots.txt file doesn’t prevent search engines from accessing your images.

Related Article: How Voice Search Affects SEO — And What You Can Do

3. Indexability

Your images can be discovered and accessed by search engines — but can they be indexed too? When a page has the noindex directive set, none of the page’s content is indexed — and that includes its images.

4. The page’s popularity

The popularity of the page that images are on strongly influences image ranking. Popularity is largely determined by the number of links a page has from other websites.

Try a few searches for your favorite actors or musicians. You’ll see resources like IMDB, Wikipedia, gossip sites and their own personal websites coming up in the top five every time, because people gladly link to these.

5. The page’s relevance to the images

Place images on pages that are highly relevant to those images. Say you have amazing photos of a ’67 Ford Mustang on a page about your kittens. The chances that you’re going to rank for relevant queries surrounding that car are not high.

But include that image in your blog article detailing how you spent three years restoring your vintage Ford Mustang, and your chances improve exponentially.

Related Article: Why SEO Options So Often Fall Short

6. Image captions

Always describe image content using captions. These too add to the relevance of images, as they help search engines better understand what the images are about. Put caption text right underneath the image it describes.

Please note that captions aren’t just useful for search engines; they’re useful for visitors as well, because they provide more context.

7. Image file name, alt and title attributes

An image’s file name should be descriptive. So DSC00004.jpg is a poor file name for your web photo of a beautiful Malibu sunrise. A much better file name would be sunrise-malibu-beach-california.jpg.

The image alt attribute is meant to be an alternative text for the image — it should describe the image. The image title attribute adds additional context — when it comes to image SEO it’s all about providing context, so use it.

8. Mark up images using Schema

Using Schema to mark up your images is another great way to give search engines context. It provides a highly efficient and clear way to communicate about your images.

Marking up images using Schema is useful for ecommerce sites on product category pages and product pages. It’s also useful for blogs and news articles.

Related Article: How Content Marketers Rank SEO

9. Optimize for speed

Making sure your images load quickly is important. To this end, there’s a couple of things you need to keep in mind:

• Image compression: Compressing images lets you significantly decrease their file sizes while retaining enough quality for an image to be useful. Sometimes this can even bring a 90% decrease in file size. Two examples of tools you can use are TinyPNG and Imagify. TinyPNG also integrates with WordPress, Magento and other systems, so that’s a big plus in my book.
• Serving the right format: A variety of image formats are available. Using the right format for the right type of image is essential when it comes to optimizing for speed. See below what format to use for what purpose:
• PNG: Logos (as it supports a transparent background) and images that should remain sharp, such as screenshots.
• JPEG/JPG: Photos.
• GIF: Animations.
• SVG: Use these so images can scale without losing quality (vector images) for e.g. maps, icons and logos.
• WebP: WebP is developed by Google and is an alternative to JPG and PNG. The biggest benefit of the WebP format is that it has great compression support. I highly recommend experimenting with it, as it has a lot of support and potential.
• Serving the right size: if someone’s browsing on a mobile phone, it doesn’t make sense to serve images with a 2,000 px width. Therefore, it pays to serve images at different sizes depending to account for different devices being used.

Example: <img src=”http://www.cmswire.com/images/sunrise-california.jpeg” srcset=”/images/sunrise-california-400.jpg 375w, /images/sunrise-california-800.jpg 768w” alt=”Beautiful sunrise in Malibu, California” title=”Beautiful sunrise in Malibu, California” />

In this example, we’ll serve the image with 400px width to screens with a 375px width viewport and below, the version with 800px width to screens with a viewport width from 376 to 768px, and the default image to every device with a viewport width higher than 768px.

Doing this manually is very inefficient, but thankfully there are tools that will do this for you automatically so you don’t have to constantly think about it.

Some other tools worth looking into which help optimize images (and save time) are: Cloudinary’s Website Speed Test, Google’s Lighthouse and GTmetrix. 

Bonus: Use Lazy Loading for an Improved User Experience

Lazy loading is a technique that lets you load images just before they’re going to be shown to your visitors.

For example, if you have a high resolution image at the bottom of a page, it doesn’t make sense to load it right when the visitor lands on that page. Loading it right away costs precious load time, and it’s potentially wasted time and data if the visitor doesn’t even scroll that far down.

While this doesn’t help your images rank higher, it is highly related to image optimization and providing a good user experience to your visitors.

Don’t Let Image SEO Be an Afterthought

Make image SEO a priority, as it can help you overtake your competition.

Good luck!