As with many things in life, when it comes to SEO the devil is in the details.
Success in SEO starts with big, higher-level strategy and decision-making, but its execution depends on millions of minute details coming together to have a big cumulative effect.
Keyword-optimized blog posts that are published every week. Removing the unused CSS and script on a webpage to make it run a few seconds faster. Have all your pages link together in a way that makes logical sense, down to what anchor text you use to link to. In the end, it’s small details like these that can make or break an SEO campaign.
It doesn’t get much smaller than alt-text for images. The text alternatives for images and videos are something that the vast majority of internet users won’t even think about, much less see.
Most SEO laymen would understandably see alt-image text as unimportant – a minor technical SEO issue that webmasters and marketers can easily ignore. They would be wrong. Alt image text is a good opportunity for improved rankings and a better user experience. Misusing or neglecting it comes at the risk of hampering the quality of your website and leaving low-hanging keyword rankings hanging.
We’ll cover why alt-text is important, its implications for accessibility and user experience, its benefits from an SEO standpoint, and some best practices to follow.
What is Image Alt-Text?
Alt-text (which is short for alternative text) is a text substitute for non-text content, such as images and videos. Its used to describe an image on a webpage, both the context of the image and what’s taking place in the image itself.
Alt-text, also called alt-attributes or alt-tags are used to make a web page more accessible for visually impaired users who use screen readers to understand the images. They also take the place of an image in case it fails to properly load. Search engines also use image alt-text to understand the context of an image in relation to the rest of the page.
Image alt-text is part of the HTML code of a website, and is encoded into the web page using the alt attribute (e.g. <alt=“image-alt-text-example”).
They’re used by SEO professionals as an opportunity for keyword placement and image optimization. When a search engine crawler visits a web page, they use the alt-text to understand what the image is for, what is happening in the image, and why it’s important. As such, alt-text are a good place to insert long-tail keywords to help search engines make sense of the image, and get a small SEO boost for it.
Why is Alt-Text Important?
Using alt-text for your images is both beneficial from an SEO standpoint and improves your website user experience.
The purpose of image alt-text is to make the internet more accessible to users who can’t see images on their own. However, search engines also use them during the crawl and indexing process to “see” an image, giving them SEO benefits as well.
Alt-Text Benefits for SEO
The use of alt-image text is a search engine ranking factor, as confirmed by Google themselves. In their Search Engine Optimization Starter Guide, Google states that optimizing image file names and alt-text makes it easier for Google images to understand the topic of the web page. Descriptive alt text can also be used as anchor text if you use the image as a link to another page.
Keyword placement is an important on-page SEO ranking factor, and giving your images alt-text that both describes the image and includes a relevant keyword is a good image optimization tactic.
Keep in mind that alt-tags best practices advise against stuffing your image alt-text with keywords. This is considered keyword stuffing, which creates a poor user experience and risks having your website flagged as spam.
Descriptive and keyword-rich alt-text can even have your images show up on Google Images search results as well. HubSpot published a case study in 2020 of their image SEO experiment that included optimizing their image alt-text and grew their organic traffic by almost 800%.
Why Alt-Text Matters for Accessibility
Alt-text is important because they take the place of images when they can’t be properly rendered on a web page.
When a website can’t display its images, the alt-text on the page shows the user what the image is supposed to be instead. Without them, the user has no way of knowing what the broken element is supposed to represent.
In 1999, the World Wide Web Consortium (W3C) published its guide on how to make internet content more accessible for users who have disabilities or visual/auditory impairments. One of the guidelines states that content should have both an audio and visual alternative. In other words, any images should have a matching text equivalent and vice-versa.
Blind or visually-impaired users have no way of reading images on web pages without alt-text in the same way they can’t read a book without braille. Not having alt-text in your images makes your website difficult for screen readers and browsers to interpret.
Difference Between Alt-Text and an Image Description
Alt-text is often used alongside image descriptions, but they refer to two different things.
Alt-text gives the user the most important basic information about what the image is and what it represents. Image descriptions have more detail about what’s happening in the image. Image descriptions are visible underneath the image and serve as a caption, while most users never see alt-text unless they use a screen reader or look at the page’s source code.
For example, let’s say that you write a blog post about the best coffee subscriptions, and somewhere on the page is an image of a farmer carrying a handful of coffee beans. The alt text encoded in the image might read , while the image description might read “a fair trade farmer in Costa Rica takes a deep whiff of the freshly-harvested arabica coffee beans in his hands.”
How to Add Alt-Text to Your Images in WordPress
WordPress gives you the option to add alt-text to an image when you upload it or edit the post itself.
As you’re editing a page or a post on WordPress, click on the image you want to add alt-text to. The image settings block in the side-bar will have form fields for the alt-text, as well as the image description and caption.
In the alt-text field, just write a brief description of what the image is and what is happening in the image, inserting a relevant keyword where appropriate. Click update, and the alt-text will be added to the image.
7 Best Practices Practices for Image Alt-Text
Alt-text is a small but important part of your website’s optimization and accessability, and something that you should put into practice every time you release a new blog post or add a new page to your website.
With that being the case, you shouldn’t put just anything in your alt-text. Following alt-text best practices means describing the image as concisely as possible, and using keywords when they make sense to do so without overdoing them.
Here are some alt-tags best practices to be mindful of:
1. Describe the Image
The alt-text should describe what is happening in the image in a few words. Imagine you are describing the image to someone unable to see it.
2. Don’t Start With “Image Of”
A user, screen reader, or search engine will know when the text they’re reading is meant to represent the image, so prefacing the text with “image of” or “picture of” is unnecessary. It may be useful to explain the type of image they’re reading, e.g. a chart, photo, illustration, or screenshot.
3. Add Context to the Image
If the picture doesn’t capture a specific place or person, then make it somehow relate to the topic of the rest of the page.
For example for an article about how to build a WordPress website you might have an image of a developer in front of a computer screen. A good alt-text for this image might be alt=“WordPress developer adding CSS to a webpage”.
4. Keep it Short and Sweet – 125 Characters
You only have so much character space for alt-text length, as screen readers usually stop reading after 125 characters. Avoid long complex sentences and use as few words as possible to get the meaning of the image across.
5. Include Keywords in Your Alt-Text
Use keywords in your alt-text when they make sense in relation to the image. It’s more important that your alt-text describes what your image is, but include a keyword in the text where it’s appropriate.
6. But Don’t Keyword Stuff Your Alt-Text
Use your keywords only where needed or when it makes sense. Over-optimizing your alt-text with keywords offers no value to your user and is a red flag to Google and other search engines that correlate such behavior with spam.
7. Keep your Alt-Text Error Free
Typos and grammar mistakes can defeat the purpose of making your images visible to users with visible disabilities and confuse search engine crawlers.
Big SEO Wins Come From Small Efforts
As with all things in SEO, the most important thing to keep in mind when writing alt-text is to optimize for your user.
The benefit of alt-text isn’t to cram keywords into your web page or even to appease the Google algorithm gods, but for the benefit for your user when they can’t see the image or the image can’t be displayed.
If you want to make your website more accessible for more people, sign up for Prerender today and put your website right up there where your users will see it!
