911591 - Improve Description text for website & pages - Sharing issue on Facebook reported on twitter

Status: RESOLVED INCOMPLETE

(Webmaker Graveyard :: webmaker.org, defect)

Description

[Replica @ModReplica]

Hello team, this issue was reported on twitter by the owner of Mozilla Belgium Facebook Page.

She reported that she wanted to share a link to webmaker.org/ on her Facebook Page and ask people to fill out the survey, which she would also link to in her post. 

The link to our website told her her browser was out of date. 

She ended up using a link to the survey in place of our site link because of that. The survey's description text is also not the best looking - it starts with slightly negative messaging on privacy - not a 'welcome to the survey!' type of thing which would be nice to have.


Here are her comments:

1. Hi, I want to share the webmaker.org page on my Facebook account Mozilla Belgium and talk about the survey,
2. but it gives this wrong description, so I can't do that !
3. "Your browser may lack functionality needed by Webmaker to function properly. Please upgrade your browser for an improved experience."
4. So I made only this way https://www.facebook.com/MozillaBelgium/posts/627757860602982

Aside from this really small and specific issue, I'd like to propose more share link testing in the near future. Our links are not generally optimized for social share on our biggest pages and we could take a look at that to help improve their attractiveness and boost re-shares. Ideally, we'd have positive and clear text as the link default along with a brand image.

Comment 1

[Brett Gaylor [:brett]]

Assuming this is Opengraph and meta tags, so we should also double check that the thumbnail is showing up - all webmaker.org pages should show the webmaker logo.

Wouldn't be surprised if this is related to localization, since I think we had improved this at one point.

Thanks for reporting, Rebeccah - remember to have one issue per bug :)

Comment 2

[Jon Buckley [:jbuck]]

:Replica - Do you know what browser and operating system she was using?

Comment 3

[Replica @ModReplica]

Will follow up and ask for details.

Comment 4

[Dale Karp (:daleee)]

So this is what the Google search results for Webmaker looks like:
https://dl.dropboxusercontent.com/s/fi73kky7ksaon0j/2013-09-03%20at%2011.46%20AM.png

The bug and this issue are related: because we aren't explicitly setting the description meta tag, Google/Facebook uses the first paragraph as the description.

Also notice the descriptions for the subpages: All the same.

Facebok actually offers a tool that will check a link and tell you how Facebook scrapes it for info. This is what it sees in Webmaker: https://developers.facebook.com/tools/debug/og/object?q=webmaker.org

As you can see, it is inferring nearly everything: what image to use, the way the site name appears, the description - the whole shebang.

So I suggest we get descriptions for the index & sub pages (tools, events, teach, about, etc).

Also, how do we want the title to appear on Google/a FB shared link? Right now, <pagename> - Mozilla Webmaker on FB and Mozilla Webmaker: Home on Google. We should make this consistent.

Also, Facebook suggests we use images at least 200x200 for the share image link. Do we have a specific image we want to use for Facebook link sharing?

This is an easy fix; just requires the above information!

Comment 5

[Erika Drushka]

Depending on which browser and search term I use, I get a combination of the following:
Mozilla Webmaker Home
Tools
Teach
About
Thimble
Events
Mozilla Webmaker Badges

I've created a pad here with suggested changes for each of the above: https://mofocomms.etherpad.mozilla.org/site-description-text-for-searches

**Note that we're currently re-writing our tagline and user value statement, so this copy will likely change in the next 2 months.**

Comment 6

[Replica @ModReplica]

All excellent changes.

I am not certain how the preview thingers work in general, but I'd be excited to see our images/thumbnails display consistently as well. 

When I add links to my tweets in Hootsuite, I can see a preview pane that often allows me to scroll through and select from a set of website default, or post specific, imagery. 

This is very useful for when I post simultaneously to twitter, and say, G+ which will make best use of the image - and fails hardest when there is no image available at all. Having no image makes for an ugly post on social. Multiple, thumbnail options would be the holy grail to extend the long term value of repeatedly using the same link. 

I'd be happy to show previews of what I see, or provide some input on what the ideal image should be, if you wish for that info. 

If this is a separate bug, I'm happy to file it.

Comment 7

[Replica @ModReplica]

Attachment: hootsuite-preview-bug.png

This is a screencap of what the previews look like to me when I'm ready to post them. 

The lack of image and negative-sounding description means that most of the time, I would only choose to post this link to twitter, since I know posting it as is on Facebook or G+ would create a poor impression of our 'consumer grade' look and feel - which is important to get people to feel confident they should click links on those channels. 

If I want to use our website links on image-centric platforms, I create my own screencaps on a case by case basis to avoid the autogenerated preview.

Comment 8

[David Humphrey (:humph)]

