Added Article structured data along with BreadcrumbList

_includes/head.html

@@ -5,29 +5,7 @@
   <meta name="description" content="{{ page.description }}">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <meta property="og:title" content="{{ page.title | escape }}">
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="{{ page.url | absolute_url }}">
-  <meta property="og:description" content="{{ page.description }}">
-  <meta property="og:site_name" content="{{ site.name }}">
-
-  <meta name="twitter:card" content="summary">
-  <meta name="twitter:url" content="{{ page.url | absolute_url }}">
-  <meta name="twitter:title" content="{{ page.title | escape }}">
-  <meta name="twitter:description" content="{{ page.description }}">
-
-  {% if page.thumb_image %}
-    {% if page.thumb_image contains '://' %}
-      <meta property="og:image" content="{{ page.thumb_image }}">
-      <meta name="twitter:image" content="{{ page.thumb_image }}">
-    {% else %}
-      <meta property="og:image" content="{{ site.url }}{% asset '{{ page.thumb_image }}' @path %}">
-      <meta name="twitter:image" content="{{ site.url }}{% asset '{{ page.thumb_image }}' @path %}">
-    {% endif %}
-  {% else %}
-    <meta property="og:image" content="{{ site.url }}{% asset og-image.jpg @path %}">
-    <meta name="twitter:image" content="{{ site.url }}{% asset og-image.jpg @path %}">
-  {% endif %}
+  {% include head/structured-data/all-structured-data.html %}
 
   <link href="{{ 'feed.xml' | absolute_url }}" type="application/rss+xml" rel="alternate" title="{{ site.name }} Last 10 blog posts" />
 

_includes/head/structured-data/all-structured-data.html

@@ -0,0 +1,3 @@
+{% include head/structured-data/opengraph.html %}
+{% include head/structured-data/twitter.html %}
+{% include head/structured-data/post.html %}

_includes/head/structured-data/image-url.html

@@ -0,0 +1 @@
+{% if page.thumb_image %}{% if page.thumb_image contains '://' %}{{ page.thumb_image }}{% else %}{{ site.url }}{% asset '{{ page.thumb_image }}' @path %}{% endif %}{% else %}{{ site.url }}{% asset og-image.jpg @path %}{% endif %}

_includes/head/structured-data/opengraph.html

@@ -0,0 +1,7 @@
+<meta property="og:title" content="{{ page.title | escape }}">
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ page.url | absolute_url }}">
+<meta property="og:description" content="{{ page.description }}">
+<meta property="og:site_name" content="{{ site.name }}">
+
+<meta property="og:image" content="{% include head/structured-data/image-url.html %}">

_includes/head/structured-data/post.html

@@ -0,0 +1,58 @@
+{% if page.url contains '/posts/' %}
+  {%  unless page.url contains '/posts/page/' %}
+
+    {% assign wordcount = page.content | markdownify | newline_to_br | strip_html | strip_newlines | strip | number_of_words %}
+    {% assign keywordTags = page.tags  | join: ', ' %}
+
+    {% if page.author %}
+      {% assign authorName = page.author %}
+    {% else %}
+      {% assign authorName = site.name %}
+    {% endif %}
+
+    <script type="application/ld+json">
+    {
+      "@context":"http://schema.org",
+      "@type":"Article",
+      "headline":"{{ page.title }}",
+      "name": "{{ page.title }}",
+      "keywords":"{{ keywordTags }}",
+      "wordCount":"{{ wordcount }}",
+      "url":"{{ site.url }}{{ page.url }}",
+      "datePublished":"{{ page.date | | date: '%Y-%m-%d' }}",
+      "dateModified":"{{ page.last_modified_at | | date: '%Y-%m-%d' }}",
+      "author": "{{ authorName }}",
+      "image":"{% include head/structured-data/image-url.html %}",
+      "mainEntityOfPage":{
+        "@type":"WebPage",
+        "@id":"{{ site.url }}{{ page.url }}"
+      },
+      "articleBody":"{{ page.content | markdownify | newline_to_br | strip_html | strip_newlines | strip | escape | remove:'\' }}"
+    }
+    </script>
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org",
+        "@type": "BreadcrumbList",
+        "itemListElement": [
+        {
+          "@type": "ListItem",
+          "position": 1,
+          "item": {
+            "@id": "{{ site.url }}",
+            "name": "Posts"
+          }
+        }, {
+          "@type": "ListItem",
+          "position": 2,
+          "item": {
+            "@id": "{{ site.url }}{{ page.url }}",
+            "name": "{{ page.title }}",
+            "image": "{% include head/structured-data/image-url.html %}"
+          }
+        }]
+      }
+    </script>
+
+  {% endunless %}
+{% endif %}

_includes/head/structured-data/twitter.html

@@ -0,0 +1,6 @@
+<meta name="twitter:card" content="summary">
+<meta name="twitter:url" content="{{ page.url | absolute_url }}">
+<meta name="twitter:title" content="{{ page.title | escape }}">
+<meta name="twitter:description" content="{{ page.description }}">
+
+<meta property="twitter:image" content="{% include head/structured-data/image-url.html %}">

_posts/2017-12-21-chalk-sample-post-with-all-elements.md

@@ -4,6 +4,7 @@ title: "Chalk sample post with all elements"
 description: "Have a look at all the predesigned elements you can use in Chalk."
 thumb_image: "documentation/sample-image.jpg"
 tags: [design, jekyll]
+author: "Author name"
 ---
 
 Chalk uses the default Jekyll syntax highlighting gem Rouge. It has a customized style for both light and dark theme.

_posts/2017-12-23-introducing-chalk.md

@@ -4,6 +4,7 @@ title: "Introducing chalk"
 description: "Chalk is a high quality, completely customizable, performant and 100% free blog template for Jekyll."
 thumb_image: "documentation/sample-image.jpg"
 tags: [web, jekyll]
+author: "Another Author"
 ---
 
 {% include image.html path="documentation/chalk-intro.png" path-detail="documentation/chalk-intro@2x.png" alt="Chalk intro" %}