From 29e99ebc7b58983883231cf6d5ebc5cc1f14020c Mon Sep 17 00:00:00 2001
From: George Oikonomou <geo-gh@spd.gr>
Date: Mon, 4 Nov 2019 23:41:10 +0000
Subject: [PATCH] Enable preview images on social media (#66)

* Enable preview images on social media

This commit adds support for serving Open Graph meta tags inside the HTML head. When enabled, links to the page on social media will display a preview.

NB: twitter behaves somewhat differently and may require twitter card meta tags in addition to Open Graph.

https://ogp.me/

* Remove trailing whitespaces

* Support page-specific open graph social media previews

* Document open graph support in the readme

* Improve open graph support
---
 README.md           | 14 ++++++++++++++
 _config.yml         |  8 ++++++++
 _includes/head.html | 10 ++++++++++
 3 files changed, 32 insertions(+)

diff --git a/README.md b/README.md
index b92ce9b..d3b77d4 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,20 @@ Just use the liquid tags `{% highlight python %}` and `{% endhighlight %}` to de
   </a>
 </p>
 
+#### Social media previews
+The al-folio theme optionally supports preview images on social media.
+To enable this functionality you will need to set `serve_og_meta` to `true` in
+your `_config.yml`. Once you have done so, all your site's pages will include
+Open Graph data in the HTML head element.
+
+You will then need to configure what image to display in your site's social
+media previews. This can be configured on a per-page basis, by setting the
+`og_image` page variable. If for an individual page this variable is not set,
+then the theme will fall back to a site-wide `og_image` variable, configurable
+in your `_config.yml`. In both the page-specific and site-wide cases, the
+`og_image` variable needs to hold the URL for the image you wish to display in
+social media previews.
+
 ## Contributing
 
 Feel free to contribute new features and theme improvements by sending a pull request.
diff --git a/_config.yml b/_config.yml
index 6e16a74..f6673a9 100644
--- a/_config.yml
+++ b/_config.yml
@@ -14,6 +14,14 @@ url:  # the base hostname & protocol for your site
 baseurl: /al-folio # the subpath of your site, e.g. /blog/
 last_updated: # leave blank if you don't want to display last updated
 
+# -----------------------------------------------------------------------------
+# Open Graph
+# -----------------------------------------------------------------------------
+# Display links to the page with a preview object on social media.
+# To achieve this, change serve_og_meta to true and then provide the URL of the
+# preview image as the value of og_image.
+serve_og_meta: false # Include Open Graph meta tags in the HTML head
+og_image: # The site-wide (default for all links) Open Graph preview image
 # -----------------------------------------------------------------------------
 # Social integration
 # -----------------------------------------------------------------------------
diff --git a/_includes/head.html b/_includes/head.html
index 81df8e2..8c4eb1c 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -6,6 +6,16 @@
   <title>{{ site.name }}{% if page.title and page.url != "/" %} | {{ page.title }}{% endif %}</title>
   <meta name="description" content="{{ site.description }}">
 
+  {% if site.serve_og_meta %}
+    <meta property="og:site_name" content="{{ site.description }}" />
+    <meta property="og:type" content="object" />
+    <meta property="og:title" content="{{ site.name }}" />
+    <meta property="og:url" content="{{ page.url | prepend: site.baseurl | prepend: site.url }}" />
+    <meta property="og:description" content="{{ page.title }}" />
+    <meta property="og:image"
+          content="{%- if page.og_image -%}{{ page.og_image }}{%- else -%}{{ site.og_image }}{%- endif -%}" />
+  {% endif %}
+
   <link rel="shortcut icon" href="{{ '/assets/img/favicon.ico' | prepend: site.baseurl | prepend: site.url }}">
 
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | prepend: site.baseurl | prepend: site.url }}">