The Complete Guide to SEO for Images

The Complete Guide to SEO for Images

Image optimization SEO isn’t what it used to be. Google is no longer like a toddler you can entertain with a picture book with basic words. Oh no, we’re dealing with a sophisticated teenager, who not only wants a deeper meaning but also to experience the thrill of speed. And your photos better be, like, cool Gucci or else, bye Felicia.

Oh boy. That’s why in this guide we’re going to show you how to give your site an image SEO makeover.

In this post, I’m going to not only teach you about alt text for images SEO but also how to serve up mobile-first optimized images (now that page speed is a ranking factor). We’ll also cover XML sitemaps, structured data, semantics, and all the latest tricks so your images will pull in those eyeballs and drive traffic.

Image SEO Checklist

Here’s everything we’re going to cover. Click on the link to be taken to that specific section.

How to SEO Images in 2022
Image SEO is Back
Image Recognition Algorithms
Semantic SEO
Page Speed Matters

Composing Your Image
Use original images
Remove text from images
Remove useless images
Convert galleries to single images

Preparing an Image
Use a 4:3 or 16:9 ratio
Scale your images to the exact dimensions you need
Use high-definition Retina images
Use next-gen formats
Compress your images
Use descriptive titles

Serving the Image
Enable Browser Caching
Use a CDN
Enable Lazy loading
Double check that you’re using Responsive Images

Identifying the Image
Fill Out the Alt Text
Use a caption
Use your keywords in the text surrounding your image
Use your keywords in the page URL, meta description and throughout your page

Extra Credit
Create an image sitemap
Use Social Media tags
Use Structured Data

How to SEO Images in 2022

SEO image best practices are in constant flux, changing with each latest Google update. Before we jump into the first checklist item, let me bring your attention to what is currently going on in SEO right now.

Image SEO is Back Baby!

For a while, optimizing images for search was a waste of time. In 2013, Google added a view image button. When someone searched for an image and clicked on the view image button, they would be taken directly to the image, not to the page the image was on. And just like that, sites on average lost about 63% of image search traffic.

In 2016, Getty Images launched an anti-competition complaint to the European Commission against Google and then in 2018, they won. Google removed the view image button and image search traffic started flowing to the sites that hosted the images again. Image SEO once again became a high priority in the last few months.

Image Recognition Algorithms are Becoming Scary Good at Identifying Images

Check out this image of Dino in the snow. Isn’t he cute in his little boots?

Photo of dog in snow, keyword guesses
Apparently, a Canidae is a member of the canid family that includes dogs, wolves, foxes, dingoes, coyotes etc., who knew?

If I feed this image into Google’s Cloud Vision API, it recognizes what’s in the picture with startling accuracy, even without any clues in the file name. It failed to identify the boots though, so it looks like there is still a need for us humans. Ha!

If an algorithm can take care of the basics, then we need to turn our attention to more important things, which brings us to…

Semantic SEO

Image recognition algorithms aren’t the only ones that have gotten an upgrade. The algorithms that are consuming your pages are no longer hunting for keywords, looking for exact matches, to figure out what your page is about. Now, they’re analyzing content in its entirety in order to better understand the relationships between keywords and other important words that are related to the topic.

This allows the spiders crawling your pages to be able to understand the deeper meaning of your content. If someone searches for your topic, using a synonym or spelling variation of your targeted keyword, the search engine will be able to intuit their intention and still serve them your web page. This is referred to as semantic search.

The relationships between keywords and how they relate to a topic have taken on increased importance. Keywords still matter, but we need to take a big-picture approach.

To get an idea of just how “big” this big-picture approach needs to be, do a keyword search on your main topic using a tool like KeywordTool.io, a free keyword tool that suggests every phrase Google would suggest as if you typed in the next letter of the alphabet 26 times…

KeywordTool.io search results screen.
KeywordTool.io finds semantically related key phrases on your topic.

