Image SEO: Best Practices

In any case, you'll probably find yourself wondering if your article needs an image or not, whether you're a blogger or a writer for an online magazine or newspaper. The answer is always "Yes." Images enhance the quality of an article and contribute to the search engine optimization of your website. This post explains how to fully optimize an image for SEO as well as some tips on how to use images effectively.

Utilize images at all times

Your article will be easier to comprehend when images are used correctly. In Google's case, the old saying is unlikely to apply, but when you need to spice up 1,000 dull words, illustrate what you mean with charts or data flow diagrams, or just make your social media posts more captivating, it certainly applies.

Make your articles more appealing by adding images. Moreover, since visual search is becoming increasingly important — as outlined in Google's vision for the future of search — it may turn out to provide you with some traffic as well. It makes sense to put image SEO high on your list if you have visual content.

There was a time when Google Images had a new interface with new filters, metadata, and even attribution. These cool new filters demonstrate the fact that Google is becoming more aware of images and the context in which they fit.

Image selection

If you have a team page, then you should include photos of your actual team, not a guy like the dude on the right or his stock photo buddies. Off topic: he also needs a haircut.

In order for your article to be seen in Yoast SEO's content analysis, you must add an image relevant to its subject matter. If you are adding random photos just to get a green bullet, you are doing it incorrectly. The image should reflect the subject matter or have illustrative purposes within the article. It's also important to place the image close to the relevant text. If you want your main image or image that you are trying to rank near the top, try to keep it there as much as possible without feeling forced to.

In this article, we'll discuss image optimization, but there's one simple reason: related images rank higher for relevant keywords.

Various options

Alternatively, you can find unique images that can be used without using stock photos even if you do not have any original images. For instance, you can use Creative Commons images on Flickr.com. Just remember to credit the original photographer. Unsplash has some great images as well. We've written a blog post that explains where to find great images. You'll probably find that images with people in them always look like stock photos, regardless of what you use. Try not to use obvious stock photos, and if you use them, choose ones that seem more authentic. Unless you took the photos yourself, which is always the best thing to do.

At Yoast, we use graphs and illustrations instead of photos. You may be interested in an article about the making of illustrations written by our resident illustrator Erwin on our developer's blog. In addition, animated GIFs are becoming increasingly popular these days, and deserve honorable mentions as well.

You don't have to go overboard with animated GIFs, but if you do, you'll find that they make your post harder to read because they are distracting and slow down your page loading speed.

Making your article more visually appealing by preparing images

The next step after selecting the right image for your website is to optimize it. Before you upload your image, consider the following factors:

Name your file correctly

In order for Google to be able to identify the image without even seeing it, you need to use your focus key in the file name. It's simple: you should not use a file name like DSC4536.jpg in an article about Notre Dame if you're writing about it. The file name for your article and photo should be notre-dame-paris-sunrise.jpg, ensuring the main subject of your article (and photo) is the first element in the file name.

Format your document correctly

We recommend the following formats for images, depending on their size, type, and intended use.

If you need larger photos or illustrations, JPEG is a great choice: it is compact, provides good color and clarity, and is relatively small in size;
For images that need transparency, use PNG;
The other option is to convert your image to WebP instead of JPEG and PNG. This will produce high-quality results with smaller file sizes. To convert your image to WebP, use tools like Squoosh.
If you use SVG files for your logos and icons, you can easily resize and manage them using CSS or JavaScript.

Your image needs to be resized and optimized after you choose the right name and format!

The SEO scale for images

User experience and search engine optimization depend on loading times. User and search engine visits (and indexes) pages more easily when the server is fast. Images can have a big impact on loading times, especially when you upload a huge image to display it really small, for example, a 2500 by 1500-pixel image displayed at 250 by 150 pixels - because the whole image still has to be loaded. You will need to resize the image depending on how you would like it to appear. Once an image is uploaded, WordPress automatically provides it in multiple sizes. This does not mean that the file size is optimized, as that is only the size of how the image appears on the screen. Make sure your images are the right size before you upload them!

Image responsiveness is important

Since WordPress version 4.4 added it by default, it’s already done for you. This one is also important for SEO. Using the srcset attribute, you can serve different images depending on the screen width — this is especially useful for mobile devices.

Size reduction

Next, compress the scaled image so it can be served in a small size in order to improve image SEO.

The image could be exported and the quality percentages experimented with, but we prefer the highest quality images, especially in today's world of retina screens.

The file size can still be reduced using tools like ImageOptim, JPEGmini, Jpeg.io, Kraken.io and Squoosh, for instance, by removing the Exif data.

Using tools such as Google PageSpeed Insights, Lighthouse, WebPageTest.org and Pingdom, you can test your page speed after optimizing your images.

Your article needs an image

You shouldn't rely entirely on Google to recognize what's in an image - it's up to you to give it as much context as possible! We'll describe how below.

If you fill your article with images, make sure you don't just throw them in anywhere. You need to include them within related textual content. This ensures that the words and images are as related as they are to each other.

Descriptions

Whenever an image appears on a web page, the caption accompanies it — if you look at the images in this article, you'll see the caption in the grey box below the image. Why are captions important for image SEO? People use them when scanning articles. Jakob Nielsen wrote in 1997: "As people scan a web page, they tend to scan headings, images, and captions."

It is best to include headings, large type, bold text, highlighted text, bulleted lists, graphics, captions, topic sentences, and table of contents in order to make it easier for your readers to scan your documents."

If you don’t want your images to be used for SEO, you don’t have to add captions to every image. Think about the visitor first, and don’t add a caption for image SEO reasons. Keep in mind the need to avoid over-optimization, so you should add captions only where it makes sense to the visitor for one to be there.

