16. March, 2021

Fixing Alt Tags Not Showing In WordPress In 2 Easy Steps

Author avatar
Martin Petrov
Marketing @ Morningscore.io

Ever wondered why even after you’ve inserted alt attributes to your images, WordPress still doesn’t show them? This is a relatively common occurrence, and we’ve managed to find an easy solution. There are two common reasons why sometimes you don’t see the alt text in your code, even if you’re sure you’ve added it to the page.

If you’re unable to see alt tags in your HTML code, re-insert the image onto the page and empty your website’s cache. WordPress cannot add the new alt tag, and you need to overwrite the existing empty one manually. After that, clean your site cache to ensure you see the freshest content.

Now we’ll look at how exactly these two errors manifest themselves.

Step 1. Fix Overwritten Alternative Text

The overwriting problem is a widespread occurrence on pages/posts where you’ve already inserted the image before adding the alt text to it. When you do that, sometimes WordPress tends to insert an empty alt text – which you now need to overwrite.

WordPress can take the image alt tag from the Media Library when inserting new images. However, if you have inserted an image to a blog post, checking the “Text” editor will reveal that there is an empty alt text in there.

Once inserted, the image without a specified alt text might get a blank “alt” attribute in the code of your page. The same could happen if you’re updating your alt tags in the Media LibraryWordPress won’t update the actual alt tag in the page’s code until you re-insert the page’s image if you decide to change them later. To get that rolling, simply:

  1. Re-insert the image on the page – so that the HTML code part updates automatically and adds your alt tag.
  2. Or copy-paste the alt text from your Media Library to the Image Detail editor on the specific image.
  3. Or copy-paste the alt tag from your Media Library to the HTML code (in the “Text” editor) on your page.

Unfortunately, you have to do this manually in all three scenarios – but the first one is at least for me much quicker to do. Also, consider that you’re editing the HTML of a potentially important page. Both the first and second methods save you from potentially deleting images from important pages and thus breaking them.

fixing alt tags not showing step 1 reinsert the image or alt tag

All of this means that finding alt tags for all images can be a daunting task, especially for large websites with many pictures on each page. Because I face the same challenge, I’ve figured it’s best to use a Site Audit checker. A simple tool like this gives you the full list of all images that are missing their alt tags.

check if all alt tags are working with an seo tool

 

From there, making a to-fix list is much easier and allows you to do all of them in, say, one slow afternoon.

Step 2. See Alt Tags By Clearing Cache

Whenever you implement WordPress changes, it’s best to clear your cache so that you’re sure the changes are applied. Most modern WordPress sites have several layers of caching running at the same time. That is great and more or less critical for good website performance. However, it can sometimes cause the annoying issue of not updating a page’s contents even after you’ve saved your changes.

Here, all you have to do is clear the cache on your website and your local machine (i.e., your computer).

To clear the cache from your website:

  1. Navigate to your Caching plugin of choice.
  2. Click “Clear Cache.”

Your caching plugin is also usually displayed in the top navigational bar of your WordPress dashboard.

clearing cache to see changes with images

If you happen to be using an extra layer of caching through a Content Delivery Network, it’s best you clear that, too. The most widespread CDN is Cloudflare, so much so that it comes together with some hosting plans (e.g., BlueHost offers it by default). Log into your Cloudflare account and clear the Cache, as shown below.

fixing alt tags not showing step 2 clearing cache cloudflare example

 

If you don’t remember creating a Cloudflare account, you will likely find the setup for that in the Dashboard provided to you by your website hosting company.

To Clear Cache From Your Computer:

And now, onto the step of clearing the cache stored on your computer, assuming you’re using Google Chrome:

  • On Windows, press CTRL + F5.
  • On Mac, press CMD + SHIFT + R

For those of you using Firefox, the shortcuts are:

  • Once again, on Windows, simply press CTRL + F5.
  • Similarly, on Mac, press CMD + SHIFT + R.

Lastly, Safari is also a popular browser, and the shortcut key combination there is:

  • On Mac, click CMD + ALT + E.

If you’re using a different browser, simply search for “how to clear browser cache in [your browser here].”

In all instances, you’re simply going to see the website refresh and potentially take a couple more seconds to load. After that, you’re good to go!

Closing Off

That’s it for now, folks! I’ve seen dozens of websites experiencing that issue, and in all instances, simply following the steps above solved the issue. If you’re still having trouble, the reason can be much deeper with how your website is made. In that case, I strongly recommend getting in touch with your hosting provider, who can often help you correct big mistakes like that. Take care!

Get a free 14-day trial

Just enter your website in the field, and you're good to go