Issue 5329 - Added standard social media meta data to website-defaults

includes/meta/social.tmpl

-{# open graph #}
+{#
+ # This file is part of website-defaults
+ # Copyright (C) 2016-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 as published by
+ # the Free Software Foundation, either version 3 of the License, or
+ # (at your option) any later version.
+ #
+ # 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/>.
+ #}
 
-{% if host and page %}
-  <meta property="og:url" content="{{ host }}/{{ page }}">
-{% 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 og_title %}
-  <meta property="og:title" content="{{ og_title }}">

[juliandoucette, 2017/07/11 12:10:45]

I think I should add a fallback here for social networks that may not fall back
to title.

[ire, 2017/07/12 07:55:19]

I agree.

I may be confused with your term "fallback" here, but isn't this tag supposed to
be the fallback, and the proprietary tags the "enhancement"?

[juliandoucette, 2017/07/12 15:52:38]

I'm suggesting:

if og_title
  og:title = og_title
else if title
  og:title = title

both title and og_title may be set in the frontmatter of pages.

[ire, 2017/07/13 09:39:46]

Ah right. I read your initial statement in the wrong way. What you are
suggesting looks good. 

A thought: are there ever cases where `og_title` would be different from
`title`? If not we may only actually need title. At the same time it could be
useful to have the option to set something different. What do you think?

[juliandoucette, 2017/07/14 11:27:31]

RE: Will title be different than og:title (and alike)

Probably not. But they should be.

Optimizing for search engines is different than optimizing for social media.

Search title
:   `PRIMARY_KEYWORD SECONDARY_KEYWORD | BRAND_NAME` 60 chars
(https://moz.com/learn/seo/title-tag)

Social title
:   `PAGE_HEADING` 40 chars, "A clear title without branding or mentioning the
domain itself." (https://developers.facebook.com/docs/sharing/best-practices)

[juliandoucette, 2017/07/14 11:27:31]

Done.

[ire, 2017/07/17 07:18:22]

Okay makes sense. Thanks.

-{% endif %}
-{% if og_description %}
-  <meta property="og:description" content="{{ og_description }}">

[juliandoucette, 2017/07/11 12:10:45]

I think I should add a fallback here for social networks that may not fall back
to description.

[juliandoucette, 2017/07/14 11:27:31]

Done.

-{% endif %}
-{% if og_image %}
-  <meta property="og:image" content="{{ og_image }}">
-{% else if og_site_image %}
-  <meta property="og:image" content="{{ og_site_image }}">
-{% endif %}
-<meta property="og:locale" content="{{ locale }}">
-{% for alternate_locale in locales %}
+{% macro meta_tag(property, content, defaultContent=None) -%}
+  {% if content %}
+    <meta property="{{ property }}" content="{{ content }}">
+  {% elif defaultContent %}
+    <meta property="{{ property }}" content="{{ defaultContent }}">
+  {% endif %}
+{%- endmacro %}
+
+{% set social_media_meta = [
+  ('og:url', og_url, get_canonical_url(page)),
+  ('og:type', og_type, 'website'),
+  ('og:site_name', og_site_name, get_string('site-name', 'global') if has_string('site-name', 'global') else None),
+  ('og:title', og_title, title | translate('page-title', 'Meta data') if title else None),
+  ('og:description', og_description, description | translate('page-description', 'Meta data') if description else None),
+  ('og:image', og_image, image),
+  ('og:image:alt', og_image_alt, image_alt),
+  ('og:locale', og_locale, locale | to_og_locale),
+  ('fb:app_id', facebook_id, None),
+  ('twitter:site', twitter_site, '@eyeo'),
+  ('twitter:card', twitter_card, 'summary_large_image' if og_image or twitter_image or image else 'summary'),
+  ('twitter:image', twitter_image, None),
+  ('twitter:image:alt', twitter_image_alt, None),
+  ('p:domain_verify', pinterest_id, None),
+] %}
+
+{% for property, content, defaultContent in social_media_meta %}
+  {{ meta_tag(property, content, defaultContent) }}
+{% endfor %}
+
+{% for alternate_locale in available_locales %}
   {% if alternate_locale != locale %}
-    <meta property="og:locale:alternate" content="{{ alternate_locale }}">
+    {{ meta_tag(('og:locale:alternate', alternate_locale | to_og_locale)) }}
   {% endif %}
 {% endfor %}
-
-{# facebook #}
-
-{% if facebook_id %}
-  <meta property="fb:app_id" content="{{ facebook_id }}">
-{% endif %}
-
-{# twitter #}
-
-{% if twitter_site %}
-  <meta name="twitter:site" content="@{{ twitter_site }}">
-{% endif %}
-{% if twitter_card %}
-  <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 %}
-  <meta name="twitter:image:alt" content="{{ twitter_image_alt }}">
-{% endif %}
-
-{# pinterest #}
-
-{% if pinterest_id %}
-  <meta name="p:domain_verify" content="{{ pinterest_id }}">
-{% endif %}