Many semantically related keyword phrases will show up for your topic, giving you a bigger picture for you to work with in your keyword SEO and content strategy.

Page Speed Really Matters

In July 2018, Google announced that page speed is a ranking factor for mobile searches. Previously, page speed was only a ranking factor for desktop searches.

This means that in order for your images to do well in search, you not only have to add the right identifying information such as alt text for image SEO, but you need to optimize the image as well.

Oversized images that aren’t optimized add more unnecessary weight to your webpages. Although you should strive to optimize your whole page, images are an ideal place to start.

Keep this in mind as we discuss how to optimize your images for search. While other guides may just give you the on-page stuff that happens after you upload your image, we’re going to cover that, plus how to get an advantage in search by optimizing your images to perfection.

As they say, you don’t take a picture, you make it. Coming up with images for your content is no different as some images are more likely to appear in search.

Use Original Images

You want to avoid using stock images. PLEASE! Especially the cheesy ones. Original images perform much better in search than stock images, so get out your smartphone or start taking some screenshots. Google will reward your originality.

Here’s what they have to say about it: “Make sure that your visual content is relevant to the topic of the page. We suggest that you display images only where they add original value to the page. We particularly discourage pages where neither the images or the text are original content.”

Now, I get that we live in a fast-paced, crazy busy world and that it’s not always practical or possible to use 100% original images in your content. If you are going to use non-original images, however, just make sure that you have all the necessary rights to use those images.

If you don’t know where to start, check out this list of the best places to find royalty free stock images for your websiteTip: some of the sites on this list allow you to modify those images however you like, so with a little bit of imagination and Photoshop wizardry, you could at least transform those into semi-original images ;)

Remove Useless Images

Don’t create lots of images just to fill a space. Same with creating images as an afterthought. You want to use images as a way to enhance your content and communicate additional information. As I mentioned earlier, images add a lot of weight to webpages, so if the image isn’t enhancing your content, leave. it. out.

According to Google, sessions that converted users had 38% fewer images than sessions that didn’t convert.

More images are not better. In fact, if your content has a few striking images, they’re more likely to be featured in search than pages with an abundance of images. Each additional image steals the spotlight from the rest until none of them retain any star power. Galleries aren’t featured in search for the same reason, so you want to avoid them.

Do Not Include Text in Your Images

You want to avoid including text in your images. If you have a decorative heading, you should create it using HTML and CSS. Not only does this improve accessibility and readability, but it also allows you to make the text mobile responsive. You can also increase the compression levels for an image when you’re not trying to preserve the sharp contrast necessary to render text.

Preparing the Best Image File for SEO

Once you’ve decided what your image will be, there are some steps you need to take to prepare the image file. An image that is appropriately sized, compressed, in a next-gen format, with a descriptive title will perform much better in search.

We’ve also put together the ultimate guide to image optimization, which expands on the points covered below.

Adjusting the Dimensions

You’ll notice when you’re perusing Google images, exceptionally large and exceptionally wide (such as panorama images) tend not to appear in search. Mostly, you’ll find images that adhere to the 4:3 or 16:9 ratios.

Scaling Your Images

Scaling your images means to resize them to the dimensions that you’ll be using on your site. When your images are oversized and you resize them to appear correctly using HTML and/or CSS, then that creates additional work for the browser and slows down your page speed, which we don’t want.

You can use the browser tools to identify what size the image needs to be.

Then open the image in your editor of choice and resize it to the right dimensions for what you will be using it for.

If you have a lot of oversized images, a tool such as the Smush Pro CDN can resize your images for you. You can also use Photoshop to bulk process images, although this only works for JPEG images.

Retina Images

Retina devices have twice as many pixels as ordinary screens. I couldn’t find any evidence that Google rewards Retina images with higher page rank, but we can assume that as high definition screens gain market share, this will become increasingly likely, especially since Google rewards sites that provide a great user experience.

