We 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.
The best way to learn how to write alt tags is to look at some examples and try it 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.