Issue 5329 - Optimize website-boilerplate for sharing on social media networks

includes/meta/social.tmpl

Index: includes/meta/social.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/meta/social.tmpl
@@ -0,0 +1,71 @@
+{#
+ # This file is part of the website-defaults,
+ # Copyright (C) 2017 eyeo GmbH
+ #
+ # website-defaults is free software: you can redistribute it and/or modify
+ # it under the terms of the GNU General Public License version 3 as
+ # published by the Free Software Foundation.
+ #
+ # website-defaults is distributed in the hope that it will be useful,
+ # but WITHOUT ANY WARRANTY; without even the implied warranty of
+ # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ # GNU General Public License for more details.
+ #
+ # You should have received a copy of the GNU General Public License
+ # along with website-defaults. If not, see <http://www.gnu.org/licenses/>.
+ #
+ # ---
+ #
+ # # Essential meta data for sharing on social media
+ #
+ # og:site
+ # :  A short name associated with the site (not page)
+ #
+ # twitter:site
+ # :  A twitter username associated with the site (not page)
+ #
+ # og:title
+ # :  A clear title without branding or mentioning the domain itself
+ #
+ # og:description
+ # :  A clear description, at least two sentences long
+ #
+ # og:image
+ # :  Featured image (at least 1200x630, up to 5MB)

[juliandoucette, 2017/06/20 14:57:54]

Note: The dimensions come from facebook and the file size restriction comes from
twitter.

+ #}

[juliandoucette, 2017/06/20 14:57:54]

Looks like I'm missing og:type.

[juliandoucette, 2017/06/20 15:12:29]

Done.

Note: "website" is the default according to ogp.me.

+{% if og_site_name %}
+  <meta property="og:site_name" content="{{ og_site_name }}">
+{% endif %}
+{% if twitter_site %}

[juliandoucette, 2017/06/20 14:57:54]

Note: I'm saving twitter:creator for another include specifically for articles
(blog posts).

+  <meta name="twitter:site" content="@{{ twitter_site }}">
+{% endif %}
+{% if og_title %}

[juliandoucette, 2017/06/20 14:57:53]

Note: title and description are not redundant because they should be targeted
differently. See the descriptions of these fields above (and in standard.tmpl).

+  <meta property="og:title" content="{{ og_title }}">
+{% endif %}
+{% if og_description %}
+  <meta property="og:descirption" content="{{ og_description }}">
+{% endif %}
+{% if og_image %}
+  <meta property="og:image" content="{{ og_image }}">
+{% else if og_site_image %}

[juliandoucette, 2017/06/20 14:57:54]

Note: This allows us to optionally configure a default image for the site via
global.

+  <meta property="og:image" content="{{ og_site_image }}">
+{% endif %}
+{% if twitter_card %}

[juliandoucette, 2017/06/20 14:57:53]

Note: I thought these defaults made sense.

+  <meta name="twitter:card" content="{{ twitter_card }}">
+{% else if og_image or og_site_image %}
+  <meta name="twitter:card" content="summary_large_image">
+{% else %}
+  <meta name="twitter:card" content="summary">
+{% endif %}
+{% if twitter_image_alt %}

[juliandoucette, 2017/06/20 14:57:53]

Note: It's a shame that open graph doesn't support this. I'm tempted to use
og:image:alt anyway.

+  <meta name="twitter:image:alt" content="{{ twitter_image_alt }}">
+{% endif %}
+{% if host and page %}

[juliandoucette, 2017/06/20 14:57:54]

Note: We currently do not have a way to output the base url via CMS. As a
result, I am using an optionally configured global variable "host".

+  <meta property="og:url" content="{{ host }}/{{ page }}">
+{% endif %}
+<meta property="og:locale" content="{{ locale }}">
+{% for alternate_locale in locales %}
+  {% if alternate_locale != locale %}
+    <meta property="og:locale:alternate" content="{{ alternate_locale }}">
+  {% endif %}
+{% endfor %}