GatsbyJS Series — SEO basic for blog (Part 6)

In this part, we’ll add some basic SEO information for our blog then adding some configurations to Netlify service so that our blog can work correctly when deploy to production. Finally, we’ll add a custom domain (namecheap) for our blog.

SEO improvement

First, we’ll create some basic blog information in gatsby-config.js

gatsby-config.js

react-helmet

It is a React component will manage all of your changes to the document head.

Install:

yarn add react-helmet gatsby-plugin-react-helmet
yarn add -D @types/react-helmet

Add gatsby-plugin-react-helmet to gatsby-config.js as well.

SEO component

Next, Create a SEO component insidesrc/components/

Seo.tsx

Inject Seo component into home page and blog template:

src/pages/index.tsx

src/templates/blog-post.tsx

Now you’ll see the nice titles for home page and each post:

Home page title

Blog details title

Try to inspect DOM we can see seo information in our header as well:

Seo information in header

Add Contentful APIs to Netlify

We have done a lot of work. Time to add deployment APIs to netlify so that our blog can go live successfully.

Go to Settings in app.netlify.com dashboard:

Settings

Select Environment under Build & deploy menu. Click on Edit variables to add new:

Environment variables

The values get from Contentful APIs we mentioned in the previous part. Save it and commit all our code. Waiting for Netlify deploy our blog in few minutes then check the result.

Go live

Add custom domain

We need a custom domain instead of the random one by Netlify. I bought one at namecheap so time to use it now.

Netlify Domain Settings

Login to Netlify dashboard admin follow these steps: Select Settings -> Domain management -> Add custom domain

Add custom domain

Input our domain and verify it

Enable DNS configuration

Verify DNS configuration

Check DNS configuration

Check DNS configuration

Obtain IP: 104.198.14.52

Namecheap configuration

Login to namecheap account. Select our domain in list then select Advance DNS menu:

Domain List

Follow these configurations:

Advanced DNS

1. Remove URL redirect record
2. Update value for CNAME Record to Netlify URL. In our case is `vibrant-mcclintock-5a849d.netlify.com`
3. Add an A Record with host is @ and value is 104.198.14.52 (IP we obtained from Netlify above).

Ok, this configuration will take us several minutes to apply. Time for a cup of coffee and waiting for our domain applied.

Summary

We have done a lot of work so far. At this moment, we can build own blog from scratch with powerful support from GatsbyJS framework.

In the future, we can add more advanced features for our blogs: comment, contact form, sidebar menu, etc.