title: Dynamically adding page meta in Gatsby Layout component using markdown
body: <p><strong>My objective:</strong>
  Add code to the Layout component so that the Meta title, description, and image are updated with the current page the user is on based on content provided in the frontmatter. For example if the user navigates to the about page, the meta should display the following:</p>
  <pre><code>&lt;title&gt;About | Website&lt;/title&gt;
  &lt;meta content=&quot;This is the about page&quot; name=&quot;description&quot;&gt;
  &lt;link rel=&quot;canonical&quot; href=&quot;www.website.com/about&quot; /&gt;
  &lt;meta property=&quot;og:image&quot; content=&quot;/images/about-meta.png&quot; /&gt;
  </code></pre>
  <p>While on the about page the corresponding meta is as such:</p>
  <pre><code>---
  title: About
  description: This is the about page
  meta_image: /images/about-meta.png
  slug: about
  ---
  </code></pre>
  <p><strong>What I'm doing now:</strong>
  I'm adding all that information in a Helmet tag to the individual templates and I have the title template setup in the layout, but it seems like there's got to be a better way to just automatically set the Helmet component in the layout to read that.</p>
  <p><em>Layout.jsx</em></p>
  <pre><code>&lt;Helmet
    defaultTitle={siteMetadata.title}
    titleTemplate={`%s | ${siteMetadata.title}`}
  /&gt;
  </code></pre>
  <p><em>templates/about.jsx</em></p>
  <pre><code>&lt;Helmet title={frontmatter.title} &gt;
    &lt;meta property=&quot;og:image&quot; content={frontmatter.meta_image}/&gt;
    &lt;link rel=&quot;canonical&quot; href=&quot;{siteMetadata.siteUrl}/{frontmatter.slug}&quot; /&gt;
  &lt;/Helmet&gt;
  </code></pre>
  <p>Gatsby has this guide on creating a <a href="https://www.gatsbyjs.com/docs/add-seo-component/" rel="nofollow noreferrer">SEO component</a>, but it doesn't to include how that works from the page template and uses jargon to define jargon so it's not particularly useful to me as a react noob. I'm not quite understanding what PropTypes are or what they do.</p>
  <p><em>What I'm trying:</em>
  I'd like to add a static query within the layout that will detect the current page slug then fetch the markdownremark based on the current slug and dynamically fill in the meta data so I don't have to add a helmet tag per page template.</p>