11. January, 2021

Adding The Alt Attribute For WordPress Images | Best Practices & FAQs

Author avatar
Martin Petrov
Marketing @ Morningscore.io

We all understand the benefits of adding images to our WordPress articles.

Mere blocks of text become more lively. You engage your site visitors in a very memorable way. And you slowly cement your brand with the hopes of attracting more potential customers.

But while understanding an image’s contents is a walk in the park for humans, they are a tough row to hoe even for the most advanced algorithms. However, admitting this and ignoring it isn’t optimal either. After all, you rely on these machines to show your website at the top when people search.

Welcome the alternative text attribute – a simple string that aims to, among others, help search engines understand images better. With a little extra work, they can help you rank higher and get more visitors to your website from Google.

I’ve had my fair share of optimizing images, which allowed me to create a process to both create effective alt tags and save time. Let’s break that down below.

Alt Text In WordPress? What Is That?

Assuming someone else sent you here or you aren’t sure what an alt text is, here’s the quick rundown.

Alt texts are HTML attributes added to image tags. They consist of short strings of text which WordPress shows on your page if it cannot display the image. Alternative texts also help users unable to see and search engines to understand an image’s contents.

Alternative texts also have a few names used casually, such as “alt tag,” “alt text,” or “alt attribute.” Generally, they serve three concrete purposes:

  • It is the text that appears on your page instead of the image if the browser cannot load the pictures for some reason.
  • Screen readers use these texts (i.e., read them out loud) for people who need visual assistance when browsing the internet.
  • Search Engines like Google use them to understand the contents of the image better.

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. Now let me show you how.

How To Add Alt Attributes To Images In WordPress

WordPress allows you to add the alternative text attribute to images directly in the Media Library. This functionality sets a “global” alt text for the image, which WordPress then uses in every instance of the image on every page.

This functionality is great because it allows you to save time by doing the work just once. To get that done, follow these steps:

1. Log in to your WordPress Dashboard.

2. Navigate to the Media Library in the left-hand sidebar.

how to add alt attributes in wordpress media library

3. Once it opens, click on any image.

how to add alt tags wordpress media library grid

4. Fill out the “Alternative Text” field on the right-hand side.

adding alt text wordpress attachment details field

Alternative Method #1: Directly In The Page Code

An alternative method would be to add or overwrite the alt tag in the code for each image. For example, suppose that you have an image with a very “generic” alt tag. However, that image also has some more specific role on only one of your pages.

Because of that, you don’t want to re-upload the image. After all, why host the same image twice, and why should the user load the same image twice instead of having it cached upon encountering it the first time, right? In that case, it’s perfectly fine to write the global alt text for the image in the Media Library but replace it with a custom text on some specific pages.

Here’s how you do that once you’ve added the global alt attribute for the image from the steps above:

1. In WordPress, open your blog post or page.

2. Scroll down in the WordPress editor and find the image.

3. Select the image by clicking and dragging your mouse over it.

adding alt select image in wordpress visual editor

4. Now click on the “Text” editor in the top-right corner.

That will show you the exact HTML code structure of the page. Also, it will highlight the specific code for the image.

add alternative text attribute directly in text editor in wordpress

5. Now, in the line of code starting with “<img,” replace the values of the attribute alt=”TEXT HERE.”

add alternative text tags manually in the wordpress code editor

6. Lastly, click “Save Draft” or “Update” your post to apply your changes.

Alternative Method #2: In WordPress’ Image Details Prompt

Lastly, here’s a simple alternative way of adding the alternative text. It works great if you don’t want to mess with the code for images you have previously inserted.

  1. Once you’ve opened the WordPress Editor, simply select the image missing an alt tag and click the “Edit” button.
  2. This action will prompt you with a popup window where the very first field is where you can enter the alt tag.
  3. Upon clicking “Update” in that new window, the image will automatically receive the alt changes that you have requested.

edit image detail prompt window in wordpress for alt texts

6 Best Practices For Image 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.

1. Alt Text Recommended Max Length

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’s 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. Alt Text Recommended Min Length

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. Similar Content In Alt Attributes

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 “Image of” & “Screenshot of” Unless…

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. Don’t Spam Keywords

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. Add Images To Blog Posts Last

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. We’ll now look at how you can handle both of these issues by having a process.

Steal My Process Of Adding Alt Tags In WordPress

Here’s an exact process for writing alt tags for both pages and articles. It works everywhere, regardless of the topic on which you’re writing. This little strategy also brings you some additional Image SEO spillover effect.

When creating blog posts, add your images last – and add the alt tag as you upload the pictures. To showcase how exactly, I’ll go as far as showing you the steps for this very article.

You begin by mapping out images you want to use and marking their spots already in the text.

adding alternative attribute wp process planning images in text

This way, you’re able to name the images with something relevant to the paragraph. That happens because you now know which picture belongs to which section.

For example, if you’re creating a dog food comparison table as an image, you can call that image “best-dog-foods-this-year-comparison-table.png.”

process of naming images for wordpress site to add alternative text

This way, once I’ve uploaded the image to your WordPress Media Library, all you have to do is:

  1. Copy the “Title” of the image (e.g., best-dog-foods-this-year-comparison-table.png).
  2. Paste it in the “Alt Text” field.
  3. Remove the hyphens (e.g., best dog foods this year comparison table).

So why is this process the “Next Best Thing Since Sliced Bread™?” Well, this way, you:

  • Force yourself to write concise image names to reduce messiness.
  • Write good image file names for better SEO.
  • Find it more comfortable to assign images at the correct places.
  • Have a very relevant and descriptive alt tag already done.
  • Fit in the 125 characters rule of thumb – because you naturally prefer short file names to keep things clean.

To wrap up, as you can see in the example screenshot above, you can mark all places where an image has to be added square brackets [like this] directly in the text.

This practice allows you to search in the text once you finish writing and find the exact image spots. It also enables you to figure out whether you’ve missed an image.

Last but not least, batching your work also simplifies compressing images all at the same time.

Thus, you also avoid potentially missing out on optimizing some of them. My favorite one for the job, which is also free, is TinyPng.

Checking If You Added The Text Successfully

There are two simple ways to check if you’ve added your alt tags successfully to your WordPress site. The first method is by inspecting your page’s code, and the second one is by crawling your site with an SEO tool.

To inspect the code of your page:

  1. Right-click on the live page.
  2. In the menu that appears, select “View page source.”
  3. On the page that opens, press CTRL+F on Win or CMD+F on Mac.
  4. In the search field, enter alt=”.

Doing this will highlight all instances of images with Alt text on your site. In turn, this will help you troubleshoot not just one but all images on the page simultaneously.

To check your images with a tool:

  1. Log in your tool of choice – I will, of course, be using Morningscore.
  2. Go to the Site Audit tool.
  3. Scan the page where you made the changes.
  4. Once ready, you will if the change fixes the problem.

checking wordpress image alternative tags with seo tool

Closing Words

Image alt tags won’t make or break your website’s success on their own.  They are simply yet another piece of the puzzle that helps you rank higher and get more traffic. Using the process listed above, you’re sure to complete that task with minimal effort, yet reap all the rewards.

With that, a common occurrence in WordPress is that sometimes you’re unable to see the alt text on the page even after you’ve added to the image. If you’re experiencing that, read this guide showing you how to fix it in 2 simple steps.

GET A 14-DAY FREE TRIAL

Just enter your site in the field and you're good to go!