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
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).
Adding Liz Hull, our social media manager. She may have thoughts.
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!
Here is a sample of what a share looks like with a landscape ratio set as the og:image http://cl.ly/image/001s152o3Y1F
Created attachment 8554358 [details] 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.
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.
(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
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!
(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.
Created attachment 8554833 [details] 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.
Thanks Lee! :jpetto - this is good to.
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.
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/