Update code.org og tags to match the marketing matrix #19398
Conversation
| theme: responsive_wide | ||
| banner: null | ||
| layout: wide | ||
| video_player: true | ||
| social: | ||
| "og:title": "<%= I18n.t(:og_title) %>" | ||
| "og:description": "<%= I18n.t(:og_description)%>" | ||
| "og:image" : "<%= 'https://' + request.host + '/images/fit-1220/social-media/' + share_image %>" | ||
| "og:image:width": '1220' | ||
| "og:image:height": '640' |
There was a problem hiding this comment.
I used 1220x640 to match the defaults, not sure if that's right.
code-dot-org/pegasus/router.rb
Lines 490 to 492 in f6a7749
joshlory
force-pushed
the
hoc-og-image-matrix
branch
from
9ddbe5f
to
122ddf4
Compare
| <% | ||
| title = hoc_s(:meta_tag_og_title) | ||
| title = I18n.t(:og_title_soon) if DCDO.get('soon-hoc', false) | ||
| title = I18n.t(:og_title_here) if DCDO.get('actual-hoc', false) |
There was a problem hiding this comment.
Is it ok to mix & match hoc_s and I18n.t here? What's the reason for having two different pathways?
There was a problem hiding this comment.
I think that it's fine - as far as I know.
There was a problem hiding this comment.
hoc_s was added for Tutorial Explorer (#11714) so that we could reuse the same strings on /learn between all of the pegasus domains. Looks like it's become more widely used since then. It makes sense if it's a string that's shared between hourofcode.com and code.org/csedweek.org.
There was a problem hiding this comment.
Now I'm wondering whether it's necessary to use it on pages that are exclusively on hourofcode.com.
There was a problem hiding this comment.
@tanyaparker tells me that hoc_s pulls from the right place even when pages are exclusively on hourofcode.com. It makes for a simpler translation pipeline. cc @Hamms
|
@breville PTAL! |
| title: #HourOfCode Challenge | ||
| theme: responsive | ||
| style_min: true | ||
| social: | ||
| "og:title": "Celebrity Challenge" | ||
| "og:description": "Win a celebrity video chat for your class!" | ||
| "og:image" : "<%= 'https://' + request.host + '/images/social-media/hoc-student-challenge.png' %>" | ||
| "og:image" : "<%= 'https://' + request.host + '/images/fit-1920/social-media/' + share_image %>" |
There was a problem hiding this comment.
1920 seems really large for a Twitter/OG image. Facebook seems to recommend min 1200 x 630 and Twitter 1024 x 512 pixels. @tanyaparker may know more.
There was a problem hiding this comment.
If we do keep it 1920, are both the images at least 1920?
There was a problem hiding this comment.
Yep! I added this because both images are 2mb+ 😕. We can go smaller, but I added an upper bound to match the existing og:image:width size.
There was a problem hiding this comment.
Hopefully production will serve them smaller than 2mb+ when we use fit-1920 and serve as JPGs?
| share_image = hoc ? 'celeb-challenge.jpg' : 'default-og-image.jpg' | ||
| description = hoc ? I18n.t(:og_description_celeb) : I18n.t(:og_description) | ||
|
|
||
| title = I18n.t(:og_title) |
There was a problem hiding this comment.
Will these strings require a content scoop?
There was a problem hiding this comment.
|
Longer term, I wonder if we should centralize the definition of our social metadata matrix, in an asset that kind of matches the gsheet-based documentation. |
|
@tanyaparker will review that the items match the matrix correctly. Everything else lgtm. |
|
This change can be tested on staging if robots.txt is manually changed to disable the production-only reference. Note that we discovered an issue after deploying last night in which Twitter, unlike Facebook, doesn't offer a manual way to flush its cache of the page's metadata. https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards
We tried the bit.ly workaround to no avail. Fortunately, a couple hours later the cache did get flushed, but we don't know of anything we specifically did to make that happen. |
|
We should be able to check OG tags via http://opengraphcheck.com/ on Staging. |
|
Approved by War Room triage for 11/27. |
Matrix here: https://docs.google.com/spreadsheets/d/1MNnj4luE3yVrvGvGLIaCBpdDhy3HmQODR9WWRdSkydw/edit#gid=0