DEV Community

Cover image for Adding Meta Tags to Gastby
Suprabha
Suprabha

Posted on

Adding Meta Tags to Gastby

#gatsby #webdev #beginners #javascript

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']
}
Enter fullscreen mode Exit fullscreen mode

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"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

🌟 Twitter 👩🏻‍💻 Suprabha.me 🌟 Instagram

Top comments (0)

Read next

shaharkazaz profile image

Remove Redundant Subscriptions in Angular with @jsverse/letify

Shahar Kazaz -

fahimfba profile image

How to Unsave All Saved Posts on Facebook in a Few Simple Steps

Md. Fahim Bin Amin -

pellenilsen profile image

What does CORS really do? 🤔

Pelle Nilsen -

nnamdi_nwaocha_6d2abd27d1 profile image

Guide to Building a REST API with Deno and Oak Framework

nnamdi nwaocha -