Back to Gatsby

Add React Helmet

deprecated-packages/gatsby-recipes/recipes/gatsby-plugin-react-helmet.mdx

2.20.01.1 KB
Original Source

Add React Helmet

React Helmet is a reusable React component that manages all of your changes to the document head.

Helmet takes plain HTML tags and outputs plain HTML tags.

gatsby-plugin-helmet makes it easy to use React Helmet inside Gatsby projects as it automatically adds title and meta tags to the HTML during SSR.

This recipe:


Installs necessary NPM packages.

<NPMPackage name="gatsby-plugin-react-helmet" /> <NPMPackage name="react-helmet" />

Installs the React Helmet plugin in gatsby-config.js.

<GatsbyPlugin name="gatsby-plugin-react-helmet" />

Writes out an <SEO> component which helps ensure pages have the necessary title and meta tags.

<File path="src/components/seo.js" content="https://gist.githubusercontent.com/devrchancay/72e6958a16cffb5dd549b831f903955a/raw/6abf03138eb342d532ebbeafb8493cc0b9482b1b/Seo.js" />


Read more about Gatsby React Helmet here: https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet

You can also read about the "SEO" component here: https://www.gatsbyjs.com/docs/add-seo-component/