Add meta data to blog

[greiner]

Background

After #4293 fix our Blog is using default meta information from the adblockplus.org.
We need to be able to specify meta data according to the blog post and it's custom fields for SEO and SMO.

What to change

Use the post title to populate the title meta tag:

<meta name="title" content="">
<meta property="og:title" content="">

Use a custom field to populate the description meta tag:

<meta name="description" content="">
<meta property="og:description" content="">

Use custom field to populate the following meta tag or use current image as a fallback:

<meta property="og:image" content="">

Use blog post URL to populate current meta tag:

<meta property="og:url" content="">

Use current meta tag for blog posts:

<meta property="og:type" content="article">

[fhd]

Why would this be blocking #118?

[greiner]

Because otherwise the snippet that is shown to people the page is shared to might appear incomplete. However, since this is not a strict blocker but more a dependency, feel free to change it.

[greiner]

Also see #2107.

[saroyanm]

Adblock Plus logo 250x250px

[juliandoucette]

Can we have a better rendering of the ABP logo then the one attached to this issue @Christiane?

[juliandoucette]

From: ​https://developers.facebook.com/docs/sharing/best-practices

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

From: ​https://dev.twitter.com/cards/types/photo

"Twitter will resize images, maintaining original aspect ratio to fit the following sizes:

Web: maximum height of 375px, maximum width of 435px
Mobile (non-retina displays): maximum height of 375px, maximum width of 280px
Mobile (retina displays): maximum height of 750px, maximum width of 560px
Twitter will not create a photo card unless the twitter:image is of a minimum size of 280px wide by 150px tall. Images will not be cropped unless they have an exceptional aspect ratio. Images must be less than 1MB in size. Images will be fetched and proxied by Twitter to ensure a high quality of service and SSL security for users."

[christiane]

ABO Logo 1200x630

[saroyanm]

Replying to juliandoucette:

From: ​https://developers.facebook.com/docs/sharing/best-practices

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

There are difference how the image will be displayed depending of the size, I'm not sure if having big ABP logo as the "Large image" will provide much value IMO and also bandwidth will be bigger, I think that was the reason why the image that was provided is relatively small.
If your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.
If providing Image for High resolution screens is crucial we can provide several images, but preferable smaller version first, but I think we should be fine with small image left from the post IMO.

[saroyanm]

@Julian, as we had a discussion regarding the "meta description" and whether it's enough to use excerpt there, I've aligned with @Ben, regarding that and he will prefer to have a separate field/area where he can add description separately for the social media, but we should use excerpt I think for the cases where the separate description is not provided.

[juliandoucette]

Looks like we can use a custom field here. I recommend implementing this before we move blogging platforms.

[saroyanm]

Updated the description.

Note: the blog posts in Facebook are using currently the default promo image instead of picking the one from the content, as it was done before (when we didn't used meta tags at all).

[juliandoucette]

I did a little digging to determine the [appropriate, minimal] meta fields for our websites... reflected ​here.

A few questions:

• og:title defaults to title... Did someone ask for the ability to override this?
• og:description defaults to description... Did someone ask us for the ability to override this?
• og:url defaults to [canonical url, shared url] I think?... Did someone ask us for the ability to override this?

A few more fields to consider:

• canonical url - "An HTML element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page"
• og:site_name - "If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb"."
• twitter:site - "The Twitter @username the card should be attributed to."

[greiner]

Replying to juliandoucette:

• og:title defaults to title... Did someone ask for the ability to override this?
• og:description defaults to description... Did someone ask us for the ability to override this?
• og:url defaults to [canonical url, shared url] I think?... Did someone ask us for the ability to override this?

At least from my perspective I don't see a reason why people should override this. While Open Graph metadata is mostly used for Facebook, it' still an open standard so we should avoid optimizing those tags only for Facebook.

• canonical url - "An HTML element that helps webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a web page"

+1

• og:site_name - "If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb"."

Nothing against adding more meta data using open standards.

• twitter:site - "The Twitter @username the card should be attributed to."

Not sure about this one. There's probably a reason why we're not associating people on adblockplus.org as well as eyeo.com with their social media profiles. I could imagine that it might make those eyeo-endorsed accounts so better ask legal about it.

Personally, I'd be happy with linking to people's social media profiles on eyeo.com/team and the blog if it doesn't cause unnecessary trouble for the company or ourselves.

Note that we should probably use <link rel="author"> for that since it's an open standard.

[juliandoucette]

Added blocked by standard meta data definition as part of website-defaults in #4629.

[juliandoucette]

• I've added og:type to our blog posts via textpattern
• I think that #5447 will effectively resolve this issue now that textpattern is using the head from adblockplus.org
• #5401 will improve on this in the future

[juliandoucette]

Resolved by #5447.