Alt texts (SEO)

Uit De Vliegende Brigade
Naar navigatie springen Naar zoeken springen

This article has primarily been written for alt texts for images, but changes are, that this equally applies to alt texts for links.

Introduction

Alt texts are primarly ment as substitute for images for visually impaired visitors. [1]:

“In situations where the image is not available to the reader, perhaps
because they have turned off images in their web browser or are using
a screen reader due to a visual impairment, the alternative text 
ensures that no information or functionality is lost.”
  • Alt texts are often required by governments for websites of their commercial partners, to assure that pages are accessible to visually impaired visitors
  • Alt texts seem to be a required part of what makes a 'good' or 'functional' website - Without alt texts, a site is more-or-less defective.

Additionally, alt texts are significant for SEO - See further on.

Not a tooltip

An alt text is not a tooltip. Au contrary: In general, it doesn't seem to be used as tooltips. See Tooltips (WordPress, SEO) for details.

What makes a good alt text?

[2], [3], [4], [5], [6]:

  • Descriptive & specific: The alt text describes the image
  • Context: Explain how the image relates to its content - Usually, this is obvious and doesn't need extra text
  • Don't add Image of... in the alt text
  • Max. 125 characters
  • Don't make them too long: Alt texts are often displayed like tool-tips, and long texts can be a distraction - IS THIS CORRECT???
  • When the image contains 'functional texts' (e.g., the text on a button), incorporate this text in the alt text [7]
  • When the image displayes a specific product, include in the alt text both the full product name and the product ID
  • Use keywords sparingly
  • No keyword stuffing: Not good for focus, readibility and it might even result in a Google penalty

SEO

Alt texts have significant SEO value. Possible reasons for this:

  • Alt texts are required for 'good' websites
  • There is often no other way for Google to know what the image is about - This is less of an issue for links, provided that the URL or slug is well-throught true.

Examples

  • <img src="pupdanceparty.gif" alt="Puppies dancing"> [8]
  • Luchtbalg-aclimatiseerde spunner Juut & Juul met SKU jj_01 te koop op example.com - Is this a good example?

Example Moz - Pancakes

[9]:

  • OK: <img src="pancakes.png" alt="pancakes">
  • Better: <img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
  • Not OK: <img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe">

Example Moz - Rooster

[10]:

  • OK: <img src="bird.png" alt="Rooster">
  • Better: <img src="bird.png" alt="Rooster crowing">
  • Even better: <img src="bird.png" alt="Red-crested rooster crowing">

Example Moz - Man on escalator

  • OK: Okay alt text: <img src="escalator.jpg" alt="man on escalator">
  • Better: <img src="escalator.jpg" alt="man walking on escalator">
  • Even better: <img src="escalator.jpg" alt="man wearing backpack walking down escalator">

Example Moz - Keyword Explorer

  • OK: <img src="kwe.png" alt="kw explorer">
  • Better: <img src="kwe.png" alt="keyword research in Keyword Explorer">
  • Even better: <img src="kwe.png" alt="Moz Keyword Explorer tool for SEO keyword research">

Example Hubspot

[11]:

  • Bad: alt="HubSpot office wall Singapore inbound marketing workplace murals orange walls ship it"
  • Good: alt="Orange mural that says 'ship it' on a wall at HubSpot's Singapore office"

Detail vs. specificity

  • Bad: alt="Baseball player hitting a ball at a baseball field"
  • Good: alt="David Ortiz of the Boston Red Sox batting from home plate at Fenway Park"

Specificity vs. Context

Incorporate the context:

  • Bad: alt="Woman pointing to a person's computer screen"
  • Good: alt="Business school professor pointing to a student's computer screen"

The same image in another context:

  • Bad: alt="Woman pointing to a person's computer screen"
  • Good: alt="Professor using education software to instruct a business school student"

Real-world examples

On this Yoast page there is an image after text Block tab. Alt text attribute:

alt="Image settings WordPress"

More significantly (for me): It doesn't pop up. Maybe that's only the case for the title attribute?

See also

Sources