Retina Image of Tree
Look at how crisp all the branches are on this Retina image, high-quality stuff.

Creating a Retina image for the web is easy. All you need to do is replace the images on your site with versions that are twice as wide and twice as tall. Serving the right image to compatible devices is a little more difficult, but you can use a plugin like WP Retina 2x to make this easy.

We’ve put together a whole post on converting your images to Retina without slowing down WordPress.

Use Next-Gen Formats

If you’ve used Google’s PageSpeed Insights recently, you may have noticed the opportunity message “Serve images in next-gen formats”.

Screenshot of Google suggesting next gen images
Real subtle.

Google’s intention with this message is to not only help create a faster web, but they also want you to consider switching all your images to their open-source WebP file format. In Google’s own words, you should “aim to start with WebP.” Next generation image formats, such as JPEG 2000 and WebP have superior image compression abilities. So not only will your page be faster, but you’ll also get on Google’s good side by using their preferred image format.

WebP images also have the capabilities of PNGs, JPEGs and GIFs all rolled into one format, making across-the-board conversion easy and a total no-brainer.

Smush Pro can help you serve up WebP images, by the way. All you need to do is activate the CDN, flip the convert images to WebP option and you’re good to go. Try Smush Pro free.

Image Compression

Image compression is one of the most overlooked ways to create a smaller image file and done right, your visitors will hardly notice a difference.

Take a look at these two images.

Photo of mountain scenery with no compression
25% Compression, 85 KB.
Photo of mountain scenery with no compression
No Compression, 220KB.

One has been compressed slightly while the other hasn’t been compressed at all. The compressed image is 2.5x smaller. Um, yes, please.

You can get the benefits of compression by using a tool such as Adobe Photoshop or other image editors to compress the image before upload. Or you can use an image optimization plugin like you guessed it, Smush or Smush Pro. Both will get the job done and compress your images using our lightning fast servers.

How to Name Images for SEO: Image Titles

The last important thing you can do when working on your image is save it with a descriptive title (as opposed to the default one generated by your camera).

You do not want to keyword stuff your image titles, just give an apt description. This will help with your semantic SEO.

My dog in the snow, for instance, would be dog-in-snowy-forest.jpg. This is better than the generic dog.jpg.

How to Serve SEO friendly Images

OK, so you’ve gone through a lot of trouble to produce a drop dead gorgeous image. In this section, we’re going to go over what you need to do to serve it.

How your image arrives matters. No one wants to see Beyonce getting out of no broken down Pinto. Your images deserve better.

When it comes to serving your images and webpages, you want to aim for speed.

There are three things you need to serve up your images FAST.

  1. Enable Browser Caching – Static cached webpages load much faster than dynamically generated webpages. Browser caching will allow you to leverage the browser to store site files so subsequent pages can load more quickly.
  2. A CDN – CDNs are everywhere now. If your host doesn’t offer a CDN with your hosting plan then are they even your host? No. That’s not a real relationship and I want the best for you. CDNs have locations all over the globe so the data transfer required to load your images happens much more quickly.
  3. Lazy Loading – Lazy loading doesn’t load images more slowly. It prioritizes the content that your visitor is viewing and waits to load other elements below the fold until they’re needed. It improves perceived page speed, especially on mobile connections. We just added lazy loading to Smush Pro by the way.

Responsive Images

Even the best arrival isn’t going to turn a sour oversized image into Lemonade ;)

Another aspect of serving your images properly is making sure that you’re using responsive images. This way you’re not trying to serve a huge image on a tiny mobile device.

Responsive images utilize the srcset attribute to give the browser a list of multiple images at various sizes to choose from. Instead of downloading and serving the largest image file, it loads the appropriate size file.

Responsive images were added to WordPress core in version 4.4, so chances are you’re covered, but I still recommend you check the images in theme files. Sometimes only the images within your page content that are wrapped in <img> tags will be responsive, background images and icons that are in your CSS files might not be. You’ll have to use CSS media queries to serve a different size image.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

