How To Do Meta Tags In GatsbyJS
How to set all your meta tags with a new GastbyJS website
What is Gatsby?
I like to think of GatsbyJS as the new kid on the block that is allowing you to do static websites in React. It’s definitely a mind shift from traditional coding in HTML and CSS but it does offer some significant benefits.
Why Are Meta Tags Still Import?
Meta tags are still widely used among websites. They are entirely used for their indexing as they once were but they are more so used now on how they are displayed when sharing them across different social media platforms to gain attention.
Hence meta tags are important.
Starting A New Project
We’ll start by creating a new project with Gatsby and creating a simple website.
You will need to make sure you have the latest version of NodeJS installed on your local computer.
Next you’ll want to install Gatsby CLI.
Scaffolding Gatsby Starter
After you’ve install Gatsby CLI, we’ll run the script to scaffold out the hello-world project.
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world;It’ll install its dependencies and we should be good to go.
Running Development Environment
For the purposes of this tutorial, I’ll be using yarn instead of npm but you can definitely use latter as well.
yarn start;
// or npm start;
Creating Some HTML
Let’s give the page some HTML and take a look what’s inside our main file, /src/pages/index.js:
Right away you’ll notice that there aren’t any <head> tags for you to insert your <meta> tags. That’s because GatsbyJS manages everything, so we’ll need a way around this. But first:
/src/pages/index.js
import React from "react"export default () =>
<div id="wrapper">
<main>
<h1>Hello World!</h1> <section>
<p>This is my amazing website!</p>
</section>
</main>
</div>
React Helmet & Gatsby Plugin
Link: react-helmet
So how do we add the meta tags? With react-helmet and gatsby-plugin-react-helmet we can achieve this.
yarn add react-helmet;
// npm i --save react-helmet;yarn add gatsby-plugin-react-helmet;
// npm i --save gatsby-plugin-react-helmet;
We need to add one configuration to our repository / project in the root.
gatsby-config.js
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
],}
Let’s add a simple title tag to start.
src/pages/index.js:
import React from "react"
import Helmet from "react-helmet"export default () =>
<div id="wrapper">
<Helmet>
<title>My Awesome Website</title>
</Helmet>
<main>
<h1>Hello World!</h1> <section>
<p>This is my amazing website!</p>
</section>
</main>
</div>
Ok, now that we’re able to add tags to the header, let’s go full out for the meta tags for all the social media, but also for the the favicon and mobile too.
MetaTags.io
Link: MetaTags.io
To start, we’re going to go to metatags.io and fill in the content on the website. This is a great tool created by Moe Amaya and I definitely recommend it.
If you’re wondering what size of graphic I’m using here, the size is 1500px by 780px as a png. You download MetaTags.io sample one from here:
Next, we copy the necessary meta tags to our code by clicking Generate Meta Tags in the top right of the website.
Back in our code, we’ll add the code into our component and comment out the <!-- html comments --> as JSX comments.
NOTE: Make sure to add closing tags at the end of our meta tags as React does not like unclosed tags.
// THIS
<meta name="title" content"My Awesome Website" />// NOT
<meta name="title" content"My Awesome Website">
/src/pages/index.js
import React from "react"
import Helmet from "react-helmet"export default () =>
<div id="wrapper">
<Helmet>
{/* <!-- Primary Meta Tags --> */}
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="This website is so awesome that I really don't think you can handle how much awesome that is happening here." /> {/* <!-- Open Graph / Facebook --> */}
<meta property="og:type" content="website" />
<meta property="og:url" content="http://myawesomewebsite.com/" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="This website is so awesome that I really don't think you can handle how much awesome that is happening here." />
<meta property="og:image" content="http://myawesomewebsite.com/facebookimage.png" /> {/* <!-- Twitter --> */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="http://myawesomewebsite.com/">
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="This website is so awesome that I really don't think you can handle how much awesome that is happening here." />
<meta property="twitter:image" content="http://myawesomewebsite.com/twitterimage.png" />
</Helmet> <main>
<h1>Hello World!</h1> <section>
<p>This is my amazing website!</p>
</section>
</main>
</div>
Make sure to specify the exact route for your facebook and twitter images.
{/* <!-- Open Graph / Facebook --> */}
...
<meta property="og:image" content="http://myawesomewebsite.com/facebookimage.png" />{/* <!-- Twitter --> */}
...
<meta property="twitter:image" content="http://myawesomewebsite.com/twitterimage.png" />
You’ll need to put those files in your static folder in order for it to be accessible:
Refactoring
There seems to be a lot of tags there, so I think we’ll split this up into its own component and pull it in as needed. Create a new folder called /src/shared and create a new component called Head.js in it.
/src/shared/Head.js
import React from "react"
import Helmet from "react-helmet"export default () =>
<Helmet>
{/* <!-- Primary Meta Tags --> */}
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="This website is so awesome that I really don't think you can handle how much awesome that is happening here." /> {/* <!-- Open Graph / Facebook --> */}
<meta property="og:type" content="website" />
<meta property="og:url" content="http://myawesomewebsite.com/" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="This website is so awesome that I really don't think you can handle how much awesome that is happening here." />
<meta property="og:image" content="/facebookimage.png" /> {/* <!-- Twitter --> */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="http://myawesomewebsite.com/" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="This website is so awesome that I really don't think you can handle how much awesome that is happening here." />
<meta property="twitter:image" content="/twitterimage.png" />
</Helmet>
Now we can add that component to the main component:
/src/pages/index.js
import React from "react"
import Head from "../shared/Head"export default () =>
<div id="wrapper">
<Head /> <main>
<h1>Hello World!</h1> <section>
<p>This is my amazing website!</p>
</section>
</main>
</div>
Looks prettier.
FavicoMatic.com
Link: Favicomatic
Next, we’ll recreate our favicon and use a tool called FavicoMatic to generate all the different sizes for our favicon to be supported on different devices.
You’ll want to make sure you adhere to the graphic requirements and once you upload your image it will spit out a zip file for you to download and put in your static folder.
Let’s copy that code into our Head.js:
/src/shared/Head.js
...
{/* <!-- Favicomatic --> */}
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</Helmet>Voilà!
We now have all the meta tags needed for social media and more. You can even check the Facebook Lint Debugger to see if the meta tags you put are being parsed properly. Here’s an example I did with yellowcode.co:
If you have any recommendations on how this can be implemented better or talk about coding/algorithms, I would love to chat.
If you got value from this, please share it on twitter 🐦 or other social media platforms. Thanks again for reading. 🙏
Please also follow me on twitter: @codingwithmanny and instagram at @codingwithmanny.
