Jekyll: Add social sharing meta tags

All social networks are able to link to your blog without any additional tweaks. But if you want to influence, which title, description, image etc are used, you have to add social sharing meta tags.

While Facebook is using the Open Graph protocol, Twitter has it’s own format: Twitter Cards. Both formats provide options for different kinds of content.

If you are using the minima theme, you have to create _includes/head.html and paste the content of the original head.html. Other themes provide similar possibilities.

Now you can add {% include social_metadata.html %} before the closing head tag. This will include the content of _includes/social_metadata.html which you have to create with this content:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@{{ site.twitter_username }}">
<meta name="twitter:title" content="{{ page.title | default: site.title}}">
<meta property="og:title" content="{{ page.title | default: site.title}}">
<meta name="twitter:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta name="twitter:description" content="{{ page.description | default: site.description}}">
<meta property="og:description"  content="{{ page.description | default: site.description}}">
{% if page.image %}
  <meta name="twitter:image:src" content="{{ site.url }}{{ page.image }}">
  <meta property="og:image" content="{{ site.url }}{{ page.image }}" />
{% endif %}
<meta property="og:type" content="website"/>

You have to add your twitter handle to your _config.yml file:

twitter_username: deveth0

Related Posts