Skip to content

How to Dynamically Set Page Title in Gatsby

Gatsby/

The page title defines the text you see in your browser’s title bar or the page’s tab. To set it in Gatsby you can use React Helmet package. React Helmet is a reusable component that accepts plain HTML tags and puts them into the head part of the page. To integrate the package into Gatsby you will also need to install gatsby-plugin-react-helmet package.

Installation and Configuration

  1. Install the necessary dependencies by running the following command:

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

    Or if you are using Yarn:

    yarn add gatsby-plugin-react-helmet react-helmet

  2. Add the plugin to gatsby-config.js

    module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet',
  ],
};

Setting the Page Title

Import React Helmet component into the page component whose title you want to set and use the title tag just like you would in a plain HTML file.

import React from 'react';
import { Helmet } from 'react-helmet';

const IndexPage = () => {
  return (
    <>
      <Helmet>
        <title>Home page</title>
      </Helmet>
      <h1>Page heading</h1>
      <p>Page content</p>
    </>
  )
}

export default IndexPage;

Alternatively, if you want more control, you can pass the title as a prop to React Helmet, along with other settings, for example a default title if you forget to provide your own.

const IndexPage = () => {
  const title = '';

  return (
    <>
      <Helmet
        defaultTitle="Default title"
        title={title}
      />
      <h1>Page heading</h1>
      <p>Page content</p>
    </>
  )
}

In this case, the title will be rendered as “Default title” because the title variable (line 2) is initialized as an empty string. In fact, any “falsy” value (undefined, null, NaN, 0, "" (empty string) and false) provided in the title prop will fall back to the default title.

Improving Code Reusability

You can wrap the React Helmet component with your own reusable Head component that you include in every page. This way, you only need to pass the title down as a prop to Head component. First, create the Head component in src/components/Head.js.

import React from 'react';
import { Helmet } from 'react-helmet';

const Head = ({ title}) => {
  return (
    <>
      <Helmet
        defaultTitle="Default title | My website"
        title={title}
        titleTemplate="%s | My website"
      />
    </>
  )
}

export default Head;

The titleTemplate prop (line 10) lets you create a template for the title. The %s string will be replaced with the text that is given in the title prop. This allows you to keep a part of every page’s title static while changing only the %s part.

The next step is importing the Head component in the page whose title you want to change. In this case src/pages/index.js.

import React from 'react';
import Head from '../components/Head.js';

const IndexPage = () => {
  return (
    <>
      <Head title="Home page"/>
      <h1>Page heading</h1>
      <p>Page content</p>
    </>
  )
}

export default IndexPage;

As the code illustrates, any time you want to specify a title for any page you create, you only need to include the Head component within that page and pass it a title via the title prop. All of this code will render a page with <title>Home page | My website</title> inside its head.

References