Table of Contents
What is alt text?
This text is a little snippet of detailed information about what an image shows, and it is also called an alt attribute, an alt description, or an alt tag.
It was developed to assist the blind and visually impaired with understanding what an image represents when they receive the text excerpt from a screen reader, thus enhancing their web browsing experience.
Beyond that, alt text is very important for enabling search engines to accurately recognize and appreciate your website’s images when they analyze your content in response to a search.
Let’s see some statistics on ALT text
- The Google search engine results page shows images in 38% of cases.
- If more than four images appear in your content, then you’ll only receive a green bullet if more than 30% of the images use the keyphrase in the alt text.
- In order to prevent you from keyword stuffing, you will see an orange bullet when the keyphrase appears in over 70% of your images.
Besides describing the content of an image, alt text also explains the context of the image.
Alt text is often confused for alt tag. Alt text is part of the HTML code. Alt text is the description of the image, in the HTML code, which is mentioned in the Alt tag.
Alternative text refers to text that is not visible when images are not loaded properly, and you have probably encountered it before. This is a written copy that replaces images that cannot be displayed.
Image Alt Text Best Practices
It is imperative that the alt text for images be specific and also reflect the subject matter of the website it supports. Does that make sense? The following are some vital tips for optimizing image alt text:
- Be specific when describing the image. Make sure to consider both the subject and context of the image.
- The context should be related to the topic of the page. Add contextual information based on the content of the page if the image doesn’t show an identifiable place or person. For example, alt text for a picture of a woman eating out could be “Woman eating alone in a restaurant” or “Woman enjoys food,” depending on the topic of the webpage.
- Do not exceed 125 characters in your alt text. Normally, screen-reading software stops reading alt text here, which leaves the visually impaired frustrated while trying to explain long-winded alt text.
- Rather than starting your alt text with “picture…” or “image…”, start your description right away. The HTML source code will identify the image as an image for screen-reading tools (and Google, for that matter).
- Don’t overuse your keywords. If the target keyword of your article can be easily included in the alt text, do so. Instead, you may want to construct a longtail keyword that just contains terms that matter most.
- Keep your alt text short – don’t stuff it with keywords for every single image. Include your keyword in at least one of the images in your blog post if it contains a series of body images. Select the image that best represents your topic, and assign your keyword to it. Make sure your media surrounds your image with aesthetic descriptions.
- Make sure there are no spelling errors. If you misspell words in your image alt text, users might have a bad experience or search engines may get confused. Make sure that alt text matches the content on your website.
- Every image does not need an alt text. For SEO, user experience, and accessibility, alt text should be included in most images on a page. It is best to leave the alt attribute empty for images that are simply decorative or that are described in surrounding text.
- Form buttons shouldn’t be overlooked. Provide an alt attribute to an image that appears as the “submit” button on your website. It is a good idea to provide alt attributes for image buttons describing what the buttons will do, such as “search”, “apply now”, “sign up,” etc.
The Effects of Alt Text on SEO
Using computer vision algorithms, alt text is combined with contents of a page and computer vision algorithms to decode the subject matter of images, according to Google.
By adding alt text to the images, Google can work out what the whole page is about, not just the images themselves. Adding alt text to your images will increase their chances of appearing in image searches.
Take into consideration how your audience might like to find answers to questions about a topic when creating content on that topic. Many Google searches want the image itself, embedded within your webpage, instead of the classic blue, hyperlinked search result.
Those visiting a page to find out how to remove duplicate entries in Excel might prefer a screenshot so they can understand how to do it instantly.
Why is image alt text important?
The importance of image alt text has already been mentioned in terms of accessibility, user experience, and traffic to images. You can write an image alt text that is as descriptive and impactful as possible, by understanding these reasons. We will examine the most important reasons behind the image’s alt text below.
Accessibility
Web Content Accessibility Guidelines 1.0 were published by W3C in 1999 in an attempt to explain how better accessibility for users with disabilities could be achieved.
“Provide alternative auditory and visual content, such as videos, sounds, applets, or other equivalent information.” This meant that any website including images (or movies, sounds, applets, etc.) should include the equivalent material.
Say a page on a website contains a picture with an arrow pointing to the table of contents.
It might make sense to write “Go to table of contents.” as a text equivalent, allowing users with assistive technologies to understand what the image means without seeing it.
So basically Alt text creates visual content that is accessible to all kinds of users. This includes anyone with visual impairments.
UI/UX
Alt text is present to provide users a better experience especially for users with disabilities. Considering this, it provides a better user experience to all users.
For instance, your website can’t load images because the visitor has a low-bandwidth connection. In addition to the broken link icon, the alt text will also be displayed. Therefore, they can deduce what the image is attempting to convey.
As an example, the left image may be visible to the user. People with disabilities, bandwidth issues, or other reasons can’t see it, but they’ll hear the alt text instead. Having alt text in place will provide users with a better user experience.
Visual Traffic
Images can be turned into hyperlinked search results in both Google Images and as individual images via the alt text in the image.
Image packs are search results that are special. They are displayed in a horizontal row with links in any organic search results.
Visitors can also find you organically via images in Google Images and in image packs. A lot more visitors could be generated in this way – at least in HubSpot’s case.
HubSpot Blog began focusing on optimization of image alt text aggressively in 2018 due to a new SEO strategy implemented.
The blog’s traffic increased from 160,000 organic views to 779% in less than a year as a result of this strategy.
Adding Image Alt Text to Your Website
The big question is, how do you begin to create alt text when writing blog posts and webpages? If you are unsure where alt text could be used for previously untagged pictures, consider performing a basic audit on your existing content. You should keep an eye on how your organic traffic changes for those pages that you provide with new alt tags.
Optimizing more images will have a positive effect on your search engine optimization efforts.
Alt Text FAQ
We hear the following questions a lot when working with alt tags/text:
Where Can I Find an Alt Tag on a Page?
Select “Inspect” from the menu when you right-click anywhere on the page. On the right side of the screen, you can view the code of the page.
Click on the first icon on the left of the HTML code panel, then find the image on the page whose alt tag you wish to see and click on that too. This will highlight all the attributes of the image along with the HTML code for that element.
Is it Possible to Read Alt Text from HTML Code?
In the panel displaying the page’s source code, you must find the appropriate HTML tag once you click on “Inspect.” An alt text tag precedes the alt text description with “alt=”.
How Do I Know if an Image Has Alt Text?
The alt text of an image is empty if only two quotation marks follow “alt=” in the source code, i.e., if no text appears between the quotation marks in the alt tag.
When putting alt text, can you use periods and commas?
The answer is yes, and you should. A better user experience can be delivered by screen readers when alt text includes proper punctuation.
When an image does not load correctly, alt text is displayed. User experience can be improved by using high-quality alt text.
Is there a proper length for Alt Tags?
Screen readers generally accept alt text up to 125 characters in length.
Image Alt Text and Its Importance
You should keep alt tags in mind as you optimize your images for search engine optimization and user accessibility. The alt text you write helps users and search engines understand the images you have on your site. If you follow the steps above, you’ll have no problems creating user-friendly and search engine-friendly pages.
About the Author
My name’s Semil Shah, and I pride myself on being the last digital marketer that you’ll ever need. Having worked internationally across agile and disruptive teams from San Fransico to London, I can help you take what you are doing in digital to a whole next level.