Why we don’t set the og:image:alt tag

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.

Decorative purpose

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

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.

Facebook

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.

Let’s see an example (please consider that Facebook’s implementation may vary over time). This post on Facebook links to a BBC News page that does use an og:image:alt tag.

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 og:title tag:

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!

Providing the og:image:alt tag for Facebook seems a bit pointless, as it’s not used.

Twitter

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 tabindex="-1" attribute.

The whole ‘card’ container element is clickable via JavaScript. The container element is then labeled by the means of an aria-labelled attribute that references both the first section of the card (the image container) and the second section (the footer).

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 og:image:alt tag.
• 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.