Menu
I'm following the directions here on Gatsby's website to customize the <head> tag. I want to add Modernizr and Google's WebFont libraries. I copied .cache/default-html.js and put it in src/html.js, and then I added the script tags the libraries, but they aren't showing up on my localhost:8000.
Is there some Gatsby cache that needs cleared when trying to do a custom html.js? Or is there another way to add these to the <head> tag?
EDIT: It turns out I was trying to put a <script></script> tag in the JSX of the html.js.
632
Use React Helmet to customize the <head> tag. Check out their documentation for more examples.
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
install with:
npm i --save gatsby-plugin-react-helmet react-helmet
update gatsby-config.js:
plugins: ['gatsby-plugin-react-helmet']
For a working example, create a new build with gatsby new gatsby-site and
have look at the component in src/layouts/index.js
<Helmet
title="Gatsby Default Starter"
meta={[
{ name: 'description', content: 'Sample' },
{ name: 'keywords', content: 'sample, something' },
]}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
