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.

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

Add Open Graph and Twitter Card Metadata #1559

Merged
merged 11 commits into from Oct 5, 2016

Conversation

Projects
None yet
3 participants
@leereilly
Contributor

leereilly commented Oct 3, 2016

Hi Mozillians! 👋

I've noticed that posts on Twitter, Facebook, and other services that scrape and use websites' Open Graph or Twitter Card metadata don't show any additional information when the Thimble landing page URL is shared. E.g.

screen shot 2016-10-02 at 8 43 35 pm

This PR will help Thimble make a bigger splash on social media, and hopefully result in a noticeable 📈 in referral traffic. Here's what Thimble could look like on Twitter and Facebook respectively when the URL is shared:

screen shot 2016-10-02 at 8 38 15 pm

screen shot 2016-10-02 at 8 38 02 pm

It works for i18n content too. Here's the the additional HTML rendered for US English and Russian landing pages locally in development mode:

🇺🇸 http://localhost:3500/en-US/ (US English)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mozlearn">
<meta name="twitter:creator" content="@mozlearn">
<meta name="twitter:title" content="Thimble by Mozilla - An online code editor for learners &amp; educators.">
<meta name="twitter:description" content="Thimble is an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS &amp;amp; JavaScript.">
<meta name="twitter:image" content="http://localhost:3500/img/social.png">

<meta property="og:url" content="http://localhost:3500/en-US/">
<meta property="og:type" content="website">
<meta property="og:title" content="Thimble by Mozilla - An online code editor for learners &amp; educators.">
<meta property="og:description" content="Thimble is an online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS &amp;amp; JavaScript.">
<meta property="og:image" content="http://localhost:3500/img/social.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

🇷🇺 http://localhost:3500/ru/ (Russian)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@mozlearn">
<meta name="twitter:creator" content="@mozlearn">
<meta name="twitter:title" content="Thimble от Mozilla - онлайн редактор кода для изучающих и учителей.">
<meta name="twitter:description" content="Thimble - онлайн редактор кода, который делает простым создание и публикацию ваших веб-страниц, пока вы изучаете HTML, CSS &amp;amp; JavaScript.">
<meta name="twitter:image" content="http://localhost:3500/img/social.png">

<meta property="og:url" content="http://localhost:3500/ru/">
<meta property="og:type" content="website">
<meta property="og:title" content="Thimble от Mozilla - онлайн редактор кода для изучающих и учителей.">
<meta property="og:description" content="Thimble - онлайн редактор кода, который делает простым создание и публикацию ваших веб-страниц, пока вы изучаете HTML, CSS &amp;amp; JavaScript.">
<meta property="og:image" content="http://localhost:3500/img/social.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Notes:

  • I made the green Thimble image myself (I'm not a very good artist). I'm sure someone else could make something nicer. Something like this maybe?
  • I'm not sure if the use of APP_HOSTNAME here is the best approach to getting the server URL? It works locally in dev mode; it should in prod too if that env var is set.

Cheers,
Lee 🍻

PS: My 8yo son and I have been using Thimble and we both love it! <3

leereilly added some commits Oct 1, 2016

Add basic social image
This is optimized for Facebook @ 1200x630px, but Twitter will also do a good job cropping / resizing it.
Use APP_HOSTNAME for forming complete URLs
Not sure if this is the best approach, but it works in dev...
Add og:image width and height properties
Using these tags will specify the image dimensions to the crawler so that it can render the image immediately without having to asynchronously download and process it.
@gideonthomas

This comment has been minimized.

Show comment
Hide comment
@gideonthomas

gideonthomas Oct 4, 2016

Member

@leereilly thank you very much for contributing! This PR looks great! We're also glad to hear that you and your son enjoy using Thimble!

I think the premise of this PR is great and super helpful in making Thimble more social media friendly. The code itself looks fine to me! cc'ing @flukeout for design input on the image.

Once we have the right image (whether it's the one you've provided or something else), I can merge in this PR.

Member

gideonthomas commented Oct 4, 2016

@leereilly thank you very much for contributing! This PR looks great! We're also glad to hear that you and your son enjoy using Thimble!

I think the premise of this PR is great and super helpful in making Thimble more social media friendly. The code itself looks fine to me! cc'ing @flukeout for design input on the image.

Once we have the right image (whether it's the one you've provided or something else), I can merge in this PR.

@flukeout

This comment has been minimized.

Show comment
Hide comment
@flukeout

flukeout Oct 4, 2016

Contributor

Thanks for the great work @leereilly! I'll give some thought to the image and update the PR sometime today or tomorrow and we can roll this out.

Contributor

flukeout commented Oct 4, 2016

Thanks for the great work @leereilly! I'll give some thought to the image and update the PR sometime today or tomorrow and we can roll this out.

@flukeout

This comment has been minimized.

Show comment
Hide comment
@flukeout

flukeout Oct 4, 2016

Contributor

I dug through some old Social campaign imagery that @sabrinang put together and found some great assets. What do you think?

thimble-share

Contributor

flukeout commented Oct 4, 2016

I dug through some old Social campaign imagery that @sabrinang put together and found some great assets. What do you think?

thimble-share

@flukeout

This comment has been minimized.

Show comment
Hide comment
@flukeout

flukeout Oct 4, 2016

Contributor

Okay @leereilly , I opened a PR against your social-splash branch with the image above. Once you merge that we can go ahead and get this implemented!

Contributor

flukeout commented Oct 4, 2016

Okay @leereilly , I opened a PR against your social-splash branch with the image above. Once you merge that we can go ahead and get this implemented!

@leereilly

This comment has been minimized.

Show comment
Hide comment
@leereilly

leereilly Oct 4, 2016

Contributor

That image is much nicer, @flukeout 😻

Contributor

leereilly commented Oct 4, 2016

That image is much nicer, @flukeout 😻

@gideonthomas

This comment has been minimized.

Show comment
Hide comment
@gideonthomas

gideonthomas Oct 5, 2016

Member

This PR looks good to me! Merging!

Once again, thank you very much for the contribution @leereilly :)

Member

gideonthomas commented Oct 5, 2016

This PR looks good to me! Merging!

Once again, thank you very much for the contribution @leereilly :)

@gideonthomas gideonthomas merged commit 3bf45bb into mozilla:master Oct 5, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
@leereilly

This comment has been minimized.

Show comment
Hide comment
@leereilly

leereilly Oct 5, 2016

Contributor

Thanks for the kind words, everyone - t'was my pleasure 🙇

Thanks for building Thimble and open sourcing it 🤘

Contributor

leereilly commented Oct 5, 2016

Thanks for the kind words, everyone - t'was my pleasure 🙇

Thanks for building Thimble and open sourcing it 🤘

@leereilly leereilly deleted the leereilly:social-splash branch Oct 5, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment