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

includes/meta/social.tmpl

 {#
  # 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
+ # og_type
+ # :  Page type (e.g. website, article)
+ #
+ # og_site_name
  # :  A short name associated with the site (not page)
  #
- # twitter:site
+ # 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)
+ #
+ # 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.

+ # twitter_image_alt
+ # :  A text description of the nature of the featured image for search engines
+ #    and the visually impaired (max 420 characters)
  #}

[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.

+
+<!-- open graph -->
+
+{% if host and page %}
+  <meta property="og:url" content="{{ host }}/{{ page }}">

[juliandoucette, 2017/06/21 12:30:02]

@Vasily and/or @Jon I need `protocol://host.domain:port/path`. How do you think
I should do this? I would suggest a CMS global function that relies on
protocol/host/domain/port configuration.

-- Related to #5333.

[juliandoucette, 2017/06/21 15:20:45]

Done.

https://issues.adblockplus.org/ticket/5343

+{% endif %}
+{% if og_type %}
+  <meta property="og:type" content="{{ og_type }}">
+{% endif %}
 {% 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 %}
+<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 %}
+
+<!-- twitter -->
+
+{% if twitter_site %}
+  <meta name="twitter:site" content="@{{ twitter_site }}">
+{% 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 %}