How to Optimize WordPress Images for Search Engines
Aside from making websites more memorable and creating a good user experience, images are also an important contributing factor that leads to more traffic, better SERP (Search Engine Results Pages) rankings, and higher conversion rates. But none of that can happen unless your photos are well optimized for search engines.
SEO image optimization differs from image optimization for the web. The latter is indispensable for ensuring pages load fast, which helps reduce bouncing rates. But search engines also analyze all elements in images, and your site’s visibility and relevance on the web greatly depend on what they will read.
To help you convince search engines your imagery has got exactly what users need, we will show you how to best optimize WordPress images for search engines. In our useful SEO image guide, we will explain why you should stick to the following advice:
As an important SEO asset, images need to have a name. However, not just any name will do. Generic names such as “IMG_20190914_1843” don’t mean a thing to search engines and they’re not informative for users either.
The key is to use descriptive, keyword-rich file names. Make sure to separate words with hyphens (underscores are a big no-no) so that search engines can recognize each word individually.
For instance, you may want to upload an image of a tea packaging to your site:
To improve the SEO value of your file, you could name it “organic-herbal-tea”.
Alt text or alternative text is an HTML attribute that describes images. It doesn’t necessarily have to mirror the content of an image, but it should match its meaning.
Alt texts are primarily used for screen readers that improve the accessibility of websites and are intended for visually impaired audiences. Those programs include a voice synthesizer that helps users surf the web and informs them about the content on the page they’re browsing.
Alt texts also help search engines accurately index photographs on a site. Search engines will focus on alt text to understand the subject of an image and determine if it’s a good match for users’ inquiries.
Moreover, when photos won’t load for whatever reason, an image box with an alt text will appear. Search engines will rely on alt text to rank a page and visitors will understand what the photo is supposed to be. If there’s no alt text, users will just see an empty space.
Alt texts should include targeted keywords, but most of all, they need to be informative and on point. However, be careful not to slip into the keyword stuffing trap. Say you wish to add an image of a chair:
Avoid using this kind of alt text:
<img src=”chair.jpg” alt=”Wooden chair furniture handmade living room interior design”/>
It contains far too many keywords, which could cause your website to be marked as spam. Not to mention probable bad user experience.
A good alt text for an image like this could be:
<img src=”chair.jpg” alt=”Handmade wooden chair”/>
There is no ideal number of characters recommended for alt texts, but it’d be best to aim for 25 or shorter.
Captions are usually displayed below images. They help users discover more information about elements in photos or learn their background story.
While they do not have a direct impact on SEO, captions are visible on pages and therefore can influence UX. For instance, if you run a flower shop or simply sell plants online, it wouldn’t make much sense adding flower images without captions. You don’t want to risk high bouncing rates and jeopardize your credibility with search engines just because visitors couldn’t find out the name of a particular flower on your site. Some may be ready to make purchases based on the way flowers look, but the majority of buyers will probably be interested in learning more details about the flower that caught their eye.
How to Add Image Titles, Alt Texts, and Image Captions in WordPress
To help you add metadata for your images, we have made an easy-to-follow video tutorial.
Alternatively, you can stick to the following guidelines.
In Gutenberg, once the file uploads, you can enter the caption under the image:
As for alt text, you will find the designated field on the right-hand side of the screen, under Image Settings:
Regarding the name of the image, WordPress will generate it from the file name. To change it, open your media library – you can jump to it directly from the block by clicking on the Replace button above the image and selecting Open Media Library.
Then, select the photo in question and modify its title within the Attachment Details panel.
You can make changes to the caption and alt text within the media library, too.
If you’re loyal to the Classic Editor, you can enter metadata for your image by clicking on the pencil icon placed above the file:
In the newly opened window, you can enter alt text and caption for your file:
To change the title, you need to open Advanced Options at the bottom of the screen:
In Elementor, you should first click on the image you’ve uploaded. Then, within the menu on the left-hand side of the screen, you have to click on the tiny showcase of your photo for the pencil icon to appear:
You will then see the same Image Details panel as in the Classic Editor, allowing you to enter the title, alt text, and caption for your picture.
Qode Themes: Top Picks
View Collection
Search engines pay attention to URL paths to better understand your file structure, which makes file paths an important ranking factor.
Because of this, it’s important to ensure your URLs are sensical and logical, especially if your site is image-rich. For instance, if you run an online store, you should organize and name your content carefully. Take a look at this example from Adidas’ website:
https://www.adidas.com/us/women-black-workout-shoes
From this URL path, it is clear both to users and search engines what kind of photos they’ll find on the page in question.
Ensuring your images look pixel-perfect on all devices, regardless of their resolution and size, is a must. As of WordPress 4.4, the RICG Responsive Images plugin has been merged into the platform’s core, so you get responsive images by default.
When you upload a photo to your Media Library, the platform will create five copies in different sizes, including full (the original file size), large (maximum height or width of 1024px), medium large (maximum height or width of 768px), medium (maximum height or width of 300px), and thumbnail (maximum height or width of 150px). You can alter these sizes manually.
WordPress uses srcset and size attributes to communicate with browsers and tell them which of the five sizes to select. The srcset attribute informs them about the image width and size about the dimensions the image should be scaled to, depending on the device.
Regardless of this, it’s always a good idea to use a fully responsive WordPress theme to make sure every aspect of your site looks great on all devices.
Whenever you upload an image to your site, WordPress creates a URL for it. That URL is called an attachment page URL. Users can find attachment pages using search or access them via a direct link.
All attachment pages include just a larger version of the image you added, which could cause bad UX and increase bouncing rates. Hence why it would be better to disable them. The fastest way to go about that is to use the Yoast plugin.
Head over to your dashboard and select SEO > Search Appearance.
Then, click on the Media tab and set the Redirect attachment URLs to the attachment itself option to Yes.
The non-plugin way of preventing users from accessing attachment pages is by adding the following code to your site’s functions.php file:
function qode_attachment_redirection() {
if ( is_attachment() ) {
global $post;
if ( empty( $post ) ) {
$post = get_queried_object();
}
if ( $post->post_parent ) {
$redirect_link = get_permalink( $post->post_parent );
// Redirect to the parent page/post, i.e. on which the image was uploaded
wp_safe_redirect( $redirect_link, '301' );
exit();
} else {
// If the parent page/post is unavailable, redirect to the homepage
wp_safe_redirect( home_url(), '301' );
exit();
}
}
}
add_action( 'template_redirect', 'qode_attachment_redirection' );
Once you add this code to the functions.php file, two outcomes are possible:
Either way, they won’t be able to access the attachment page. However, if you are not a WordPress expert, we don’t recommend making any changes to the functions.php file on your own.
A sitemap or XML Sitemap is a file that contains all URLs on a site as well as information about them. Users cannot see it, but its significance lies in the fact that it helps search engines find, crawl, understand, and index content.
Search engine bots automatically crawl sites, but there is always a chance they may skip some files. When you make a sitemap, Googlebot and other crawlers will find your entire content but also understand how your pages are organized and connected to each other.
To ensure search engines get all the necessary information about your images and index them, you should create an image sitemap. If you need help to make one, our extensive guide on WordPress sitemaps and how to create them will be of great help.
Structured data a.k.a. schema markup contains organized information about a page and its content. The reason why you should use structured data is to provide search engines with as much information as possible about your content, help them understand it, and make it eligible to be displayed as a rich result in search. If you mark up your images correctly, it will be easier for users to understand what type of content is related to visuals, decide if it’s relevant for their query, and ultimately increase your site’s traffic.
Google Images uses structured data for products, videos, and recipes. Moreover, it also displays all three categories as well as GIFs with relevant badges on mobile phones. Badges are visible in the bottom left corner of the photo, telling users what kind of content awaits if they click on the image.
If you, for example, run a cooking blog, besides images, you could include user ratings, cooking times, as well as nutrition information in your structured data. The more information you give to Google, the easier it will be for it to showcase your recipe in an appealing way, inciting users to visit your page.
In case you need help with schema markups, Google created a helpful guide on understanding how structured data works. They also wrote down general structured data guidelines, which you should follow to increase the chances of having your images displayed as rich results.
OpenGraph is a protocol introduced by Facebook to facilitate integration between websites and the said social media giant. When you integrate OpenGraph meta tags to your HTML, you can control the way your content will look when others share it on Facebook.
The most common OpenGraph meta tags include og:title, og:description, og:url, og:site_name, and og:image. The reason why the image tag matters a lot is because appealing photos can incite people to visit your page.
Twitter Card tags are the same as OpenGraph meta tags except that they’re intended exclusively for Twitter. Again, their purpose is to make your content look interesting for Twitter users and bring more traffic your way.
The easiest way of adding OpenGraph and Twitter Card tags to your WordPress site is by using Yoast or another popular SEO plugin, such as RankMath. We will show you how to add them with Yoast.
For starters, head over to SEO > Social in the admin dashboard and select the Facebook tab.
Enable OpenGraph metadata and then upload an image that will be used as the default for pages without any photos.
To add Twitter Card tags, click on the Twitter tab.
Make sure to enable Twitter Card metadata and to select the default card type that should be used. You can choose between displaying only the summary or a summary with a large image.
Content Delivery Network or a CDN is a network of servers that are distributed globally. When a visitor makes a request on the web, a CDN will use the node geographically closest to the user to minimize delays in loading content and deliver spotless performance. An image CDN not only does that, but it also recognizes the user’s device and then optimizes images accordingly before delivering them to the user.
Since speed is a major ranking factor, it would be wise to use Image CDNs to boost the performance of your site and have visuals load with no delays. That way, users will spend more time on your site enjoying the fast-loading content, which could lead to higher conversion rates.
When it comes to WordPress and image CDNs, the Jetpack’s Site Accelerator function helps deliver images to people using a global server network. Alternatively, you can try KeyCDN, Cloudflare, StackPath, or Amazon CloudFront. And if you wish to learn more about content delivery networks, we encourage you to read our article on CDNs and why you need them.
Let’s Wrap It Up!
While this list of SEO advice on how to optimize WordPress images for search engines may seem overwhelming at first, once you pay closer attention to all of the steps, you will realize that they are actually not so hard to follow. You can take care of them all by yourself, even if you don’t know how to code, just by relying on your own organizational skills and installing some practical plugins. Use our table of contents as a to-do-list, and slowly uncheck the boxes one by one.
