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

includes/meta/standard.tmpl

Index: includes/meta/standard.tmpl
===================================================================
new file mode 100644
--- /dev/null
+++ b/includes/meta/standard.tmpl
@@ -0,0 +1,61 @@
+{#
+ # 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 all websites
+ #
+ # ## title
+ #
+ # Optimal format
+ # :  Primary Keeyword - Secondary Keyword | Brand Name
+ #
+ # Optimal length
+ # :  50-60 characters (600px wide on desktop)
+ #
+ # Fallback
+ # :  First highest level heading
+ #
+ # Nuance
+ # :  Titles are user facing, therefore it's important that they are readable.
+ #    But they must also be very compact. Full scentences, punctuation, and
+ #    uncommon words are discouraged unless they are specifically targeted.
+ #
+ # ## description
+ #
+ # Optimal format
+ #  :  Scentence
+ #
+ # Optimal length
+ # :  Less than 160 characters
+ #
+ # Fallback
+ # :  First 160 characters of phrasing content
+ #
+ # Nuance
+ # :  Descriptions are no longer directly weighted by popular search engines.
+ #    A good description introduces a page to encourage a click (which is
+ #    directly weighted by popular search engines) in less than 160 characters.
+ #}
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">

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

Note: We have had discussions about these meta tags in the past (http-equiv &
viewport) and determined that they were necessary for responsiveness on mobile
and IE (I think).

+<meta name="viewport" content="width=device-width, initial-scale=1">
+{% if title %}

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

Note: I had considered enforcing the optimal format of titles via something
like: title - category | site_name. But I decided against it so that we can have
a more fine-grained control of the title length. 

+  <title>{{ title | translate("page-title", "Meta page title") }}</title>
+{% endif %}
+{% if description %}
+  <meta name="description" content="{{ description | translate("page-description", "Meta page description") }}">
+{% endif %}