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

jagroop2001 profile image

Build Your YouTube Video Transcriber with Streamlit & Youtube API's 🚀

Jagroop Singh -

velan profile image

2024 Update: Top 10 Alternatives to Postman

Velan<> -

sharathchandark profile image

Building an Interactive Add To Cart Feature Using HTML, CSS, and JavaScript

sharathchandark -

power_coder profile image

Free Certifications for Software Developers

Power_Coder -