Gatsby uses a React component to server render the
<head> and other parts of
the HTML outside of the core Gatsby application.
Most sites should use the default
html.js shipped with Gatsby. But if you need
to customize your site’s html.js, copy the default one into your source
tree by running:
And then make modifications as needed.
If you need to insert custom HTML into the
<footer> of each page on your site, you can use
html.jsis a workaround solution for when the use of the appropriate APIs is not available in
gatsby-ssr.js. Consider using
onPreRenderHTMLinstead of the method above. As a further consideration, customizing
html.jsis not supported within a Gatsby Theme. Use the API methods mentioned instead.
Note: the various props that are rendered into pages are required e.g.
Anything you render in the
html.js component will not be made “live” in the client like other components. If you want to dynamically update your
<head> we recommend using Gatsby’s Head API.
If you want to insert custom HTML into the footer,
html.js is the preferred way of doing this. If you’re writing a plugin, consider using the
setPostBodyComponents prop in the Gatsby SSR API.
If you see this error:
Uncaught Error: _registerComponent(...): Target container is not a DOM element. it means your
html.js is missing the required
“target container”. Inside your
<body> you must have a div with an id of
However, we do recommend that you use Gatsby’s Script API instead.