Alt Text for SEO and User Experience
Learn why image alt text is crucial for SEO and user experience. Discover best practices and examples to optimize your website’s images.
Did you know that uploading images to your website without taking alt text into consideration can hurt your user experience as well as impact SEO? It’s true. If an image does not load or screen reading tools are unable to detect image alt text the user experience will not be consistent. Similarly, with SEO, search engines such as Google, Bing, and Yahoo are unable to understand images unless an alt tag has been set.
Alt text may seem like a small part of your website, but it’s an important step to consider to maximize user experience and increase searchability.
What Is Alt Text?
Alt text provides a description for each image that clearly describes what it shows. This provides search engines and those using screen readers a text alternative for an image. Making it easy for them to understand. Originally, alt text was used to make content accessible for the visually impaired. Now, with the emergence of Google and other search engines, it’s also used to improve SEO performance by adding further relevancy signals to a web page. This ultimately helps Google better understand the images on a web page and helps it rank. Image Alt Text for SEO and User Experience.
Why Is Alt Text Important?
Ranking high on Google is not the only reason why image alt text is important. It also adds to the overall user experience making your content accessible to everyone. Understanding this will help you write the best alt text possible for the images that appear on your website. Below we’ll take a deeper look into why image alt text is important.
Increases user experience
Alt text doesn’t just improve the user experience for those with a disability. It provides a better experience for all of your website visitors. For example, if someone visits your website with a low-bandwidth connection their images won’t load. Instead of them seeing a blank space or broken link icon, they’ll see your alt text. From there they can piece together the message the image was meant to convey.
There are some instances when a sequence of photos appears on a single web page, but visitors can only view a few – due to bandwidth issues, a disability, or another reason. Implementing alt text will fill in the blanks. This helps to provide the same experience to every viewer on your website.
Drives Image Traffic
Using alt text on your images has both explicit and implicit SEO benefits.
Although search engine image recognition technology has greatly improved over the years, search crawlers can’t “see” the images on a given website page like we are able to. That’s why alt text is needed to tell search engines like Google what is appearing on the page. With the absence of alt text it’s possible to unintentionally rank for the wrong keywords or miss out on ranking altogether.
Here’s an example: Google might see the following image and be able to decipher that it’s a view of the ocean from the shore.
Photo by Asad Photo Maldives from Pexels
If you’re trying to rank for “clear blue ocean water” though, you’ll need to lend the search engine a helping hand to rank for the keywords you’re aiming for.
In other words, alt text offers you another chance to include your target keyword. It’s important to use text that both describes the image and, if possible, includes one of your keywords or phrases you’re targeting.
Accessibility
In 1999, W3C published its Web Content Accessibility Guidelines 1.0 in order to explain how to make digital content more accessible for users with disabilities. One of the guidelines outlined states that website pages should “provide equivalent alternatives to auditory and visual content.” That means any web page that includes images (or sounds, movies, gifs, ect.) should include equal information to its auditory or visual content.
For example, say a web page contains an arrow that indicates readers to slide to the right for more information on a product. An equivalent text for that might be “Slide right for product information.” Image Alt Text for SEO and User Experience This would allow readers using a screen reader or other assistive technology to understand the image being portrayed without seeing it.
Ultimately, alt text for images and auditory content is necessary to give every user the same experience on your website.
Image Alt Text Best Practices
Image alt text is meant to convey the “why” of the image in relation to the content of a website, landing page, or document. It is read aloud to users by screen reader software, and it is screened by search engines. It’s also what appears in place of an image that is unable to load correctly or missing.
There are several best practices to follow when crafting image alt text for a website. Here are a few that you can begin implementing today to improve your website’s user experience, search engine ranking, and overall accessibility.
Keep your alt text short and sweet.
Lets face it, although your readers will appreciate the image alt text, nobody wants to read an unnecessarily long description. It’s best to keep your alt text fewer than 125 characters. Most screen reading tools typically cut off at this point, and if stopped at an awkward moment it will hinder visually impaired readers from understanding the image before them.
Add context related to content on the page.
If your image doesn’t include something that is easily recognizable, adding context based on the content of the page will be helpful for those viewing it. For example, the alt text for a stock image of a man driving a bus could be “Man driving city bus” or “Man working on public transportation bus”, depending on the topic of the webpage.
Be specific in your description.
Alt text is specifically designed to provide text explanations of images for users who are unable to view them. Use both the image’s context and subject to guide you through this step.
Sprinkle in keywords.
It’s best to sprinkle your keywords sparingly. Also, it’s important to stray away from squeezing them into places they don’t belong either. Only include your web page or article’s target keyword if it naturally flows with your alt text. Focus on crafting alt text that is descriptive and provides context to the image, and if possible, include your target keyword, and keep it at that.
Jump right into the image description.
Adding image alt text is not an opportunity to explain every item that appears in the image. It’s best to jump right into explaining the important aspects of the photo. Also, avoid beginning your alt text with “image of…” or “picture of….”, Google and Screen-reading tools will identify it as an image from your webpage’s HTML source code.
Don’t add alt text to every image.
You should add alt text to most images on a webpage for UX, accessibility, and SEO – however, there are a few exceptions. For example, images that are strictly for decorative purchases or are described in text nearby don’t need to be accompanied by alt text.
Examples of Image Alt Text
Although these best practices are fairly simple, implementing them correctly will take practice. Below are a couple of examples of acceptable image alt text, and examples of image alt text to stray away from.
For an article about baking and decorating cupcakes:
Photo by Vojtech Okenka from Pexels
Good: alt=” Finished cupcake decorated with icing and fruit”
Not recommended: alt= “Cupcake sitting on a white countertop”
For an article about planting and growing an aloe plant:
Photo by Wendy Routman from Pexels
Good: alt=” Aloe plant growing in a white pot”
Not recommended: alt=” woman holding a plant outdoors”
Begin adding alt text to your website
All in all, including image alt text is an important step to take because it helps make your website accessible to all users. As for SEO, it can also improve your ranking on search engines so it doesn’t hurt to throw a few keywords in to boost your page relevance or create more traffic opportunities through Google images. To learn more about Web Content Accessibility Guidelines click here.
