Using images is a great way to add visual content to your WordPress site. But for this to be really effective, you need to use image titles, alt text and descriptions. Unfortunately, this is something that many website owners forget, which has a negative effect on their page’s rankings, user experience, and accessibility.
While there are hundreds of factors that can make users and search engines like your website more, even such a small detail as filling out the image metadata correctly can contribute to an increase in organic traffic.
On top of that, if you fill out the alt text field, users with visual impairments, as well as those who have images turned off in their browsers, will better understand the context provided by the photos. In a moment, we’ll explain why image titles, alt texts, descriptions, and captions are important (though unequally) and what the best practices are when it comes to using them.
What is metadata?
Metadata provides information about the other data on a page or website. When it comes to images, this is the information about an image. In other words, your image metadata is the text that describes or gives details about the image.
You may be wondering why this is important. There are several good reasons to add this information to your images. It helps categorize images, making it easier to find what you’re looking for on your site and it helps users by giving them additional data about the images.
It also helps search engines learn about your images. Search engines won’t be able to see them as such, but they can use the data provided to understand what the image (and the page on which it appears) is about. So if you do an image search, this metadata is what the search engine uses to bring up relevant pictures. This also makes a difference to your Google page ranking.
Adding image titles, alt text and descriptions
WordPress makes it easy to add your titles, alt text, and descriptions. It provides you with the capability to add this metadata as you load images. You can also access images through your media library or gallery if you want to add or update this data.
This is the title given to an image. It doesn’t necessarily display on your site, but WordPress uses this title to categorize images in the media library. The title is the only element that every file needs to have. If you don’t change anything, the title will be the same as the name of the file.
However, it is advisable to change it, as it is unlikely that the original filename will provide any useful information to search engines. At the same time, if you put a bit of thought into choosing a title that accurately describes the picture, you’ll have an easier time finding the picture you are looking for in the media archive.
This is the title attribute or text that displays with the image, often as a pop-up on the image. How it displays will depend on your site’s theme or the plugin you’re using. For FooGallery, this display is often determined by the template you’re using and your caption settings.
While it is useful to have a caption, it isn’t essential. If you are adding an image title, you can use relevant keywords. If you use the same picture several times in a single post, or on various pages, it is also possible to add different captions each time. But try to keep your titles short and catchy or to the point.
The alternative text, or alt text, on your image displays when your image can’t. The browser may have trouble loading the image, the user’s internet may be too slow, or the image too big. The alt text is also useful for those who are visually impaired and using a screen reader.
As this impacts on your SEO, you should always include alt text with your images. It should include relevant keywords and give a description of the image and it’s purpose on the page. Your alt text can be longer than your captions, for instance, but avoid keyword stuffing. Yoast gives some useful guidelines here.
This section allows you to add in additional information as a description. This could include details about the image itself, or helpful information for the user, like instructions, product details or even information about what equipment was used to take a photograph.
When loading images, you should always add alt text. Titles can be useful behind the scenes, so it’s a good idea to use an informative title. Captions and descriptions can also be a great addition to your gallery, especially if want to give additional details about your photos.
Take a look at how FooGallery displays both captions and descriptions in our demos.
A Quick Guide To Alt Text
While we have explained the basics of what alt text is, there are more complexities at work. It is certainly true that the alt text should describe the content of the picture, but it’s not quite that simple.
Alt text should take a slightly different form depending on the type of photo and its purpose. According to the Web Accessibility Initiative, images can be grouped into several categories based on their purpose, content, and context:
- Informative images
- Decorative images
- Functional images
- Images of text
- Complex images
- Groups of images
- Image maps
Now, let’s go over each group to make it easier for you to create alt texts for your photos.
These are the images that graphically convey some information, provide instructions, or explain concepts. Adding alt text to such photos or illustrations is a fairly easy task – just try to describe what is going on in the picture.
Contrary to the informative images, decorative images don’t convey any useful information, and their absence wouldn’t make a difference to understanding the content of the page in any way. Think of elements of design that are only meant to look good, but don’t provide any useful information to the user.
Because decorative images aren’t going to be useful to visually impaired users, or search engines, the best idea is to set alt text as alt=””.
Functional images include buttons or links that are meant to elicit a specific reaction from the audience. Think of buttons and icons that can be clicked by users to lead to a specific action, like the below Download Button.
Now, if there is an envelope symbol that can be clicked to send an email, the alt text shouldn’t describe the symbol itself, e.g. “a small white envelope,” but rather, should be focused on its function. A better alt text to use would be “click the envelope to send email”.
This way, visually-impaired users will understand the purpose of a graphical and know that they can perform some actions, like go to another page, fill out a form, or enrol in a course.
Images of Text
Ideally, we should avoid using images that contain only text, as it makes it harder for the visually-impaired user to differentiate this from the content on the page. As a general rule, only logos should be presented this way. Otherwise, it’s better to add text instead of images with readable text. However, if for some reason you are faced with this situation, the alt text should contain all the words that are in the image.
Unfortunately, even though some informative images contain information that is crucial to understand the content on the page, accurately describing what is going on in the picture could prove difficult due to their complexity – those include maps, diagrams, or charts.
Conveying their message using words may be next to impossible, but ignoring them or providing overly simple descriptions would be inconvenient for those using screen readers, as well as for search engines. The most common approach then, is to include a longer description of the complex image somewhere on the page (such as at the end) and specify its location in the alt text.
Groups of Images
In certain situations, several different images included in the post might convey the same exact meaning. The best way to deal with groups of images is to provide the alt text only to one of them and to ignore the rest. This way, the search engines and people using screen readers will encounter only a single alternative text instead of multiple ones that would just repeat the same message.
Though some web owners prefer to add original alt texts to each image, even if their function is largely the same, doing so could unnecessarily waste the time of their audience.
Some of the images on your website might have several clickable areas. In this case, you need to provide the overall context for the image, and then shortly describe the action that results from each element. The same rules apply as in the case of functional images – you shouldn’t describe the part of the image itself, but rather, its purpose.
Why Is Adding Alt Text To the Images Important?
Now that you know how to properly describe different types of images depending on their purpose, content, and context, it’s useful to understand why adding alt text is so beneficial to both your website and your users.
Here are some of the more important reasons for adding alt text:
As we mentioned earlier, Google’s crawlers or bots that are responsible for indexing all the pages on the internet cannot see images. But this isn’t strictly true. They can read images containing text, but they might also be able to see other types of images as well. But they might not always get it right, which is why it is best to avoid relying on still imperfect algorithms and just add the alt text.
Even if crawlers do get it right, they won’t be able to add in the details. They may see that there is a lawnmower in the picture, but your eCommerce website could benefit more if you specify what type of lawnmower it is. That’s another reason why alt text is important for SEO – it can be an excellent source of keywords for which your page could rank.
This is especially true if there are plenty of images on your website – not adding alt text would be a huge waste of opportunity. While you might have heard that using keywords doesn’t bring the same effects as it used to in the past, keywords can still help you reach the right audience.
Adding alt text that contains keywords relevant to the subject of the article can make it easier for Google to understand the content on your page, but you shouldn’t overdo thist. For example, the alt text “white angry cat” is a better choice than “cat cats kitty”; the second option could get you penalized by Google for keyword stuffing.
Alt text can have a huge impact on your website’s rankings, but we shouldn’t forget that it can also make it easier for people with visual impairments to browse through your website. Screen readers can read the content of a page to the users or translate it into Braille. However, screen readers cannot read images. So if there is no alt text for them to access, their users might be unable to access part of the content on your page.
Apart from creating barriers, doing so would also frustrate these users, who would be then likely to leave your website and go to a similar, more accessible one. Accessible images can also make your website more attractive for those who prefer to use browsers that block images.
Mobile users sometimes turn off the display of images in their browser settings to minimize internet data usage. People who use mobile and desktop devices might have slow internet, and turning off the images can significantly decrease the page load time. In these situations, if the alt text field is empty, users won’t know what the images were supposed to convey, which could affect their understanding of the content on your website.
Tips on How To Create Alt Text
As you know, multiple categories of images require slightly different alt texts to help your audience and search engine grasp their content. However, if you don’t have much experience with creating alt texts, you might struggle a bit, which is why we prepared a set of tips that will make this process even easier.
- If you’re not sure what would work as the most suitable text alternative, imagine that you are trying to explain the content of the page to someone who can’t see it. What type of information do they need to follow the rest of the content?
- Sometimes you might find it difficult to decide whether an image is informative or decorative. That’s not surprising – the line can be somewhat subjective. If you have doubts, remember that it’s better to add alt text to images, even if you think that they add little to the rest of the post, than to leave the field empty and risk not providing the entire context to the users.
- If you can make use of valuable keywords in the alt text, that’s great; just remember that apart from the crawlers, users will also read it. Some websites tend to overstuff keywords in the alt text, hoping that their page will climb in rankings. However, even if they don’t get penalized by Google, keyword stuffing could lead to a bad user experience.
- For some people, alt text is the only way to understand what the image represents – if it’s unclear, they might have trouble understanding the rest of the article. Unclear alt texts could even cause rankings to drop, as Google will surely notice if users leave the website faster. So you can sprinkle a few keywords here and there, but make sure that the accuracy of your alt texts doesn’t suffer because of it.
- There’s no need to use words such as ‘picture’ or ‘image’ in the alt text, as including those terms wouldn’t be helpful to your audience. Screen readers and crawlers are aware (to the extent that bots can be aware of something) that the alt text is a description of a media file.
- Don’t forget about clickable buttons! If, by clicking on a photo, a button, or any other element, users can perform an action, such as sending an email or signing up to an online course, you should add alternative text. Just because it might seem pretty obvious that an icon of a printer can be clicked to print some materials, and an envelope icon can be used to send an email, some people rely on screen readers or have images turned off in their browsers. Without the alternative text, they won’t have an idea that they can perform a specific action. So as we mentioned earlier, you should describe the action and not the button itself.
A Note On Attachment Pages
Another important term that we should mention (and which could have an impact on your website’s SEO) is an attachment page.
Each time you upload a photo, a PDF file, a video, or any other type of asset to your website, a separate page that contains only this file is also created. Although attachment pages could be used to your benefit, as you can provide much more information about the piece of content in the ‘image description’ field, they could also harm your website. How?
Unfortunately, attachment pages are rarely a priority when you add new photos or other assets to your website. Because of that, you might leave their descriptions empty, or reuse some of the elements used to describe the photos in your posts (such as alt text or title text), which will have a negative impact on your website’s SEO. Why?
Google takes different factors into account when it assesses the quality of different websites. This, in turn, affects their rankings, and consequently, their organic traffic. If Google thinks that most pages on a particular website don’t contain at least a moderate amount of useful information, they are less likely to recommend the website to their users. Thin content is bad for SEO, and unfortunately, having a large number of attachment pages with no additional information could hurt your website.
What’s more, if you reuse the image attributes Google might start treating the attachment pages as duplicate content. And if, for some reason, the attachment page becomes more popular than the original page, those two pages will compete for rankings, which will effectively hurt organic traffic to the more important page.
How To Disable Attachment Pages in WordPress?
Now that you are aware that attachment pages, if not taken proper care of, could hurt your website’s SEO, you might be wondering whether there is a way to disable them. You could do so using a WordPress plugin to create redirects so that people who visit the attachment pages are automatically redirected to the parent post. Alternatively, if you know your way around coding, you could redirect the organic traffic by adding code to functions.php.
Keeping the attention of your audience for longer periods of time is not an easy task. Thanks to social media and ultra-connectivity, our attention spans are getting worse and worse, and large walls of text can scare off your users pretty quickly. That’s why you should consider adding some images to the text to make it easier to process.
Having images on your website also adds to your potential to reach a wider audience, by using metadata such as the title, alt text, description, and occasionally captions. Even though filling out these fields might seem time-consuming, doing so can make it easier for your users to read through your posts, and search engines will appreciate it as well.
Although crawlers might be able to read some of the images, they are still far from perfect, and even if they get the content right, their description is likely to miss some of the details. By providing the metadata on your own, you’ll have a chance to sprinkle in a keyword or two that could help boost your website’s rankings.
At the same time, accurate alt text can make reading your posts easier for people with visual impairments, as their screen readers cannot read images. If, due to some issues, images on your page aren’t displayed correctly, alt text will convey the meaning delivered by the original pictures.