This article is designed for website developers, designers, or managers who are optimizing websites with numerous images and alternative (ALT) text. The focus is on making images and ALT text more accessible to search engines.
Here is the ALT text checklist:
- Are you using HTML image elements to incorporate images in your content?
- Have you implemented <img> or <picture> elements for semantic HTML markup and provided multiple options for different screen sizes for responsive images?
- Have you refrained from using CSS for images you want to be indexed?
- Did you supply a descriptive filename and alt attribute description for each image?
- Have you utilized the alt attribute to offer alternative text for images that can’t be displayed and to give information about the image for users with assistive technologies such as screen readers?
- Have you employed brief yet descriptive filenames and alt text?
- Have you avoided generic filenames like “image1.jpg” or excessively long filenames?
- Did you refrain from stuffing keywords into alt text or copying entire sentences?
- Have you included alt text when using images as links to help Google better understand the linked page?
- Have you avoided using excessively long alt text that may be considered spammy and relying solely on image links for your site’s navigation?
- Have you developed an image sitemap to give Google additional information about your site’s images?
- Have you used common image formats like JPEG, PNG, GIF, BMP, and WebP and matched the filename extension with the file type?
Continue reading to learn more about best practices for images and ALT text.
Best Practices for Alternative Text SEO
In a nutshell, keep ALT attribute text on web pages between 80 and 125 characters for accessibility. Google may count up to 16 words (roughly 125 characters) as part of your ALT text for ranking a URL in a standard Search (and 50 words in an Image Search).
Optimizing ALT text is crucial for many reasons. Around 2 million people in the UK and 285 million worldwide suffer from sight loss. Googlebot is also somewhat blind, as it relies on the “alt” attribute to understand an image since it cannot directly view images.
You might also like: What Are Backlinks And How to Get Them?
Google has confirmed that it considers ALT text in its page ranking process. Nonetheless, it is crucial to concentrate on delivering valuable, informative content that employs keywords suitably and aligns with the page’s context. Refrain from overloading ALT attributes with keywords, as it could result in a poor user experience and may give the impression of spam on your website.
ALT text serves more for web accessibility than search engine optimization. When crafting ALT text, be descriptive and concise, avoiding keyword stuffing for search engines. Accessibility experts recommend a maximum of 80 characters, so use common sense and be concise with ALT text.
Optimize ALT text for user benefits, considering it’s a light ranking signal compared to stronger ones. However, ALT text is beneficial for some longtail searches. JAWS, a widely-used screen reader, breaks ALT text into 125-character sections for visually impaired users.
Provide a text equivalent for every image for visually impaired visitors. Each image on a page should have an ALT attribute. Failing to include ALT tags with images is a Priority 1 WCAG error, meaning your website would not comply with basic UK DDA and SECTION 508 (in the US) recommendations.
Use ALT attribute text for descriptive text that assists visitors and accurately describes the image. Google will count a maximum of 16 words as part of the image ALT attribute Text. Use empty alt tags (alt= “”) for spacer images or graphic elements used solely for design purposes.
Refrain from repeating text already on the page, rendering the ALT text redundant or superfluous. Also, avoid using phrases like “image of” or “graphic of” to define the image in ALT text. If the image’s content is already presented in context, a null value (alt=” “) is appropriate. Avoid using ALT attribute text alongside the aria—attribute. Google has labeled missing ALT text and keyword stuffing as “bad.”
Before optimizing ALT text for SEO, consider the following:
“Today, my dad cried over the phone; he wanted one week where he could use his computer without my help. He’s blind. Each inaccessible webpage tells him, ‘You aren’t welcome in this world.’ If you don’t know whether your website or app is accessible: it’s not. Start learning.” – Twitter user 2020
“There are 2,140,000 estimated total number of people living with sight loss (2020) in the UK” – Site Loss Data Tool, RNIB 2020
How many words will Google count as ALT text?
It appears that Google will count 16 words as part of image ALT attribute Text, similar to how it has functioned since 2011.
Google still treats ALT text similarly, and characters are not limited to 16 words. Google Search still counts the first 16 words in the ALT tag text toward a resource page’s ranking. However, Google Image Search’s limit is higher, counting up to 50 words in a test.
This information is based on the observations from one page, ‘working a particular way.’
How Many Characters Will JAWS Read Aloud As ALT Text?
JAWS, one of the most famous screen readers for blind users, operates as follows:
“JAWS 6.0 – reads ALT text in 125 character chunks (excluding spaces). If ALT text exceeds 125 characters, it divides it into multiple graphics, each having no more than 125 characters of ALT text, beginning where the previous graphic left off.” – Terrill Thompson, University of Washington, 2020
This limit is worth considering when creating ALT text.
SEO and Accessibility Benefits of Alt Text
“If an image is crucial to the information on the page, describe it visually as a figure or within a regular text paragraph. Sighted users may also use screen readers, often for reading disabilities. Everyone benefits from a text description if your image or graph is essential. In the education sector, providing equivalent information for all students is particularly valuable.” – Jeanne Spellman, Member of WCAG Working Group 2013
Alt text is not only a fundamental component of accessible website design but also an ethical aspect of search engine optimization. Neglecting to include ALT tags with images constitutes a Priority 1 WCAG error, preventing your website from complying with basic UK DDA and SECTION 508 (in the US) guidelines – if that’s a concern.
However, it’s easy to overlook them.
Essentially, a text equivalent for every non-decorative image should be provided, primarily for visually impaired visitors (e.g., through “alt”).
Explanation
Non-text components include images, visual representations of text (such as symbols), areas of image maps, animations (like animated GIFs), applets, programmatic objects, ASCII art, frames, scripts, images utilized as list bullets, spacers, graphical buttons, sounds (activated with or without user engagement), standalone audio files, audio portions of videos, and videos themselves.
Text is deemed accessible to nearly all users since screen readers, non-visual browsers, and braille readers can process it. A text equivalent presented to the user should fulfill a substantially similar function (as much as possible) as the original content. For simple content, a text equivalent may only need to describe the function or purpose of the content. For complex content (charts, graphs, etc.), the text equivalent may be more extensive and include descriptive information.
The non-text element doesn’t mean all visible elements. The types of non-text elements requiring identification are limited to those images that provide information essential for understanding the content or facilitating navigation.
Techniques
When an image indicates a navigational action, like “proceed to the next screen” or “return to the top of the page,” it should be accompanied by actual text that clarifies the image’s purpose or the action it prompts.
When an image represents page content, a text description should be provided alongside the image to convey its meaning.
HTML enables content creators to designate text alternatives using attributes (such as “alt” or “longdesc”) or through element content (like the OBJECT element).
Example:
<IMG src=”filename.gif” alt=”Insert alt-text here”>
Google SEO: Image Alt Tags Best Practices
“Adding an alt tag is straightforward and should be done on all your images. It helps with accessibility and helps us understand what’s happening in your image.” – Matt Cutts, Google, 2007
Text in Alt tags is ‘counted’ by Google (and Bing) at a page level, but it’s important not to overemphasize them – as with every aspect of SEO.
In the past, I’ve seen websites penalized for spamming invisible elements on a page. Avoid doing that.
ALT tags are important, and getting them right is a practical challenge.
Previously, when it was relevant and time permitted, I aimed to include the main focus keyword of the page in an ALT tag once when optimizing a page. Just enough to make the page ‘relevant.’ Nowadays, I focus more on adding text directly relevant to the image itself.
I wouldn’t optimize your ALT tags (or Alt Attributes) JUST for Google, though.
Use ALT attribute text for descriptive text that benefits visitors—and keep them unique where possible, as you should with SEO Title Tags and meta descriptions.
What Is The Best Way To Optimize Alt Text For Google?
“Although there isn’t a strict right or wrong length for text alternatives supplied via the img element’s alt attribute, the general agreement is that if the text alternative exceeds 30-50 words (2 to 3 sentences), it should not be regarded as a short text alternative and shouldn’t be displayed using the alt attribute.” – W3C, 2020
Although Google allows for 16 words, I wouldn’t optimize ALT text solely for Google; rather, optimize ALT for screen readers (where possible):
“Utilize the alt attribute to describe the image. For instance, if there’s an image of a large blue pineapple chair, the appropriate alt tag would be alt=’large blue pineapple chair.’ When the image serves as a hyperlink to a specific page, use the title attribute to convey what will occur upon clicking the image. For example, if clicking enlarges the image, the title attribute could be written as, title=’See an expanded version of the large blue pineapple chair image.'” – John Mueller, Google 2017
Barry continues with a quote:
“Since Googlebot can’t directly view images, our primary focus is on the information provided through the ‘alt’ attribute. Feel free to enhance the ‘alt’ attribute with ‘title’ and other attributes if they offer value to your users! For instance, if there’s an image of a puppy (which seems to be quite popular at the moment :-)) Playing with a ball, you could use ‘My puppy Betsy playing with a bowling ball’ as the alt attribute for that image. Additionally, if there’s a link surrounding the image that directs to a larger version of the same picture, you could use ‘View this image in high-resolution as the title attribute for the link.” – Barry Schwartz, SERoundtable 2017
For the latest from Google:
“Do not incorporate crucial text within images: Refrain from placing text inside images, particularly significant elements such as page titles and menu items, as they may be inaccessible to some users (and image-based text cannot be translated by page translation tools). To maximize the accessibility of your content, maintain text in HTML format and supply alt text for images.”- Google Search Central Documentation, 2021
When To Use NULL Alt Text?
“Decorative images do not contribute additional information to a page’s content. For instance, the information conveyed by the image may already be available through nearby text, or the image may be included solely for aesthetic purposes. In such cases, a null (empty) alt text should be supplied (alt=”) to allow assistive technologies like screen readers to disregard them.” – W3C, 2021
A practical tip is to include empty alt tags (NULL ALT) for spacer images or graphic elements on a page used solely for design purposes.
<IMG src=”filename.gif” alt=””>
Conclusion
In conclusion, ALT text plays a critical role in making your website accessible to visually impaired users and optimizing it for search engines. Keep these key considerations in mind when working with ALT text:
1. Ensure that all non-decorative images have an ALT attribute with descriptive text that accurately represents the image’s purpose or content.
2. Optimize your ALT text for screen readers rather than for search engines like Google. Aim for concise, descriptive text that is relevant to the image.
3. Ensure the ALT text reflects that function when an image serves a navigational purpose.
4. For decorative images that do not convey any essential information, use a null (empty) ALT attribute (alt=””) so that screen readers can ignore them.
5. Avoid embedding important text within images. Not all users can access this information, and translation tools cannot work with text embedded in images.
By following these guidelines and best practices, you can create an accessible and search engine-friendly website that caters to diverse users. Remember that optimizing your ALT attributes benefits visually impaired users and contributes to an overall better user experience and improved search engine rankings.
A practical tip is to include empty alt tags (NULL ALT) for spacer images or graphic elements on a page used solely for design purposes.
<IMG src=”filename.gif” alt=””>
Read Next: 6 Essential Questions You Need to Know on How to Achieve Keyword Research for Effective SEO.
For SEO audits, click here to book your appointment.
What’s Your SEO Score?
Enter the URL of any landing page or blog article and see how optimized it is for one keyword or phrase.
