Don't forget to provide image alt meta data for open graph and twitter cards social sharing
Niels Swimberghe - - Web
Follow me on Twitter, buy me a coffee
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
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:
- Verify what your webpage looks like in Google, Facebook, Twitter, LinkedIn, and more