If you spend time optimizing your blog or website content, titles, subtitles, and meta descriptions for search engines, the following image should concern you:
Today, Google's search engine results pages (SERPs) offer as many image results as text-based results. The screenshot above is the first SERP that Google produces for the term "e-newsletter design." Notice how, in addition to the "Images" tab at the top, Google pulls a pack of images at the very beginning of the homepage, where you can click on them even before the organic text results are visible.
Despite your SEO efforts, you might be missing out on another source of organic traffic: your website's images. How can you optimize them? With alt text.
Increasingly, companies and publishers require images to accompany their text. If you're writing about photography, for example, examples are crucial to the reader's experience. When explaining how to use software, screenshots are the best way to reinforce understanding.
If you create content on a topic that requires visual support, consider how your audience prefers to learn. In many cases, Google users don't search for the classic hyperlinked result, but rather the explanatory image itself.
One of the most important things image alt text can do for you is turn your images into search results, giving you another way to get organic visitors.
Also called the "alt tag," alternative text is an HTML attribute that describes an image. It allows search engines to better crawl and rank your website, and it also helps screen reader software describe images for visually impaired users.
Whether you're implementing SEO strategies for your business or not yet, optimizing the alt text on your site is your opportunity to create a better user experience, no matter how they first arrived.
What is the purpose of the alt attribute in HTML?
Some of the advantages of the alt attribute are that:
- It gives search engines an easy way to understand the content of an image.
- It helps with organic positioning through the use of keywords.
- It provides information to reading software used by users with visual impairments.
- It provides a description of the image when a page does not load correctly.
How to add alt text to your images
In most content management systems (CMS or CContent Management System), if you click on an image you can optimize it or a rich text module will appear, where you can create and change the alternative text.
Your alt text is automatically written into the HTML code of the webpage, where you can further edit the alt text if your CMS doesn't have an easy-to-use editing window. Here's what that alt tag would look like in an article's source code:
Do you know the most important rule of alt text? Be descriptive and specific. However, keep in mind that this rule isn't enough if your alt text doesn't include the image's context. See the examples below to learn what's recommended and what's not.
3 examples of image alt text (with successes and failures)
1. Keyword vs. detail
Incorrect alternative text
alt="HubSpot Singapore office wall, inbound marketing workplace orange mural 'Ship It'"
What's wrong with this line of alt text? It contains too many references to HubSpot. Using alt text to stuff keywords into fragmented sentences adds too much triviality and not enough context. Those keywords might be important to the publisher, but not to Google.
In fact, the above alt text makes it difficult for Google to understand how the image relates to the rest of the web page or the article in which it is published, preventing the image from ranking for the more relevant long-tail keywords.
Correct alternative text
A better alternative text for this image might be:
alt="Orange mural that says 'ship it' on a wall of HubSpot's office in Singapore"
2. Detail vs. Specificity
Image by Winslow Townson
Incorrect alternative text
alt="Baseball player hitting a ball on a baseball field"
This alt text follows the first rule, as it is descriptive, but not in the right way. Although the image above shows a baseball field and a player hitting a baseball, it is actually David Ortiz of the Red Sox at Fenway Park hitting a ball over right field. These are important details that Google would need to index the image correctly if it were in, for example, a post about Boston sports.
3. Specificity vs. context
Image via UCLA
The two images above have a clear context that's useful for creating good alt text: one is of a HubSpot office and the other is Fenway Park, but what if your image doesn't have an official context (like a place name) to describe it?
This is where you should use the theme of the article or webpage where you're posting the image. Here are some examples of correct and incorrect approaches based on the reason behind a post.
For an article about attending business school
Incorrect alternative text
alt="Woman pointing at a person's computer screen"
This alternative text might be acceptable, but since your goal is to publish this image in an article about attending business school, you're missing out on several keywords that could help Google associate the image with certain sections of the article.
Appropriate alternative text
A better alternative text for this image might be:
alt="Business school professor points at student's computer screen"
For a website about educational software for business teachers
Incorrect alternative text
alt="Teacher points to a student's computer screen"
This alt text is almost as descriptive and specific as the previous example, so why isn't it optimal for a website about educational software? This example delves even deeper into the topic of business schools and specifies that teachers are their ideal audience. Therefore, the image's alt text should reflect that.
Correct alternative text
A better alternative text for this image is:
alt="Professor uses educational software to instruct a business school student"
Best practices for creating alternative text
Ultimately, alternative text should be specific and representative of the topic of the web page it visually supports.
Here are some key points to help you write the best alt text within your SEO strategy:
- Describe the image and be specific. Use the theme and context of the image to guide you.
- Limit the alternative text to 125 characters. The text-to-speech software truncates the alternative text after this number of characters. If it is longer, verbalizing it to users with visual impairments becomes difficult.
- Don't start with "Image of". Describe it directly, because Google and image reading software already know it's an image thanks to the HTML code.
- Use your keywords, but in moderation. Include your article's main keyword in the alt text only if it flows naturally. Otherwise, use semantic keywords or the most relevant terms within a long-tail keyword. For example, if your article's main keyword is "how to generate leads," you could use "lead generation" in the alt text.
- Don't force your keyword into the alt text of each image. If you added multiple images to the body of the text, include your keyword in at least one of them, especially the one you think is most representative. Write distinct and engaging descriptions for the secondary images.
The more images you optimize, the more progress you'll see in your SEO strategy!
This article was originally published in “blog.hubspot.esYou can read the original article. here
