Dansk
DeutschWe all know how important it is to use images throughout your pages and articles. Mere blocks of text become more lively, you engage your visitors in a more visual way, and deliver your message across. But when adding one, you can’t help but focus on one weird-sounding field. “Hmm, alternative text, what would that now be”, you ponder. It surely can’t be some field the WordPress developers randomly added – if it’s there, it likely has a purpose.
Alternative texts are HTML attributes added to image tags. They are short strings of text, which WordPress shows if it cannot display an image. Alt texts improve your Image SEO. They also help both visually impaired users with screen readers and search engines understand the contents of an image.
Alternative texts also have a few names used casually, such as “alt tag,” “alt text,” or “alt attribute.” To make the most out of it, I find it best to think of alt tags like this: an alt attribute is like the “executive summary” of a lengthy report. It very briefly and concretely summarizes what the image (i.e., report) contains.
Some existing CMS platforms and many custom-built websites require you to add that part manually directly in the code of each of your pages. However, those lucky ones like us here get that function much easier in WordPress.
How do image alt tags work in WordPress?
Alt texts aren’t something new. They also aren’t something unique that only WordPress offers. In fact, they are a very old functionality dating back to the first days of the internet at the end of the 20th century.
Since their introduction in 1995 when HTML 2.0 was released, alt tags have served three concrete purposes:
- Alt tags appear on your page instead of the image if the browser cannot load the pictures for some reason.
- Screen readers read aloud alt texts for people using visual assistance when browsing the internet.
- Search Engine bots like Google use them to understand the contents of the image better.
Therefore, alt texts are a great accessibility functionality, and do not require much additional work to be added.
Examples of alt texts in WordPress
Now let’s look at some examples of alt texts. I’ve highlighted which good vs bad examples so that you can understand exactly what you want to include in your alt tags.
Example of a good alternative text
Here’s an image that we inserted on one of our blog posts. As you can see below, the purpose of the image is to show exactly how the reader can achieve the outcome described in the article.
The end result of the alt tag we created is “Good example of NAP on the Contact us page.”
Because the image adds context and helps the user in solving their problem, it’s important that we properly mark it and point that out.
Example of a bad alternative text
Meanwhile, you can also create alternative texts that aren’t helpful. Assume the very same image had an alt tag of “NAP” or “business NAP”.
This alt text is bad because it serves no one and only consumes time. So is that to say that no alt text is better than some alt text? While that’s debatable, our opinion is that such alt tags aren’t helpful from a user accessibility point of view. They also don’t add any context for Google’s crawlers. Even in the worst-case scenario when the image cannot be displayed, the user is still left confused because they see just a random word on the page – instead of a concise string that gives them an idea of what’s supposed to be there.
Therefore, we’ve decided that wasting time to create bad alt tags is not worth it. Instead, when we decide to check up on our site and do that, we find it a much better time investment to actually create alt tags that are helpful.
How to write good alt text in WordPress?
Now you know how to work with the alt attribute for images in WordPress. With that, let’s go over some tips and best practices to ensure you’re using it right.
9 tips for great alt texts in WordPress:
1. Alt texts should be shorter than 125 characters
Keep your alt tags shorter than 125 characters. There are no strict rules on how long alt tags should be, so use this recommendation as a rule of thumb. However, wherever relevant, feel free to sacrifice this general rule for more descriptive texts. Nevertheless, that is usually not needed.
On top of that, this is an example of what 125 characters look like:
“Aaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaa aaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa”
That’s a lot of text! The vast majority of times, you’re able to fit your alt texts into it.
2. Either write good alt tags or none at all
But what about the lower margin? There technically isn’t any (well, except 0, of course). Speaking from personal experience, going the lazy way, and writing just a single word or two is also not worth spending the time on. That is, if you don’t plan on writing good alt tags, they are as good as if you didn’t have them in the first place.
3. Keep related alt tags similar but unique
It’s perfectly acceptable to make your alt tags similar – but make sure they are still unique. Suppose you have images explaining two consecutive steps in a how-to post. In that case, it’s somewhat unavoidable to have duplicating parts.
However, here you can ensure each alternative text is unique enough by clearly explaining each step and marking it with the right number.
For example: alt=” this is the first step of my tutorial on WordPress alt text” vs. alt=” second step for the WordPress alt tags tutorial”
4. Avoid using “image of” unless it’s relevant
Generally, you don’t need to write “an image of” or “a screenshot of” in your alt texts. Search engines and screen readers know that they are dealing with an image, so adding that text is unnecessary. The leftover space can instead be better utilized.
That is, of course, true unless you want to appear in Google for those keyword queries. If your target keyword includes the phrase, say, “screenshot of,” then adding that to the image will indeed help it appear higher in Google search.
For example, suppose that you hear about leaked images of a politician’s email correspondence in the news. Naturally, you might look for something like “images of leaked emails [IMAGINARY NAME OF POLITICIAN].”
Here, adding that “images of” phrase in your alt text will help you show up for that search query – although, of course, that alone doesn’t guarantee that your site will be anywhere near the top.
Similarly, suppose you have posts that target keywords around “inspiration” for a subject. In that case, using phrases like “inspirational images of [topic]” is also acceptable.
5. Do not spam keywords in your alt texts
When writing alt tags, keep the text relevant and avoid spamming keywords.
That is, if your image showcases a dog, don’t write an alt text similar to “dogs canine pet puppy hound man’s best friend dog breed pup.” Instead, opt for something more descriptive that adds context.
Potentially, this text naturally explains the image considering the content and paragraph which surrounds it. I’ll show you specific examples in the sections below.
6. Adding images last helps write good alt texts
Adding images after you’ve fully prepared your blog post can ensure that you don’t miss out on any alt tags and have to spend the extra time on fixing them later. Sometimes, you might even edit an alt tag after you’ve inserted the image only to find that it doesn’t update on the page.
Remember that adding images in WordPress is best done as the last step when creating pages and posts.
7. Use the image name as your alternative text
When sourcing your images, simply remember to name them something very relevant to what you’re writing about. Instead of using spaces, simply use dashes to separate words. With that, once you upload the image, you’re able to simply copy the name you’re already written and remove the dashes. Doing this will give you a perfect alt tag without wasting any time. To learn exactly how I do this process, read this section in our guide on adding alt tags in WordPress.
8. Great alt tags describe the images in detail
When writing alt tags, it’s important to be descriptive. The better you describe what’s on the image, the easier time visually impaired users have in understanding why you put an image there. The same applies to search engines. This practice gives you a better chance of Google showing your site when someone is searching for this type of image. This also happens even for longer, different searches than the exact one you have optimized for – also known as long tail keywords.
9. Put your website design images in the CSS
If an image is made purely for design reasons, you should implement it in the CSS of your website’s style. Doing that will set the right site code structure / hierarchy. It also allows search engines and screen readers to differentiate between images that contribute to the content and images that are used purely as design features.
Following this logic, you have now learned that all images, in fact, should have an alt tag. Implementing an image in the HTML means that the image adds context to the page – and it allows you to add an alt text. Meanwhile, implementing an image in your CSS means the image does not add context but rather help render the page – and therefore you don’t have access to the functionality of adding an alt tag.
Closing words
For most websites, adding alternative texts does not require a huge time investment. Meanwhile, the benefits that come with them are great. You make your website more accessible – and you can potentially be rewarded for that by Google. Learn more about optimizing images for SEO here.
The best way to learn how to write alt tags is to look at some examples and try them out yourself. To learn the actual process of how you can add or change the alternative text to an image in WordPress, read the guide linked here.
Lastly, always make sure to save the changes in WordPress and confirm that the alt tags are visible. Otherwise, because of the way it’s made, sometimes WordPress doesn’t show your new alt texts. If you’ve encountered that before, read this guide on how to fix WordPress not showing alt tags.
