Page MenuHomePhabricator

Add hover-card like image (og:image) to open graph meta data
Closed, ResolvedPublic


Currently if you share a Wikipedia page on various social networks the article doesn't display well. To remedy this we should show an image and a description (see related task T142090)

Acceptance criteria

  • og:image meta tag is added to all pages in main namespace (probably via TextExtracts extension)
  • og:image is only added if a feature flag is enabled
  • Verify the description shows up in WhatsApp, Facebook and Twitter shares.

Previous task description

During the New Readers workshop, we learned that Wikipedia links don't display well in Whatsapp. This is also true on other websites. Apparently this is solvable by updates to metadata.

I will do more research at some point, but maybe you know something and we can expand on this.

@JKatzWMF says there may be an existing task for this.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

I think this belongs to the tracking epic - Implement support for sharing protocols (T56829), but since Whatsapp uses open graph, the closest task was this: T33338 (which only covers thumbnail). But had to create a separate ticket for providing a text summary: T142090

dr0ptp4kt triaged this task as Medium priority.Aug 4 2016, 3:09 PM
dr0ptp4kt added a project: Design.
dr0ptp4kt moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.
dr0ptp4kt added subscribers: Nirzar, dr0ptp4kt.

@Nirzar what sort of UX would you recommend for OpenGraph cards?

I just merged in an iOS task. Generally, OpenGraph is the de facto open standard around this stuff. It's legitimate to factor in multiple aspects of this problem if approaching it, as the tags have cross-platform interpretations. It's an interesting problem to solve.

I just merged in an iOS task. Generally, OpenGraph is the de facto open standard around this stuff.

{{cn}}, c.f. T64811#667960, etc.

I just merged in an iOS task. Generally, OpenGraph is the de facto open standard around this stuff.

{{cn}}, c.f. T64811#667960, etc.

See my follow-up as well, which is basically me giving up the no-site-specific-metadata-standards fight, sadly.

Thanks, @Legoktm and @greg.

If we're going for general sufficiency at the whole page level (<head><meta> tags), I believe Article (for search engines) and OpenGraph (for sharing scenarios plus other extraction technologies) would be enough, given that Twitter tech is supposed to fall back to OpenGraph on matching properties. This said, given that the search providers already apply lots of special logic in interpreting Wikimedia content, I wonder if it would be possible to skip the Article piece.

It would seem in either case (i.e., Article plus OpenGraph, or only OpenGraph) we'd definitely want to check the page rank metric on a site or two before applying more generally.

I did some analysis on what tags should be used and what we use right now.

here's how a wired article looks on whatsapp

IMG_1084.PNG (385×740 px, 113 KB)

Here's wikipedia

IMG_1083.PNG (264×743 px, 51 KB)

Right now there is a way to "infer" OG tags but it depends on the client.
for example Facebook's OG debugger shows it can infer a lot of properties but What's app does basic level (title + description)

This is why Wikipedia articles don't look good on facebook, whatsapp and it might be impacting search engine results too

here's a draft of what needs to be added to our <head>

og.png (3×2 px, 847 KB)


@Nirzar I think you've gotten this pretty far along... maybe we pass it into Web at this point?

@ovasileva this is in needs analysis.

It requires priority, user stories, goals, and acceptance criteria. wanna tackle this together and put it in "Triaged but future"?

this might go under "accessibility debt" in future or you think this goes under new feature and not debt?

@Nirzar - I think it would probably need a few more tasks, some product discussion on requirements. Let me tag it for the backlog and then we can discuss what other cards are necessary.

As far as classification, hmm, I think it can be considered debt, as it's technically a "feature" already, just one we don't do particularly well.

Nirzar raised the priority of this task from Medium to High.Oct 1 2016, 7:56 PM
Nirzar moved this task from Design to Product Owner Backlog on the Web-Team-Backlog board.
Nirzar edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Design).
Jdlrobson renamed this task from Make results display better in Whatsapp, etc. to Add hover-card like image (og:image) to open graph meta data.Jan 25 2017, 9:13 PM
Jdlrobson updated the task description. (Show Details)

This all seems pretty actionable.

With all 3 of these in place that should be accomplish the original concern
Anyone fancy writing some patches for me to +2?

What would the image be if a page has no page image? Do we have a default one?

@Jdlrobson can we increase the scope of this task to all og metadata and create a subtask for og:image?

What would the image be if a page has no page image? Do we have a default one?

we will show project logo, starting with wikipedia. i can provide that

