Tuesday, January 24, 2023

Informative purpose

 This time we’re going to use our image in a post about how to make Pizza with pepperoni. A pizza recipe! At some point in our post, we describe in detail how to distribute the red, yellow, and green pieces of pepperoni on top of our pizza. We add our image to illustrate this step of the recipe. Would the default alternative text ‘Pizza with pepperoni‘ be meaningful in this context? No, it wouldn’t. Luckily, we can change the alt attribute in the post content and make it more helpful based on the context:

<img src="image.png" alt="The thin slices of pepperoni evenly distributed on top of your pizza">

Functional purpose

For our last example. we’re going to use our image in a blog post about our favorite Pizza place. At some point, we use our image as the only content for a link to our favorite pizza place website. Thus, the default alternative text ‘Pizza with pepperoni’ would actually be the link text. That would be wrong for both accessibility and SEO. Instead, the alternative text should describe the functionality of the link. It should describe the link destination. Luckily, we can change it in the post content:

<a href="https://myfavoritepizzaplace.com">
    <img src="image.png" alt="Go to my favorite pizza place website">
</a>

How does the og:image:alt tag work?

The og:image:alt is an Open Graph tag meant to accompany the og:image tag. According to the specification, it should provide ‘A description of what is in the image‘. However, the principles illustrated above should apply to the og:image:alt as well.

For example, in the context of a linked image in a social share, describing what is in the image is incorrect. A linked image alternative text should describe the link destination, not the visual content of the image.

Why we removed the og:image:alt tag in Yoast SEO

When an image is actually used by Facebook (or other platforms), we know that it’ll usually be used as a linked image in a social share. Therefore, the image alternative text should describe the link destination. It should use the linked post title. Setting the alternative text to the value of an og:image:alt tag that describes the image content wouldn’t be appropriate in this case and might confuse users relying on assistive devices. Should the og:image:alt tag value be set to the post title then? That doesn’t seem correct. At this point, the actual purpose of the og:image:alt seems a bit questionable, at least in the context of a linked image in a social share.

That’s the reason why in Yoast SEO 10.1 (released in April 2019) we decided to remove the ability to set the og:image:alt tag. It fails to address a problem that should be solved upstream. At Yoast, we do think that managing the og:image:alt tag is more of a job for Facebook (and other platforms that uses it). They’re the only ones who can provide meaningful alternative text for their content:

  • They know how the og:image will be used.
  • They know in which context the og:image will be used.
  • They know the title of the original post the og:image belongs to.
  • They can provide a meaningful alternative text when the og:image has a functional purpose, for example when it’s a linked image.
  • They can auto-generate alternative text to describe the og:image content, when the image has an informative purpose.

Does it really matter?

Our decision to remove the ability to set the og:image:alt tag is based on exploring the actual usage the main social platforms make of it. At the time of writing this post (June 2022), it appears the og:image:alt is either not used or it is used in a way that’s potentially problematic for accessibility and SEO.

No comments:

Post a Comment