fix(sharing): give context to title and use proper og:image

helpers.js

@@ -14,3 +14,10 @@ function removeIvalidDataURL (content) {
   let regex = /data:\S+;base64\S*/gm
   return content.replace(regex, '#')
 }
+
+exports.formatMetaTitle = (title) => {
+  if (!title) {
+    return 'The Example App'
+  }
+  return `${title.charAt(0).toUpperCase()}${title.slice(1)} — The Example App`
+}

views/layout.pug

@@ -1,15 +1,18 @@
 doctype html
 html
   head
-    title= title
+    title= helpers.formatMetaTitle(title)
     link(rel='stylesheet', href='/stylesheets/style.css')
     meta(name='viewport' content='width=device-width, initial-scale=1')
     meta(name='description' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
     meta(name='twitter:card' value='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
-    meta(property='og:title' content=title)
+    meta(property='og:title' content=helpers.formatMetaTitle(title))
     meta(property='og:type' content='article')
     meta(property='og:url' content='http://contentful-example-app.herokuapp.com/')
-    meta(property='og:image' content='http://contentful-example-app.herokuapp.com/images/logo.svg')
+    meta(property='og:image' content='http://contentful-example-app.herokuapp.com/og-image.jpg')
+    meta(property='og:image:type' content='image/jpeg')
+    meta(property='og:image:width' content='1200')
+    meta(property='og:image:height' content='1200')
     meta(property='og:description' content='This is The Example App, an application built to serve you as a reference while building your own applications using Contentful.')
     link(rel='apple-touch-icon' sizes='120x120' href='/apple-touch-icon.png')
     link(rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png')