How to handle SEO tags & social cards in a content model

Where SEO tags and social cards are displayed

SEO tags, as the name suggests, appear on result pages of search engines: Google, Bing, DuckDuckGo, and so on. This is what they look like:

Social cards primarily appear on social media, in public posts on Facebook, Twitter, etc. Here is an example:

Social cards also show up in every messenger when you send a link. Like this:

Do SEO tags and social cards belong to the content model?

Yes.

Typically the content model is designed only for the content that actually appears on a page. But the way the link to a page appears in different places on the internet is as much a part of the page as the page content itself. So it's vital to have a place for this content in the CMS as well, so that authors can control it – just as the page itself.

What content should be created on a page

Both SEO and social cards are configured by putting a bunch of HTML tags in the section of a page.

SEO tags

Just 2 tags:

Copy
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

Social cards

Facebook uses its own protocol called OpenGraph; Twitter has its own set of tags for cards. Here are all the tags:

Copy
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">
  
<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" /> 
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />

How to set up a content model for SEO tags and social cards

Once you accept that a custom type for every page should also contain some fields for SEO and social, it all gets rather straightforward.

SEO tags

There are only two tags to manage, so only 2 text fields to set up:

  • Title
  • Description

Social cards

Here is an example for Twitter; for Facebook you’d need to create a separate set of fields, almost the same.

Fields required for a Twitter card:

  • Text field for the Twitter handle (this is optional: if you don't need this field to ever change then you don't need to include this)
  • Text field for the title
  • Text field for the description
  • Image field for the card image

How to set it up in Prismic

For every custom type that renders a page on your website, we recommend setting up a separate tab in your custom type specifically for SEO tags and social cards. Putting these fields in a separate tab greatly helps with organizing content and overall accessibility: this way, the page content is clearly isolated from meta tags.

Because there are a number of different social cards with different requirements, it's best to set up each card as a slice. This way content authors can choose the cards they want to add to the page.

Setting up the fields for SEO and social cards in a custom type in Prismic
  • In a custom type for a page, add a new tab
  • For each of the social cards, create a separate slice
  • Add fields for each slice as defined above

If you want to try this model in Prismic, copy the JSON below instead of setting up the model manually.

For the Twitter card:

CopyExpand/Collapse

And here is a full example with more social cards:

CopyExpand/Collapse

What editors will see

Here is what it would look like for editors:

Adding social cards to a Prismic document
How to model content for your project Nathan will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call