I know you’re not trying to get those images ranked in search, but they will slow down your page speed big time on a mobile device. At the very least, verify that large background images are responsive because that will add the most weight.

How to Identify Your Images for SEO

Ok, now we’ve reached the part where you explicitly tell Google what your images depict.

Image Title

The image title in WordPress is different from the file name title. The image title you add when creating an image is more important than the image title field in the WordPress media library. The former contributes to SEO while the latter can be left out entirely.

W3 warns against using the title attribute in images, saying:

Warning: Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification.

Let me show you also why an image filename is more important for SEO than the image title you create in the WordPress media library:

Screenshot of WordPress Media library highlighting image filename, title field, and image URL.
Image filename matters more for SEO than name in image title field.

As the above screenshot shows, when you import an image into the WordPress media library, changing the name of the image in the Title field doesn’t change the filename in the image URL:

https://yourdomain.com/wp-content/uploads/2019/08/my-filename-matters-here.jpg

Images are indexed in search engines based on their filename, whereas the name you give your image in the WordPress media library mostly affects how it displays in the attachment page …

Example of WordPress image attachment page.
This is where being attached to your image gets you … a full display in the image attachment page!

Alt Text for Images SEO

When you upload an image to WordPress, one of the most important details you can fill out is the Alt attribute for your images. Not only does it improve accessibility for visitors who are visiting your site using a screen reader, but it is also a ranking factor for SEO.

In fact, we’ve written a comprehensive guide on how to write image alt tags in WordPress to address both accessibility and SEO.

How do you write SEO-friendly alt text for your images?

To write an effective alt attribute for your image, you’ll want to write a succinct description of your image. You want to describe the image in a way that if someone couldn’t see the image would understand what is in the image and therefore understand what you’re trying to communicate by including it.

Here are some image alt text examples for the photo of the wildflower meadow below:

alt text="yellow and purple wildflower meadow."

alt text="wildflower meadow in the mountains."

Both these image alt text examples effectively describe the photo with some detail.

Screenshot where to add alt text in image block
You can enter alt text in the Gutenberg image block here.

You can include your keywords if they help you describe what is in the image.

So if your post is on image resolution in WordPress and you include some nature images and WordPress screenshots, as I did in this post, it would be appropriate to include a keyword such as “Retina images in WordPress” for the screenshots, but probably not for the nature photography.

Screenshot of where to add captions and alt text in the media library
This is where you can add a caption and alt text in the media library.

There’s a whole lot more to writing alternative text, however. What you type into the Alt Text field also depends of the type of image being used in your content, which is why we recommend learning how to write perfect image alt tags in WordPress.

Image Caption and Surrounding Text

You’ll also see in the screenshot above that there is a space in the media library for you to include a caption. Captions and the other text surrounding your image give your image context.

Not all images need a caption, but captions function similarly to call outs in the body text. Because they’re set apart from the rest of your text and highlighted, they’re four times as likely to be read.

All the more reason to put your important points and keywords into your captions to drive your point and create SEO-friendly images in the process. Here’s Google again:

Google extracts information about the subject matter of the image from the content of the page, including captions and image titles. Wherever possible, make sure images are placed near relevant text and on pages that are relevant to the image subject matter.

But captions aren’t the only related text that is important. You’ll want to include your keywords and related phrases in close proximity to your star images that you want Google to pay the most attention to.

What about Description?

The description is used for the image attachment page. When you insert an image into a post or page (like the one below that says “Hello World”), you select where you want the image to link to. Attachment page is one of the options. The title and description you set in the media library is what will show on the page. This isn’t the page that says “Hello World” but an additional page that WordPress created just with this image.

Screenshot of image Gutenberg block select where image should link to
Description populates the text under the image on the attachment page.

