Last Comment Bug 1125346 - Update og:image on the Hello product page to a Hello graphic instead of a Firefox logo
: Update og:image on the Hello product page to a Hello graphic instead of a Fir...
Status: RESOLVED FIXED
[kb=1640764]
:
Product: www.mozilla.org
Classification: Other
Component: Pages & Content (show other bugs)
: Production
: x86 Mac OS X
-- normal
: ---
Assigned To: Jon Petto [:jpetto]
:
:
Mentors:
https://www.mozilla.org/firefox/hello/
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2015-01-23 13:17 PST by Cory Price [:ckprice]
Modified: 2015-01-27 14:54 PST (History)
7 users (show)
See Also:
Locale:
QA Whiteboard:
Iteration: ---
Points: ---


Attachments
firefox-hello_logo-wordmark_stacked_1200x630.jpg (38.32 KB, image/jpeg)
2015-01-25 20:03 PST, Lee Tom
no flags Details
firefox-hello_logo-wordmark_stacked_1200x630.jpg (39.62 KB, image/jpeg)
2015-01-26 14:41 PST, Lee Tom
no flags Details
GitHub PR (44 bytes, text/x-github-pull-request)
2015-01-26 15:19 PST, Jon Petto [:jpetto]
no flags Details | Review | Splinter Review

Description User image Cory Price [:ckprice] 2015-01-23 13:17:27 PST
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 User image Cory Price [:ckprice] 2015-01-23 13:25:36 PST
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 User image M.J. Kelly 2015-01-23 14:40:40 PST
Adding Liz Hull, our social media manager. She may have thoughts.
Comment 3 User image Liz Hull 2015-01-23 14:46:06 PST
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 User image Cory Price [:ckprice] 2015-01-23 16:39:22 PST
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 User image Lee Tom 2015-01-25 20:03:48 PST
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.
Comment 6 User image Jon Petto [:jpetto] 2015-01-26 08:09:59 PST
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 User image Cory Price [:ckprice] 2015-01-26 12:38:49 PST
(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 User image Liz Hull 2015-01-26 14:19:07 PST
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 User image Cory Price [:ckprice] 2015-01-26 14:26:48 PST
(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 User image Lee Tom 2015-01-26 14:41:20 PST
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.
Comment 11 User image Cory Price [:ckprice] 2015-01-26 14:44:20 PST
Thanks Lee! :jpetto - this is good to.
Comment 12 User image Jon Petto [:jpetto] 2015-01-26 15:19:31 PST
Created attachment 8554858 [details] [review]
GitHub PR
Comment 13 User image [github robot] 2015-01-27 02:05:22 PST
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 User image Cory Price [:ckprice] 2015-01-27 14:54:02 PST
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/

Note You need to log in before you can comment on or make changes to this bug.