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

easycat profile image

H2 ΠΈ вСсёлыС тСсты Π² Spring

Olga Lugacheva -

eshat002 profile image

Simplify Your Django Admin with django-unfold

Eshat Jubayer -

truongpx396 profile image

βš”οΈ πŸ›‘οΈ Smart Contracts Common Attack Vectors and Solutions πŸ“œ

Truong Phung -

anhchienvu profile image

Working with GitHub OAuth Authentication

AnhChienVu -