Swimburger

Don't forget to provide image alt meta data for open graph and twitter cards social sharing

Niels Swimberghe

Niels Swimberghe - - Web

Follow me on Twitter, buy me a coffee

Social Media Logo's in front of arrows

Many social media platforms use the open graph protocol meta data to construct link previews on their platforms. Twitter uses their own meta-data to construct Twitter cards
Open graph meta data usually looks like this:

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

Meta data for Twitter cards usually looks like this:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Both examples were taken straight from the documentation of open graph/twitter card docs. Unfortunately, both fail to feature an important meta-tag in their most prominent samples. Both platforms originally didn't provide means to specify alternative text (alt) for their images but added support multiple years ago.
Due to the lack of support historically and it not being prominent in many samples, the important alternative text meta tag is often forgotten. 

To add support for the alt-meta tag use og:image:alt and twitter:image:alt. They are not required, but providing alternative text for images is a minimum requirement for accessibility! Here are the two meta tags (ogp + twitter) you need to add:

<meta property="og:image:alt" content="Add your alternative text here" />
<meta name="twitter:image:alt" content="Add your alternative text here">

So please, please, add support to provide alternative text in your CMS's and websites and carve out an extra minute to provide alternative text.

If you're interested in social media previews, you may also be interested in these articles:

Cheers!

Related Posts

Related Posts