Metadata cheatsheet: Your guide to great-looking share cards

When you share a page from your site, what does the link look like? Be intentional about metadata to give readers a reason to click.
LinkedIn share card with image, title and URL

Introduction

Webpage metadata — the information that shows up in search results and share cards to give a page context — is often neglected by site owners. At Pixo, one thing on our checklist for a website project is to make sure the site supports, at a minimum, a basic level of metadata for every page.

This metadata ensures that when someone shares a page or it shows up in a search result, it looks great and accurately summarizes the content. We all have hopes and dreams that people will share our content; it would be so disappointing to have a drab-looking link card that no one clicks.

What makes a good share card? 

Although you may not know the specifics of how they work, you are certainly familiar with a share card. You’ve seen it on Twitter, Facebook, even your text messages when someone shares a link to a webpage. If it’s done well, it includes an image, title, and helpful description that indicate where this link will take you. As site owners, it is important for us to be aware of how our content is being represented when it is shared on other web services and do our best to “design” it intentionally.

Share card with image, title, and description
A good share card has an intentional image, title, and description

Get your share cards in shape by adding this metadata

Meta tags

HTML meta tags, including Open Graph tags, are a standard that has been adopted widely as a way for site owners to tell other web services about a page and give them control over how a page is represented when being shared. Meta tags are quite comprehensive, but for now we are going to focus on just a few.

The baseline metadata we care about are the Title, Description, and Image. More specifically these are the following:

  • Page title
  • Open Graph title (usually same as the Page title)
  • Meta description
  • Open Graph description (usually same as the meta description)
  • Open Graph image

The code looks like this:

 

<html>
	<head>
		<title>My example page</title>
		<meta property="og:title" content="My example page" />
		<meta property="og:description" content="A short summary of this page." />
		<meta property="og:image" content="https://example-website.com/image.jpg" />
	</head>

Page title

Page title

The page title is the most important piece of your metadata and should be written to accurately represent the page. Oftentimes the title of a page (the H1) can be reused as the page title, but not always. Here is an example of a bad page title followed by a good one.

Bad page title: About
Better page title: About our services  |  Pixo

The first one doesn’t provide much context for someone to know what they will be getting if they click through to the page. The second one adds more descriptive words and context.

Consider the following guidelines when crafting your page title:

  • Make sure it accurately represents the content on your page.
  • Use no more than 66 characters.
  • Make it unique for every page.

Meta description

The meta description is used as a secondary way to describe your page after the title. It allows additional context and information about the page. Both the meta description and the Open Graph description should be defined and in most cases can be the same content.

Example code:

<meta name="description" content="A short summary of this page." />
<meta property="og:description" content="A short summary of this page." />

You may be tempted to copy the first few lines

You may be tempted to copy the first few lines of content from the top of the page; however, the opening paragraph of a page many times does not meet the needs of a good meta description. Here are some simple guidelines to consider for a meta description.

  • Make it unique for every page.
  • Avoid using a generic description.
  • Accurately summarize the page content.
  • Write one or more sentences, but keep it under 200 characters.

Open Graph image

Open Graph image

Images are important because they make a share card stand out visually and add quickly digestible context about your page.

Here are the specifications for the image you choose:

  • Max file size: 5 MB
  • Minimum image dimensions: 1200 (w) x 630 (h) pixels
  • Recommended ratio: 1.91:1

Don’t rely on default images

Some websites set a default or fallback image for every page so that in case authors don’t add one, a card with an image always shows up. This may seem convenient but is not good practice. It’s best to hand-select the image, because although a default image might add visual interest to a share card, it usually doesn’t add the right context. The other drawback is that as people see multiple pages from your site shared over time, none of them stand out from one another.

Test your share cards to see how they look

The three most common services we consider are Facebook, Twitter, and LinkedIn. Each of these have helpful inspection tools to test the metadata for a webpage. They are simple to use —you just submit the public url of your webpage, and it will show what that page will look like when shared on their platform.

Example cards, with and without metadata

The following are examples of share cards from Facebook, Twitter, and Linkedin. The examples show what cards look like with and without metadata.

Facebook

Facebook is the smartest of the three services, in that even if you don’t configure any Open Graph properties it will scrape your page for content and build a decent share card most of the time. It is still very important to provide the metadata, because you want to be in control of the content it shows, rather than Facebook guessing for you.

Facebook share card
Facebook share card — with image, title, and description

Twitter

Twitter

Twitter can look quite unpleasant if you don’t include good metadata. Its share card will include your url, title, description, and image if you configure them.

Twitter share card with title only
Twitter share card — with title only
Twitter share card with title and description
Twitter share card — with title and description
Twitter share card with title, description, and image
Twitter share card — with image, title, and description

LinkedIn

LinkedIn

LinkedIn is the most basic of the three services. Its share card only shows url, title, and image. Because it doesn’t display a description, the image becomes a more important element to add.

LinkedIn share card with title only
LinkedIn share card — with title only
LinkedIn share card with title and image
LinkedIn share card — with title and image

Just a little extra thought can go a long way

Content authors typically are not full-time webmasters or content writers; we have other jobs as well. It can be tempting to ignore your page metadata to get your site or a new page out the door, but just a little extra effort may give your content an extra lift to get noticed and clicked as it is shared by others.