I have a gatsby static site. I mostly use gatsby-node.js to create all the pages.
I have recently upgraded from gatsby 4 to 5 to make use of the gatsby head api. This works well and all the meta tags described using Head component are built into the generated html file as expected. The problem occurs during hydration. As the page is fully loaded, all meta tags described in Head component are duplicated with an extra attribute data-gatsby-head="true"
.
This is my SEO component
import React from "react"
export const SEO = (props) => {
return (
<>
<html lang="en" />
<meta charSet="utf-8" id="meta-charset" />
<title id="meta-title">{props.pageContext.metaTitle}</title>
<meta
id="meta-description"
content={props.pageContext.metaDescription}
name="description"></meta>
<meta
id="meta-ogtitle"
content={props.pageContext.metaTitle}
property="og:title"></meta>
{/* facebook */}
<meta
id="meta-ogdescription"
content={props.pageContext.metaDescription}
property="og:description"></meta>
<meta
content={props.pageContext.image || props.pageContext.siteConfig.logo}
property="og:image"
id="meta-ogimage"></meta>
{/* Twitter */}
<meta
id="meta-twittertitle"
content={props.pageContext.metaTitle}
property="twitter:title"></meta>
<meta
id="meta-twitterdescription"
content={props.pageContext.metaDescription}
property="twitter:description"></meta>
<meta
id="meta-twitterimage"
content={props.pageContext.image || props.pageContext.siteConfig.logo}
property="twitter:image"></meta>
<meta property="og:type" content="website" id="meta-twittertype"></meta>
<meta
content="summary_large_image"
name="twitter:card"
id="meta-twittercard"></meta>
<link
rel="canonical"
href={props.pageContext.canonicalUrl}
id="canonicalUrl"
/>
</>
)
}
As per the documentation I am using ids on all my head components to prevent duplication, but this doesn't work.
OK this was my bad! After going through removing all my gatsby plugins and adding them back in 1 at a time, I discovered that the issue was with gatsby-plugin-no-javascript-utils
plugin.
This will teach me to make sure I review my plugins over time as my site evolves! I wasn't actively using this plugin at all. I just installed it ages ago and had never looked at it again.
If anyone is interested the config I was using that didn't work was.
{ // THIS PLUGIN CAUSES DUPLICATE ELEMENTS WHEN USING GATSBY HEAD API
resolve: "gatsby-plugin-no-javascript-utils",
options: {
noScript: false,
noSourcemaps: true,
removeGeneratorTag: true,
removeReactHelmetAttrs: true,
noInlineStyles: false,
removeGatsbyAnnouncer: false,
},
},