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 1 commit
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
8 changes: 8 additions & 0 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,11 +1,19 @@
---
<%
hoc = DCDO.get('soon-hoc', false) || DCDO.get('actual-hoc', false)
share_image = hoc ? 'celeb-challenge.jpg' : 'default-og-image.jpg'
%>
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'
Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

metadata['og:image'] = CDO.code_org_url('/images/default-og-image.png', 'https:')
metadata['og:image:width'] = 1220
metadata['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/"
Expand Down