Skip to content

Added og:image tags and meta tags for twitter card #8

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

Open
sonimadhuri wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added og:image tags and meta tags for twitter card #8

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c68da2
Added og:image tags and meta tags for twitter card
sonimadhuri Oct 15, 2018
a6f7905
Updated OG tags
sonimadhuri Oct 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/components/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,17 @@ class Template extends React.Component {
property="og:description"
content="/spacebot - A Slack Bot that helps you learn and explore space. Learn about astronomy, NASA, mars rovers, and more."
/>
<meta property="og:image" content="https://raw.githubusercontent.com/mikelax/spacebot-site/master/src/assets/images/website-icon.png" />
Copy link
Owner

@mikelax mikelax Oct 15, 2018

Choose a reason for hiding this comment

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

@sonimadhuri thanks for working on this, we will have to make a few additional change to get the correct URL to use for this tag and the corresponding twitter:image url.

We don't want to link to the github URL, but rather the generated URL should be an absolute URL based on the slashspacebot.com domain.

  • Add a siteUrl attribute to the siteMetadata attribute in the gatsby-config.js file. The value should be: https://slashspacebot.com
  • git mv the file website-icon.png to the static folder. Update the value for the iconattribute in gatsby-config.js to be:static/website-icon.png`
  • In layout.js, you can use graphql static query, tutorial here to get the siteUrl value with /website-icon.png. The resulting value for these should be: https://slashspacebot.com/website-icon.png

Copy link
Author

@sonimadhuri sonimadhuri Oct 19, 2018

Choose a reason for hiding this comment

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

Hey @mikelax I'm on this, But I am pretty new to graphql

Copy link
Owner

@mikelax mikelax Oct 19, 2018

Choose a reason for hiding this comment

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

Ok cool. Let me know if you have any questions or if you want me to push a little sample for the graphql query, etc.

<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="512" />
<meta property="og:image:height" content="512" />
<meta property="og:image:alt" content="spacebot logo" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="/spacebot - a Slack Bot for exploring space" />
<meta name="twitter:description" content="/spacebot - A Slack Bot that helps you learn and explore space. Learn about astronomy, NASA, mars rovers, and more." />
<meta name="twitter:url" content="https://slashspacebot.com/" />
<meta name="twitter:image" content="https://raw.githubusercontent.com/mikelax/spacebot-site/master/src/assets/images/website-icon.png" />
<meta name="twitter:image:alt" content="spacebot logo" />
</Helmet>
<div className={`body ${this.state.loading}`}>
<div id="wrapper">
Expand Down