Alt texts (SEO)

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

Introduction

Alt texts are primarely 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, so you don't have to worry about annoying texts popping-up when you're hoovering around an image or link. For this, use the title attribute.

See Tooltips (WordPress, SEO) for details.

ChatGPT (2023.08):

No, alt text doesn't usually pop up as tooltips on websites. Alt text is primarily meant to be read by screen readers for accessibility purposes, providing a text description of images to users who are visually impaired. When an image fails to load, the alt text is also displayed as a fallback, informing users about the content of the image.

While alt text itself doesn't function like a tooltip, some browsers and assistive technologies might display alt text when an image is hovered over for an extended period of time. However, this behavior can vary, and alt text is not designed to serve the same purpose as a tooltip. If you're looking to display additional information on hover, you might consider using the "title" attribute for images, which is often used for tooltip-like behavior. Just keep in mind that the title attribute is not specifically designed for accessibility and might not be read by screen readers consistently.

Alt texts vs. titles - Which is more important?

ChatGPT - 2023.08:

> For a WordPress/WooCommerce webshop, are image titles as important as alt texts?

In the context of a WordPress/WooCommerce webshop, alt text is generally more important than image titles for both accessibility and SEO purposes. Here's why:

Alt Text (Alternative Text): Alt text is a critical component for web accessibility. It's used by screen readers to describe images to visually impaired users. Properly crafted alt text ensures that everyone, regardless of their abilities, can understand the content and context of the images on your website. Alt text is also used by search engines to index images and understand their relevance within the context of the page's content. Well-optimized alt text contributes significantly to SEO.

Image Titles: The image title attribute, which appears as a tooltip when a user hovers their mouse over an image, has historically been used for supplementary information. However, it doesn't have the same level of impact on accessibility and SEO as alt text. Image titles are less likely to be used by screen readers to convey information to visually impaired users, and their impact on SEO is limited compared to alt text.

In summary, while both alt text and image titles can contribute to the user experience and SEO of your WordPress/WooCommerce webshop, alt text holds greater importance due to its direct impact on accessibility and its stronger influence on SEO. It's recommended to prioritize crafting descriptive and accurate alt text for all images on your website, while also using image titles where relevant to provide additional context for users who interact with your images.

Important for 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.

In the context of this article, we're actually mostly interested in the SEO value of alt texts. In the following chapter, both SEO-specific and general guidelines are included: No need to separate these.

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. On the other hand, this might be excellent for SEO purposes
Don't add Image of... in the alt text
Don't include the URL of the site or the page in the alt text
Max. 125 characters
When the image contains 'functional texts' (e.g., the text on a button), incorporate this text in the alt text [7]
When the image displays a specific product, include in the alt text both the full product name and the product ID
Use keywords sparingly
Include relevant keywords at the beginning of the alt text
Keep a natural and descriptive text that accurately represents the image, rather than keyword stuffing: Not good for focus, readibility and it might even result in a Google penalty

Don't include the URL

ChatGPT (2023.08):

Including a URL in alt text is generally not recommended. Alt text should focus on providing a clear and concise description of the image content for accessibility and search engine optimization purposes. Adding URLs to alt text can make it confusing for users relying on screen readers and may not provide meaningful information about the image itself.

If you're looking to promote your website within the content, it's better to do so in a more appropriate and explicit manner, such as within the body text, captions, or links associated with the image. Alt text is meant to enhance accessibility and user experience, so it's important to keep its purpose in mind when crafting it.

Natural & descriptive vs. keyword stuffing

ChatGPT (2023.08) concerning a specific case:

Yes, it's a good practice to include important keywords at the beginning of the alt text for SEO purposes. Search engines tend to give more weight to the beginning of the content, so placing relevant keywords early in the alt text can help improve the SEO value of the image. However, it's important to maintain a natural and descriptive alt text that accurately represents the image, rather than simply stuffing keywords.

In your case, you can aim to create alt text that balances both SEO considerations and clear image descriptions. For instance, if you want to prioritize the brand "AEG" and "carbon brushes," you could structure the alt text like this:

"Alt text: AEG Logo – Replacement Carbon Brushes for Various Brands"

This way, you have the important keywords "AEG," "carbon brushes," and "replacement" near the beginning of the alt text, while still maintaining a descriptive and accessible description.

How about multiple images for the same product?

2023.08 - With ChatGPT:

> I'm adding alt-text fields for images in a webshop. Those alt texts are
  mostly added for SEO, not so much for accessibility. What to do when we have
  two images for the same product? Describing the differences between these
  images is not relevant for SEO. What to do? Have two images with the same
  alt-text, or just add a number to distinguish them from each other?

ChatGPT:
When dealing with multiple images for the same product in a webshop and
considering alt-text for SEO purposes, it's important to strike a balance
between providing useful information and avoiding potential SEO pitfalls. Here
are a couple of options you can consider:

* Same Alt Text for Similar Images: If the differences between the two images
  are not relevant for SEO and both images serve the same purpose of showcasing
  the product, you can use the same alt text for both images. This is a
  straightforward approach and ensures consistency in your SEO strategy.

