Maniphest T142048

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

Assigned To

Authored By

	• atgo
	Aug 3 2016, 10:21 PM

Description

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.

Details

Subject	Repo	Branch	Lines +/-
Reduce the thumbnail size to 1200px	mediawiki/extensions/PageImages	master	+1 -1
Reduce the thumbnail width to 1280px	mediawiki/extensions/PageImages	master	+1 -1
Add PageImage OpenGraph tag	mediawiki/extensions/PageImages	master	+19 -1

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T318449 [Tracking] Improve the sharing of MediaWiki content
Open	None	T56829 [Goal] Implement support for sharing protocols
Resolved	Jdlrobson	T101711 Banners are used as the illustration when shared on social media websites such as Facebook
Resolved	Jdlrobson	T32113 When sharing articles without images on social sites (facebook, twitter, google+) the mediawiki logo is used in lieu of site logo
Duplicate	None	T142243 [EPIC] Add open graph meta tags
Resolved	Ladsgroup	T142048 Add hover-card like image (og:image) to open graph meta data

Event Timeline

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

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 3 2016, 10:21 PM

there may be an existing task for this.

Not sure what "results" means but T32113: When sharing articles without images on social sites (facebook, twitter, google+) the mediawiki logo is used in lieu of site logo comes to my mind...

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

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

• Nirzar claimed this task.Aug 4 2016, 4:10 PM

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.

• JKatzWMF added a parent task: T142243: [EPIC] Add open graph meta tags.Aug 5 2016, 6:32 PM

In T142048#2528137, @dr0ptp4kt wrote:

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

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

In T142048#2529968, @Legoktm wrote:

In T142048#2528137, @dr0ptp4kt wrote:

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 schema.org 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 schema.org Article piece.

It would seem in either case (i.e., schema.org 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

Here's wikipedia

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>

PDF:

OG.pdf405 KBDownload

• atgo added a subscriber: ovasileva.Aug 10 2016, 10:03 PM

• JMinor mentioned this in T111827: Conditionally add AppLinks <meta> tags to page <head>.Aug 11 2016, 9:31 PM

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

sounds good!

MBinder_WMF moved this task from Needs Prioritization to Design on the Web-Team-Backlog board.Sep 29 2016, 10:46 PM

MBinder_WMF edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.

• Nirzar moved this task from Needs analysis to Next up on the Web-Team-Backlog (Design) board.Sep 29 2016, 10:48 PM

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

ovasileva mentioned this in T147644: [Spike] Investigate ways to provide open graph meta tags.Oct 7 2016, 2:07 PM

Just saying this will help a little: https://gerrit.wikimedia.org/r/333891

Ladsgroup mentioned this in T142090: Add hover-card like summary (og:description) to open graph meta data printing plain summary and headline property in the SameAs schema.Jan 24 2017, 4:33 PM

SamanthaNguyen subscribed.Jan 24 2017, 9:41 PM

This all seems pretty actionable.

https://gerrit.wikimedia.org/r/#/c/333891/5 seems to cover og:title
This task now captures adding the image via an og:image tag
T142090 covers adding og:description

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.

I wanted to have an EPIC for this... oh wait, found it https://phabricator.wikimedia.org/T142243

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.

putnik subscribed.Jan 26 2017, 10:49 AM

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

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

https://gerrit.wikimedia.org/r/334789

gerritbot added a project: Patch-For-Review.Jan 28 2017, 3:51 PM

Jdlrobson added projects: Reading-Web-Sprint-90-🍌, Unplanned-Sprint-Work.Jan 30 2017, 6:47 PM

• JMinor unsubscribed.Jan 30 2017, 6:47 PM

Jdlrobson reassigned this task from • Nirzar to Ladsgroup.Jan 30 2017, 6:57 PM

Jdlrobson moved this task from Needs Analysis to Needs Code Review on the Reading-Web-Sprint-90-🍌 board.

Jdlrobson moved this task from Needs Code Review to Blocked Externally on the Reading-Web-Sprint-90-🍌 board.

Restricted Application added a project: User-Ladsgroup. · View Herald TranscriptJan 30 2017, 6:57 PM

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

https://gerrit.wikimedia.org/r/334789

Ladsgroup added a project: User-notice.Jan 31 2017, 4:12 PM

Jdlrobson moved this task from Blocked Externally to Ready for Signoff on the Reading-Web-Sprint-90-🍌 board.Jan 31 2017, 5:59 PM

This can be verified by attempting to share https://en.wikipedia.beta.wmflabs.org/wiki/Barack_Obama
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fen.m.wikipedia.beta.wmflabs.org%2Fwiki%2FBarack_Obama

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:

(YAY)
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)

Jdlrobson removed a project: Patch-For-Review.Jan 31 2017, 7:11 PM

Jdlrobson moved this task from Ready for Signoff to Needs More Work on the Reading-Web-Sprint-90-🍌 board.

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

https://gerrit.wikimedia.org/r/335266

gerritbot added a project: Patch-For-Review.Jan 31 2017, 7:16 PM

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

https://gerrit.wikimedia.org/r/335266

ReleaseTaggerBot added a project: MW-1.29-release (WMF-deploy-2017-02-07_(1.29.0-wmf.11)).Jan 31 2017, 8:00 PM

Jdlrobson moved this task from Needs More Work to Ready for Signoff on the Reading-Web-Sprint-90-🍌 board.Jan 31 2017, 9:37 PM

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

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

Size

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 https://gerrit.wikimedia.org/r/334789.

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

https://gerrit.wikimedia.org/r/335456

gerritbot added a project: Patch-For-Review.Feb 1 2017, 3:38 PM

In T142048#2989468, @thiemowmde wrote:

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

https://gerrit.wikimedia.org/r/335456

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 https://phabricator.wikimedia.org/T142048#2989468). 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.

CKoerner_WMF awarded a token.Feb 2 2017, 5:06 PM

Johan moved this task from To Triage to Announce in next Tech/News on the User-notice board.Feb 2 2017, 5:53 PM

Johan moved this task from Announce in next Tech/News to In current Tech/News draft on the User-notice board.Feb 2 2017, 6:47 PM

Jdlrobson mentioned this in T157171: Images appear not to show when wikipedia links shared on whatsapp.Feb 3 2017, 9:31 PM

Johan moved this task from In current Tech/News draft to Recently announced in Tech/News on the User-notice board.Feb 8 2017, 12:41 PM

Johan moved this task from Recently announced in Tech/News to Already announced/Archive on the User-notice board.Feb 16 2017, 11:22 AM

• Phabricator_maintenance moved this task from Product Owner Backlog to 2016-17 Q3 on the Web-Team-Backlog board.Mar 6 2018, 11:39 PM

Ladsgroup edited projects, added User-notice-archive; removed User-notice.Aug 13 2022, 1:53 PM

	F5432049: Screen Shot 2017-01-31 at 10.33.23 AM.png
	Jan 31 2017, 6:38 PM

	F5433510: pasted_file
	Jan 31 2017, 10:06 PM

	F5432146: pasted_file
	Jan 31 2017, 7:04 PM

	F5366988: pasted_file
	Jan 27 2017, 1:38 AM

	F5366986: og-image-fallback.png
	Jan 27 2017, 1:38 AM

Add hover-card like image (og:image) to open graph meta dataClosed, ResolvedPublicActions