This is not important for SEO unless your goal is to make your attachment pages rank. You can see where my image title and description end up in my sample theme attachment page below. ( < This sentence is actually an excellent example of how the text near an image, can help Google understand what the image is about.)

screenshot of WordPress attachment page with image title, image and image description
The look of your attachment page depends on your theme.

Meta Description

The meta description on your page does affect how your image will appear in search.

According to the Google image guide, you should “check your page title and description” to help Google “generate a title and snippet to best explain each result and how it relates to the user query.”

Page Elements

Google also takes the whole page into account. What is the page title? What is the URL? Even though these are not related to your image directly, Google uses them as a ranking factor.

Include your keywords and related phrases in your page title, page URL and image URL if possible. Google uses the URL path as well as the file name to help it understand your images.

If you’re using a CDN to serve your images, you’ll want to avoid changing CDNs or activating a CDN and deactivating. This will change the image URLs and can negatively impact your image ranking.

Going the Extra Mile: Image Sitemaps, Social Media Tags and Structured Data

Once you’ve taken care of all the above, you’ve gone much farther than most people when it comes to optimizing your images for SEO. If you’re trying to rank for a competitive keyword and need to go the extra mile, then read on.

XML Image Sitemap

In order to make sure that Google indexes all your images, you need to create an image sitemap. Sitemaps are especially important if you update your content frequently, have an ecommerce site or if you have a new site and want Google to index your images as quickly as possible.

If you load image galleries via Javascript code, then you need to create an image sitemap or Google won’t be able to “see” those images.

You can either add your images to an existing sitemap or create a separate sitemap just for images. Here are the image tags you can use in your XML sitemap.

If you want an easy solution, you can use SmartCrawl to generate a sitemap. Once you install the plugin, visit the dashboard where you’ll be able to activate the sitemap. Just push the blue Activate button.

SmartCrawl activate sitemap module.
Creating a sitemap won’t only help your images, it will help the rest of your content too!

Then in the Advanced tab, in the include images section, flip the switch to include image items with the sitemap.

Screenshot SmartCrawl advanced settings, activate include images.
SmartCrawl Pro doing her part to help your site.

Social Media Tags

I know, this is an SEO for images post, but social media tags can help you create SEO-friendly images indirectly.

First, what are social media tags? Social media tags are a way for you to label your content, so when someone shares it on a social network, they share what you want them to share. For example, have you ever shared a post on Facebook and the image is an ad that is on the page, not the featured image? Social media tags can help you with that.

Facebook, Twitter, LinkedIn, and Pinterest all support Open Graph, which is Facebook’s social media tags language. Twitter has its own meta tags but will recognize Open Graph data if Twitter social media tags aren’t available.

The important Open Graph tag for your images is og:image.

Og:image allows you to specify what image you want Facebook and other social networks to display when someone shares your post. The ideal image size for Facebook is 1200 pixels x 627 pixels or a ration of 1.91/1 ratio. This will ensure that your image covers the full width of the feed. If your image is smaller than 400 x 209, then it will only appear as a small thumbnail.

To use the og:image tag, you would need to put this in the <head> section of your webpage:

<meta property="og:image" content="http://www.yourdomain.com/image-name.jpg" />

You could also use a plugin such as SmartCrawl to make this much easier. Get a free trial here.

In SmartCrawl, go to the Social section. To enable Open Graph, go to the Open Graph section and flip the switch.

Screenshot of SmartCrawl Open Graph settings
Help your images stand out in noisy social media feeds.

To use Twitter cards in addition or instead of Open Graph, go to the Twitter section and flip the Enable Twitter Cards switch.

Screenshot of SmartCrawl Twitter Settings
Twitter can use Open Graph, but SmartCrawl makes it easy to use Twitter cards.

So why would you want to use social media tags for your images?

Some tweets are indexed by search engines and appear prominently in search (we’ll talk more about this in the next section). And authoritative people on Twitter lend their authority to pages they tweet. Google uses this as one of their signals when determining how to rank content.

