Social Meta Tags

create shareable social links with react-helmet

Sat, 20 Apr 2019

We’re going to make some simple social media tags using react-helmet. Once we’re done, whenever you share a link on Facebook or Twitter you will end up with a preview of the link like this.

twitter cards

React Helmet

react-helmet is a useful package that allows you to add elements to the head portion of your websites html. Let’s install and star tusing it.

yarn add react-helmet

Meta Tags

Once we install the package we can import it anywhere within the current pages code. In this example I made a seo component that can be imported and passed props into any of my page components

import React from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";

const Seo = props => {
  const { data, facebook } = props;

  const postTitle = data ? (data.edges[0].node || {}).title : "";
  const postDescription = data ? (data.edges[0].node || {}).subTitle : "";
  const postCover = data ? (data.edges[0].node || {}).cover : "";
  const postSlug = data ? (data.edges[0].node || {}).slug : "";

  const title = postTitle !== "" ? `${postTitle} - ${config.shortSiteTitle}` : config.siteTitle;
  const description = postDescription !== "" ? postDescription : config.siteDescription;
  const image = postCover !== "" ? postCover.resolutions.src : config.siteImage;
  const url = config.siteUrl + config.pathPrefix + "/" + postSlug;

  return (
    <Helmet>
      {/* General tags */}
      <title>{title}</title>
      <meta name="description" content={description} />
      {/* OpenGraph tags */}
      <meta name="og:url" content={url} />
      <meta name="og:title" content={title} />
      <meta name="og:description" content={description} />
      <meta name="og:image" content={image} />
      <meta name="og:type" content="website" />
      <meta name="fb:app_id" content={facebook.appId} />
      {/* Twitter Card tags */}
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
      <meta name="twitter:card" content="summary" />
      <meta
        name="twitter:creator"
        content={config.authorTwitterAccount ? config.authorTwitterAccount : ""}
      />
    </Helmet>
  );
};

Seo.propTypes = {
  data: PropTypes.object,
  facebook: PropTypes.object.isRequired
};

export default Seo;

The Open Graph tags are crawled by Facebook whenever you share a link through Messenger/Facebook while the Twitter Card tags are crawled by Twitter. The Title and Description tags are crawled by search engines. Changing the Title will also change what the users see in their tab name

Screen Shot 2019-04-20 at 6.35.55 PM

Debugging

These links can help validate your meta tags to make sure everything is working properly.

Twitter - https://cards-dev.twitter.com/validator

Facebook - https://developers.facebook.com/tools/debug/

Loading...
Edward Beazer

Edward Beazer - I just like to build shit. Sometimes I get stuck for hours, even days while trying to figure out how to solve an issue or implement a new feature. Hope my tips and tutorials can save you some time.