Users often ask us why we don't include a
og:image:alt tag in the SEO and social tags that we add to pages. Alt attributes are good for accessibility, so sharing them with Facebook must be a good thing, right? Well, it turns out that it's not that simple! We actually removed support for the
og:image:alt tag in 2019, because we think that it can harm accessibility. Read on to find out why.
Challenges with alt attributes
Alternative text is important for accessibility and to help search engines find out what your content is about. Read more about the importance of the image alternative text. You may also want to learn how to optimize your alternative text for better accessibility and SEO.
Contrary to popular understanding, the alternative text should not describe the image. Rather, it should describe the image's purpose, which varies depending on usage and context.
The World Wide Web Consortium (W3C) distinguish a few different types of image purpose: Informative images, Functional images, Decorative images, etc. They also provide an Alt decision tree for some quick help on deciding which category a particular image fits into. As a good rule of thumb: Images that are purely decorative don't need an alternative text. Informative and functional images do.
One image, many alternative texts
The root problem with WordPress (and most similar systems) is that it only allows you to set a single default alternative text. Images often need many different alternative texts, depending on their purpose and context. Luckily, it's possible to micro-manage the alternative text and change it in the post content, as the default one won't fit all the use cases. Let's go through a few examples to better understand this limitation.
We upload the following image to the WordPress media library. The image represents some pizza with pepperoni (note: it's the Italian version of Pizza with pepperoni):
We set the image alternative text to:
Pizza with pepperoni
The alternative text describes the image, right? We're all set up then! Wait a moment: Would that alternative text be a good one though? In most cases, the answer is: No. We didn't take into consideration the actual usage of the image and its context.
Let's say we're going to use our Pizza image in a post where the image doesn't add any meaningful information or function to the post content. The image is purely decorative. In this case, we should change the default alt attribute in the post content and make it empty:
<img src="image.png" alt="">
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">
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?
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:imagewill be used.
- They know in which context the
og:imagewill be used.
- They know the title of the original post the
- They can provide a meaningful alternative text when the
og:imagehas a functional purpose, for example when it's a linked image.
- They can auto-generate alternative text to describe the
og:imagecontent, 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.
Based on our testing, when sharing a post on Facebook, the alternative text of the linked image within the post preview is set to the
og:title value. That's the linked post title and it's perfectly appropriate because it describes the link destination.
By inspecting the page source, we can see the tag content value:
<meta property="og:image:alt" content="People walk on hot coals in Lithuania">
However, the text
People walk on hot coals in Lithuania isn't used anywhere on the Facebook share. Instead, the linked image alternative text is set to the value of the
Hot coal walk leaves 25 injured in Switzerland
Thankfully, I'd say, because the
og:image:alt refers to Lithuania while the news is about people injured in Switzerland!
og:image:alt tag for Facebook seems a bit pointless, as it's not used.
The Twitter implementation is a bit more complicated from a technical perspective. It seems that it does use the
og:image:alt tag and adds its content to the link labeling mechanism, which is incorrect.
A Twitter card is made of two main sections. The first one contains the linked image. The second one is the card footer, which is a link that contains the post title and the post description:
Technically, the linked image is not exposed to assistive technologies such as screen readers, because:
- The linked image is placed within a container element with an
aria-hidden="true"attribute, which hides it from assistive technology.
- The link itself is moved out from the keyboard Tab order by the means of a
The important thing to understand is that assistive technology will announce the card container using the content of the elements referenced by the
aria-labelledby attribute. Specifically, they will announce, in the following order:
- The alternative text of the linked image in the first section, as provided by the
- The entire textual content of the card footer.
When sharing on Twitter our BBC News post example, the actual text that labels the Twitter card would be:
People walk on hot coals in Lithuania bbc.com Hot coal walk leaves 25 injured in Switzerland The group suffered burns after walking over a bed of coals as part of a team building exercise.
That's incorrect because it adds the image content description to the link destination description. Also, this specific example would definitely be confusing. Again, is it about Lithuania or Switzerland?
Our take on the og:image:alt tag
There's some good intent in providing the
og:image:alt tag, but it all depends on the image usage and context. Based on our testing, it appears the
og:image:alt can be easily misused and lead to non-ideal results. We do believe it's not something that users or an SEO plugin should attempt to manage. Instead, we do believe that not setting the
og:image:alt tag is the best option. With Yoast SEO, we do provide the image, the post and metadata, and it's up to social media platforms to present those in an accessible manner.