Also, there is evidence to support that social media mentions or “citations” of your business, allow it to rank higher especially in local search.

Structured Data

Before we get into how to use schema to markup your content, I want to warn you that this may not always be the best strategy for increasing traffic. Sometimes if you really go the extra mile and use structured data to identify your image, you will paradoxically end up with less traffic:

Knowledge Graph features such as Featured Snippets, Related Questions and Knowledge Panels do significantly reduce clicks on traditional organic results.

Screenshot of Google search for WordPress themes that shows rich snippet.
This rich snippet features important content above the search results, hence the zero position name.

If the person using Google gets the information they need without having to click through to your site, then that isn’t the best use of your image optimization SEO time, so you need to take your whole SEO strategy into account.

For example, if the images on your site are photos of your products then you will receive positive results and traffic. This isn’t limited to ecommerce. If you’re a general contractor, for instance, and have photos of the homes you remodel, then you’ll experience the same kinds of results. Same if you have a featured image for a recipe. The people searching through Google images will follow the image trail until they get to your site so you get the traffic boost.

On the other hand, if you’re trying to drive traffic with a chart or infographic, all the important information might be in the image so searchers won’t click through to your site.

How to Use Structured Data on Your Site

The easiest way to do this is with SmartCrawl. In the Accounts section, just flip the switch on Enable Schema Markup Output and you’re done.

Screenshot SmartCrawl Enable Schema settings.
SmartCrawl helps you avoid having to add schema to your site.

If you’re not using SmartCrawl, you need to mark up your pages using Schema, a shared vocabulary to identify the elements on your site. Instead of a block of text, Google will understand all the different elements, since they’re identified and organized in a neat structure. You can explore the Schema language at schema.org.

Schema utilizes different content “types” and each type has “properties.” The recipe type, for example, has properties such as image and cook time.

Google prefers that you markup your pages using the JSON-LD format. When it comes to images, your images must be crawlable. Also per Google’s guidelines:

When specifying an image as a structured data property, make sure that the image actually belongs to the instance of that type. For example, if you define the image property of schema.org/NewsArticle.image, the marked-up image must directly belong to that news article.

In other words, there are some content types that don’t have images. So you can’t use the image properties on content types that don’t allow images. And you must include all the required properties in order for Google to consider your content.

To use the structured data on your site, you would need to add JSON-LD data to the <head> section of your webpage. Here’s an in-depth explanation on how to do that.

Just to clarify, structured data is not a ranking signal, but it can help your images get the attention they deserve.

That’s All

Wow, what a journey! If you’ve made it this far then you have all the information you need to absolutely dominate in Google Image Search. Seriously.

Unlike with regular text content, if you use the same image as another site, you won’t be penalized. Instead, the image that is optimized the best will win.

If you want to really give your site the ultimate boost, I suggest installing SmartCrawl, Smush, and Hummingbird. Get access to all of our plugins and more with a WPMU DEV membership free trial. You can configure them in less than a half hour and see a major performance boost. When that happens, don’t forget to do a little happy dance and shake it like a polaroid picture ;)

Over to you, have you tried optimizing your images to increase traffic? Were the results positive? Do you have any other image SEO tips?

Tags:

Martin Aranovitch Martin Aranovitch is a blog editor and writer at WPMU DEV. He has been teaching businesses how to use WordPress effectively almost since the platform began. When he is not writing articles and tutorials, he’s bushwalking in the mountains or playing triangle. Connect with Martin on Facebook and his WordPress client training manual and free content management course websites.

Felicia Ceballos-Marroquin Felicia is a WordPress expert, specializing in web design/development, search engine optimization, Genesis, and enterprise WordPress multisite. She is a former WPMU DEV author, where she put her decade-plus of WordPress expertise to good use, writing friendly tutorials with soul.