Alt Text

Welcome to part-20 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

In this part i will first buy domain name and add the details in netlify. The process is exactly the same as described in my earlier post. So, please follow it.

After doing all the setup, i am able to goto https://amazinghampi.com/ to access the project.

Finally LiveFinally Live

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.jsgatsby-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.

siteMetadatasiteMetadata

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.jsSEO.js

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

index.jsindex.js

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

title and metatitle and meta

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

PlaygroundPlayground

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.jsSEO.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.jsindex.js

Now, in our localhost we can see these changes.

title and metatitle 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 cardtwitter 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 cardFacebook card

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

Netlify deployedNetlify 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 validatorTwitter validator

Facebook card validatorFacebook 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.js404.js

contact.jscontact.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.jsblog.js

photos.jsphotos.js

places.jsplaces.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.jsblog-template.js

place-template.jsplace-template.js

photos-template.jsphotos-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.jsgatsby-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.

gatsby-config.jsgatsby-config.js

After pushing and successfully deploying in netlify our site is live at https://amazinghampi.com/ and the project complete.

amazinghampi.comamazinghampi.com

Feel free to use the code to create amazing sites by cloning or forking from my github at https://github.com/nabendu82/gatsbyTourism

Please give Star if you like the repo.

The site Amazing Hampi, is now on Product Hunt. Please upvote.

https://www.producthunt.com/posts/amazing-hampi

This post is also available on DEV.