Skip to content
Permalink
Browse files

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
  • Loading branch information
g-oikonomou authored and alshedivat committed Nov 4, 2019
1 parent 72377b2 commit 29e99ebc7b58983883231cf6d5ebc5cc1f14020c
Showing with 32 additions and 0 deletions.
  1. +14 −0 README.md
  2. +8 −0 _config.yml
  3. +10 −0 _includes/head.html
@@ -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.
@@ -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
# -----------------------------------------------------------------------------
@@ -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 }}">

0 comments on commit 29e99eb

Please sign in to comment.
You can’t perform that action at this time.