title: Gatsby - Adding meta tags for SSR using react-head/react-helmet doesn't work on dynamically created pages
body: <p>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.</p>
  <p>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.</p>
  <p>My config includes the following plugins:</p>
  <pre><code>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: &quot;gatsby-source-prismic-graphql&quot;,
        options: {
          repositoryName: &quot;&lt;redacted&gt;&quot;,
          linkResolver: () =&gt; (post) =&gt; `/${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: &quot;UA-107057776-1&quot;,
          head: true,
        },
      },
      {
        resolve: &quot;gatsby-plugin-iltorb&quot;,
        options: {
          extensions: [&quot;css&quot;, &quot;html&quot;, &quot;js&quot;, &quot;svg&quot;, &quot;png&quot;, &quot;ttf&quot;],
        },
      },
      `gatsby-plugin-preact`,
      {
        resolve: `gatsby-plugin-html-minifier`,
        options: {
          minifyCSS: true,
          minifyJS: true,
          minifyURLs: true,
          removeEmptyAttributes: true,
          removeComments: true,
        },
      },
      {
        resolve: &quot;gatsby-plugin-html-attributes&quot;,
        options: {
          lang: &quot;en&quot;,
        },
      },
      {
        resolve: `gatsby-plugin-nprogress`,
        options: {
          color: &quot;#dd8d83&quot;,
          showSpinner: false,
          minimum: 0.4,
        },
      },
      `gatsby-plugin-react-head`,
    ],
  </code></pre>
  <p>Pages (both dynamic and static) generally look like this:</p>
  <pre><code>&lt;Layout
      meta={{
          title: `${post.post_title[0].text} | Not Just a Box Events`,
          description: meta.description,
          image: blog.page_hero_image.url,
      }}
  &gt;
      {children}
  &lt;/Layout&gt;
  </code></pre>
  <p>and Layout is this:</p>
  <pre><code>&lt;LayoutContainer className=&quot;div&quot;&gt;
      &lt;div className=&quot;Layout&quot;&gt;
          &lt;header&gt;
              &lt;Meta
                  name=&quot;p:domain_verify&quot;
                  content=&quot;1228088838575c68d8e15366463bb836&quot;
              /&gt;
              &lt;Link rel=&quot;preconnect&quot; href=&quot;https://images.prismic.io&quot; /&gt;
              &lt;Title&gt;{meta.title}&lt;/Title&gt;
              &lt;Meta name=&quot;title&quot; content={meta.title} /&gt;
              &lt;Meta name=&quot;description&quot; content={meta.description} /&gt;
              &lt;Meta property=&quot;og:type&quot; content=&quot;website&quot; /&gt;
              &lt;Meta
                  property=&quot;og:url&quot;
                  content=&quot;&quot;
              /&gt;
              &lt;Meta property=&quot;og:title&quot; content={meta.title} /&gt;
              &lt;Meta
                  property=&quot;og:description&quot;
                  content={meta.description}
              /&gt;
              &lt;Meta property=&quot;og:image&quot; content={meta.image} /&gt;
              &lt;Meta
                  property=&quot;twitter:card&quot;
                  content=&quot;summary_large_image&quot;
              /&gt;
              &lt;Meta
                  property=&quot;twitter:url&quot;
                  content=&quot;&quot;
              /&gt;
              &lt;Meta property=&quot;twitter:title&quot; content={meta.title} /&gt;
              &lt;Meta
                  property=&quot;twitter:description&quot;
                  content={meta.description}
              /&gt;
              &lt;Meta property=&quot;twitter:image&quot; content={meta.imagge} /&gt;
              {headerChildren}
          &lt;/header&gt;
          &lt;main className=&quot;Layout__content&quot;&gt;{children}&lt;/main&gt;
          &lt;Footer data={footerInfo} /&gt;
      &lt;/div&gt;
  &lt;/LayoutContainer&gt;
  </code></pre>
  <p>When I view the page source for the dynamic pages I don't see the metatags I'm trying to generate. I only see this:</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&lt;meta charSet=&quot;utf-8&quot;/&gt;&lt;meta http-equiv=&quot;x-ua-compatible&quot; content=&quot;ie=edge&quot;/&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;/&gt;&lt;meta name=&quot;theme-color&quot; content=&quot;#663399&quot;/&gt;&lt;meta name=&quot;generator&quot; content=&quot;Gatsby 2.21.1&quot;/&gt;
  </code></pre>
  <p>and then some CSS code, etc. None of the metatags I wanted.</p>
  <p>Please help</p>