Opened 4 years ago

Closed 4 months ago

#146 closed change (fixed)

Add meta data to blog

Reported by: greiner Assignee: juliandoucette
Priority: P2 Milestone:
Module: Websites Keywords:
Cc: trev, saroyanm, christiane, pfrey, wspee, ire, jeen Blocked By: #5447
Blocking: #118 Platform: Unknown
Ready: no Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

Description (last modified by saroyanm)

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

Attachments (5)

ABP_logo_250x250px.png (19.5 KB) - added by saroyanm 3 years ago.
Adblock Plus logo 250x250px
ABP_Logo_Facebook_1200x630-02.png (9.2 KB) - added by christiane 17 months ago.
ABO Logo 1200x630
ABP_Logo_Twitter_375x435.png (15.3 KB) - added by christiane 17 months ago.
ABP_Logo_Twitter_375x280.png (14.3 KB) - added by christiane 17 months ago.
ABP_Logo_Twitter_560x750.png (10.3 KB) - added by christiane 17 months ago.

Download all attachments as: .zip

Change History (36)

comment:1 Changed 4 years ago by greiner

  • Blocking 118 added

comment:2 Changed 4 years ago by fhd

Why would this be blocking #118?

comment:3 Changed 4 years ago by 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.

comment:4 Changed 3 years ago by saroyanm

  • Component changed from Infrastructure to Websites
  • Platform set to Unknown
  • Ready unset

comment:5 Changed 3 years ago by trev

  • Cc trev added

comment:6 Changed 3 years ago by saroyanm

  • Description modified (diff)

comment:7 Changed 3 years ago by saroyanm

  • Cc saroyanm added
  • Description modified (diff)

comment:8 Changed 3 years ago by greiner

Also see #2107.

Changed 3 years ago by saroyanm

Adblock Plus logo 250x250px

comment:9 Changed 3 years ago by saroyanm

  • Description modified (diff)
  • Ready set

comment:10 Changed 3 years ago by saroyanm

  • Description modified (diff)

comment:11 Changed 18 months ago by juliandoucette

  • Cc christiane added
  • Tester set to Unknown

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

Last edited 18 months ago by juliandoucette (previous) (diff)

comment:12 Changed 18 months ago by juliandoucette

  • Ready unset

comment:13 follow-up: Changed 17 months ago by 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."

Changed 17 months ago by christiane

ABO Logo 1200x630

Changed 17 months ago by christiane

Changed 17 months ago by christiane

Changed 17 months ago by christiane

comment:14 in reply to: ↑ 13 Changed 17 months ago by 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.

comment:15 Changed 17 months ago by 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.

comment:16 Changed 15 months ago by juliandoucette

  • Priority changed from P3 to P2

comment:17 Changed 14 months ago by juliandoucette

  • Ready set

comment:18 Changed 14 months ago by juliandoucette

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

comment:19 Changed 13 months ago by juliandoucette

  • Description modified (diff)

comment:20 Changed 13 months ago by juliandoucette

  • Description modified (diff)

comment:21 Changed 13 months ago by saroyanm

  • Cc pfrey added
  • Description modified (diff)

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

comment:22 follow-up: Changed 10 months ago by 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."

comment:23 in reply to: ↑ 22 Changed 10 months ago by 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.

Last edited 10 months ago by greiner (previous) (diff)

comment:24 Changed 8 months ago by juliandoucette

  • Blocked By 4629 added

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

comment:25 Changed 8 months ago by juliandoucette

  • Cc wspee added

comment:26 Changed 7 months ago by juliandoucette

  • Owner set to juliandoucette

comment:27 Changed 6 months ago by juliandoucette

  • Owner juliandoucette deleted

comment:28 Changed 5 months ago by juliandoucette

  • Blocked By 5329, 5400, 5401 added; 4629 removed

comment:29 Changed 5 months ago by juliandoucette

  • Blocked By 5447 added; 5329, 5400, 5401 removed
  • Cc ire jeen added
  • Keywords textpattern removed
  • Ready unset
  • 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

comment:30 Changed 4 months ago by juliandoucette

  • Owner set to juliandoucette

comment:31 Changed 4 months ago by juliandoucette

  • Resolution set to fixed
  • Status changed from new to closed

Resolved by #5447.

Note: See TracTickets for help on using tickets.