In this post, you will learn about all the ins and outs of using Alt text for images on your site.
The aim of the article is to explore the importance of the Alt text attribute and best practices of writing it.
Alt text stands for “alternative text” – what appears on the page if the image doesn’t load, for example, when the Internet connection is slow. It is often (mistakenly) called the alt text tag. Actually, it is not a tag but an image attribute.
The alternative text for this image could be “Jack-o’-lantern against a dark background” or “Carved Halloween pumpkin against a dark background.”
Alt text’s primary function is to make the images on your site accessible to visually impaired people who use screen readers: the software will read the alt text in place of the image.
Alt text is also great for SEO because it tells search engines what your images are about, helping to index the images and therefore enhancing your organic traffic.
One obvious venue is Google Images. However, it is not the only one. Visuals are becoming increasingly important: users now prefer to click on something they see rather than on a link leading to some text.
Google has reacted to this trend by packing its SERPs (Search Engine Results Pages) with rich features like videos and images. So, if Google can index the images on your site, they may well appear in the “image pack” on the results page. For example, this is what you can potentially see if you’re a woman looking for “women’s jeans casual.”
(Image: “Women’s Jeans Casual.” Alt text: “Screenshot of a search engine results page featuring three rows of images of women’s jeans”).
If you have an online store, a design studio, a photo portfolio, or any other site that heavily relies on images, you will benefit from image search. Even if the images are not your site’s focus, their optimization for SEO will improve the overall quality of the content, thus boosting the site’s ranking in searches.
To help Google find and understand the images on your site, you must optimize their metadata, including the alt text attribute.
If you want to add alt text manually into the HTML, its syntax is straightforward – you put it after the image source and type in the text within the “ ”:
<img src=”jack-o-lantern.png” alt=”Carved Halloween pumpkin against a dark background”>
It is even easier to configure the alt text in content management systems or e-commerce solutions – just type it in the corresponding field in the admin panel. Here’s a guide for WordPress and Shopify.
Alt text should be included only for those images that carry meaning. If an image is purely decorative, for example, a background image, its alt text attribute should be left blank: (alt=””). This way, the screen reader will completely ignore the image. However, if you don’t include the alt text attribute at all, the software will announce the image presence and read its title, confusing the listener. That is why the alt attribute should always be present, even if it is left blank.
On a side note, it is best to include the decorative images in the CSS instead of the HTML.
It may be tempting to stuff keywords into the alt text in an attempt to get more traffic, but it will most likely have the reverse effect. Google algorithms will view the text as spam and stop indexing the image.
Try to make the alt text sound natural. Ideally, it should be intertwined with the context so that it is perceived as an integral part of the surrounding text.
You can install an actual screen reader to hear how your site sounds. Alternatively, you can imagine how you would read the page to someone on the phone: how would you describe images so that they help the flow of text? The alt text descriptions must be succinct but give enough detail for the listener to construct a mental picture of the image.
A good alt text for this image would sound something like:
“Rustic still life viewed from the top with home-made bread in the center.” (for a photo portfolio)
Or “Artisan brown bread on a wooden table surrounded by rustic decorations and condiments in small bowls.” (for a bakery website or a photo portfolio)
“Bread,” “bread on a table,” “bread and knife,” etc., would not make for a good alt text since they fail to represent the image adequately.
On the other hand, a detailed description of every element in the picture would be too long to sound smoothly within the rest of the page text.
It is recommended that alt text not exceed 125 characters but should be at least 5-7 words long. (The examples above are 73 and 101 characters long, including the blanks).
“Image of” or “picture of” should not be included since screen readers will announce the image, thus causing repetition. Search engines also “know” that they are dealing with an image, so using the word “image” would be a waste of space.
Yes, definitely. Commas and periods should not be neglected. Otherwise, the screen reader software might not manage to read the text in a comprehensible way. Google crawlers may also misread the text for a collection of keywords, which could flag a spam alert.
Yes, the image and its alt text must match. If there is a red mug in the picture, but the alt text reads “blue mug,” the image may be initially indexed as a blue mug, but when Google algorithms catch on to the discrepancy, it will be removed from search results.
If an image contains text, the alt text for the image should include the text. For example, alt=”View of sunset mountains with a huge white “Hatta” sign in the distance.”
This is important because Google is good at recognizing the text within images, and if the alt text doesn’t include the visible text in the image, it may be perceived as deceptive or spamming.
To sum up, alt text can play a key role in your site’s SEO. It works best when it is simple and concise, but at the same time descriptive and to the point. Just as with the rest of the text, the effort invested into producing quality content will pay off in the form of organic traffic to your site.
GetDevDone is a leading provider of various frontend development services, from pixel-perfect design to HTML/CSS conversion to building fully functional web solutions with cutting-edge JavaScript frameworks such as Vue or React. So if you need assistance with any of these tasks, our frontend developers are always happy to help.
Just describe your project through this form or visit the order page.
Want to learn how to develop a Drupal 8/9 module? Follow one (or all) of the guides below In this post, you will find a collection of online guides on Drupal 8/9 module development. Pick one that suits you and follow the instructions. It’s true that becoming a competent Drupal 8/9 module developer takes more […]
React.js and Vue.js are popular frontend technologies for building fast and highly interactive websites. Just like any technology, they have their pros and cons. If you are trying to figure out which one is the best fit for your next web project, this post is for you.
This post is a detailed step-by-step PSD to HTML conversion tutorial for beginners. So if you're making your first steps as a markup developer and want to create your first web page using HTML and CSS, this guide will show you how to do that in the most efficient way.
