How to Handle SEO Tags & Social Cards
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:
<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:
<!-- 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.
- 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:
{ "Main": { … Your Content Fields … }, "Social Cards": { "body": { "type": "Slices", "fieldset": "Slice zone", "config": { "choices": { "twitter_image_card": { "type": "Slice", "fieldset": "Twitter: Image Card", "description": "Twitter summary card with large image", "icon": "image", "non-repeat": { "twitter_handle": { "type": "Text", "config": { "label": "Twitter Handle", "placeholder": "Twitter handle..." } }, "title": { "type": "StructuredText", "config": { "single": "paragraph", "label": "Title", "placeholder": "Twitter Card Title..." } }, "description": { "type": "StructuredText", "config": { "single": "paragraph", "label": "Description", "placeholder": "Twitter Card Description..." } }, "image": { "type": "Image", "config": { "constraint": { "width": 600, "height": 314 }, "thumbnails": [], "label": "Image" } } }, "repeat": {} } } } } } }See More
And here is a full example with more social cards:
{ "Main" : { … Your Content Fields … }, "Social Cards" : { "body" : { "type" : "Slices", "fieldset" : "Slice zone", "config" : { "choices" : { "general_card" : { "type" : "Slice", "fieldset" : "General Card", "description" : "General Social card for Facebook, LinkedIn, Google+, etc.", "icon" : "art_track", "non-repeat" : { "title" : { "type" : "StructuredText", "config" : { "single" : "heading1", "label" : "Title", "placeholder" : "Title..." } }, "description" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Description", "placeholder" : "Description..." } }, "image" : { "type" : "Image", "config" : { "constraint" : { "width" : 1200, "height" : 650 }, "thumbnails" : [ ], "label" : "Image" } } }, "repeat" : { } }, "twitter_card" : { "type" : "Slice", "fieldset" : "Twitter Card", "description" : "Twitter summary card with image", "icon" : "subtitles", "non-repeat" : { "card_type" : { "type" : "Select", "config" : { "options" : [ "Standard Summary Card", "Summary Card with Large Image" ], "default_value" : "Standard Summary Card", "label" : "Card type" } }, "twitter_handle" : { "type" : "Text", "config" : { "label" : "Twitter Handle", "placeholder" : "Twitter handle..." } }, "title" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Title", "placeholder" : "Twitter Card Title..." } }, "description" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Description", "placeholder" : "Twitter Card Description..." } }, "image" : { "type" : "Image", "config" : { "constraint" : { "width" : 300, "height" : 300 }, "thumbnails" : [ { "name" : "large_image", "width" : 600, "height" : 314 } ], "label" : "Image" } } }, "repeat" : { } }, "pinterest_product_pin" : { "type" : "Slice", "fieldset" : "Pinterest Product Pin", "description" : "Product summary pin for Pinterest", "icon" : "loyalty", "non-repeat" : { "title" : { "type" : "StructuredText", "config" : { "single" : "heading1", "label" : "Title", "placeholder" : "Title..." } }, "description" : { "type" : "StructuredText", "config" : { "single" : "paragraph", "label" : "Description", "placeholder" : "Description..." } }, "price" : { "type" : "Number", "config" : { "label" : "Price", "placeholder" : "Enter Product Price..." } }, "currency" : { "type" : "Select", "config" : { "options" : [ "USD", "Euro" ], "default_value" : "USD", "label" : "Currency" } }, "availability" : { "type" : "Select", "config" : { "options" : [ "In-stock", "Out of stock" ], "default_value" : "In-stock", "label" : "Availability" } } }, "repeat" : { } } } } } } }See More
What editors will see
Here is what it would look like for editors:
