improve meta tags: (#212)

* add og:locale meta tag

* improve meta tags:

- fix `author` and `og:url` meta tags
- add missing (Facebook) Open Graph meta tags
  - add `og:locale`
  - add `og:updated_time`
  - make `og:type` an `article` for blog posts (instead of `website`)
  - add `article:` meta tags for blog posts (use the first category of blog posts for `article:section`)
  - add `og:image:type` MIME type
  - add auto-calculated `og:image:width` and `og:image:height`
  - you can now set the key `facebook_author = "xyz"` in the front matter of posts (also possible to set a fallback under `Site.Params.facebook_author`) to have the `article:author` meta tag set to `"https://www.facebook.com/xyz/"`
  - add `article:publisher` if `facebook_site` is set in `Site.Params`
- use the post banner image for both `og:image` and `twitter:image` if present and fall back to `static/img/sharing-default.png` otherwise
- make `twitter:card` only of type `summary_large_image` if page is a blog post and has a dedicated banner image set
- add `twitter:creator` meta tag if the key `twitter_author` is present in the front matter of posts (also possible to set a fallback under `Site.Params.twitter_author`)
- added some examples for facebook/twitter authors in the example `.md` posts
- make `twitter:site` meta tag disappear if `twitter_site` is not set in `Site.Params`
- truncate `twitter:title` and `twitter:description` to max allowed length (70 and 200 chars)
- `markdownify` and `plainify` various strings for convenience
- simplify code/improve style

* use additional variables to avoid code redundancy

* document how to set HTML metadata

* clarify metadata documentation

* also mention `og:updated_time`

* clarify sentence about HTML metadata

1 files changed, 51 insertions, 33 deletions

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 834a733..1efc640 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -3,40 +3,32 @@
   <meta name="robots" content="all,follow">
   <meta name="googlebot" content="index,follow,snippet,archive">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>{{ .Title }}</title>
-  <meta name="author" content="{{ .Site.Author.name }}" />
-
-  {{ if .Keywords }}
-  <meta name="keywords" content="{{ delimit .Keywords ", " }}">
-  {{ else if .Site.Params.DefaultKeywords }}
-  <meta name="keywords" content="{{ delimit .Site.Params.DefaultKeywords ", " }}">	
-  {{ end }}
-
-  {{ if .Description }}
-  <meta name="description" content="{{ .Description }}">
-  {{ else if .Site.Params.DefaultDescription }}
-  <meta name="description" content="{{ .Site.Params.DefaultDescription }}">	
-  {{ end }}
+  {{ $title_plain := .Title | markdownify | plainify }}
+  <title>{{ $title_plain }}</title>
+  <meta name="author" content="{{ .Param "author" }}" />
+  <meta name="keywords" content="{{ with .Keywords }}{{ delimit . ", " }}{{ else }}{{ delimit .Site.Params.defaultKeywords ", " }}{{ end }}">
+  {{ $description_plain := default .Site.Params.defaultDescription .Description | markdownify | plainify }}
+  <meta name="description" content="{{ $description_plain }}">
 
   {{ .Hugo.Generator }}
 
+  <!-- Font -->
   <link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800' rel='stylesheet' type='text/css'>
 
-  <!-- Bootstrap and Font Awesome css -->
+  <!-- Bootstrap and Font Awesome CSS -->
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
-  <!-- Css animations  -->
+  <!-- CSS animations  -->
   <link href="{{ "css/animate.css" | relURL}}" rel="stylesheet">
 
   <!-- Theme stylesheet, if possible do not edit this stylesheet -->
-  {{ if and (isset .Site.Params "style") .Site.Params.style }}
-    <link href="{{ "css/style" | relURL}}.{{ .Site.Params.style }}.css" rel="stylesheet" id="theme-stylesheet">
+  {{ with .Site.Params.style }}
+    <link href="{{ "css/style" | relURL}}.{{ . }}.css" rel="stylesheet" id="theme-stylesheet">
   {{ else }}
     <link href="{{ "css/style.default.css" | relURL}}" rel="stylesheet" id="theme-stylesheet">
   {{ end }}
 
-
   <!-- Custom stylesheet - for your changes -->
   <link href="{{ "css/custom.css" | relURL}}" rel="stylesheet">
 
@@ -48,28 +40,54 @@
     <![endif]-->
   ` | safeHTML }}
 
-  <!-- Favicon and apple touch icons-->
+  <!-- Favicon and Apple touch icons-->
   <link rel="shortcut icon" href="{{ "img/favicon.ico" | relURL }}" type="image/x-icon" />
   <link rel="apple-touch-icon" href="{{ "img/apple-touch-icon.png" | relURL }}" />
-  <!-- owl carousel css -->
 
+  <!-- owl carousel CSS -->
   <link href="{{ "css/owl.carousel.css" | relURL}}" rel="stylesheet">
   <link href="{{ "css/owl.theme.css" | relURL}}" rel="stylesheet">
 
+  <!-- RSS feed -->
   <link rel="alternate" href="{{ "/index.xml" | absURL }}" type="application/rss+xml" title="{{ .Site.Title }}">
 
-  <!-- Twitter Card meta tags -->
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
-  <meta name="twitter:title" content="{{ if .Title }}{{ .Title }}{{ else }}{{ .Site.Title }}{{ end }}">
-  {{ if .Params.banner }}<meta name="twitter:image" content="{{ .Params.banner | absURL }}">
-  {{ else }}<meta name="twitter:image" content="{{ .Site.Params.twitterImage | absURL }}">
-  {{ end }}<meta name="twitter:description" content="{{ if .Params.description }}{{ .Params.description }}{{ else }}{{ .Site.Params.defaultDescription }}{{ end }}">
-
   <!-- Facebook OpenGraph tags -->
-  <meta property="og:title" content="{{ .Title }}" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="{{ .Permalink }}/" />
-  <meta property="og:image" content="{{ .Site.Params.logo }}" />
+  {{ $is_blog := and (eq .Type "blog") (eq .Kind "page") }}
+  {{ $has_image :=  isset .Params "banner" }}
+  {{ $image := cond $has_image .Params.banner .Site.Params.default_sharing_image }}
+  {{ $image_ext := path.Ext $image }}
+  <meta property="og:locale" content="{{ replace .Site.LanguageCode "-" "_" }}">
+  <meta property="og:site_name" content="{{ .Site.Title }}">
+  <meta property="og:title" content="{{ $title_plain }}">
+  <meta property="og:type" content="{{ cond $is_blog "article" "website" }}">
+  <meta property="og:url" content="{{ .Permalink }}" />
+  <meta property="og:description" content="{{ $description_plain }}">
+  <meta property="og:image" content="{{ $image | absURL }}">
+  <meta property="og:image:type" content="image/{{ if eq $image_ext ".svg" }}svg+xml{{ else }}{{ trim $image_ext "." }}{{ end }}">
+  {{ with .Params.banner_alt }}<meta property="og:image:alt" content="{{ . | markdownify | plainify }}">{{ end }}
+  {{ $image_local :=  printf "/static/%s" $image}}
+  {{ with (imageConfig $image_local) }}
+    <meta property="og:image:width" content="{{ .Width }}">
+    <meta property="og:image:height" content="{{ .Height }}">
+  {{ end }}
+  {{ with .Lastmod }}<meta property="og:updated_time" content="{{ .Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
+  {{ if $is_blog }}
+    {{ with .Param "facebook_site" }}<meta property="article:publisher" content="https://www.facebook.com/{{ . }}/">{{ end }}
+    {{ with .Param "facebook_author" }}<meta property="article:author" content="https://www.facebook.com/{{ . }}/">{{ end }}
+    {{ with .Params.categories }}<meta property="article:section" content="{{ index . 0 }}">{{ end }}
+    {{ range .Params.tags }}<meta property="article:tag" content="{{ . }}">
+    {{ end }}
+    {{ if gt .ExpiryDate .PublishDate }}<meta property="article:expiration_time" content="{{ .ExpiryDate.Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
+    {{ with .PublishDate }}<meta property="article:published_time" content="{{ .Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
+    {{ with .Lastmod }}<meta property="article:modified_time" content="{{ .Format "2006-01-02T15:04:05Z0700" }}">{{ end }}
+  {{ end }}
+
+  <!-- Twitter Card meta tags -->
+  <meta name="twitter:card" content="summary{{ if and $is_blog $has_image }}_large_image{{ end }}">
+  {{ with .Param "twitter_site" }}<meta name="twitter:site" content="@{{ . }}">{{ end }}
+  <meta name="twitter:title" content="{{ $title_plain | truncate 70 }}">
+  <meta name="twitter:image" content="{{ $image | absURL }}">
+  <meta name="twitter:description" content="{{ $description_plain | truncate 200 }}">
+  {{ with .Param "twitter_author" }}<meta name="twitter:creator" content="@{{ . }}">{{ end }}
 
 </head>