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 relates 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="https://www.example.com/example-image.jpg" 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 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:
- Alt text is used by humans, so good alt text is good user experience, and good user experience is good SEO.
- When your alt text more closely matches the way people type searches into Google, the higher it will likely rank.
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":
Here 's the potential HTML for that image tag:
<img src="https://s3.amazonaws.com/woocms.woorank.com/2016/Nov/celebrating_panda-1480416313590.jpg" alt="Panda" />
This alt text is ok. It 's not bad, but it 's not very descriptive. Yes, the panda 's the subject of the image, but there 's so much more going on here. Plus, it doesn't use the page 's target keyword: celebrating panda.
So here 's a different version of that HTML:
<img src="https://s3.amazonaws.com/woocms.woorank.com/2016/Nov/celebrating_panda-1480416313590.jpg" alt="Celebrating panda" />
This alt text is better. It 's a bit more descriptive than just "panda", and it uses the page 's keyword. However, it 's still not as descriptive and useful as it could be.
So here 's a third version of that image tag:
<img src="https://s3.amazonaws.com/woocms.woorank.com/2016/Nov/celebrating_panda-1480416313590.jpg" 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".
Now, before you get carried away filling your image alt text with keywords and related terms, take this example of just that:
<img src="https://s3.amazonaws.com/woocms.woorank.com/2016/Nov/celebrating_panda-1480416313590.jpg" alt="Celebrating panda, panda, happy panda, panda party, party panda, panda celebrating, panda bear, celebrating panda bear" />
This is, quite frankly, the worst possible way to use an image 's alternative text. Google will see the attribute stuffed full of the same words or phrases. You 're better off leaving all alt attributes blank:
<img src="https://s3.amazonaws.com/woocms.woorank.com/2016/Nov/celebrating_panda-1480416313590.jpg" alt="" />
Alt Text vs. Image Title: What 's the Difference?
Image titles and alt texts are both attributes in an image tag that describe the content of that image. Both should be written with the user in mind but alt text is the main source of information about what 's in the image. Titles should add extra information that couldn 't be included in the alt text.
Image titles appear in image tags like this:
<img src="image.jpg" alt="Alt text description" title="Image title" />
However, you should take the same approach to optimizing titles as you do alt text:
- Help users who can 't see the image understand what 's in an image
- Help search engines understand what 's in the image
- Use a keyword that 's relevant to the image as well as the page content