* Add a Differentiator: If you want to differentiate between the two images
  without providing overly detailed information, you can add a distinguishing
  identifier to the alt text. This could be a number or a brief descriptor that
  sets them apart. For instance, if you're selling different color variations
  of a product, you could use alt texts like "Blue Variant" and "Red Variant."

* Balanced Alt Text: You can also use a combination of the two approaches
  mentioned above. Keep the alt text similar while adding a subtle
  differentiator. For instance, if you have two images of a product from
  different angles, you could use alt texts like "Product Front View" and
  "Product Side View."

Remember that while alt text is important for SEO, it's also an opportunity to
make your content more accessible for users who rely on screen readers or have
other disabilities. It's recommended to provide alt text that describes the
purpose or content of the image as accurately as possible, within the
limitations of SEO goals. If the images are indeed providing different views of
the same product, this distinction might also be relevant for users who are
visually impaired and want a comprehensive understanding of the product.

In summary, choose an approach that aligns with both your SEO objectives and
your commitment to accessibility. Strive for alt text that is descriptive,
concise, and meaningful to users, whether they are seeking information through
visual browsing or assistive technologies.


> Isn't it a problem for search engines, when multiple images have the same alt
  text?

ChatGPT:
You're correct that using the same alt text for multiple images could
potentially be seen as duplicate content by search engines, and it might not
provide the best SEO outcome. Search engines use alt text to understand the
content and context of images, and if they encounter multiple images with
identical alt text, it could lead to confusion and potentially affect your SEO
efforts.

To strike a balance between SEO optimization and accessibility, you might
consider using slightly different alt text for the similar images. While you
don't need to provide a detailed description of the differences between the
images, you can use subtle variations that still convey the purpose and context
of each image. This can help search engines understand that the images are
related but not identical.

For example, if you have two images of the same product from different angles,
you could use alt texts like "Product Front View" and "Product Side View."
These variations provide search engines with additional context without
overwhelming them with irrelevant details.

Remember, the primary purpose of alt text is to describe the content and
context of images to users who cannot see them, but it can also contribute to
your SEO strategy. By crafting alt text that is relevant, concise, and unique
enough to differentiate between images, you can enhance both accessibility and
SEO for your webshop.


> Is it ok to add such differentiators at the end of the alt text? That way,
  they don't degrade the SEO value of the alt text

ChatGPT:
Yes, adding differentiators at the end of the alt text is a common practice and
can be effective for maintaining SEO value while still providing some level of
distinction between images. Placing differentiators at the end of the alt text
allows you to provide additional context without risking potential SEO issues
related to duplicate content.

For example, if you have two similar images of a product, you could use alt texts
like:

* "Blue Dress - Front View"
* "Blue Dress - Back View"

In this case, "Front View" and "Back View" are the differentiators, and they
come after the primary descriptive portion ("Blue Dress"). This approach helps
both users and search engines understand the variations between the images
without sacrificing SEO considerations.

Just be sure to keep the alt text concise and relevant. The main purpose of alt
text is to provide a clear and meaningful description of the image content
while also contributing to your overall SEO strategy. By using this approach,
you can effectively balance accessibility and SEO goals.

What we did in this situation:

First image: Regular alt-text
Subsequent images: Regular alt-text plus addition - image 2, etc.

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?

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">

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">

Moz - Man on escalator

OK: <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">

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">

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"

Note that HubSpot isn't one of the first words in the Alt text.

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"

Logo AEG at koolborstels.nl

OK: Logo AEG
Better: Koolborstels voor AEG - Personally, I find this a bit difficult to accept, since it seems to not perform the alt text's first function: Describing what's there
Not: Koolborstels.nl voor AEG - No need to incorporate a sites's URL in an alt text.

Some more ideas:

AEG Logo – Replacement Carbon Brushes Compatible with AEG and Other Brands
AEG Logo – Replacement Carbon Brushes Available at Our Webshop
AEG-logo - Vervangende Koolborstels Verkrijgbaar in Onze Webshop
AEG-logo - Wereldwijde Gratis Levering van Vervangende Koolborstels in Onze Webshop
AEG-logo - Koolborstels met Wereldwijde Gratis Levering in onze Webshop
AEG-logo - Koolborstels voor AEG met Wereldwijde Gratis Levering in Onze Webshop"
AEG-logo - Koolborstels voor AEG met Wereldwijde Gratis Levering
AEG-logo - Koolborstels AEG met Wereldwijde Gratis Levering
AEG-logo - Koolborstels AEG met Wereldwijde Gratis Levering uit Voorraad - 72 characters
AEG-logo - Koolborstels AEG met Wereldwijde Gratis Bezorging uit Voorraad - I think I stick with levering
AEG-logo - Koolborstels AEG Gratis Wereldwijd Geleverd uit Voorraad - Without the word "met", but "Gratis" can be confusing/misleading
AEG-logo - Koolborstels AEG Gratis Wereldwijde Levering uit Voorraad - Less confusing + "levering" seems better than "geleverd"
AEG-logo - Koolborstels AEG met Gratis Wereldwijde Levering uit Voorraad - With "met" seems better.

Real-world examples

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

alt="Image settings WordPress"

SEO texts for My Account & shopping cart icons

What would be an appropriate SEO text for the My Account icon on a webshop?
I checked on Coolblue.com & Amazon.com,and I'm not sure if they actually have alt texts here.

Sources