Image Alt Text

What is alt text?

Alt text (alternative text) is a description of an image within the HTML code of the webpage that provides information about the appearance and function of the image. Alt text is also known as “alt attribute” or “alt tag”.

Here’s what it looks like in the HTML code:

Why is alt text important?

Alt text has 2 main purposes:

  • To improve user experience and accessibility of the webpage
  • To improve image SEO of the webpage and ranking

1. UX and Accessibility

The original purpose of the alt text was to describe images to visually impaired people who were unable to see what is on the picture and therefore make it more accessible for them.

These visitors use various screen readers or browsers that help them better understand what is on the website, including the images.

Instead of displaying the image to the user, the screen reader looks at the alt text of the image and reads its content.

Thanks to this, users can understand what is on the picture and get a better overall experience.

2. Image SEO

Alt text is not only important from the UX perspective; it can improve the on-page optimization and topical relevance too.

Search engines like Google can’t really “see” the image so they can misunderstand its purpose or context within the webpage.

Therefore, they use alt texts as a way to better understand the image and how it relates to the content around it.

As stated in Google’s Images best practices:

“Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.”

The most important reason for using the alt attribute is that alt text can help images to appear and rank in Google Images.

With a good alt text description and correct keyword usage, images can:

  • Improve the topical relevance of the page
  • Serve as a potential ranking signal for Google

Note: Alt text does not need to be used only for images on the website.

You can also add alt text to social media images (Facebook, Twitter or even images in email templates) and improve their overall UX and accessibility.

Alt text best practices

When writing a good alt text, several factors should be taken into the account.

Remember: the purpose of the alt attribute is to help visually impaired people to understand the content of the image as well as help search engines like Google to crawl and index your images correctly.

Here are common practices and rules that should help you achieve these 2 purposes.

1) Be descriptive

Alt text should always be as specific and accurate as possible.

You should write a clear and objective description of the image so that any person (or search engine) that is unable to see the image can have a clear idea of what is in the picture.

If it makes sense, try to add an appropriate keyword phrase to the alt text – it will signal search engines that the picture (or overall webpage) might be eligible for certain search queries.

If the image itself contains important text, it should be transcribed into the alt attribute as well – unless it is present in the text that surrounds the image.

2) Be concise

Alt text should be concise and short – a few words maximum.

Even though the text should be as specific and descriptive as possible, it should not be written in lengthy sentences.

Users can find long alt texts annoying and exhaustive.

Besides, the majority of the screen readers or browsers do not read alt text that is longer than 125 characters.

Note: If you need to use a much longer description to fully and accurately describe the image (e.g. images of graphs, charts or maps), you can use the “longdesc”attribute as a reference to the longer description page.

3) Avoid keyword stuffing

Do not stuff keywords into the alt text just for the sake of it.

Filling alt text with many irrelevant keywords might degrade the user experience.

Furthermore, keyword stuffing can be a signal for search engines that your website is spammy and not very useful for visitors.

Always focus on a truthful description of the image first and then (if possible) add a relevant keyword to it.

4) Don’t use “picture of…”

Screen readers and search engines already assume that the description belongs to the image.

So there is no need to use the phrase “picture of…” – just start writing the actual description of the image.

On the other hand, you can describe the type of image if it is necessary (e.g. illustration of …, painting of …, chart etc.).

Examples of a good alt text

Writing a good alt text is no rocket science.

Here are three examples that will demonstrate various types of alt texts for images.

Example #1

  • Bad: alt=“La Fiesta Mexican food restaurant cuisine top meals Mexico dish dinner cafeteria”

The first example is a common bad practice for writing an alt text since it is only filled up with keywords without any proper description.

Always avoid keyword stuffing since it does not provide any value to visually impaired users and only hurts your website from the SEO perspective.

  • Okay: alt=“La Fiesta Restaurant”

This example is a little bit better since it provides a general description of the picture and is not filled with spammy keywords.

On the other hand, it is not the best alt text since it is not very specific and does not provide a detailed description of the image.

  • Best: alt=“La Fiesta Authentic Mexican Restaurant sign”

