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