Joost de Valk
Joost de Valk is the founder and Chief Product Officer of Yoast. He is an internet entrepreneur who, in addition to founding Yoast, has invested in and advised several startups. His core competencies are open source software development and digital marketing.
Adding pictures to your articles will encourage people to read them, and well-chosen pictures can also back up your message and get you ranked well in picture search results. However, you should always remember to give your images good alt attributes. Because Alt-Text reinforces the message of your articles with search engine spiders and improves the accessibility of your website. This article will walk you through what alt and title attributes are and why you should tweak them.
table of contents
Do you have an orange bullet for the key phrase in the alt attribute check in Yoast SEO? Read how to color this ball green.
What are alt attributes and title attributes?
This is a full HTML image tag:
The alt and title attributes of an image are commonly referred to as the alt tag or alt text and title tag. But technically, they’re not tags, they’re attributes. The alt text describes the content of the image and the function of the image on the page. So if you are using an image as a button to buy Product X, the alternate text should read: “Button to Buy Product X”.
The Alt tag is used by screen readers, which are browsers that are used by people with a visual impairment, for example. These screen readers tell you what to see in the picture by reading the alt tag. The title attribute is displayed as a tooltip when you move the mouse over the element. In the case of an image button, the image title could therefore contain an additional call-to-action. However, this is not a best practice.
Each image should have alternative text. Not just for SEO purposes, but also for accessibility. Because otherwise people with a visual impairment do not know what the picture is about. A title attribute is not required. Also, most of the time it doesn’t even make sense to add it. They are only available to people who use a mouse (or other pointing device) and the only time the title attribute is required for accessibility is enabled.
If the information conveyed by the title attribute is relevant, consider making it available elsewhere in the clear, and if it is not relevant, consider removing the title attribute entirely.
But what if a picture has no purpose?
If you have images in your design that are only there for design reasons, you are doing it wrong. These images should be in your CSS, not your HTML. If there’s really nothing you can do about these images being there, give them a blank alt attribute like this:
The empty alt attribute ensures that screen readers skip the image. If you use WordPress, you can leave the field for “Alt-Text” in the image settings blank.
Alternative text and SEO
Google’s article about images is headed “Use Descriptive Alt Text.” This is not a coincidence. Google places a relatively high value on alt text. You use it to determine what is in the image, but also how it relates to the text around it. For this reason we have a function in our Yoast SEO content analysis that specifically checks whether you have at least one image with an alt tag that contains your focus keyphrase.
What is the effect of checking the “keyphrase in the image alt attributes” in Yoast SEO?
The keyword when evaluating alt attributes for images in Yoast SEO comprises two checks: a) whether images are included in your post and b) whether these images have an alt text with the focus keyphrase. First of all, you should always remember to add images to your posts and pages as these will make your content more vivid and engaging. But by adding alternate text to your images as well, you are providing screen reader and search engine users with a textual description of what is in that image. This improves accessibility and when you include your keywords you also increase your chance of ranking in image search.
We’re definitely not saying that you should spam your focus keyphrase into every alt tag. You need good, high quality, related images for your posts where it makes sense to have the focus keyword in the alt text. Here is Google’s advice on choosing good alt text:
When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in the context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as this leads to a negative user experience and your website can be viewed as spam.
If your picture is of a specific product, include both the full product name and product ID in the alt tag to make it easier to find. In general, if a key phrase could be useful for finding something in the image, include it in the alt tag whenever possible. Also, don’t forget to change the name of the image file so that it actually describes what is on it.
If your content has more than 4 images, you will only receive a green bullet point if the percentage of images with the key phrase in alternative text is between 30 and 70%. If you are using the key phrase in more than 70% of your images, your bullet will turn orange to avoid being filled with keywords. If you have Yoast SEO Premium, the plugin also takes into account synonyms that you added to your key phrase.
Go premium and Get access to this feature!
Get access to many functions and all of our SEO courses with the Yoast SEO Premium plugin:
Yoast SEO isn’t the only one of our SEO plugins with a rating that focuses on the images on your page. We recently updated our WooCommerce SEO plugin to help people fully optimize their product pages. This update includes some changes to the checks that specifically focus on product pages. One of these changes is the addition of the alt-tags rating for images, which checks that all images on the page are alt-tagged. Because any images you use on your product pages should be relevant images of your product. Images that must have a description.
alt and title attributes in WordPress
When you upload an image to WordPress, you can set a title and an alt attribute. By default, it uses the image file name in the title attribute. And if you don’t enter an alt attribute, it copies it into the alt attribute. While this is better than not writing anything, it is pretty bad practice. You really need to take the time to create appropriate alt text for each image you add to a post. Users and search engines will thank you.
How to add alt attributes in WordPress
WordPress makes it really easy to add alt attributes. Follow the steps below to add them to your pictures. Your (image) SEO will really benefit if you get these details right. Even users with a visual impairment will like you all the more for it.
- Log into your WordPress website.
When you are logged in, you are in your ‘Dashboard’.
- Open the post or page to edit the content.
- Click on the image block to open the image settings in the block tab of the sidebar.
You will see the Image Settings appear in the Block tab of the sidebar.
- Add the alt text and title attribute.
- Click on “Update”.
Click the ‘Update’ button in the upper right corner.
Read more about image SEO
We have a very popular (and longer) article on image SEO. This post goes into many different ways to optimize images, but it lacks relative detail when it comes to alt and title tags – consider this an add-on to this article. I recommend reading this article if you want to learn more about image SEO best practices.
Read more: Optimizing images for search engines »