Now, it’s time to add plugins for SEO. We need to first install gatsby-plugin-react-helmet , which will help us to control the head element of each page.

As per the documentation npm install the package first. Head over back to the project and stop any gatsby develop, which is running. After that npm install the packages by below command.

npm install --save gatsby-plugin-react-helmet react-helmet

Now, as per the documentation we need to add the below text in gatsby-config.js

gatsby-config.js

Next, we also need to add site metadata in our gatsby-config.js, as it will be used by the next plugins. One main thing to notice is the image tag. The image mentioned in it needs to be placed in static folder.

siteMetadata

After this start your gatsby develop and head over to the code editor and add SEO.js file inside the components folder. The initial content of the file will be as below. Here it’s excepts two props title and description from any component.

SEO.js

Next, head over the home page index.js and import the SEO component and use it to pass title and description.

index.js

Now, when we head over to the localhost we can find the title and the meta tag inside the head tag.

title and meta

We will now introduce graphql in our SEO.js , but for that let’s first create the query in Graphiql playground.

Playground

Next, let’s add the query to our SEO.js and also change our title to also include the siteTitle which we are getting from our query. We are also adding a new meta for image.

SEO.js

In the above file, we have made description props as optional, so if we don’t pass it we will be using siteDesc which we have defined in gatsby-config.js

So, let’s delete the description from index.js as we will use the longer and more accurate siteDesc

index.js

Now, in our localhost we can see these changes.

title and meta

Next, we will add Twitter Card to our project. With the twitter card added, when we share our project on twitter, it will show a nice image with description.

twitter card

Next, we will also add facebook Card to our project. With the facebook card added, when we share our project on facebook, it will show a nice image with description.

Facebook card

For testing the cards, we need to push the code to github so that it is deployed in netlify.

Netlify deployed

Next, let’s test the same on twitter card validator and facebook card validator, to check how it will look in both social networks.

Twitter validator

Facebook card validator

It look exactly as we like on both networks. So, now let’s add SEO to all pages of our project.

First, we will add SEO component to 404.js and contact.js. They will also have default description like index.js, so we are not passing description prop.

404.js

contact.js

Our next three pages i.e. blog.js , photos.js and places.js will have different description. So, we will be passing the description props.

blog.js

photos.js

places.js

Now, we have three templates which auto generates pages for us. We will be using the page name as title in all three.

blog-template.js

place-template.js

photos-template.js

Then we will add two more plugins for SEO — gatsby-plugin-robots-txt and gatsby-plugin-sitemap. The details for installing both can be found in my earlier blog here.

After the required npm installs, we are adding the below in gatsby-config.js file.

gatsby-config.js

I will be also adding google analytics to the site, so that i can keep count and other analysis of the visitor. The installation process can be found in my earlier blog here.

After the required steps in google analytics page and also npm installing the plugin, the below changes needed to be made in gatsby-config.js file.