How To Set Up Meta Tags For Social Sharing on Your Gatsby Blog

October 23, 2018

gatsby js logo

Gatsby JS is a fantastic react-based static site generator; one of the common use cases for Gatsby is in setting up blogs for developers. There’s a boilerplate gatsby blog repo here- it gives you a great template to get started blogging with gatsby.

Blog posts are written in markdown and converted to pages through a blog-post.js template. This template includes a graphQL query that obtains post information to render on a page.

Basic functionality for rendering posts is included out of the box, but one important element - generating meta tags for social sharing cards - is missing from the initial gatsby js blog setup.

If you don’t know what social cards are, or if they’re enabled on your site check out this writeup on open graph tags or the twitter card validator here.

Here’s an example of the card generated by one of my blog posts:

social card

In this post I’ll walk you through how to set up the correct meta tags in your blog-post.js file so you can share links to your posts on sites like twitter and linkedIn.

First, you’ll start by including a featured image in your post frontmatter. This guide will walk you through the necessary package installations and code to include a featured image.

If you’ve followed the steps in the featured image tutorial, you’ll already have added a featured image to your GraphQL call. Just as a refresher, here’s an illustration of what gatsby is doing behind the scenes - pulling YAML and Markdown data out through the GraphQL API to use in rendering pages:

how gatsby works

Now you’ll need to access a specific image through your GraphQL call that you’ll use in the featured image meta tag.

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
        author
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      html
      excerpt
      fields {
        slug 
      }
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        featuredImage {
              childImageSharp{
                  sizes(maxWidth: 1000) {
                      src
                  }
              }
          }
      }
    }
  }
`

Once you have featured images enabled on your posts (and you have at least one post with a featured image included) it’s time to use that image to produce beautiful social sharing cards!

In your render function you’ll store a reference to the post information object in a const,

 const post = this.props.data.markdownRemark
 const siteTitle = get(this.props, 'data.site.siteMetadata.title')
 const rootUrl = 'https://www.example.com'

Then access the fields in your GraphQL query through reference to the post object:

  <Helmet>
        <title>{`${post.frontmatter.title} | ${siteTitle}`}</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta property="og:title" content={`${post.frontmatter.title} | ${siteTitle}`}/>
        <meta property="og:description" content={post.excerpt}/>
        <meta property="og:image" content={`${rootUrl}${post.frontmatter.featuredImage.childImageSharp.sizes.src}`}/>
        <meta property="og:url" content={`${rootUrl}${post.fields.slug}`}/>
        <meta name="twitter:card" content="summary"/>
        <meta property="og:type" content="article"/>
        <meta property="og:locale" content="en_US"/>
         <link rel="canonical" href={`${rootUrl}${post.fields.slug}`}/>
        </Helmet>

There are a few important fields you’ll be including here to produce attractive, complete cards of your post for social sharing:

  • The og:title tag comes from the title property of your post.frontmatter. In this example I have a default set to the site title in case a post title is not provided.

  • The og:description tag provides a brief description of your post. This is populated from the post.excerpt property.

  • The og:image tag provides the preview image. This is populated by appending the post.frontmatter.featuredImage.childImageSharp.sizes.src property onto your root url. Remember, sizes returns an array, so you’ll need to choose one size to feature (here I’ve just chosen the source image).

You can poke through the rest of the fields to see what they’re for, and feel free to search for more og or twitter tags you might want to add. Just remember to access the necessary info through your GraphQL query, then include it in a tag in the React-Helmet section of your blog template.


John D Potts

John D Potts

Web developer and speaker in Charlotte, NC.