florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Enable preview images on social media (#66)

Browse Source 
* 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
This commit is contained in:
George Oikonomou 2019-11-04 23:41:10 +00:00 committed by Maruan
parent 72377b247e
commit 29e99ebc7b
3 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -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.

8
_config.yml
View File

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

10
_includes/head.html
View File

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