Open Graph Tags for Jekyll
Jekyll, Open Graph
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