fix meta tags for pages

src/components/Layout.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import Container from './atoms/Container'
 import Typekit from './atoms/Typekit'
@@ -7,7 +7,7 @@ import Footer from './organisms/Footer'
 import styles from './Layout.module.scss'
 
 const Layout = ({ children }) => (
-  <Fragment>
+  <>
     <Typekit />
     <Header />
 
@@ -18,7 +18,7 @@ const Layout = ({ children }) => (
     </main>
 
     <Footer />
-  </Fragment>
+  </>
 )
 
 Layout.propTypes = {

src/components/atoms/SEO.jsx

@@ -149,12 +149,14 @@ const SEO = ({ post, slug, postSEO }) => (
         const postMeta = post.frontmatter
         title = `${postMeta.title} ¦ ${siteMeta.siteTitle}`
         description = postMeta.description ? postMeta.description : post.excerpt
-        image = postMeta.image ? postMeta.image.childImageSharp.fluid.src : logo
+        image = postMeta.image
+          ? postMeta.image.childImageSharp.fluid.src
+          : `/${logo}`
         postURL = `${siteMeta.siteUrl}${slug}`
       } else {
         title = `${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
         description = siteMeta.siteDescription
-        image = logo
+        image = `/${logo}`
       }
 
       image = `${siteMeta.siteUrl}${image}`

src/pages/404.jsx

@@ -4,8 +4,14 @@ import { Link } from 'gatsby'
 import Page from '../templates/Page'
 import styles from './404.module.scss'
 
-const NotFound = () => (
+const page = {
-  <Page title="404 - Not Found">
+  frontmatter: {
+    title: '404 - Not Found'
+  }
+}
+
+const NotFound = ({ location }) => (
+  <Page title={page.frontmatter.title} post={page} location={location}>
     <div className={styles.hal9000} />
 
     <div className={styles.wrapper}>

src/pages/goodies.jsx

@@ -3,10 +3,17 @@ import PropTypes from 'prop-types'
 import { graphql, Link } from 'gatsby'
 import PostImage from '../components/Post/PostImage'
 import Page from '../templates/Page'
-
 import styles from './goodies.module.scss'
 
-const Goodies = ({ data }) => {
+const page = {
+  frontmatter: {
+    title: 'Goodies',
+    description:
+      'Goodies released by designer & developer Matthias Kretschmann.'
+  }
+}
+
+const Goodies = ({ data, location }) => {
   const edges = data.goodies.edges
 
   const GoodiesThumbs = edges.map(({ node }) => {
@@ -25,7 +32,11 @@ const Goodies = ({ data }) => {
     )
   })
 
-  return <Page title="Goodies">{GoodiesThumbs}</Page>
+  return (
+    <Page title={page.frontmatter.title} post={page} location={location}>
+      {GoodiesThumbs}
+    </Page>
+  )
 }
 
 Goodies.propTypes = {

src/pages/photos.jsx

@@ -6,7 +6,14 @@ import Page from '../templates/Page'
 
 import styles from './photos.module.scss'
 
-const Photos = ({ data }) => {
+const page = {
+  frontmatter: {
+    title: 'Photos',
+    description: 'Personal photos of designer & developer Matthias Kretschmann.'
+  }
+}
+
+const Photos = ({ data, location }) => {
   const edges = data.photos.edges
 
   const PhotoThumbs = edges.map(({ node }) => {
@@ -25,7 +32,12 @@ const Photos = ({ data }) => {
   })
 
   return (
-    <Page title="Photos" section={styles.photos}>
+    <Page
+      title={page.frontmatter.title}
+      post={page}
+      location={location}
+      section={styles.photos}
+    >
       {PhotoThumbs}
     </Page>
   )

src/templates/Page.jsx

@@ -1,15 +1,21 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
+import SEO from '../components/atoms/SEO'
 import Layout from '../components/Layout'
-
 import styles from './Page.module.scss'
 
-const Page = ({ title, location, section, children }) => {
+const Page = ({ title, location, section, children, post }) => {
   return (
-    <Layout location={location}>
+    <>
-      <h1 className={styles.pageTitle}>{title}</h1>
+      <Helmet title={title} />
-      {section ? <section className={section}>{children}</section> : children}
+      <SEO slug={location.pathname} postSEO post={post} />
-    </Layout>
+
+      <Layout location={location}>
+        <h1 className={styles.pageTitle}>{title}</h1>
+        {section ? <section className={section}>{children}</section> : children}
+      </Layout>
+    </>
   )
 }
 
@@ -17,7 +23,8 @@ Page.propTypes = {
   title: PropTypes.string.isRequired,
   children: PropTypes.any.isRequired,
   section: PropTypes.string,
-  location: PropTypes.object
+  location: PropTypes.object,
+  page: PropTypes.object
 }
 
 export default Page

src/templates/Post.jsx

@@ -32,13 +32,13 @@ const Post = ({ data, location }) => {
 
   return (
     <Fragment>
+      <Helmet title={title}>
+        {style && <link rel="stylesheet" href={style.publicURL} />}
+      </Helmet>
+
+      <SEO slug={slug} post={post} postSEO />
+
       <Layout location={location}>
-        <Helmet title={title}>
-          {style && <link rel="stylesheet" href={style.publicURL} />}
-        </Helmet>
-
-        <SEO slug={slug} post={post} postSEO />
-
         <article className={styles.hentry}>
           <PostTitle type={type} linkurl={linkurl} title={title} />
           {type === 'post' && <PostLead post={post} />}