Added some social media meta tags #2

100Shapes · Apr 17, 2016 · 75cc61b · 75cc61b
1 parent 248a07a
commit 75cc61b
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 13 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,14 +1,14 @@
 # Site settings
 title: (Chris to write some tagline here)
-description: > # this means to ignore newlines until "baseurl:"
+description: > # this means to ignore newlines until 'baseurl:'
   Write an awesome description for your new site here. You can edit this
   line in _config.yml. It will appear in your document head meta (for
   Google search results) and in your feed.xml site description.
-baseurl: ""
-url: "http://www.100shapes.com"
-twitter_username: 100Shapes
-github_username:  100Shapes
-address: "13 Hawley Cres, Camden, London, NW1 8NP"
+baseurl: ''
+url: 'http://www.100shapes.com'
+twitter_username: '@100Shapes'
+github_username:  '@100Shapes'
+address: '13 Hawley Cres, Camden, London, NW1 8NP'
 address_link: https://goo.gl/maps/YVr9ih4MLZL2
 permalink: /blog/:categories/:title
 
@@ -37,7 +37,7 @@ jekyll-archives:
     category: '/blog/:name/'
 
 paginate: 2
-paginate_path: "/blog/p:num/"
+paginate_path: '/blog/p:num/'
 
 exclude:
   - vendor

diff --git a/_includes/head.html b/_includes/head.html
@@ -3,14 +3,51 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>{% if page.long_title | capitalize %}{{ page.long_title | escape | capitalize }}{% else %}{{ page.title |
-        escape | capitalize }}{%
-        endif %} | 100 Shapes</title>
-    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+    {% capture page-title %}{% if page.long_title %}{{ page.long_title | escape }}{% else %}{{ page.title | escape | capitalize }}{% if page.subtitle %} – {{ page.subtitle | escape }}{% endif %}{% endif %}{% endcapture %}
+    <title>{{ page-title }} | 100 Shapes</title>
+
+
+    {% capture page-description %}{% if page.description %}{{ page.description | strip_html | strip_newlines | truncate: 155 }}{% else %}{{ site.description }}{% endif %}{% endcapture %}
+    <meta name="description" content="{{ page-description }}">
 
     <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA/4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAERERERERERERAAAAAAAAERAQAAAAAAEBEAEAAAAAEAEQABAAAAEAARAAAQAAEAABEAAAEAEAAAEQAAABEAAAARAAAAEQAAABEAAAEAEAAAEQAAEAABAAARAAEAAAAQABEAEAAAAAEAEQEAAAAAABAREAAAAAAAAREREREREREREAAAAAP/wAAF/6AABv9gAAd+4AAHveAAB9vgAAfn4AAH5+AAB9vgAAe94AAHfuAABv9gAAX/oAAD/8AAAAAAAA" rel="icon" type="image/x-icon" />
 
     <link rel="stylesheet" href="{{ '/css/main.css' | prepend: site.baseurl }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
     {% feed_meta %}
+
+    <!-- Update your html tag to include the itemscope and itemtype attributes. -->
+    <html>
+
+    <!-- Schema.org markup for Google+ -->
+    <meta itemprop="name" content="{{ page-title }}">
+    <meta itemprop="description" content="{{ page-description }}">
+    <meta itemprop="image" content="http://www.example.com/image.jpg">
+
+    <!-- Twitter Card data -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="{{ site.twitter_username }}">
+    <meta name="twitter:title" content="{{ page-title }}">
+    <meta name="twitter:description" content="{{ page-description }}">
+    <meta name="twitter:creator" content="{{ site.twitter_username }}">
+    <!-- Twitter summary card with large image must be at least 280x150px -->
+    <meta name="twitter:image:src" content="http://www.example.com/image.html">
+
+    <!-- Open Graph data -->
+    <meta property="og:title" content="{{ page-title }}" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
+    <meta property="og:image" content="http://example.com/image.jpg" />
+    <meta property="og:description" content="{{ page-description }}" />
+    <meta property="og:site_name" content="100 Shapes – {{ site.title }}" />
+
+    {% if page.date %}
+    <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}" />
+    {% else %}
+    <meta property="article:published_time" content="{{ site.time | date_to_xmlschema }}" />
+    {% endif %}
+    <meta property="article:modified_time" content="{{ site.time | date_to_xmlschema }}" />
+
+    <meta property="fb:app_id" content="445133922273686">
+
 </head>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html itemscope itemtype="http://schema.org/Article">
 
 {% include head.html %}
 

diff --git a/_posts/2015-10-05-introducing-BBC-iPlayer-on-and-on.md b/_posts/2015-10-05-introducing-BBC-iPlayer-on-and-on.md
@@ -4,6 +4,11 @@ title:  "Introducing BBC iPlayer On & On"
 subtitle: "Continuous viewing for BBC iPlayer"
 category: news
 author: michele
+
+description: >
+  Michele, MD of 100 Shapes, explains a recent collaboration with the
+  BBC to creat a continuous viewing experience for the BBC iPlayer.
+  
 alias: /bla-bla-bla/
 ---
 

diff --git a/_posts/2016-04-08-sketch-is-awesome.md b/_posts/2016-04-08-sketch-is-awesome.md
@@ -1,8 +1,14 @@
 ---
 layout: post
 title:  "Sketch is brilliant"
-subtitle: "A tour of my favourite features"
+subtitle: "A designers tour of my favourite features"
 category: tools
+
+description: >
+  Trev, senior visual designers from 100 Shapes, explains some of his
+  favourite features in the new version of Sketch 3 and gives examples
+  of use in some of our recent design projects.
+  
 author: trev
 ---