Adding Open Graph Tags to Jekyll

What is the Open Graph protocol? Per Facebook, it “enables any web page to become a rich object in a social graph.” The documentation goes on to state that “to turn your web pages into graph objects, you need to add basic metadata to your page.” Put more simply, add Open Graph meta tags to your website to have greater control over how your content is displayed when shared via Facebook.

Basic Metadata

The basic metadata includes a title, object type, image, and url, as per the documentation:

<meta content="Title" property="og:title">
<meta content="Type" property="og:type">
<meta content="Image" property="og:image">
<meta content="URL" property="og:url">

I’ve also included a site name and description:

<meta content="Site Name" property="og:site_name">
<meta content="Description" property="og:description">

Object Types

There are many different object types to which you may categorize your page: music, video, article, book, profile, and website, amongst others. The two types that are relevant to my site are article and website, the latter being the object type that I’ll fall back upon for every page that isn’t a post.

Article

The article object type has several possible values, but I’m only using article:published_time, article:author, article:section, and article:tag for my site:

<meta content="Time" property="article:published_time">
<meta content="Author" property="article:author">
<meta content="Category" property="article:section">
<meta content="Tag" property="article:tag">

Code

Please Note: I’ve skipped the explanations for some of the following conditional statements because they’re identical to those that I wrote about in my Supporting Twitter Cards with Jekyll post. See that post for further information.

For the categories and tags, I’m using a for loop to output the appropriate meta tags. Open Graph tags only allow for one section, so I limit that to the first category. It’s rather arbitrary, but it works.

{% if page.categories %}
  {% for category in page.categories limit:1 %}
  <meta content="{{ category }}" property="article:section">
  {% endfor %}
{% endif %}
{% if page.tags %}
  {% for tag in page.tags %}
  <meta content="{{ tag }}" property="article:tag">
  {% endfor %}
{% endif %}

Here’s the final snippet of code with the appropriate meta data:

<meta content="{{ site.title }}" property="og:site_name">
{% if page.title %}
  <meta content="{{ page.title }}" property="og:title">
{% else %}
  <meta content="{{ site.title }}" property="og:title">
{% endif %}
{% if page.title %}
  <meta content="article" property="og:type">
{% else %}
  <meta content="website" property="og:type">
{% endif %}
{% if page.description %}
  <meta content="{{ page.description }}" property="og:description">
{% else %}
  <meta content="{{ site.description }}" property="og:description">
{% endif %}
{% if page.url %}
  <meta content="{{ site.url }}{{ page.url }}" property="og:url">
{% endif %}
{% if page.date %}
  <meta content="{{ page.date | date_to_xmlschema }}" property="article:published_time">
  <meta content="{{ site.url }}/about/" property="article:author">
{% endif %}
{% if page.image %}
  <meta content="/img/srcset/{{ page.image }}" property="og:image">
{% else %}
  <meta content="/img/logo-high-resolution.png" property="og:image">
{% endif %}
{% if page.categories %}
  {% for category in page.categories limit:1 %}
  <meta content="{{ category }}" property="article:section">
  {% endfor %}
{% endif %}
{% if page.tags %}
  {% for tag in page.tags %}
  <meta content="{{ tag }}" property="article:tag">
  {% endfor %}
{% endif %}

Validate

To verify that your code validates, see the Facebook Debugger.