Dev Notes

Software Development Resources by David Egan.

Open Graph Tags for Jekyll


Jekyll, Open Graph
David Egan

The Jekyll Open Graph Include

Save this as an include - for example, as /_includes/og.html.

<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.excerpt %}
  <meta content="{{ page.excerpt }}" 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.featured-image %}
  <meta content="{{ site.url }}/{{ page.featured-image }}" property="og:image">
{% else %}
  <meta content="{{ site.url }}/assets/images/medium-images/main-site-image.jpg" 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 %}

Document Head

Call the include in the document head:

{% include general/og.html %}

Gotchas

Facebook generally needs URLs - which must include ‘http’ or ‘https’ (rather than a relative link) - hence the use of site.url throughout rather than site.baseurl.

Facebook Debugging

You can have Facebook scrape your page using the Developers debugging utility. This provides lots of useful information regarding how Facebook views your document.


comments powered by Disqus