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 Library. WordPress 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:
- Re-insert the image on the page – so that the HTML code part updates automatically and adds your alt tag.
- Or copy-paste the alt text from your Media Library to the Image Detail editor on the specific image.
- 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.
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.
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:
- Navigate to your Caching plugin of choice.
- Click “Clear Cache.”
Your caching plugin is also usually displayed in the top navigational bar of your WordPress dashboard.
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.
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!
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!