How to set up Meta Tags with Gatsby Helmet

Meta tags are used by bots to understand the content of your site better. They are special tags to add in the <head> specially designed for bots.

Required Meta Tags

The required meta tags for SEO are:

[<html lang>](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang): it defines the language of your website
[<title>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title): it is the title of your page, visible in search results but also in the tab of the browser
[<meta name=description>](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML): the description of your website, visible in search results
[<meta name="viewport">](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag): this one describes the behaviour of your website on mobile, responsiveness is also key in SEO

The best tool to add these meta tags is react-helmet. All it does is adds things into <head>, especially meta tags.

Using React Helmet with Gtasby

To use react-helmet with Gatsby, it is recommended to use gatsby-plugin-react-helmet. This plugin allows React Helmet to add tags in the statical HTML generated by Gatsby.

You must install gatsby-plugin-react-helmet and react-helmet:

npm install gatsby-plugin-react-helmet react-helmet

Then add the plugin in gatsby-config.js :

plugins: [`gatsby-plugin-react-helmet`]

Once done, you can use react-helmet in your pages:

import React from 'react'
import { Helmet } from 'react-helmet'
export default function HomePage() {
  return (
    <main>
      <Helmet>
        <html lang="en" />
        <title>My homepage</title>
        <description>Description of your homepage.</description>
      </Helmet>
      <h1>Home of my website</h1>
    </main>
  )
}

You noticed that <meta name="viewport"> is not present, it is because Gatsby adds it automatically for you.

Improving SEO

Meta tags are essential in SEO and help you improve your rankings if used correctly. You can also go further with structured data to provide more detailed information about your page.