loading...

Injecting meta tags on static HTML doesn't work on dynamically created pages

sidneyramos profile image Sidney Ramos ・2 min read

Hi,
I've been researching this problem for a week now and still stumped. I have a website that uses Gatsby with Prismic, and i've got 2 different types of pages: static and dynamically created pages.
Static can include pages like homepage, contact us page, about us page, etc.
Dynamic can include blog posts, services pages, etc.

I've used react-helmet to inject metadata into the pages, but i've since moved to using react-head. This works on static pages, it's included in the SSR version of the pages - but it doesn't work for dynamic pages. I've also put in a console.log on a Layout component that I use on all of the pages, and on the static pages it shows up on the terminal, but on dynamic pages it doesn't.

My config includes the following plugins:
plugins: [
gatsby-plugin-catch-links,
gatsby-plugin-sass,
gatsby-plugin-resolve-src,
gatsby-plugin-remove-trailing-slashes,
gatsby-plugin-emotion,
gatsby-plugin-preload-fonts,
{
resolve: gatsby-source-filesystem,
options: {
name: images,
path: ${__dirname}/src/images,
},
},
gatsby-transformer-sharp,
gatsby-plugin-sharp,
{
resolve: "gatsby-source-prismic-graphql",
options: {
repositoryName: "",
linkResolver: () => (post) => /${post.uid},
omitPrismicScript: true,
},
},
{
resolve: gatsby-plugin-manifest,
options: {
name: sample,
short_name: sample,
start_url: /,
background_color: #663399,
theme_color: #663399,
display: minimal-ui,
icon: sample-notext.png, // This path is relative to the root of the site.
},
},
{
resolve: gatsby-plugin-google-analytics,
options: {
trackingId: "UA-107057776-1",
head: true,
},
},
{
resolve: "gatsby-plugin-iltorb",
options: {
extensions: ["css", "html", "js", "svg", "png", "ttf"],
},
},
gatsby-plugin-preact,
{
resolve: gatsby-plugin-html-minifier,
options: {
minifyCSS: true,
minifyJS: true,
minifyURLs: true,
removeEmptyAttributes: true,
removeComments: true,
},
},
{
resolve: "gatsby-plugin-html-attributes",
options: {
lang: "en",
},
},
{
resolve: gatsby-plugin-nprogress,
options: {
color: "#dd8d83",
showSpinner: false,
minimum: 0.4,
},
},
gatsby-plugin-react-head,
],

Please help. Thanks!

Discussion

pic
Editor guide