When people deal with images Search Engine Optimization (SEO), they only pick the low hanging-fruits: loading-time optimization and alternative texts. Image SEO is real science and goes way beyond that.
Image SEO impacts the way your images are ranked in Google images but not only. It also affects your organic research potential as a whole: optimizing your images for Search engines will positively impact your page’s ranking too.
This SEO guide will provide you all the tips and information you need to know to perfectly optimize your images for search engines.
On the one hand, if you fill in image HTML attributes properly you strengthen your page semantically and help Search Engines understand your content.
On the other hand, image optimization can improve your loading-time and your user experience: there is no good article without any good images.
In this guide, I will make a wide sweep of what you need to know to make the most of your images for search engines, but also for your users. Google SEO starter guide is very clear on that!
All the tips and hacks I will mention in the guide are somehow aimed at improving SEO AND User experience.
Facts don’t lie: the marketing and SEO power of images is insane. SO insane!
Before creating our plugin WordPress for Image SEO, I combed through each relevant SEO and Marketing studies about the impact of images on Search Engines and customer behaviors. Here is a summary of what I discovered:
This means that optimizing your images will increase both your organic traffic (SEO optimization) and sales (UX Optimization).
In this chapter, I’ll go through all the HTML attributes that matter for image SEO aka:
The name of your image file is one of the most important factors for image SEO.
The alternative text attribute will help Google robots to understand the content of your images.
The title text attribute is less important than the filename and the alternative text attribute when it comes to SEO.
The title text attribute improves the user experience when you scroll over an image.
Ok it’s not my car, but anyway!
The figcaption tag is often displayed under an image, to provide more information about it.
I will use the same photo to tackle each image HTML attribute and help you understand the differences between them.
I’m sure you have already asked yourself what was the difference between the ALT tag and the TITLE tag, haven’t you? So let’s get started!
Let’s start with the most obvious and the easiest: the image name. SEO is all about helping search engine robots and crawlers understanding your content and how your users interact with it. Your image name should reflect that.
This quote comes from Matt Cutts who has been working for Google since January 2000. Image names should therefore be a combination of a few relevant keywords.
Image names have to be short but descriptive. According to the data we have processed since the creation of our plugin, images that are performing the most have a length of about 12 characters.
We advise you to keep your image length between 8 and 16 characters. No more, no less.
This length corresponds to 2 or 3 keywords. It’s enough to help Google understand your photos and it will prevent you from doing keyword stuffing.
Ever since Google has been dominating the Search engines market, keyword stuffing has become irrelevant or worse: Google is now penalizing more and more websites using keyword stuffing and black hat SEO skills.
We strongly advise you to apply our guidelines and best practices when it comes to filling out image HTML attributes for SEO.
You can use tricks such as filling your alternative texts or names with what’s in your page title, but at your own risk.
People often struggle to understand how to write optimized alternative texts because they don’t understand what is an alternative text and what are they used for.
Let’s first clear the air about the terminology: Alternative text, ALT text, ALT Tag, ALT attribute, ALT are exactly the same thing. Period.
Although the most correct term is “alternative text attribute” they all refer to the same thing: a textual alternative to the image.
The ALT tag should describe what’s on an image (= the content) and the function of this image on the page.
Each time that an image has a purpose on your page, it should have an alternative text.
ALT texts serve three functions.
ALT texts should be built on two pillars: Content and Function. Your ALT must describe your image (= content) and explain why you use it for (= function).
The context of your page should be the logical link between the content and the function of your image.
The best alternative to the image in this situation is “black Tesla carrying with electricity on a parking”.
Why? Because it gives just the right amount of information to someone with visual disabilities to understand what this picture is about.
Alternative texts can (and should) be longer than your alternative texts. There are no rules about it: Try to write the fewest keywords possible to describe the picture to someone that cannot see it.
I wrote an extensive article about how to perfectly write alternative texts with examples. You should give it a look.
You don’t need to add an alternative text on decorative images. You can let them blank of add a null alt tag: <img alt=””>.
We saw several WordPress plugins offering automatic title tags generation for SEO: TITLE TAG DOESN’T MATTER FOR SEO.
They are not indexed by Search Engines. Period. This being said, title texts are not totally useless.
Title texts are displayed when the user mouse over a picture or a photo. It can be nice for the user experience. We recommend you not to spend much time on title text optimization. They are not important for SEO.
Figure and figcaption are probably the most underestimated SEO and marketing weapons. Users focus 60% more on figcaption texts than on the paragraphs that surround the pictures. That’s insane.
The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
Source W3C : HTML: The Markup Language (an HTML language reference)
Figcaption texts have to be written within a figure element.
The figcaption element represents a caption or legend for a figure.
Source W3C
What I will say for figcaption is also true for the paragraphs surrounding your pictures.
For Search Engines, the content that surrounds your images is more likely to be in connection with it. It’s therefore important to use the keywords you are targeting in the figcaption or just before or just after the images.
As I said before, people clearly pay more attention to the caption. You have to use this opportunity to emphasize your keywords, your call to action, or your best selling arguments. It can also be humor.
The results of the tests I did are crystal clear: images with figcaption rank better when they are surrounded by an optimized legend.
Image names have to be short; alternative texts (alt) have to be descriptive, title texts can be left blank but figcaptions have to be catchy.
Use, in one sentence, your best punchline, if possible using optimized keywords for SEO, but think about UX first.
In this example, I optimized UX first with a (poor) joke, but I also optimized SEO using keywords such as “car”, “electricity”, “refill” and Tesla.
Without plugins, Image SEO optimization on WordPress is a pain in the ass. For instance, you can’t rename your images after you uploaded them.
Hopefully, we’ve developed an SEO plugin using artificial intelligence to help people to deal with this issue.
Image SEO Plugin uses AI to automatically fill out alt texts and rewrite image names. You can optimize your images on upload or bulk your entire Library.
Image SEO Optimizer plugin is an amazing time saver.
There is a freemium version of it for occasional bloggers (10 image optimizations every month). Otherwise, you can subscribe to a monthly plan starting from 4,99€ or purchase a pack of images.
This plugin saves a ton of time!
Images are the best asset for user experience because they make your page useful and attractive.
However, Images might also be your worst nightmare because they increase your page loading time. They can also break your web design or carry out the wrong message.
It means that you should not overuse images. It also means that you have to be really picky when it comes to image or photography selection.
In this section of the guide, I will use the pieces of advice of professional photographers to help you choose your images.
Customers like original and new content. There are more likely to close a web page carrying out information or a product that they have already seen somewhere else.
Yet, what are the first things users’ eyes get when they land on a page? Its primary picture. Maybe the title.
It means that the first image of your page has to be catchy and original. This is essential and can significantly decrease your page bounce rate.
Let’s imagine that your page is a Tinder profile: you have to use YOUR best picture first if you want girls or guys to keep scrolling your profile. It should be just the same for a web page: use YOUR best image first if you want people to keep scrolling down.
I really insist on this point: to be optimized, the first picture of your page should be unique. People don’t like fake or duplicate content, neither does Google.
Unique images are indeed more likely to rank higher in the search results and that’s where you want your images to be right?
So it’s best if your featured image is not coming from a free stock photo website.
I spent a lot of time on Reddit and Quorum before writing this guide to understand what people were asking about image SEO optimization. ” It is better to use png or jpeg for SEO ? ” was a top 5 question.
Sadly, there is no good answer to that question: the image format should always be adapted to the purpose of the picture.
JPEG (Joint Photographic Experts Group) is the most common image format on the internet. You should use it for images where the quality matters: photography, product sheet, etc.
JPEG files can be compressed tremendously, which leads to quality images with relatively small file sizes. You should always compress your image.
Spoiler alerte: WebP are better than JPEG for SEO.
PNG (Portable Network Graphics) was created to replace GIF. PNG pictures have better quality and size than GIF. PNG files support transparency making them really useful for graphics or icons.
You should not use PNG for pictures or photography because the ratio quality/size is much better with JPEG.
In 2020, the only reason justifying the use of GIF on the internet is simple art and animations.
If they are not really good for SEO, GIF images have incredible marketing power and it can be nice to put one GIF on a landing page.
SVG (Scalable Vector Graphics) is a kick-ass format for SEO for two reasons: it’s light and it’s responsive. SVG images are also awesome on a retina screen.
SVG images and their behaviors are defined in XML text files which means that they can be created and edited with any text editor. You should try to use SVG images as often as possible for your SEO optimization.
Not every image can be converted in SVG. To get your SVG file you need to download Adobe Illustrator or use an image online converter. Be careful with the SVG file or code that you find on the internet. They might open a security breach for your website.
I personally get my SVG file on Flaticon. The largest database of free icons available in SVG.
Like JPEG or PNG, WebP is a method of lossy compression that can be used for photos or images. A comparative study made by Google recently demonstrated that WebP files achieve an average of 30 % more compression than JPEG without loss of image quality.
You should thus prioritize the use of WebP over JPEG or PNG. It will positively impact your loading time.
Also, note that WebP format has been developed by Google and it’s no secret that Google tends to favor its own products.
All information is available on Google website. Note that you will need to be comfortable with writing command in the terminal of your exploitation system.
It’s not rocket science, but if you experience trouble, shoot me a message at aurelio@imageseo.io and I’ll write an article about it.
You can use also use an image online converter (see above) or a plugin like Imagify.
| Image Format | SEO Recommendations |
|---|---|
| JPG / JPEG | Prioritize the use of WebP. |
| PNG | Only use PNG when you need the transparency or for really small images. |
| GIF | Only use GIF when you need to animate an image. |
| SVG | Use SVG as often as possible but don’t download SVG from websites you don’t trust. |
| WebP | You should always try to use WebP over other formats when you are not restricted by transparency or animation. |
WebP format is a relevant endeavor for image SEO.
EXIF metadata is used by cameras to store information in photos, during image compression. They embed data such as date, time, camera model and settings, geolocation, etc. They are sometimes used by the police to find out where a picture was taken. They are useful for Google algorithms because they carry out specific data about your picture.
EXIF data optimization shouldn’t be your priority when you are optimizing your image SEO. You need to focus first on image names, alternative texts, and compression.
This being said, it’s really worth to spend time optimizing the EXIF Data of a few pictures. It might be the ranking factor that will allow you to overtake your competitors.
Note that Exif and IPTC data are also important for Google Lens.
To edit and optimize your EXIF data for SEO you only need GIMP, but you can also do it with Adobe Photoshop or Adobe Lightroom.
The path is : Image > Metadata > Edit Metadata.
Then, select the empty fields you want to update and click on “Write Metadata”.
Only add relevant data such as 2 or 3 keywords (no more), author, and location, especially if your image concerns a local business.
Don’t forget to tick the three boxes Exif data, XMP data & IPTC data when you export your image.
I know that photographers are really interested in this topic. If you own a photo website, check out my ultime SEO Guide for photographer. You will like it!
When I don’t take the pictures myself (remember what I said about the importance of the originality criteria for image SEO optimization) I get them on two sites dedicated to free sharing stock photography: UnSplash and Pixabay. They have a lot of amazing pictures free of rights.
You can also use Canva to create amazing illustrations.
If you have read this far in the guide you know that page loading-time can dramatically impact your ranking position in the SERPs. If you don’t optimize them, images can consequently have a negative impact on your SEO because of their size.
Google said that site speed is one of the most important factors used by its algorithm to rank websites.
Pages with long loading times are also bad for the user experience. This might have substantial consequences: lowering your bounce rate, leading to negative reviews, reducing your conversion, etc.
One of the most common mistakes about image SEO is when you upload a large image, then display it really small. In this situation, the large image is always uploaded. It’s therefore important for you to take the time to resize images the way you want them displayed.
Note that WordPress automatically provides images in multiple sizes and responsive images after upload. If you are not using WordPress, you have to do it yourself with GIMP, Sketch, Photoshop, or Illustrator.
Once you have created your image in several sizes, you need to add a srcset attribute to it. This will allow browsers to select the appropriate file source for every device.
You can define the size by the image width (w) or by the image density (x). Don’t mix both like in our example. I only did it to show you the structure.
There is no evidence that you should use one over the other but since I’m a control freak, I’d recommend you to use width, over density.
Width is less likely to break your design or anything.
Lazy-loading is a Javascript technique that defers the loading of images, leaving them ”off-screen” until you need them. Lazy-loading only comes into action when users reach your content as they scroll down the page.
Lazy loading your images won’t prevent them from being indexed by Google robots. It’s a quick win for SEO and UX. However, be careful: you should not lazy load all your images. Only the ones that are not critical.
If you are using WordPress, there is an excellent speed optimization plugin named WP-Rocket that can implement Lazy-Loading on images for you.
If you are not, I invite you to read Google guidelines on Lazy loading implementation or the guide on lazy loading of CSS-Trick.
Edit: the last version of WordPress natively implements image lazy-loading.
Image compression is the low hanging fruit of image SEO optimization: you have to grab it. It will boost your page performance and improve your user experience.
You should never be afraid of compressing your images: most of the time the user cannot see the quality lost.
There are two main techniques for image compression: Lossless compression and lossy compression.
I mentioned before the importance of EXIT and metadata for SEO. The lossless image compression method is almost only about getting rid of this metadata. That’s why I said that you should only optimize EXIF data for your most important images.
In the lossy image compression method does not decompress digital data back to 100% of the original. It means that when you use lossy compression, your image will lose some pixels and therefore some quality.
At this point, you are probably asking yourself: should I use a lossy or a lossless image compression for my images? Most of the SEO Guides and Blogs speaking about image optimization say that it’s all about finding a good compromise between file size and image quality. This is true, but not completely.
SEO is all about finding a good compromise, BUT when it comes to image compression we can trick the human eyes and that’s why you should prioritize compression over quality. To some extent of course.
You can compress your images with software (GIMP, Photoshop, Illustrator, etc) or online compression services such as Image Optim.
If you are using WordPress, I recommend you to use ShortPixel because:
If you don’t like ShortPixel, Imagify, Smush are also excellent alternatives for image compression and optimization on WordPress.
In order for your site’s images to be included in the SERP, they need to be included in the Google index.
The indexing of your images by Google is determined by algorithms, but you can influence the process and help Search Engines by creating image sitemaps.
A sitemap is an XML file where you provide information about the pages, videos, and images on your site, and the relationships between them. It helps Search Engines crawl your website.
If your internal linking is optimized and your site small, you shouldn’t need sitemaps. However, as soon as your sites become large, crawlers can overlook your content and skip some part of it. That’s why sitemaps and image sitemaps are important for SEO: they can guarantee that all your content is indexed by Google.
You can use a separate sitemap to list images, or you can add image information to an existing sitemap. This example shows a sitemap entry for the page http://imagesitemap.com/page.html, which contains three images.
When your images sitemaps are ready, don’t forget to send them to Google using the Search Console Sitemaps tool. For all the other Search Engines, add the following line of code in your robots.txt file:
Sitemap: http://mysitemap.com/sitemap_location.xmlAll the major SEO Plugins available on WordPress have an images sitemaps creation feature. I recommend using SEOPress over Yoast and RankMath.
Why? Because I have been working with people from SEOPress in the past and their support is really reactive.
I have been working daily on Images SEO over the last 10 months and if I had just one additional comment to make it would be: the future of the web is visual. You should really pay attention to image SEO because the return on investment on image SEO actions is crazy good.
We are coming to the end of this guide on image SEO optimization. If you have a question or a comment, feel free to shoot me a message on Twitter!