What are alt tags in SEO?When an image is declared in HTML, it goes something like this:
The code outputs this image as shown on W3schools.com:
Alt = Screenshot of Girl in the jacket code example from W3Schools
<img>is the HTML tag that inserts the image into a page by allocating space for it. The image tag has several attributes. Think of attributes as additional modifiers applied to the tag to modify its behavior. And in this case, “alt” is an attribute. But most people wrongly refer to it as a tag. The image tag can take on more attributes, including src, width, height, etc. Alt tags are crucial for image SEO because they describe the image using text. But the alt text is not visible on the page. So, why add it in the first place? If the image fails to load correctly, the browser will display the alt text instead. Screen Readers used by visually impaired people read the alt description aloud. Search engines like Google and Bing index images and videos. But visual algorithms are still limited. They can’t quite understand visual content like humans. The alt description gives the crawler’s robot more information about the image, which can help in ranking.
Why use alt tags?Alt attributes first appeared on HTML 2, released in July 1994. During the early days of the internet, speeds were slow. Dial-up connections had transfer rates of 56 kbps max. At the time, it was common for browsers to have issues fetching images. When the image failed to load, the browser would display the alternative text. The World Wide Web Consortium also sought to make the internet accessible to everyone regardless of their physical ability. Alt tags were essentially image descriptions. Anyone using a Screen Reader to access a website could hear the description provided for the image and get a comprehensive website experience. Next, see why incorporating keywords into the alt text contributes to the site’s general SEO.
Are Alt tags important for SEO?If you’ve read our article about the top image SEO tips, you already know the answer. But in case you haven’t, let’s do a quick experiment: On Google, we’ve searched for the term “Red Nike Shoes” and here are the results:
Alt = Google results for Red Nike shoes, importance of alt tagsNotice that the search term —Red Nike Shoes — had a visual connotation. Google slotted the image search results just after the top result. Many users may look for the shoe they like and click on the image. That’s exactly what we did:
Alt = Google search UI results for red nike sneakerOn the Google image search results UI, we get more information, including:
- Publisher’s page link
- Title of the page link
- Share button
- Related images
Alt = RunReport website example importance of alt textThis loads the original website, RunRepeat. What did they do to have their image rank on Google?
Alt = Viewing the source code Run Repeat Red Nike shoe.For this, we checked their site code to see how the image was defined. True to it, the site had a clear and detailed alt description: alt=”Nike Air Max 270 – University Red/University Red-black (CV7544600)” title=”Nike Air Max 270 – University Red/University Red-black (CV7544600) The image ranks well for a highly popular search term with stiff competition. Have you noticed that the site didn’t specifically use the keyword “Red Nike Shoes?” They also defined the title attribute. It provides extra information in the form of a text pop-up when the user hovers over the image with their mouse tooltip. You may choose not to include it, but on all accounts, don’t miss the alt-tag.
Should all Images have Alt tags?Ideally, all images should have alt-tags unless they are purely decorative and not meant to add meaning to the page. In WordPress, you will need to enter a relevant alt-text for to optimize your featured image for SEO. For decorative images however, you may leave the alt-tag blank. The Screen Reader may skip the image during the readout. Does this mean that Google will not index images with blank alt-tags? Not quite. Google may display the image on their search results along with automatically generated snippets and titles. The Google Search Central guide states that Google will parse HTML inside pages to index images, but they don’t index CSS images.
Alt = Google Search Central Screenshot, message about indexing HTML and CSS images.
Can you use the same text on title and alt text?Yes, it’s totally acceptable to use the same text for the title and alt text attributes. But avoid this mistake that many blogs make. It entails using the same alt-description for multiple images appearing within one post. Consider a blog post on “Top summer destinations.” The focus keyword is “top summer destination.” If you have shots of Madrid, Rio, or Egypt, it may be tempting to label all the photos as “Top summer destination” to get the most SEO juice. Don’t fall into this trap. It would be better to have a unique description that hints at the keyword.
Alt = Using different keywords for alt tags, an example of Gran Via Street Madrid.
How to write a good alt tag for an image?
1. Make it descriptiveA good alt-tag should describe the image. The description should sufficiently tell someone who can’t see the image what it is about. Let’s start with a challenge. Here is a photograph from a Centers for Disease Control and Prevention Quarantine Station:
Alt = CDC image of a baggage inspection in progress, for example, on describing alt tagsOur first attempt: “Woman holding sniffer dog at the airport.” The alt description is weak because it’s not highly descriptive. What’s more, it doesn’t fit into the context of the article that’s about the best sniffer dogs. On the positive side, it’s concise. The second attempt: “US Customs Beagle Sniffer Dog After Detecting a Banned Item from a Passenger’s Suitcase.” It’s a better fit for the article because it focuses on the dog, not the border agents. Attempting to explain everything that’s going on may require a paragraph. But we should keep things concise.
<2. Intent & contextBefore embedding any image on a blog post, consider asking: What do I intend to achieve by placing this image on this blog post? If you know the context, you can also avoid images that don’t add any value like this:
Alt = An image of a sheep doing maths, wrongly placed in an article about alt-tag
3.Use LSI Keywords in different alt tagsAre you writing a blog post where the main keyword is “Best Dog Breeds Kids?” Don’t repeat this keyword in each alt description. Consider using other related terms, for instance:
- Best family dogs
- Best dogs for kids
- Pets for kids
- Best dogs for families
4. Don’t forget the title & captionThere are several HTML attributes you can add to an image, including the title. Consider adding it to make the page more visually descriptive, particularly for images that need more explanation. You can also add the caption, and it appears below the image. Web admins mainly use this space for image attribution.
5. Avoid keyword spammingKeyword spamming, also referred to as keyword stuffing, is trying to cram in many keywords in the alt text beyond what feels natural. It’s a failed method for trying to get a higher ranking and impacts the user’s experience. For instance, if we used an image of a German shepherd for an article about the best dogs for kids, a keyword-spammed description would read: Alt = “Best family dogs, best dog family, pet kids, family dog.”
Alt = “German shepherd, sitting on snow example for alt text for images.”German shepherd sitting on the snow, best family dogs.”
6.Keep the description short and sweetThe rule of the thumb is to keep the alt text short. Many sources recommend a length of not more than 125 characters. The sentence you’re reading is 118 characters long, so you have leeway when it comes to writing descriptive alt-tags.
7. Don’t add unnecessary labelsAnother common rule is to avoid fluff phrases such as:
- This is a picture of
- This is an image of