Social Meta Tags
create shareable social links with react-helmet
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.
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
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/
