2016-03-30-social-meta-tags-with-jekyll

2016-03-30-social-meta-tags-with-jekyll.md

Title: Social meta tags with Jekyll

URL: http://conductofcode.io/post/social-meta-tags-with-jekyll/

_config.yml

defaults:
  -
    scope:
      path: "" # an empty string here means all files in the project
      type: "posts"
    values:
      is_post: true

facebook.html

<meta property="og:type" content="article" />
<meta property="og:url" content="http://conductofcode.io/post/social-meta-tags-with-jekyll/" />
<meta property="og:title" content="Social meta tags with Jekyll" />
<meta property="og:description" content="This is how I added social meta tags to this Jekyll blog to optimize sharing on Facebook, Twitter and Google+." />
<meta property="og:image" content="http://conductofcode.io/post/social-meta-tags-with-jekyll/meta.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Conduct of Code" />

front-matter.txt

---
layout: post
title: Social meta tags with Jekyll
date: 2016-03-30 22:00:00
tags: Jekyll, Blogging
image:
 path: meta.png
 width: 1200
 height: 630
---

google.html

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "@id": "http://conductofcode.io/post/social-meta-tags-with-jekyll/",
  "url": "http://conductofcode.io/post/social-meta-tags-with-jekyll/",
  "mainEntityOfPage": {
    "@type": "BlogPosting",
    "@id": "http://conductofcode.io/post/social-meta-tags-with-jekyll/"
  },
  "headline": "Social meta tags with Jekyll",
  "description": "This is how I added social meta tags to this Jekyll blog to optimize sharing on Facebook, Twitter and Google+.",
  "datePublished": "2016-03-30T11:00:00+01:00",
  "image": {
    "@type": "ImageObject",
    "url": "http://conductofcode.io/post/social-meta-tags-with-jekyll/meta.png",
    "width": 1200,
    "height": 630
  },
  "author": {
    "@type": "Person",
    "name": "Henrik Lau Eriksson"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Conduct of Code",
    "logo": {
      "@type": "ImageObject",
      "url": "https://s.gravatar.com/avatar/27df7a0a062537ef9116a1572707d5e0?s=60",
      "width": 60,
      "height": 60
    }
  }
}
</script>

includes-json-ld.html

{% if page.is_post %}
  {% assign type = "BlogPosting" %}
{% else %}
  {% assign type = "Blog" %}
{% endif %}
  <!-- http://schema.org/ -->
  <script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "{{ type }}",
    "@id": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}",
    "url": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}",
    "mainEntityOfPage": {
      "@type": "{{ type }}",
      "@id": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"
    },
    "headline": "{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}",
    "description": "{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 140 }}{% else %}{{ site.description }}{% endif %}",
  {% if page.date %}
    "datePublished": "{{ page.date | date_to_xmlschema }}",
  {% endif %}
  {% if page.update %}
    "dateModified": "{{ page.update | date_to_xmlschema }}",
  {% endif %}
  {% if page.image %}
    "image": {
      "@type": "ImageObject",
      "url": "{{ page.url | prepend: site.baseurl | prepend: site.url }}{{ page.image.path }}",
      "width": {{ page.image.width }},
      "height": {{ page.image.height }}
  },
  {% endif %}
    "author": {
      "@type": "Person",
      "name": "{{ site.author }}"
    },
    "publisher": {
      "@type": "Organization",
      "name": "{{ site.title }}",
      "logo": {
        "@type": "ImageObject",
        "url": "{{ site.gravatar_url }}",
        "width": 60,
        "height": 60
      }
    }
  }
  </script>

includes-og.html

{% if page.is_post %}
  {% assign type = "article" %}
{% else %}
  {% assign type = "website" %}
{% endif %}
  <!-- http://ogp.me/ -->
  <meta property="og:type" content="{{ type }}" />
  <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
  <meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
  <meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 140 }}{% else %}{{ site.description }}{% endif %}" />
  {% if page.image %}
  <meta property="og:image" content="{{ page.url | prepend: site.baseurl | prepend: site.url }}{{ page.image.path }}" />
  <meta property="og:image:width" content="{{ page.image.width }}" />
  <meta property="og:image:height" content="{{ page.image.height }}" />
  {% endif %}
  {% if page.is_post %}
  <meta property="og:site_name" content="{{ site.title }}" />
  {% endif %}

includes-twitter.html

<!-- https://dev.twitter.com/cards/overview -->
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@{{ site.twitter_username }}" />
  <meta name="twitter:creator" content="@{{ site.twitter_username }}" />
  <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
  <meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 140 }}{% else %}{{ site.description }}{% endif %}" />
  {% if page.image %}
  <meta name="twitter:image" content="{{ page.url | prepend: site.baseurl | prepend: site.url }}{{ page.image.path }}" />
  {% endif %}

twitter.html

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@hlaueriksson" />
<meta name="twitter:creator" content="@hlaueriksson" />
<meta name="twitter:title" content="Social meta tags with Jekyll" />
<meta name="twitter:description" content="This is how I added social meta tags to this Jekyll blog to optimize sharing on Facebook, Twitter and Google+." />
<meta name="twitter:image" content="http://conductofcode.io/post/social-meta-tags-with-jekyll/meta.png" />

@hlaueriksson I think '@type:' is ItemPage. The mainentityofpage is a blogpage/article. I'd also like to explore this with @mention forking off into a tag page that uses different schema such as person, place or thing as an '@mention' to an ItemPage.

@inetbiz Thanks for the feedback! I'm using the https://github.com/jekyll/jekyll-seo-tag plugin now for rendering social meta tags.

@hlaueriksson NP.