1125346 - Update og:image on the Hello product page to a Hello graphic instead of a Firefox logo

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect)

Description

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

This bug is created to update the og:image property on the Hello product page from the Firefox logo to a visual specific to Firefox Hello.

Current image used: https://mozorg.cdn.mozilla.net/media/img/firefox/firefox-256.jpg

Comment 1

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Note: Facebook's best practices suggest a fairly large-sized image (ref: https://developers.facebook.com/docs/sharing/best-practices):
> og:image – This is an image associated with your media.
> We suggest that you use an image of at least 1200x630 pixels.

Lee - any recommendations on what we can use here? Maybe just the smiley face logo?

As a reminder, this image appears when you share the product page on Facebook (http://cl.ly/image/1k2S1B2x0j23).

Comment 2

[M.J. Kelly]

Adding Liz Hull, our social media manager. She may have thoughts.

Comment 3

[Liz Hull]

I think something with the Hello logo would be great. If we wanted to be fancy, a simulated call between two people would be awesome, too. 

The recommended dimensions for an OG image are: 1200px x 630px, and it will need to have less than 20% text in the graphic.

Thanks!

Comment 4

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Here is a sample of what a share looks like with a landscape ratio set as the og:image http://cl.ly/image/001s152o3Y1F

Comment 5

[Lee Tom]

Attachment: firefox-hello_logo-wordmark_stacked_1200x630.jpg

Here's the Hello logo + wordmark stacked at 1200x630px. Is there a max file-size we need to work within? If we have some leeway, I'd like to compress this less.

Comment 6

[Jonathan Petto [:jpetto]]

I don't think there are any file size restrictions - I couldn't find anything to that effect in the guidelines (https://developers.facebook.com/docs/sharing/best-practices#images). I'd say as small as we can make it while maintaining quality.

Comment 7

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Liz Hull from comment #3)
> it will need to have less than 20% text in the graphic.
Hi Liz,

Interested in this requirement as I haven't really seen it anywhere else. Could you elaborate a bit?

Eyeball guess on the image in comment #5 tells me the text may comprise slightly more than 20% of the whole image. Is this okay?

Thanks

Comment 8

[Liz Hull]

Hey Cory! It's specific to Facebook advertising (and we'll be putting some budget behind the Hello posts). Facebook only allows images with less than 20% text on them be approved for ads. It's part of their guidelines: https://www.facebook.com/help/468870969814641

According to FB's grid tool, there is more than 20% text here by a little bit (it's approx 32%). https://www.facebook.com/ads/tools/text_overlay Is there any way to make the text slightly smaller? 

Thanks so much!

Comment 9

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

(In reply to Liz Hull from comment #8)
> According to FB's grid tool, there is more than 20% text here by a little
> bit (it's approx 32%). https://www.facebook.com/ads/tools/text_overlay Is
> there any way to make the text slightly smaller? 
Hi Lee, anyway you can bring down the text size here? Link above lets you check.

Comment 10

[Lee Tom]

Attachment: firefox-hello_logo-wordmark_stacked_1200x630.jpg

I reduced the size of the logo. Now, the text only takes 12% of the image, so we should be good to go.

Comment 11

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Thanks Lee! :jpetto - this is good to.

Comment 12

[Jonathan Petto [:jpetto]]

Attachment: GitHub PR

Comment 13

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/84a009c5fe3671acf28aeea5014734f322bc1a96
Update Hello product page og:image. Bug 1125346.

https://github.com/mozilla/bedrock/commit/11e9b01ec382eacc8779c00dad23571170539178
Merge pull request #2682 from jpetto/bug-1125346-hello-ogimage

Update Hello product page og:image. Bug 1125346.

Comment 14

[Cory Price [:ckprice] (bugmail disabled, NI me!)]

Quick note: when updating the og:image property, an additional step is using FB's linter to rescrape the URL: https://developers.facebook.com/tools/debug/