John Bokma's Hacking & Hiking

Twitter Card and Facebook Sharing

May 20, 2019

Some time ago I added a Twitter card to several pages of my blog. A Twitter card is an image with some information underneath displayed by Twitter when you post a tweet. Such a card can be more attractive than a mere link and hence might result in a higher click-through ratio. The image and the information Twitter shows is controlled via meta elements in the HTML of the page you link to.

A screenshot of a Twitter card as rendered by the Twitter card validator.

For several of those meta tags Twitter falls back to Open Graph if not present. And Open Graph is used by Facebook sharing to show an image with a link, so we can provide cards for both social networks with the following set of meta tags:

og:url: the canonical URL of the page
og:type: set to article
og:title: the title of the page
og:image: the absolute URL of the image to be displayed
og:description: a short description of what's on the page
twitter:card: set to summary_large_image
twitter:image:alt: alternative image description for those who are visually impaired.

An HTML example:

  <meta property="og:url" content="http://example.com/blog/">
  <meta property="og:type" content="article">
  <meta property="og:title" content="An example title">
  <meta property="og:image" content="http://example.com/blog/flowers.jpg">
  <meta property="og:description" content="This is an example">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image:alt" content="A photo of flowers in a pot">

For a better example just view the source of this very webpage.

When you have added the meta elements to your website you can use Twitter's Card validator to verify your card. The output should be similar to the image shown above. For Facebook you can use the Sharing Debugger.

Summary Card with Large Image - Twitter's guide
A Guide to Sharing for Webmasters - by Facebook
The Open Graph protocol

Twitter Card and Facebook Sharing

Related