» Twitter Cards & Open Graph on Jekyll

October 15, 2018 - 6 minute read

Getting Started

In Jekyll, there are two types of variables:

The Jekyll variables we will be using are: {{ site.url }} {{ site.description }} {{ site.photo_embed }} {{ site.twitter_username }} {{ page.url }} {{ page.title }} {{ page.excerpt }}

In your _config.yml make sure to define “url”, “description”, “photo_embed”, and “twitter_username”. For example, this is how mine are defined:

...
url: "https://anthonyvadala.me" # The base hostname & protocol for the site
...
photo_embed: /images/profile_picture.jpg # Sets picture for Twitter Card/Open Graph
description: Hello, I'm Anthony Vadala! I am an aspiring network specialist and hobbyist web designer.
...
twitter_username: Anthony_Vadala
...

For each individual post set the front matter block. For this post mine looks like this:

---
title: Twitter Cards & Open Graph on Jekyll
layout: post
permalink: /:year/:month/:day/:title/
excerpt_separator: <!--more-->
---

Twitter Cards documentation

Looking at the Twitter Cards documentation there are several card types available; since I’m not doing any video or linking to apps, I’m looking at using two card types:

Looking at both types’ properties, the required properties are the same (“card”, “title”, “description”).

Twitter Cards properties

Here is the metadata we will be setting for Twitter:

Twitter Code

<meta property="twitter:card" content="summary">
<meta name="twitter:title" content="{{ page.title }}">
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
<meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<meta property="twitter:site" content="{{ site.twitter_username }}">
<meta property="twitter:image" content="{{ site.url }}{{ site.photo_embed }}">

Open Graph

According to the official Open Graph protocol documentation, the basic required properties to use Open Graph are: “type”, “title”, “image”, and “url”.

Unlike Twitter Cards, the Open Graph protocol is supported by many major websites such as: Facebook, Pinterest, Linkedin, Google Plus (RIP) and even Twitter uses it as a fall back option!

Open Graph properties

Here is the metadata we will be setting for Open Graph:

Open Graph Code

<meta property="og:type" content="article">
<meta property="og:title" content="{{ page.title }}">
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<meta property="og:image" content="{{ site.url }}{{ site.photo_embed }}">

Putting it all together

For both twitter:description and og:description, I did a simple if else statement. If the page is a post, it will display an excerpt from the post, striping all HTML, newlines and truncates down it to 160 characters. Else it will display the website description from _config.yml

{% if page.excerpt %}
	{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}
{% else %}
	{{ site.description }}
{% endif %}

Complete Code

<!-- Twitter Card -->
<meta property="twitter:card" content="summary">
<meta name="twitter:title" content="{{ page.title }}">
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
<meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<meta property="twitter:site" content="{{ site.twitter_username }}">
<meta property="twitter:image" content="{{ site.url }}{{ site.photo_embed }}">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="{{ page.title }}">
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
<meta property="og:image" content="{{ site.url }}{{ site.photo_embed }}">

If you want to make sure your Twitter Card and Open Graph display correctly without posting and deleting, check here for Twitter and check here for Open Graph