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

includes/meta/social.tmpl

 {#

[juliandoucette, 2017/06/21 12:05:01]

Does fb:app_id apply to pages?

[ire, 2017/06/21 13:20:24]

Sorry I think I was unclear with my use of "page". When we add the fb:app_id to
a site, whenever someone shares any url from that site, Facebook know's it is
related to the Facebook Page App ID. And when we log into our own dashboard, we
can see shares of the url. 

  # 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

[ire, 2017/06/21 11:39:29]

This list in the comments isn't representative of the values used below. Will
there be a separate list/documentation of all the variable names elsewhere? 

[juliandoucette, 2017/06/21 12:05:00]

I excluded fields that I automated (e.g.locale).

  #
- # og:type
+ # og_type
  # :  Page type (e.g. website, article)
  #
- # og:site

[ire, 2017/06/21 11:39:29]

This should be og:site_name

[juliandoucette, 2017/06/21 12:05:01]

Done.

Good catch.

+ # 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)
  #

[ire, 2017/06/21 11:39:29]

NIT: Can you group the `og` and the `twitter` metadata together? So when we read
it we're not going back and forth between different types of metadata

[juliandoucette, 2017/06/21 12:05:01]

Acknowledged.

I grouped them categorically. e.g. twitter:site after og:site, twitter:image:alt
after og:image.

I'll take your suggestion.

[juliandoucette, 2017/06/21 12:24:16]

Done.

- # 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_image_alt
+ # :  A text description of the nature of the featured image for search engines
+ #    and the visually impaired (max 420 characters)
  #}
+
+<!-- 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 %}
-  <meta name="twitter:site" content="@{{ twitter_site }}">
 {% endif %}

[juliandoucette, 2017/06/21 12:05:01]

Note: There is another proprietary field for associating pintrist accounts with
websites. I haven't included it here yet.

 {% if og_title %}
   <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 %}
   <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 %}
   <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 %}

[ire, 2017/06/21 11:39:29]

These metadata are missing for twitter cards:

twitter:image - The url of the image
twitter:title (required) - Card title
twitter:description (required) - Card description
twitter:creator - This is the author of the page content. As opposed to
twitter:site, which is the username for the website

See requirements for [Summary Card](https://dev.twitter.com/cards/types/summary)
and [Summary Card with Large
Image](https://dev.twitter.com/cards/types/summary-large-image)

[juliandoucette, 2017/06/21 12:05:00]

Falls back to og:image
Falls back to og:title
Falls back to og:description
Ack. I intend to create a separate include for articles/blog posts where things
like twitter:creator and og:article:author will be relevant. I don't think that
a twitter:creator is needed on other pages. Do you agree?
I'm guessing you are referring to the list above? Is there anything else?

[ire, 2017/06/21 13:20:24]

Noted.
Yeah I agree.
Yes I was referring to the list above. No there isn't anything else I could
find. 

-{% if host and page %}
-  <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 %}