React Helmet - hdknr/gatsby-home GitHub Wiki

Add React Helmet

React Helmet is a reusable React component will manage all of your changes to the document head.

Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.

gatsby-plugin-helmet (​https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/?=react%20helmet​) makes it easy to use React Helmet inside Gatsby projects as it automatically adds title and 
meta tags to the HTML during SSR.

Step 1 / 4
Install necessary NPM packages

Proposed changes

NPMPackage:
 * Install gatsby-plugin-react-helmet@latest

NPMPackage:
 * Install react-helmet@latest

Install necessary NPM packages

✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]


Step 2 / 4
Install the React Helmet plugin in gatsby-config.js

Proposed changes

GatsbyPlugin:
 * Install gatsby-plugin-react-helmet in gatsby-config.js
---
- Original  - 0
+ Modified  + 1

@@ -31,6 +31,7 @@
        },
      },
      "gatsby-plugin-styled-components",
+     "gatsby-plugin-react-helmet",
    ],
  }

---
✅ Installed gatsby-plugin-react-helmet in gatsby-config.js

Step 3 / 4
Great, now it's ready to go!

It's also common to have a <SEO> component which helps ensure pages have the necessary title and meta tags.

We'll write out one now.

Proposed changes

File:
 * Write src/components/seo.js
---
- Original  -  0
+ Modified  + 72

+ import React from "react"
+ import PropTypes from "prop-types"
+ import { Helmet } from "react-helmet"
+ import { useLocation } from "@reach/router"
+ import { useStaticQuery, graphql } from "gatsby"
+ const SEO = ({ title, description, image, article }) => {
+   const { pathname } = useLocation()
+   const { site } = useStaticQuery(query)
+   const {
+     defaultTitle,
+     titleTemplate,
+     defaultDescription,
+     siteUrl,
+     defaultImage,
+     twitterUsername,
+   } = site.siteMetadata
+   const seo = {
+     title: title || defaultTitle,
+     description: description || defaultDescription,
+     image: `${siteUrl}${image || defaultImage}`,
+     url: `${siteUrl}${pathname}`,
+   }
+   return (
+     <Helmet title={seo.title} titleTemplate={titleTemplate}>
+       <meta name="description" content={seo.description} />
+       <meta name="image" content={seo.image} />
+       {seo.url && <meta property="og:url" content={seo.url} />}
+       {(article ? true : null) && <meta property="og:type" 
content="article" />}
+       {seo.title && <meta property="og:title" content={seo.title}
 />}
+       {seo.description && (
+         <meta property="og:description" content={seo.description}
 />
+       )}
+       {seo.image && <meta property="og:image" content={seo.image}
 />}
+       <meta name="twitter:card" content="summary_large_image" />
+       {twitterUsername && (
+         <meta name="twitter:creator" content={twitterUsername} />
+       )}
+       {seo.title && <meta name="twitter:title" 
content={seo.title} />}
+       {seo.description && (
+         <meta name="twitter:description" 
content={seo.description} />
+       )}
+       {seo.image && <meta name="twitter:image" 
content={seo.image} />}
+     </Helmet>
+   )
+ }
+ export default SEO
+ SEO.propTypes = {
+   title: PropTypes.string,
+   description: PropTypes.string,
+   image: PropTypes.string,
+   article: PropTypes.bool,
+ }
+ SEO.defaultProps = {
+   title: null,
+   description: null,
+   image: null,
+   article: false,
+ }
+ const query = graphql`
+   query SEO {
+     site {
+       siteMetadata {
+         defaultTitle: title
+         titleTemplate
+         defaultDescription: description
+         siteUrl: url
+         defaultImage: image
+         twitterUsername
+       }
+     }
+   }
+ `
---

Step 3
Great, now it's ready to go!

It's also common to have a <SEO> component which helps ensure pages have the necessary title and meta tags.

We'll write out one now.

✅ Wrote file src/components/seo.js

Step 4 / 4
Read more about Gatsby React Helmet here: https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet (​https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet​)

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

The recipe finished successfully!

✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]
✅ Installed gatsby-plugin-react-helmet in gatsby-config.js
✅ Wrote file src/components/seo.js