Adding Meta Tags to Gastby

Its really good idea to add meta tags like title, description to page for SEO friendly. To do that, you need to make changes in `gatsby-config.js`.

gatsby-config.js:

module.exports = {
    siteMetadata: {
        title: 'Gaatsby Workshop',
        description: 'Learn Gatsby From scratch'
    },
    plugins: ['gatsby-plugin-sass']
}

Once you add the above snippet, restart the gatsby server 💻

After running the server, you won't able to see the meta tags in browser. So, to do that you will use graphql.

Enter http://localhost:8000/___graphql to browser, you can see the site in docs of graphql.

Query the below command you will get the meta tags 🔖:

query {
  site{
    siteMetadata {
      title
      description
    }
  }
}

// output:
{
  "data": {
    "site": {
      "siteMetadata": {
        "title": "Gaatsby Workshop",
        "description": "Learn Gatsby From scratch"
      }
    }
  }
}

To use this into the page, need to install two plugins gatsby-plugin-react-helmet, react-helmet.

react-helmet is a library for modifying the head of an HTML document in React. It allows to set title, meta tags, Open graph description or twitter cards, you would set those in here.(all the feature that make SEO friendly website)

Once you install the plugin, add it into the gatsby-config.js, So you can do server side rendering with Helmet ⛑

gatsby-config.js:

plugins: ['gatsby-plugin-sass', 'gatsby-plugin-react-helmet']

Add Helmet to layout page with dummy content:

import {Helmet} from 'react-helmet'
<Helmet>
        <html lang='en' />
        <title>Hello Suprabha!</title>
        <meta name='description' content='Suprabha Blog!' />
</Helmet>

That's it. Check out in Browser, it should work. 💪🏼

Now, we will use config data to represent in meta tags.

use-sitemMetadata.js:

import {graphql, useStaticQuery} from 'gatsby';
const useSiteMetadata = () => {
    const data = useStaticQuery(graphql`
        query {
          site{
              siteMetadata {
              title
              description
              }
          }
        }
    `);
    return data.site.siteMetadata;
}

export default useSiteMetadata;

To use into layout file 📂

layout.js:

import {Helmet} from 'react-helmet'
import useSiteMetadata from '../hooks/use-siteMetadata'

const {title, description} = useSiteMetadata();
<Helmet>
      <html lang='en' />
      <title>{title}</title>
      <meta name='description' content={description} />
</Helmet>

Restart the gatsby serve. (As whenever you add/change graphql query, each time you have to restart the server.)