This is probably the best alt text you can write – it is very descriptive, the text from the image is transcribed and it also tells the users that it is a “sign” of the restaurant and not the restaurant itself.

Example #2

  • Bad: alt=“guitar”

Although this example is not necessarily the worst possible alt text you can write, it is not a good one either.

The alt text is short and tells the visitors what is on the picture, but it is not very descriptive and rather vague (we do not even know what kind of guitar it is).

  • Okay: alt=“Les Paul guitar”

This example is a little bit better since it informs us about the brand.

On the other hand, it is still not very specific and descriptive, especially when it comes to products like guitars.

  • Best: alt=“Epiphone Les Paul Standard 60s Iced Tea”

This is the most descriptive and accurate alt text you can use for the image.

It tells the user what kind of guitar it is, what is the model of the guitar, even what is its color.

Being very specific and descriptive about the product images is a common good practice, especially for e-commerce websites with various product pages.

Example #3

  • Bad: alt=“”

Since the example does not contain any text, visually impaired visitors or search engines can’t know what the image is about.

With a few exceptions (see below), you should always fill up the alt attribute with some descriptive text.

  • Okay: alt=“Scuba diving in the sea”

The description in this example can be considered as somehow good and relatively accurate. But it is still a little bit abstract and vague – the context of the image is missing and the visually impaired visitor can imagine something completely different.

  • Best: alt=“Scuba diver exploring a wreckage of an airplane”

This is a much better alt text example when compared to the previous one – it provides an accurate description with the context in mind and therefore it is immediately clear what is in the image.

How to add alt text in WordPress

Adding alt text to the images in WordPress is a pretty easy and straightforward process:

  1. Open new or existing post/page in your WordPress editor
  2. Upload your image or click on the existing one – it will open the image settings on the sidebar
  3. Click on the empty alt text box and add the alternative text
  4. Hit the “Update” button

Another way to add alt text in WordPress is via Media » Library.

Simply upload a new image and click on the “Edit” button – you will access image settings where you can add alternative text.

Info: If you would like to know how to add alt attribute in other popular CMS platforms, check out these guides for:

Do I always need to use alt text?

No.

Adding alt text to your images is a good practice in the majority of cases. But there are some exceptions when it is unnecessary or even not recommended.

Let’s take a look at a few situations when you should leave the alt tag empty.

Illustration without useful content

Many websites use illustrations or stock images for aesthetic purposes or just as a visual element that is somehow familiar to the visitor.

Although these kinds of images can look nice and serve as decorative pictures that convey some emotion or feeling, they don’t provide any useful content for the visitors.

Let’s take a look at this example:

We can see from the example above that the image of the keys does not serve any informative purpose.

Although we could arguably add alternative text to it (e.g. “an illustration of keys”), it would not be useful to the visitor in any way.

Image surrounded by descriptive text

If the explanation and the accurate description of the image are presented in the surrounding text, the empty alt attribute (alt=””) is probably the best practice since writing the same information in the alt text would be rather redundant.

Take a look at this example from the guide to our tool SERPWatcher:

The description of the image is already provided in the text right above the picture.

Although we could write a short descriptive alt text (e.g. “Desktop/Mobile switcher in SERPWatcher”) it would be rather useless to the user – the information from the image would be repeated twice.

Decorative images

Decorative images, icons, visual spacers etc. should always have an empty alt text (alt=””).

These types of images do not carry any important information – their only purpose is to improve the visual appearance of the webpage.

Here is a simple example of decorative elements:

The little icons serve just as visual elements in the top menu.

As images, they don’t convey any content or provide any information that should be read to the visitors via alt text.

Therefore a null alt attribute (alt=””) is appropriate – any other description would be rather confusing, unnecessary or annoying to the user.

Note: Although it is recommended to leave empty alt text for decorative images, the best practice is to remove them from the HTML of the webpage completely and use them as background via CSS.

Share
Disqus Comments Loading...