This is depressing.  At some point we had OpenGraph, Twitter Card, etc. metadata in the head of webmaker.org's index page, but now there is nothing.  As such, G+ (and other services) are forced to scrape text.  I'm going to file bugs to get this fixed on all our major landing pages.

Comment 10

[Replica @ModReplica]

Attachment: What Popcorn Links look like once posted on Facebook

Hello, Just adding some more information here as I test our how the links perform on social. There is no preview/thumbnail image visible for this popcorn.

Comment 11

[Replica @ModReplica]

Attachment: This is the description when I link to Thimble's two-pane editor.

So, Just to continue reporting the ways the links perform when shared, today I sent a link to a maker to Thimble's editor - to try to encourage them to use it immediately.

I don't think this result looks too safe/encouraging.

Comment 12

[Dale Karp (:daleee)]

Dave, what is the status on https://bugzilla.mozilla.org/show_bug.cgi?id=914176 ? Were you working on this series of bugs, or should I take over?

Comment 13

[David Humphrey (:humph)]

No, you can run with this.  I just did the initial research, and it's in that bug.

Comment 14

[Replica @ModReplica]

Attachment: facebook-share.png

This shows the improved Facebook Links for Popcorn. Will add a Thimble Test next.

Comment 15

[Replica @ModReplica]

Attachment: November 2013 share-thimble-facebook.png

So - unfortunately I didn't have as smooth a time sharing one of my thimble makes to my facebook page from my profile page. (this, I know is a distinct use-case that is different from makers sharing their links from within the UX as they finish making stuff)

1. The share function from the thimble details page has a pushy G+ rollover ad I didn't like, esp in light of all the youtube forced G+ negative stuff going on as a major discussion in social lately. 

2. Recommend seems like the wrong word - can we swap with 'share?' (not a dealbreaker though, it's fine, just awkward for those wanting to share their own work after the making process)

3. for some reason, the make published as a default to 'Only Me'. I checked my facebook settings and saw no reason for that to happen from facebook's side, and there was no way to set any of that in the webmaker side. THIS is something we need to sort out. Most people would not notice the 'only me' setting and be sad nobody liked their creation - since they can't see it! :(

4. So the make itself looked great when it hit the timeline, but I was the only one who could see it (I asked for others to double check for me). That is also confusing as far as not noticing the 'only me' setting. 

5. When I went back to try it again and see if I could alter the 'Only me' setting, webmaker would not let me share it twice. 

Only one try was allowed. 


Will follow up on one more test with facebook Thimble shares, this time from within the Remix/Publish process.

Comment 16

[Replica @ModReplica]

Attachment: share-thimble-fb-viatool.png

When publishing a Make using the 'share via' for Thimble, it is cramped/invisible as shown. (Firefox Beta 26.0)

Comment 17

[Replica @ModReplica]

Attachment: link-bug.png

This one is from one of those paper.li pages that are rendered by automatically arranging tagged social posts and tweets into a one-pager with a 'newsy' theme. The link for this grab is here:

http://paper.li/rara79/1382824165

I added this so that we can identify why we get the 'update your browser' statement all the time. This was a link to an Event I think.

Comment 18

[Replica @ModReplica]

Attachment: tumblr-1.png

Ugh. Sorry guys. So, this is what the popcorn maker default size (640 x 403) looks like as an embedded post in Tumblr. 


Yes, this is from the publisher view, but it's the top way our followers will interact with the content. When they want to play the item, it goes from blackscreen to an unclickable popcorn player (the player is outsize and the buttons aren't accessible).

This *will* play properly on the front end -  once published to OUR tumblr blog - but only because we have set our frontpage to display all posts at above 600 px wide, which is representative of maybe 15% - or less - of all theme sizes. 

What I'm saying here is we'll need the player to either autosize in order to work at all on tumblr, or to have a selectable option in the embed code area that conforms to tumblr defaults.

Comment 19

[Replica @ModReplica]

Attachment: tumblr-2.png

This is the same post on tumblr, with the smallest size option (560 x 358) in the 'embed code' area. I'm not sure how many typical users would try non-default size options, or if they'd know to?

I will publish it today (Thursday) and see how it performs.

I have almost entirely screencapped popcorns for tumblr because of ongoing difficulty posting them there. 

Tumblr is an unusual channel type, so I suppose it should be considered whether this is a prime place that makes should be optimized for, or not. Either way, I think this issue clearly would have impact on virality of makes/shares.

Maybe there is also a possiblity of adding tumblr to the webmaker share tools we have, that could force the makes to conform to the correct size automatically?

Comment 20

[Dale Karp (:daleee)]

Triaging this to Gavin.

Comment 21

[Chris DeCairos (:cade)]

The webmaker.org site is no longer developed.

https://learning.mozilla.org/blog/whats-next-for-webmaker-tools