We can probably agree that a web page without images is hard to read. Images not only help to improve user experience, they make tutorials easier to understand and products more enticing for customers. If you have a website, chances are that it includes a lot of images.
But do those images have ALT tags (a.k.a. attributes) for SEO?
I’ll explain the “What, Where, Why and How” when it comes to image ALT tags. The “What” and “Where” sections are a tiny bit technical, but will help you understand these seemingly unimportant attributes. Then the “Why” and “How” will convince you that an image and its “ALT” tag go hand-in-hand. If you add an image to a website, you should add an ALT tag too.
First, the word ALT tag is commonly used, though the correct terminology is alt text, alt attribute or alt description. I will use them all in this tutorial. You can decide which one is right for you. To understand them better, you have to understand a little bit of HTML. Let’s get started with “What” and “Where.”
(1) WHAT…
What is an image ALT tag?
Image ALT tags are short descriptions that can be assigned to images in a web page. They are used in HTML code to describe the appearance and function of an image.
How HTML helps you see Images in a Web Browser
HTML defines the structure and layout of a web page by using tags and attributes. Web designers use a lot of elements with tags and attributes to make up one page. (They can be seen in the source code of a page.) Curious? See HTML in the page source of a web page.
The HTML <img> element embeds an image into the document.
This markup tells a web browser how to display that image. Images are not actually inserted into an HTML page. The tag creates a holding space for the image. When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page.
The browser needs an image file with a name to find the image or you will see a broken link.
EXAMPLE: my-red-train.gif
What is an Image File Name?
The image file name is the name you give an image on your computer before you upload it to your website. You should describe your image in 3-8 words, use hyphens in between and include relevant keywords for SEO.
Example: “my-red-train.gif” is better than “IMG6344376.gif”
<src>, <alt> and <title>attributes
HTML elements have attributes. <img> attributes provide information about the image. This information is usually surrounded by quotes. It is the “value” of that attribute.
<src> attribute
The <src> attribute tells the browser where an image is located. It is a required attribute for an image.
<ALT> and <title> attributes
The <ALT> and <title> attributes are not required. But not including the <ALT> tag is an SEO mistake. You’ll see why in a moment.
(2) Where…
Where exactly is the ALT attribute located?
The <ALT> attribute is contained in the <img> element’s tag along with the <src> attribute.
EXAMPLE: <img src=”my-red-train.gif” alt=“modern red train”>.
The <ALT> attribute has a value of “modern red train.” This information describes the train, but should also relate it to the web page. Image alt text, such as this, is source code information that most visitors will never see. I’ll explain more in a moment.
Common question: When I add an image ALT tag to a web page, I cannot see the text when I scroll over the image. I don’t understand this. Could you please help?
Some people may be confused about the difference between alt text and the image title text attribute. They serve different purposes. We’ll compare them below.
(3) Why…
Why should I include ALT attributes (tags)?
Image Alt attributes were first designed for users of screen readers.
Image ALT descriptions can help visually impaired visitors understand images on a web page, even if they can’t see them. This “eye-opening” tutorial explains the usefulness of ALT text from the perspective of a web developer with vision impairment who uses a screen reader every day: Alt-texts: The Ultimate Guide. It’s worth reading!
Image ALT tags are also good for search engine optimization (SEO).
Image ALT tags help search engines associate images with a web page ‘s content so they can not only understand them, but also properly index them in their search results pages. Search engine crawlers may be able to pick out basic image colors and shapes, but not much more. When a search engine crawls your page, it won’t “see” your images the way you do.
If you’re uploading a balloon image, you will help Google, Bing and other search engines by explaining what kind of balloon you’re adding to your page. Also, what is its purpose? Do you sell balloons? Do you provide hot air balloon rides at your business? Are you using balloons as an example in your blog post about image ALT tags and SEO? Your ALT descriptions would be different based on how your image relates to your web page.
Besides choosing a good image file name, adding ALT text to your images is one of the best things you can do for image optimization, which is a key component of search engine optimization (SEO).
How can I see the image ALT tags on a web page?
In web browsers such as Firefox, the ALT text is displayed only when an image is broken or when all images have been disabled. You won’t see them unless you have broken image links, disabled images, a screen reader or if you’re a search engine bot.
- If you see the image, you shouldn’t see the ALT description.
- If you can’t see the image, you should be able to read the ALT description.
ALT tags versus Title tags
Google Chrome, Firefox and most other browsers do not display the ALT tag when hovering over an image. The title tag is opposite. It appears as a tooltip (in most browsers) when someone hovers over an image and won’t appear if the image doesn’t. Title tags are designed for people. They should should be short and relevant.
EXAMPLE: <img alt=“red train example for tutorial” title=“red train example” src=”https://www.crimsondesigns.com/red-train-example.gif”>
- src=“red-train-example.gif” is the image file (or source).
- alt=“red train example for HTML tutorial” is the image’s ALT text.
- title=“red train example” is the image title.
(4) HOW…
How to Write Useful ALT attribute descriptions
When writing alt attribute descriptions, you should describe an image in a way that is specific but also represents the topic of the page. ALT tags should not be full sentences or paragraphs and should not include special characters. They should have a limit of about 125 characters. Consider 10 words or less. If you have a company logo, then ALT text should include your actual company name instead of “company logo.” ALT tags are a great place to put one or two related keywords. Keyword stuffing, though, should be avoided.
Keyword Stuffing Example:
<img src=”my-red-train.gif“ alt=”red train, train ride, train caboose, train cars and caboose”/>
How to Include ALT attributes in a Web Page
If you’re using WordPress or a similar platform, you should be able to add an image ALT and title description right after you upload an image. You can also click on an image in the body of a blog post to see a dialog box, where you can create and change the image’s alt text. You can also do this through the image edit screen in your Media Library.
If you have a static website created by a web designer or web development company, ALT text has probably been added to all of your images. But you can double check with this helpful Image Alt Test. If you’ve designed your own website, now’s the time to check all your images for these important attributes.
Conclusion
Adding ALT tags to images improves accessibility and user experience. It also provides greater relevance to search engines about your website content which will help drive traffic to your site.
Return to Top