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

6 files changed, 102 insertions, 43 deletions

diff --git a/README.md b/README.md
index f053986..3abf166 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ This Hugo theme was ported from [Bootstrapious](http://bootstrapious.com/p/unive
     * [See more](#see-more)
     * [Clients](#clients)
     * [Recent posts](#recent-posts)
-    * [Meta tags](#meta-tags)
+  * [Meta tags](#meta-tags)
 * [Usage](#usage)
 * [Contributing](#contributing)
 * [License](#license)
@@ -390,26 +390,54 @@ You can enable it in the configuration file.
 ```
 
 
-#### Meta tags
+### Meta tags
 
-`Description` and `Keywords` meta tags are available and can be customized.
-You can set default values for all pages in the `config.toml` file as below.
+The following [HTML metadata](https://www.w3schools.com/tags/tag_meta.asp) can be set for every page. While the default value for some of them can be defined in `config.toml`, all of these properties can also be set through the respective [Hugo front matter variables](https://gohugo.io/content-management/front-matter/#front-matter-variables):
+
+| HTML meta `name`/`property`                              | Hugo front matter variable | Default variable in `config.toml` |
+| :------------------------------------------------------- | :------------------------- | :-------------------------------- |
+| `article:author`                                         | `facebook_author`          | -                                 |
+| `article:publisher`                                      | `facebook_site`            | `facebook_site`                   |
+| `author`                                                 | `author`                   | -                                 |
+| `description` / `og:description` / `twitter:description` | `description`              | `defaultDescription`              |
+| `keywords`                                               | `keywords`                 | `defaultKeywords`                 |
+| `og:image` / `twitter:image`                             | `banner`                   | `default_sharing_image`           |
+| `title` / `og:title` / `twitter:title`                   | `title`                    | -                                 |
+| `twitter:creator`                                        | `twitter_author`           | -                                 |
+| `twitter:site`                                           | `twitter_site`             | `twitter_site`                    |
+
+Besides, certain [Open Graph](http://ogp.me/) metadata is automatically set:
+
+- `article:published_time`, `article:modified_time`, `og:updated_time` and `article:expiration_time` are set based on [Hugo's (predefined) front matter variables `date`, `publishDate`, `lastmod` and `expiryDate`](https://gohugo.io/content-management/front-matter/#predefined).
+- `article:section` and `article:tag` are set based on [Hugo's `categories` and `tags` taxonomies](https://gohugo.io/content-management/taxonomies/#default-taxonomies). Since there can only be one `article:section`, only the first element of the `categories` array is used as `article:section`.
+
+You can set default values for all pages in the `config.toml` file as below:
 
 ```toml
 [params]
     defaultKeywords = ["devcows", "hugo", "go"]
     defaultDescription = "Site template made by Devcows using Hugo"
+    default_sharing_image = "img/sharing-default.png"
+    facebook_site = "https://www.facebook.com/GolangSociety/"
+    twitter_site = "GoHugoIO"
 ```
 
-The result in HTML will be the following.
+The resulting HTML will be the following:
 
 ```html
 <meta name="keywords" content="devcows, hugo, go">
 <meta name="description" content="Site template made by Devcows using Hugo">
+<meta property="og:description" content="Site template made by Devcows using Hugo">
+<meta property="og:image" content="img/sharing-default.png">
+<meta property="og:image:type" content="image/png">
+<meta property="og:image:width" content="800">
+<meta property="og:image:height" content="420">
+<meta property="article:publisher" content="https://www.facebook.com/GolangSociety/">
+<meta name="twitter:description" content="Site template made by Devcows using Hugo">
+<meta name="twitter:site" content="@GoHugoIO">
 ```
 
-You can also override the default values from the `config.toml` by setting the `description` and `keywords` in the individual pages meta data.
-See the `faq.md` file in the `exampleSite` directory for an example.
+You can also override the default values from the `config.toml` by setting the respective keys in the individual pages front matter. As an example, here's the front matter from the [`faq.md` file](exampleSite/content/faq.md) in the [`exampleSite` directory](exampleSite):
 
 ```yaml
 +++
@@ -419,6 +447,16 @@ keywords = ["FAQ","How do I","questions","what if"]
 +++
 ```
 
+Which results in the following HTML:
+
+```html
+<title>FAQ</title>
+<meta name="keywords" content="FAQ,How do I,questions,what if">
+<meta name="description" content="Frequently asked questions">
+<meta property="og:description" content="Frequently asked questions">
+<meta name="twitter:description" content="Frequently asked questions">
+```
+
 
 ## Usage
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 6e94f29..b3dfcb0 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -73,9 +73,10 @@ paginate = 10
     defaultKeywords = ["devows", "hugo", "go"]
     defaultDescription = "Site template made by devcows using hugo"
 
-    # Twitter
-    twitter = "GoHugoIO"
-    twitterImage = "img/twitter-default.png"
+    # Social media
+    facebook_site = "" # the Facebook handle of your site ('https://www.facebook.com/HANDLE')
+    twitter_site = "GoHugoIO" # the Twitter handle of your site (without the '@')
+    default_sharing_image = "img/sharing-default.png"
 
     # Google Maps API key (if not set will default to not passing a key.)
     googleMapsApiKey = "AIzaSyCFhtWLJcE30xOAjcbSFi-0fnoVmQZPb1Y"
diff --git a/exampleSite/content/blog/go-is-for-lovers.md b/exampleSite/content/blog/go-is-for-lovers.md
index 8b09d63..b5f3ff0 100644
--- a/exampleSite/content/blog/go-is-for-lovers.md
+++ b/exampleSite/content/blog/go-is-for-lovers.md
@@ -4,6 +4,7 @@ date = "2015-09-17T13:47:08+02:00"
 tags = ["go"]
 categories = ["programming"]
 banner = "img/banners/banner-2.jpg"
+facebook_author = "GolangSociety"
 +++
 
 Hugo uses the excellent [go][] [html/template][gohtmltemplate] library for
diff --git a/exampleSite/content/blog/migrate-from-jekyll.md b/exampleSite/content/blog/migrate-from-jekyll.md
index ce21cb5..1468d12 100644
--- a/exampleSite/content/blog/migrate-from-jekyll.md
+++ b/exampleSite/content/blog/migrate-from-jekyll.md
@@ -4,6 +4,7 @@ date = "2015-10-10T13:07:31+02:00"
 tags = ["ipsum"]
 categories = ["lorem"]
 banner = "img/banners/banner-5.jpg"
+twitter_author = "jekyllrb"
 +++
 
 ## Move static content to `static`
diff --git a/exampleSite/static/img/twitter-default.png b/exampleSite/static/img/sharing-default.png
index 5180bbb..5180bbb 100644
--- a/exampleSite/static/img/twitter-default.png
+++ b/exampleSite/static/img/sharing-default.png
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>