Create eye-catching rich snippets for your 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 about 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 page’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:
Open Graph specifies the use of the property and content attributes, 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 |
| 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 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: This card has all the same features of a *summary* card, but has a large 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.