Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update code.org og tags to match the marketing matrix #19398

Merged
merged 3 commits into from
Nov 27, 2017
Merged

Update code.org og tags to match the marketing matrix #19398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
665c4a7
Update code.org og tags to match the marketing matrix
joshlory Nov 24, 2017
122ddf4
Also update og:description per the matrix
joshlory Nov 24, 2017
5e10d1b
Update og:title per the matrix
joshlory Nov 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 5 additions & 2 deletions pegasus/sites.v3/code.org/public/challenge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,22 @@
---
<%
share_image = DCDO.get('soon-hoc', false) ? 'hoc-student-challenge.jpg' : 'celeb-challenge.jpg'
%>
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 %>"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we do keep it 1920, are both the images at least 1920?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hopefully production will serve them smaller than 2mb+ when we use fit-1920 and serve as JPGs?

"og:image:width": '1920'
"og:image:height": '1080'
"twitter:card": "player"
"twitter:site": "@codeorg"
"twitter:url": "https://code.org/challenge"
"twitter:title": "Celebrity Challenge"
"twitter:description": "Win a celebrity video chat for your class!"
"twitter:image:src" : "<%= 'https://' + request.host + '/images/social-media/hoc-student-challenge.png' %>"
"twitter:image:src" : "<%= 'https://' + request.host + '/images/fit-1920/social-media/' + share_image %>"
---

# Win a celebrity chat for your class!
Expand Down
21 changes: 17 additions & 4 deletions pegasus/sites.v3/code.org/public/index.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
---
<%
hoc = DCDO.get('soon-hoc', false) || DCDO.get('actual-hoc', false)
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)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will these strings require a content scoop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, added here: https://docs.google.com/document/d/1R6K8JiykIPwD3XG-5tKM48E_WY39DQRQoy1B31daY-A/edit

title = I18n.t(:og_title_soon) if DCDO.get('soon-hoc', false)
title = I18n.t(:og_title_here) if DCDO.get('actual-hoc', false)
%>
theme: responsive_wide
banner: null
layout: wide
video_player: true
social:
"og:title": "<%= I18n.t(:og_title) %>"
"og:description": "<%= I18n.t(:og_description)%>"
"og:title": "<%= title %>"
"og:description": "<%= description %>"
"og:image" : "<%= 'https://' + request.host + '/images/fit-1220/social-media/' + share_image %>"
"og:image:width": '1220'
"og:image:height": '640'
"twitter:image:src" : "<%= 'https://' + request.host + '/images/fit-1220/social-media/' + share_image %>"
"twitter:card": player
"twitter:site": "@codeorg"
"twitter:url": "https://code.org/"
"twitter:title": "<%= I18n.t(:og_title) %>"
"twitter:description": "<%= I18n.t(:og_description)%>"
"twitter:title": "<%= title %>"
"twitter:description": "<%= description %>"
critical_font: true
jquery: defer
style_min: true
Expand Down
16 changes: 12 additions & 4 deletions pegasus/sites.v3/csedweek.org/public/index.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
---
<%
description = I18n.t(:csedweek_og_description)
description = I18n.t(:csedweek_og_description_soon) if DCDO.get('soon-hoc', false)
description = I18n.t(:csedweek_og_description_here) if DCDO.get('actual-hoc', false)

title = I18n.t(:csedweek_og_title)
title = I18n.t(:og_title_here) if DCDO.get('actual-hoc', false)
%>
theme: responsive
banner: null
social:
"og:title": "<%= I18n.t(:csedweek_og_title) %>"
"og:description": "<%= I18n.t(:csedweek_og_description)%>"
"og:title": "<%= title %>"
"og:description": "<%= description %>"
"og:image": "https://<%=request.host%>/images/cs-is-everything-thumbnail.png"
"og:image:width": "1200"
"og:image:height": "627"
Expand All @@ -15,8 +23,8 @@ social:
"twitter:card": "player"
"twitter:site": "@codeorg"
"twitter:url": "https://csedweek.org/"
"twitter:title": "<%= I18n.t(:csedweek_og_title) %>"
"twitter:description": "<%= I18n.t(:csedweek_og_description)%>"
"twitter:title": "<%= title %>"
"twitter:description": "<%= description %>"
"twitter:image:src": "https://<%=request.host%>/images/cs-is-everything-thumbnail.png"
"twitter:player": "https://youtube.com/embed/QvyTEx1wyOY"
"twitter:player:width": "640"
Expand Down
4 changes: 2 additions & 2 deletions pegasus/sites.v3/hourofcode.com/i18n/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,9 +291,9 @@
map_legend_cs_tech_jam: 'Special Event'
map_warning: "The Hour of Code map only shows the first 200,000 registered events. All registered events with a valid address can be viewed on <a href='%{events_url}'>the events page.</a>"

meta_tag_og_title: 'Hour of Code: Anybody can learn'
meta_tag_og_title: 'Hour of Code: Join the Movement'
meta_tag_og_description: 'The Hour of Code is a global movement reaching tens of millions of students of all ages in 180+ countries and over 45 languages.'
meta_tag_twitter_title: 'Hour of Code: Anybody can learn'
meta_tag_twitter_title: 'Hour of Code: Join the Movement'
meta_tag_twitter_description: 'The Hour of Code is a global movement reaching tens of millions of students of all ages in 180+ countries and over 45 languages.'

twitter_default_text: "I'm participating in this year's #HourOfCode, are you? @codeorg"
Expand Down
9 changes: 7 additions & 2 deletions pegasus/sites.v3/hourofcode.com/public/index.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
---
<%
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)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it ok to mix & match hoc_s and I18n.t here? What's the reason for having two different pathways?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that it's fine - as far as I know.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now I'm wondering whether it's necessary to use it on pages that are exclusively on hourofcode.com.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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

%>
layout: wide_index
title: "<%= hoc_s(:front_title).gsub(/%{campaign_date}/, campaign_date('full-year')) %>"
social:
"og:title": "<%= hoc_s(:meta_tag_og_title) %>"
"og:title": "<%= title %>"
"og:description": "<%= hoc_s(:meta_tag_og_description) %>"
"og:image": "<%= 'https://' + request.host + '/images/social-media/hourofcode-2015-video-thumbnail.jpg' %>"
"og:image:width": '1440'
Expand All @@ -15,7 +20,7 @@ social:
"twitter:card": "player"
"twitter:site": "@codeorg"
"twitter:url": "https://hourofcode.com"
"twitter:title": "<%= hoc_s(:meta_tag_twitter_title) %>"
"twitter:title": "<%= title %>"
"twitter:description": "<%= hoc_s(:meta_tag_twitter_description) %>"
"twitter:image:src": "<%= 'https://' + request.host + '/images/social-media/hourofcode-2015-video-thumbnail.jpg' %>"
"twitter:player": "<%= 'https://youtube.com/embed/KsOIlDT145A' %>"
Expand Down