Create eye-catching rich snippets for your blog posts

Rich snippets are summaries of the content of a webpage, usually it shows: a headline, an image, a description, and the link to your webpage.

Social media platforms created their own metadata specifications for rich snippets with the goal of helping web creators to advertise their content better. Search Engine results are also typically populated by the metadata you provide.

Metadata is information that describes your HTML page, it is generally the content contained in the head element of your page.

Why bother?

Eye catching results: Drawing a user's attention to your content can improve engagement on social platforms.
Potential click-through rate (CTR) increase: By providing a more specific and interesting preview of your content, you can encourage users to visit your page.
Potential improvements in your page rankings: Search engines typically rank webpages higher when they are referenced by other websites (as hyperlinks), by attracting more people to your content, you can increase your chances of people referencing your webpage.

TLDR: Here is the Markup

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8" />

  <!-- usually used by search engines -->
  <title>Pimp your Blog: Calculate the 'reading time' ⏱🦉</title>
  <meta name="author" content="Rob O'Leary" />
  <meta
    name="description"
    content="Can we add anything to a standard blog that would enhance the reading experience? How about the estimated reading time?"
  />

  <!-- For social media rich snippets-->
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@twitterhandle" />
  <meta name="twitter:creator" content="@twitterhandle" />
  <meta
    property="og:url"
    content="https://roboleary.net/programming/2020/04/24/pimp-blog-reading-time.html"
  />
  <meta property="og:type" content="article" />
  <meta property="article:section" content="Technology" />
  <meta property="article:published_time" content="2020-04-24T14:54:50+00:00" />
  <meta property="article:author" content="https://www.facebook.com/username" />
  <meta
    property="og:title"
    content="Pimp your Blog: Calculate the 'reading time' ⏱🦉"
  />
  <meta
    property="og:description"
    content="Can we add anything to a standard blog that would enhance the reading experience? How about the estimated reading time?"
  />
  <meta
    property="og:image"
    content="https://roboleary.net/assets/img/blog/2020-04-24-pimp-blog-reading-time/banner.jpg"
  />
</head>

General Metadata

The Title Element

The title element sets the document’s title. In Search Engine Results Pages (SERPs), this is usually the headline of a result. You should have a title for every page!

The Meta Element

The meta element is the generic metadata element that covers a wide array of metadata.

Using the name and content attributes

We can use the name and content attributes as name-value pairs to declare our metadata.

name="author": Declares the author of the page. You can only declare one author.
name="description": Describes the content of the page, and is often used as the description by search engines in their results. Keeping it to 150 characters is a good rule of thumb as the text is usually truncated around that point.

Metadata for Social Media Platforms

Open Graph

Facebook’s Open Graph allows you to specify how your content is displayed on a user’s timeline. Without these tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and image for your content.

Open Graph is used by the following Social Media platforms:

Facebook
Instagram
Twitter
Pinterest
LinkedIn

Open Graph specifies the use of the property and content attributes for markup, which deviates from the HTML standard of using name and content. 🙄

Property Name	Description	Value permitted for content attribute
og:url	The canonical URL for your page.	This should be the URL without session variables, and parameters.
og:title	The title of your page.	String. Use same value as `title` element.
og:description	A brief description of the content.	String. Use same value as `<meta name="description" .. />`.
og:image	The URL of the image that appears when someone shares the content to Facebook. Use images that are at least 1080 pixels in width for best display on high resolution devices. At the minimum, you should use images that are 600 pixels in width to display image link ads.	URL of image.
fb:app_id	In order to use Facebook Insights you must add the app ID to your page.	String
og:type	The type of media of your content. This tag impacts how your content shows up in the News Feed. If you don't specify a type,the default is website.	Here is the full list of types. Some values are: - article - book - website - music - video
og:locale	The locale of the resource. Defaults to en_US.	Languages use the format ll_CC, where ll is a two-letter language code, and CC is a two-letter country code.
article:published_time	When the article was first published.	datetime
article:modified_time	When the article was last changed.	datetime
article:expiration_time	When the article is out of date.	datetime
article:author	Writers of the article.	Profile array
article:section	A high-level section name e.g Technology.	string
article:tag	Tags associated with this article.	string array

A typical blog post can be marked as below:

<head>
  <meta
    property="og:url"
    content="https://roboleary.net/programming/2020/04/24/pimp-blog-reading-time.html"
  />
  <meta property="og:type" content="article" />
  <meta property="article:section" content="Technology" />
  <meta property="article:published_time" content="2020-04-24T14:54:50+00:00" />
  <meta property="article:author" content="https://www.facebook.com/username" />
  <meta
    property="og:title"
    content="Pimp your Blog: Calculate the 'reading time' ⏱🦉"
  />
  <meta
    property="og:description"
    content="Can we add anything to a standard blog that would enhance the reading experience? How about the estimated reading time?"
  />

  <meta
    property="og:image"
    content="https://roboleary.net/assets/img/blog/2020-04-24-pimp-blog-reading-time/banner.jpg"
  />
</head>

To see how your markup appears to the Facebook Crawler, you can preview and debug it through the Sharing Debugger.

These tags can also enable you to track traffic statistics on Facebook Insights, Facebook's analytics suite. You must include <meta property="fb:app_id" value=".." /> in your page to use it.

You can read more about the specification for Open Graph here.

Twitter

Twitter calls its rich snippets Twitter Cards.

Twitter Cards are customizable media units that advertisers can use to drive traffic to their website or mobile app.

Twitter's metadata is similar to Open Graph, it is based on the same conventions. When using Open Graph to describe data on a page, it is easy to generate a Twitter Card without duplicating the elements and data. When the Twitter card processor looks at the metadata on a page, it first checks for the Twitter-specific properties, if they are not present, it falls back to the equivalent Open Graph property.

Property Name	Description	Value permitted for content attribute
twitter:card	The card type. Only one card type per-page is supported. If more than one value exists in the page, the last one in sequence will take priority.	One of the values: - summary: Twitter’s “default” card. It includes: a title, a description, a thumbnail image, Twitter account attribution, and a direct link to the content. These are great for blog posts! - summary_large_image: Large photo summary cards have all the same features of a regular summary card, but they have a larger image. - app - player
twitter:site	The Twitter account for the website or platform on which the content was published.@username for the website used in the card footer.	@username
twitter:creator	The individual user that created the content within the card.	@username

So, if we have already provided the Open Graph metadata, the only additional metadata to add is below:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@twitterhandle" />
<meta name="twitter:creator" content="@twitterhandle" />

You can read more about Twitter Cards here.

Final Words

It does not require much effort to include metadata for rich snippets, and it can prove worthwhile if you want to grow your audience.

You should try to choose an interesting and distinctive image for each blog post to stand out. Try to use an image that is at least 1080 pixels wide and is less than 1MB, so it looks good on all screen resolutions.

If you are using a static-site generator, there should be a simple way to populate the metadata fields using variables. If you use Jekyll, you can read this article to find out what global variables and Front Matter you can use to populate the metadata.