Merge pull request #19398 from code-dot-org/hoc-og-image-matrix

Update code.org og tags to match the marketing matrix

pegasus/sites.v3/code.org/public/challenge.md

@@ -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 %>"
   "og:image:width": '1920'
   "og:image:height": '1080'
   "twitter:card": "photo"
   "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!

pegasus/sites.v3/code.org/public/index.haml

@@ -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)
+  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

pegasus/sites.v3/csedweek.org/public/index.haml

@@ -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"
@@ -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"

pegasus/sites.v3/hourofcode.com/i18n/en.yml

@@ -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"

pegasus/sites.v3/hourofcode.com/public/index.haml

@@ -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)
+%>
 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'
@@ -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' %>"