Text for alternative

If for any reason an image cannot be displayed to the visitor, alt text (or alt tag) provides descriptive text.

The alternative text ensures that no information or functionality is lost in situations where an image cannot be displayed to the reader. This could happen if the image is disabled in their web browser or if they are using a screen reader for a visual impairment.

Your alt text enhances the accessibility of your website. Add alt text to all images you use, and if it is appropriate, include the SEO keyword for that page. Avoid stuffing alt text with keywords. The more relevant the information surrounding an image is, the more important it will appear to search engines. Ideally, describe what's in the image, so both search engines and people can understand what it's about.

It is important to remember that alt text is not mandatory for every image. Instead, you should consider it part of your content and add it where it makes sense. For instance, if you have an image simply for decorative purposes, that image doesn’t need an alt text. It doesn’t make any sense to have an alt text in this case. However, if you include a statistic in the alt text of your image, such as how many people searched for ice cream last month, the alt text should reflect this.

Italics

Chrome displays the title text as it was intended when hovering over an image. When hovering over images, some browsers show the title text as a tooltip. It's the same for title text for images. Many people copy the alt text from the image, but more and more people leave them out altogether. Here's what Mozilla has to say:

"Title has several accessibility problems, mostly due to the fact that the screen reader support is highly uncertain, and most browsers will not display it unless you hover with the mouse (so keyboard users are not able to access it)."

Rather than attaching supporting information to an image, such information is better included in the main article text.

Here's what you need to know about optimizing titles and alt tags:

Structured data for images

In order for Google to display your images as rich results, structured data must be added to your pages. Though structured data does not improve your ranking, it does help you have a more detailed Image Search listing. There’s more, though. Google Images can also add a badge to your images if you have recipes on your site and you add structured data to your images. Structured data can be of the following types:

Merchandise
An audio-visual recording
Adapted from

For instance, make sure that your image belongs to the instance of that type when specifying it as a structured data property. If you want your images to appear rich in image search, you need to follow Google's guidelines. It is important that your images have an image attribute and they should be crawlable and indexable. You can find them all in Google's Structured Data General Guidelines.

In addition to adding structured data to your site, Yoast SEO also adds an image to the how-to articles built with our blocks to automatically display the correct structured data. Every page has at least one relevant image that Yoast SEO adds to the structured data graph. Then, search engines will be able to understand your page properly. Want to learn more about structured data? You can learn how to add structured data to your pages for free by enrolling in our Structured data training course!

Twitter Cards and OpenGraph

As we mentioned earlier, images can be used for social sharing. If you add the following image tag to your HTML based on the following code, it will make your page easier to share via social networks:

An image can be accessed by using the meta property "og:image" with the content "http://example.com/link-to-image.jpg" />

Using this method, the image will be included in your Facebook share (and Pinterest uses OpenGraph as well, for instance).

It is easy to set up and preview your Facebook and Twitter posts in the Yoast SEO plugin, and users can also use Zapier to automate social media posts. As the social platforms tend to use larger/higher quality images more often than not, use a high-quality image, similar to the original image you used in the post. In the URL Debugger, try flushing Facebook's cache if you have set this up correctly. Twitter Cards are generated by our plugin as well and do the same thing for Twitter.

Sitemaps for images in XML

XML image sitemaps are often confusing to web developers. I prefer to call them images in XML sitemaps. Google is clear on this:

In addition, you can use Google image extensions to add information about the images on your pages to sitemaps. You can indicate images on your site you wish Google to crawl and index by using image sitemaps, which help Google find images we otherwise might not find (such as images your site reaches through JavaScript code).

XML image sitemaps are sometimes asked for. Although our plugin does not create them, we follow Google's advice and include them in the page or post sitemaps. Just scroll down on our post sitemap, and you’ll see we’ve added images to all our latest posts (it’s in its own column). For better image SEO, make sure to include images in your XML sitemaps so Google can index them.

Using a CDN to serve images

There are many companies that provide CDNs, and many of them have a CDN for images as well. CDNs are one of the most popular ways to improve site speed. The image CDN is built around two basic tasks: optimizing your images and delivering them to your visitors as quickly as possible. An image CDN can dramatically speed up the delivery of your images.

With an image CDN, you can transform, optimize, and deliver images. The amount of images loaded can be customized. For example, you can specify that all PNG images should be converted on-the-fly to webp because these load faster and provide the best image quality. There are many options to fine-tune an image CDN’s process, but the default setting is usually the best option for most websites.

You can easily resize, reformat, and serve images with platforms like Cloudflare, as well as image CDNs such as Sirv, Cloudinary, and Imagekit.

Summary of image search engine optimization

There are a number of things to consider before you attempt to optimize an image for SEO. Since Google is getting better at recognizing image elements every day, it makes sense to ensure your image and all its elements contribute to a good user experience and SEO.

An image should be added to an article with these 12 tips:

Your text should be accompanied by an image that is relevant
Make sure your image file name is appropriate
Match image dimensions to displayed image size
If possible, use the srcset
Speed up loading by reducing file size
Make the page easier to scan by adding a caption
You don't need a title for an image. Use the alt text instead.
Make your images more structured by adding structured data
The image should be tagged with OpenGraph and Twitter Cards
Your XML sitemap should include images
CDN-based image serving
Be as specific as possible!

Don't underestimate the importance of image SEO for your website because it can contribute to both SEO and user experience. Got questions? Visit us @ www.sirkle.com and we’re happy to help.