Enable preview images on social media (alshedivat#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

Author: g-oikonomou

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.

_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
 # -----------------------------------------------------------------------------

_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 }}">