Let's walk through how to set up Social Media Cards to display your content nicely when shared on social media using prismic.io.

Our main example will focus on setting up a Twitter Card. You will find examples of other types of Social Cards at the end of this article.

When a web page is shared, Twitter looks for specific metadata to generate cards summarizing its content. Here is an example of the metadata from Twitter's documentation:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<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">

We'll make that metadata dynamic, so you can set up exactly how the social card will look directly from the Writing Room.

For every custom type that renders a page on your website, we recommend setting up a tab in your custom type specifically for your Social Cards. Setting up a tab like the following will allow you to enter the title, description, and image to generate the Twitter Card metadata for your page or post.

"Twitter Card" : {
  "tw_title" : {
    "type" : "Text",
    "config" : {
      "label" : "Title"
    }
  },
  "tw_description" : {
    "type" : "Text",
    "config" : {
      "label" : "Description"
    }
  },
  "tw_image" : {
    "type" : "Image",
    "config" : {
      "placeholder" : "Image",
      "constraint" : {
        "width" : 1200,
        "height" : 630
      }
    }
  }
}

Now you just need to integrate the content into your template.

// Using the Pug template engine (previously Jade), if "page" is your prismic document
meta(name='twitter:card', content='summary_large_image')
meta(name='twitter:site', content='@prismicio') // use your own Twitter account
meta(name='twitter:title', content=page.getText('page.tw_title'))
meta(name='twitter:description', content=page.getText('page.tw_description'))
meta(name='twitter:image', content=page.getImage('page.tw_image').url)

More social cards

There are many more types of social cards available. Twitter has a selection of different card formats to choose from, as well as there being cards for outlets like Facebook, Google+, LinkedIn, and others.

You can go further with social cards by giving authors the ability to choose between these options. Below we provide an example of this including the JSON code for the custom type and the sample template to load them into your pages.

Did this answer your question?