Welcome to part-3 of the series. You can find part-2 here.
So, let’s head over to the terminal and run the command to get the latest data from Stackbit on our local machine. This command i had got from my github repo for my blog site, which was initially created by stackbit.
I will be adding two SEO plugins first.
So, let’s head over to the plugin page. As the name suggest it creates a robots.txt file for our gatsby site. It’s good for SEO as it tells google bots on how to crawl your site.
We will follow the instruction and do an npm install in our directory.
In the gatsby-config.js , we need to add the marked code in our plugin array.
This plugin generates sitemap for your site, which is very important for SEO. As per the instruction on plugin page , let’s do npm install.
Now, this plugin is easy to use. We need to add the plugin name in our gatsby-config.js inside the plugins array.
We also need to have a siteUrl in our siteMetaData. But Stackbit create a json for us. So, we need to add there. We will also add some other useful keywords for SEO in the site-metadata.json file.
I found a helpful list in Emeruche Cole github link
Next, let’s start our server to see if there are any error.
npm run develop
I have also checked in http://localhost:8000/ and there were no errors. Next, let’s add these changes to our production. With Netlify, it’s just pushing the changes to GitHub.
So, i had just committed my changes and pushed to GitHub.
Pushed to github
Once i head over to my netlify dashboard for this site, it will show building.
It got published in less then 5 minutes. Now, when i head over to my site my change of title is there. Everything else is behind the scenes.
Next, we will add one of the most important plugin and i.e. for analytics.
This plugin will be used to add google analytics to our website. As per the gatsby docs on setting up google analytics we have first setup a google analytics account and then get the tracking id.
Let’s open google analytics. If you are not logged in, please login to your google account.
Once i click on Start Measuring button, it will take you to the below page. Here you will be asked to give your account name. Then click on Next button.
In the screen below select Web and click Next.
In this screen, we give some basic site information including the site url.
Basic site information
Once you clicked on Create button in the above screen, a pop-up will be opened.
Here, you have to accept two Terms and conditions. Then click on Accept button.
The next screen will contain your Tracking ID. It is in the format UA-XXXXXXXXX-X
Now, it’s time to install the gatsby google analytics plugin.
Next, we need to add the plugin in gatsby-config.js file. Here, we need to put the Tracking ID, we got from google.
Next, let’s start the dev server to see if any issues. We need to restart the server by npm run develop
I have also checked agin in http://localhost:8000/ and there were no errors. Next, let’s add these changes to our production.
So, i had just committed my changes and pushed to GitHub. It will again build our production site in Netlify.
Once the site is published, go back to google analytics page and click on Home tab. You will see your site data. It is very less now, please visit more to read my blogs and increase my count :).
One more important thing i want to do on my personal blog site and that is to change the canonical link in my medium and dev posts.
If a post occurs at more then one place then google bots give more priority to the original post. Now, it doesn’t matter where you published the blog first, because all big blogging platforms have ways to give canonical links.
My process is to create the blog in medium first because that is what i am doing since the last 1.5 years. After that i use an awesome package called mediumexporter to change the post to Mark Down file.
After that i paste the content of Mark Down file to a new dev post. Since dev is also serving as my headless CMS for my site, due to the awesome service of Stackbit, it gets published in my personal site.
Will show the process on one of my earlier blog. First will add link to a medium post.
I had opened one of my earlier medium post. Since i am logged in, i also get the edit button. First click on the Setting icon, after that the Edit Story.
After that click on the three dots and then click on Customize canonical link.
After that we need to paste the original story link in the Set canonical URL: Here i gave the link from my blog site. After that click on Save button.
Set Canonical URL
Next it time to head over to dev.to and change the canonical link there also. When i head over to my same blog in dev, i get the Edit button.
Next, we click on the three dots.
Click the arrow
It will open a pop-up, where we had to give the canonical link. I again give it the link from my blog site in Canonical URL. After that click on Done button, which will close this pop-up. Also, click on SAVE CHANGES button after this.
Now i have to repeat the above process of changing the canonical links of my 100 blogs manually for my site to get better SEO :)
Hope, you liked this series as i liked making it.