@Nirzar og:description is captured in T142090
og:title is already happening. Let's start with those before getting carried away with more.. :)
We already have a lot of subtasks (see subtasks of T56829) which is making it harder to work out what actually is needed so i discourage the creation of anymore.

There is one thing, I probably want to tackle this in the weekend since it has a big impact on Wikidata but if if I didn't get to work on it, I highly recommend you to get the page image using PageImages extension not TextRenderer.

@Ladsgroup I agree. Add me to any patches and ill happily review :)

We can show wikipedia W as the fallback image

og-image-fallback.png (400×400 px, 11 KB)

I would put the entire wordmark but we cant localize.

it will look something like this >

pasted_file (522×926 px, 80 KB)

We can use the existing global $wgAppleTouchIcon as a fallback. This will ensure all our projects behave this way.

@Jdlrobson sure, is it good resolution? anything above 80px should do

Change 334789 had a related patch set uploaded (by Ladsgroup):
Add PageImage OpenGraph tag

Change 334789 merged by jenkins-bot:
Add PageImage OpenGraph tag

This can be verified by attempting to share

Screen Shot 2017-01-31 at 10.33.23 AM.png (407×412 px, 171 KB)

At time of writing don't see any evidence of it working on Whatsapp.

Reading around I see that Whatsapp doesn't support picture with a size greater than 300KB. Should we reevaluate the width/height we used @Ladsgroup and @thiemowmde ?

First, thanks for sharing article of Obama.
I just put this here as a comparison:

pasted_file (311×507 px, 44 KB)

Regarding the size, the current one is 635 KB. So by reducing the width to sqrt(2)/2 = 0.7 of the original would do the job . We should be okay in case of Obama (can't say for other articles) OTOH facebook says it should be at least 1200 x 630 so I'd say let's go with 1280

(FWIW: Obama's picture with 1280px as width is 296KB)

Change 335266 had a related patch set uploaded (by Ladsgroup):
Reduce the thumbnail width to 1280px

Change 335266 merged by jenkins-bot:
Reduce the thumbnail width to 1280px

For pages like Albert Einstein and Barack Obama the image still seems too big for Whatsapp (Albert is 311kb and Obama 303kb). Not sure if that's a beta cluster specific issue. Maybe 1200 is the magic number...? :)
Looks good on the pages which have smaller images however :)

pasted_file (1×562 px, 435 KB)

OMG, I think we should go with 1200 but let's ask @thiemowmde's opinion :D


1200 makes sense to me. Actually a bit more than 1280. ;-) Go for it.

For upright images it would help to limit both width and height to the same number.

Personally I'm also fine with 1024.

Default image

For the record: I'm very much oppose a default image and already outlined the reasons in the comments section at

A default image that describes the project rather than the page belongs to the meta tags <link rel="shortcut icon" …> and <link rel="apple-touch-icon" …>. We are already providing these.

Spamming social networks with project logos is not only of no value, it hurts on multiple levels. Technically, if Facebook is clever they will block this as soon as they realize we are effectively spamming peoples timelines. Socially, when I want to share a Wikipedia article that has no image, there should not be an image. A giant Wikipedia logo does not make it easier to understand what I just shared, it's noise that gets in the way.

Change 335456 had a related patch set uploaded (by Ladsgroup):
Reduce the thumbnail size to 1200px

Personally I'm also fine with 1024.

But facebook says we should not go less than 1200px

Change 335456 merged by jenkins-bot:
Reduce the thumbnail size to 1200px

Beautiful. Tested Barack Obama and Albert Einstein on Whatsapp and both show images in the previews. Note that descriptions may not show/may not be as good (but please discuss those issues over in T142090!). @thiemowmde you've convinced me on the subject of no fallback image.

I think this work is good to wrap up now. Let's wait till it rides the train and then deal with issues as they arise.

FYI @Nirzar this should be live in wmf.11 (which should hopefully be next Thursday for enwiki, Tuesday for hewiki). Note that we are not showing a fallback image (per If you feel strongly about that please raise a new task for separate discussion!

@JKatzWMF @ovasileva it would be worth keeping an eye on site pageviews from referrers next week. I seem to recall there is lots of evidence out there on the web that images lead to more click throughs and it would be an important data point to capture (important from a help other websites pov and telling a story about the value of social networks).

Please keep me and @thiemowmde posted if you want to go with fallback image.
I think it might take some time that this change propagate through cache of facebook/others. We might reach out to them and ask them to purge it but not so sure about that. Please keep me posted regarding pageview by referrer and any change in those areas.