One of the ways to improve the shareability of your site is to add meta tags that improve the way your content appears when shared on social media such as Twitter and Facebook. If you don't know about these meta tags, this article by Adam Coti offers a good primer. But how do you add it to your Gatsby site created by Stackbit? Let's take a look.

I should note that there is a more complete tutorial created by Gatsby, which is also worth reviewing. Some of this code is based upon their tutorial but tweaked for simplicity and to make target for Stackbit generated sites.

  1. Open site-metadata.json file and find the section with the social links and be sure to add your Twitter username to the end of the Twitter URL as below:

    "social_links": [
    {
      "label": "Twitter",
      "url": "https://twitter.com/remotesynth",
      "new_window": true
    },
    {
    "label": "Instagram",
    "url": "https://www.instagram.com/",
    "new_window": true
    },
    {
      "label": "LinkedIn",
      "url": "https://www.linkedin.com/",
      "new_window": true
    }
    ],
    
  2. Create a file named SEO.js in the /src/components/ folder. This will be a reusable component that we can include on templates to output the meta tags for our site. Add the following code to SEO.js:
import React from "react";
import { Helmet } from "react-helmet";

function SEO({ description, image, title, author }) {
  return (
    <Helmet
      meta={[
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: description,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:creator`,
          content: author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: description,
        },
        {
          property: "og:image",
          content: image,
        },
        {
          name: "twitter:card",
          content: "summary_large_image",
        },
      ]}
    />
  );
}

export default SEO;

This component uses a plugin called React Helmet that comes pre-installed with Stackbit generated Gatsby sites. It is using the description, image, title and author properties passed into it to populate the necessary meta tags and add them to the document <head>.

  1. Let's add the SEO data to a template. In this case, I'll be editing the blog posts template in the Azimuth theme. To do that, open /src/templates/post.js. Let's look at what the code will look like and I'll explain it after so that you can edit other themes or templates (note, I have left the main code out and replaced it with ... to make this easier to read):
import React from "react";
import _ from "lodash";
import moment from "moment-strftime";
import SEO from "../components/SEO";

import { Layout } from "../components/index";
import { safePrefix, htmlToReact } from "../utils";

export default class Post extends React.Component {
  render() {
    let twitter = "";
    if (
      _.get(this.props, "pageContext.site.siteMetadata.footer.has_social") &&
      _.get(this.props, "pageContext.site.siteMetadata.footer.social_links")
    ) {
      let social_links = _.get(
        this.props,
        "pageContext.site.siteMetadata.footer.social_links"
      );
      let twitter =
        "@" +
        social_links
          .find((element) => element.label === "Twitter")
          .url.split("/")
          .pop();
    }
    return (
      <Layout {...this.props}>
        <SEO
          title={_.get(this.props, "pageContext.frontmatter.title")}
          description={_.get(this.props, "pageContext.frontmatter.excerpt")}
          image={safePrefix(_.get(this.props, "pageContext.frontmatter.image"))}
          pathname={this.props.location.pathname}
          author={twitter}
        />
        ...
      </Layout>
    );
  }
}

First, we need to import the SEO component at the top via import SEO from '../components/SEO'. Inside the render() function, we are getting the Twitter username by splitting it out of the Twitter URL that is in the site-metadata.json file. Finally, we add the SEO component and pass it the necessary properties, which are loaded via Lodash to prevent errors if the value is undefined.

Now if you load a blog post on the site, you can see that the necessary SEO metadata is included in the <head> block. This will result in nicer formatting for shares on social media.

social share meta tags

Ready to get started?