collective / sc.social.like

Social: Like Actions is a Plone package (add-on) providing simple Google+, Twitter and Facebook integration for Plone Content Types.
7 stars 23 forks source link

Remove Twitter Cards redundant tags #112

Closed hvelarde closed 7 years ago

hvelarde commented 7 years ago

The following comes from the Twitter documentation:

Twitter Cards and Open Graph

Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol. When using Open Graph protocol to describe data on a page, it is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe content and experience.

The example below uses a mix of Twitter and Open Graph tags to define a summary card:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

I suggest to remove the redundant markup to reduce the complexity of the code and the time to process each request.

rodfersou commented 7 years ago

Looking at the implementation of Pinterest, Google+ and Linkedin, they don't provide Open Graph tags, so you must enable Facebook to make it work.

Knowing this, we need to have Open Graph meta tags if Facebook or Pinterest or Linkedin or Twitter or Google+ plugin is enabled, what looks as a bug.

After talking with @hvelarde, his suggestion was to always show meta tags from Open Graph and just add the other tags in the respective plugin.

This interesting post give us some guidelines on how to achieve this for Twitter, Facebook, Google+ and Pinerest, and Linkedin uses the same Open Graph meta tags.

So I suggest to move the Open Graph meta tags into the main metatag.pt template.

One think need to take care is about Facebook recommendation to have image resolution bigger than 1200x630 to play well with high resolution devices, we already have some code to do this (1 and 2) and we have to decide if we keep this code or not. Remember that the same meta tag will be used for the other plugins.

Other suggestion from @hvelarde is to disable default Plone 5 metatag viewlet and enable our viewlet instead.

hvelarde commented 7 years ago

this is what the documentation says:

Image Sizes Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size.

so, we can use the large scale for Facebook also.