How to Use Alt Text for SEO

How to Use Alternative Text for SEO

Quality, engaging content is a prerequisite for search engine optimization. If your website relies on publishing a lot of text content, that means you need to include images. Images, such as photos, illustrations, infographics and others, are key to making your content look more attractive and consumable - greeting visitors with a long, unbroken wall of text will result in low time on site and high bounce rates. The problem with images, from an SEO perspective, is that while computers can maybe pick out general shapes and colors in an image, they can’t really tell what’s going on in the image. That means when a search engine crawls your page, it won’t "see" the image, and that’s a problem.

If search engines don’t know what’s in an image, there’s no way for them to tell how it relates to the page content, or if it does at all. They also won’t be able to figure out if it’s relevant to an image search query. Fortunately, there’s a relatively simple way to solve this problem to improve your SEO and user experience: image alternative text.

What Is Alternative Text?

Alternative text, often just called "alt text," is an HTML attribute added to image tags to provide a description of the image:

<img src="” alt=”This is the alt text”/>

When the browser can’t load a graphic, it displays the alt text in the image container instead. Here's an example of a browser displaying the alt text in an image container when it is unable to load the actual image:

Alt text displayed in image container

Alt text is also used by screen readers and other assistive technologies for visually impaired web users.

How Do I Use Alternative Text for SEO?

From an SEO perspective, alternative text is considered one of the most important factors for image optimization, and possibly the most important after image file name. It’s your opportunity to, in a sense, add keywords to your images to help them rank in search results. When writing alt text, be descriptive and detailed - you’re writing a description for someone (or something) that can’t see.

When writing your alt text, be sure to include the page’s target keyword, which shouldn’t be too hard since, ideally, your image is topically related to what you’re talking about on the page. It’s best to stick with just one keyword unless you have two that are extremely closely related. Keyword stuffing, as always, should be avoided.

Try to be as specific and detailed as possible when creating alt text, and use natural language that a person would understand. This is for two reasons:

Don’t go overboard on detail, though. There’s no hard and fast character limit (like with title tags or descriptions), but Google advises that you keep it on the short side. Here’s are some examples of alt text for an image on a page targeting the keyword "celebrating panda":

Celebrating panda in orange party hat sitting at computer

Here’s the HTML for that image tag:

<img src="" alt=”Celebrating panda in orange party hat sitting at computer”/>

This represents the ideal alt text: it describes what’s happening in the image, uses the target keyword at the beginning and mentions a semantically related keyword, "party hat". Using just the keyword, “celebrating panda”, as the alt text isn’t ideal because it doesn’t fully describe the image, but it’s better than leaving it blank. Stuffing the alt text with keywords, like the image tag below, is the worst case scenario as Google views this practice as evidence of web spam:

<img src="" alt=”Celebrating panda, panda, happy panda, panda party, party panda, panda celebrating, panda bear, celebrating panda bear”/>

Recent guides