GATSBY NOW HAS A BUILTIN HEAD API. Please consider using that API instead of React Helmet.
Gatsby can be confusing for web developers who are new to this world of React server-side rendering. In this short article, I answer the question for how to include external JavaScript libraries from a CDN in your Gatsby site using react-helmet.
First; you will need to install react-helmet using npm (or Yarn).
npm install --save react-helmetSecond; you will need to decide if you want this external library to appear on every page of your site or only on certain pages (like posts or another template).
If you would like this external JavaScript library to appear on every page of your website; you will want to insert your Helmet React component on a page that is used everywhere perhaps the Layout or SEO React components that are common in many of the Gatsby starters.
For example, if you are using the Gatsby-Starter-Blog starter; react-helmet is already included and you will want to your script link in the SEO component in src/components/seo.js.
Third; react-helmet is powerful so you can use any valid head tag like script, link,style, etc. You will want to find the Helmet component and add your script tag in it like so:
<Helmet>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</Helmet>You will now have jQuery loaded on every page of your Gatsby site. By the way, you don’t need to use Gatsby, the above code works for any React and Helmet project.
If you need help with a different Gatsby starter and you are stuck, feel free to reach out to @ramisayar on Twitter or use the contact form.
/**
* SEO component that queries for data with
* Gatsby's useStaticQuery React hook
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
const SEO = ({ description, lang, meta, title }) => {
const { site } = useStaticQuery(
graphql`
query {
site {
siteMetadata {
title
description
social { twitter }
}
}
}
`
)
const metaDescription = description || site.siteMetadata.description
return (
<Helmet
htmlAttributes={{
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
meta={[
{
name: `description`,
content: metaDescription,
},
{
property: `og:title`,
content: title,
},
{
property: `og:description`,
content: metaDescription,
},
{
property: `og:type`,
content: `website`,
},
{
name: `twitter:card`,
content: `summary`,
},
{
name: `twitter:creator`,
content: site.siteMetadata.social.twitter,
},
{
name: `twitter:title`,
content: title,
},
{
name: `twitter:description`,
content: metaDescription,
},
].concat(meta)}
>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</Helmet>
)
11}
SEO.defaultProps = {
lang: `en`,
meta: [],
description: ``,
}
SEO.propTypes = {
description: PropTypes.string,
lang: PropTypes.string,
meta: PropTypes.arrayOf(PropTypes.object),
title: PropTypes.string.isRequired,
}
export default SEO