How to add alt text to WordPress external featured images
Learn how to add alt text to the external featured images of your WordPress posts.
2020-12-08
1. Get an image
First of all we need an image. I generate all my images on Vampixel, but you could get your image from another source. In our example I will use an external featured image, so I asked Vampixel to store my image on the Internet and copied the generated URL.
2. Create a new post
Now that we have an image address we will create a new post. To do this, access your WordPress site and in the left side menu select "Posts". Your list of posts will appear, but also the "Add New" button. Click on it.
3. Type the title
I added the title of my post "How to add alt text to WordPress external featured images" and notice that we have two "Featured image" boxes, the first one for internal images and the second one for external images. In this example we will use the second box. If you don't have it on your site, you need to install the Featured Image from URL (FIFU) plugin.
4. Paste the image URL
Paste the image address in the "Image URL or Keywords" field and then click on the "Preview" button. If the image address is correct, our external image will appear. Our image is external because it is loaded directly from an external server, it does not exist in the WordPress media library.
5. Alt/Title attribute
The image, a link to remove the image and finally a field for entering alt text will be displayed. The purpose of the alt text is to describe the image if a visitor to your site is unable to view the image for any reason (slow connection, incorrect URL, deleted image, etc). This field will also be used by page readers and search engines. So alt text is important for your website's SEO.
6. Describe the featured image
My featured image is basically formed by the combination of two images, the WordPress logo and also a cracked glass. So I will set the alt text of the image to "WordPress logo and cracked glass". Simple as that.
7. Publish
Now that our post has a title, a featured image and the alt text, we are ready to publish it. Click on the "Publish" button and then on the "View Post" link. You will be directed to the post page.
8. No visible changes
Our post has been published. As you can see, the title of the post, the featured image, a link to comments, the category, the author and other elements are being displayed. But where's the alt text "WordPress logo and cracked glass" anyway?
9. View page source
The alt text is an internal attribute. In a normal situation it will not be displayed in your browser, unless you choose to view the page's source code. You can do this by right clicking on your website and selecting the "View Page Source" option. Doing this we can see the alt text next to the image URL, which is also not displayed to visitors, but also plays an important role in rendering the visual elements of your website.
A. Auto set alt text
As you may know, there are several ways to automate the creation of WordPress posts. Some sites are completely controlled by robots, with no one to describe the images, as we did just now. If this is our case and we don't want to leave the alt text blank, which could be bad for SEO, we could use a FIFU option that copies the post's title to the alt field. This is done when the post is published or updated. However, it must be said that most of the time the title of the post is not able to describe in detail what appears in the image, so the use of this functionality is not ideal.
A.1. Alt text not defined
To test the "Copy the post title to FIFU alt/title field" functionality, I will leave the alt field blank and click on the update button. According to FIFU, after updating the post, the title of the post will be copied to the alt field.
A.2. Alt text is the post title
Opening the code again, we find that, although we did not define a text for the alt attribute, it now contains the text "How to add alt text to WordPress external featured images", which is exactly the title of the post. So the FIFU feature worked.
B. Ignore the alt/title field
FIFU also has a second option for the automatic definition of alt text. The option "always use the post title as image title" makes the alt attribute always receive the title of the post, even if the alt/title field was previously filled with some other text. I believe that very few sites use this option, but it exists and we will test it now.
B.1. Alt text is defined
As you can see, we are again editing our post and changing the value of the alt field to "Testing ...". In fact, we are just testing the other functionality of the FIFU which, according to the description, should now ignore the text we set for alt and use the post title.
B.2. Alt text is the post title
Once again we updated the post and found that in the source code of the page the alt attribute, despite being defined as "Testing ...", was replaced by the title of the post. The FIFU feature worked again.
C. Alt text working
To show how the alt text would work in practice, I disconnected my computer from the Internet to prevent the external featured image from loading. Without a network, the site, which is running locally, is not able to display the featured image. Then the browser displays the alt text instead of the image.
