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

whitep4nth3r profile image

How I show Bluesky likes on my blog posts

Salma Alam-Naylor -

imsushant12 profile image

AWS Identity and Access Management (IAM): The Core of AWS Security

Sushant Gaurav -

sharmaprash profile image

Why Does jQuery or a DOM Method Like `getElementById` Fail to Find an Element?

Prashant Sharma -

websilvercraft profile image

Everything about AppImage in Linux

websilvercraft -