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

RESOLVED FIXED

Status

www.mozilla.org
Pages & Content
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: ckprice, Assigned: jpetto)

Tracking

Production
x86
Mac OS X

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [kb=1640764] , URL)

Attachments

(3 attachments)

(Reporter)

Description

2 years ago
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
(Reporter)

Updated

2 years ago
Whiteboard: [kb=1640764]
(Reporter)

Comment 1

2 years ago
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).
Flags: needinfo?(ltom)

Comment 2

2 years ago
Adding Liz Hull, our social media manager. She may have thoughts.
Flags: needinfo?(ehull)

Comment 3

2 years ago
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!
Flags: needinfo?(ehull)
(Reporter)

Comment 4

2 years ago
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

2 years ago
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.
Flags: needinfo?(ltom)
(Assignee)

Updated

2 years ago
Assignee: nobody → jon
(Assignee)

Comment 6

2 years ago
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.
(Reporter)

Comment 7

2 years ago
(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
Flags: needinfo?(ehull)

Comment 8

2 years ago
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!
Flags: needinfo?(ehull)
(Reporter)

Comment 9

2 years ago
(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.
Flags: needinfo?(ltom)

Comment 10

2 years ago
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.
Flags: needinfo?(ltom)
(Reporter)

Comment 11

2 years ago
Thanks Lee! :jpetto - this is good to.
(Assignee)

Comment 12

2 years ago
Created attachment 8554858 [details] [review]
GitHub PR

Comment 13

2 years ago
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.

Updated

2 years ago
Status: NEW → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
(Reporter)

Comment 14

2 years ago
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/
You need to log in before you can comment on or make changes to this bug.