SEO component

* Twitter Cards
* OpenGraph
* schema.org

src/components/Seo.jsx

@@ -17,10 +17,65 @@ const query = graphql`
                 }
             }
         }
+
+        logo: allFile(filter: { name: { eq: "favicon-black" } }) {
+            edges {
+                node {
+                    relativePath
+                }
+            }
+        }
     }
 `
 
-const MetaTags = ({ title, description, url, image, schema, siteMeta }) => (
+const createSchemaOrg = (title, description, image, url, siteMeta, article) => {
+    const schemaOrgJSONLD = [
+        {
+            '@context': 'http://schema.org',
+            '@type': 'WebSite',
+            url: siteMeta.siteUrl,
+            name: title
+        }
+    ]
+
+    if (article) {
+        schemaOrgJSONLD.push(
+            {
+                '@context': 'http://schema.org',
+                '@type': 'BreadcrumbList',
+                itemListElement: [
+                    {
+                        '@type': 'ListItem',
+                        position: 1,
+                        item: { '@id': url, name: title, image }
+                    }
+                ]
+            },
+            {
+                // https://schema.org/TechArticle
+                '@context': 'http://schema.org',
+                '@type': 'TechArticle',
+                name: title,
+                headline: title,
+                description,
+                url,
+                image: { '@type': 'URL', url: image }
+            }
+        )
+    }
+
+    return schemaOrgJSONLD
+}
+
+const MetaTags = ({
+    title,
+    description,
+    url,
+    image,
+    schema,
+    siteMeta,
+    article
+}) => (
     <Helmet
         defaultTitle={siteMeta.siteTitle}
         titleTemplate={`%s - ${siteMeta.siteTitle}`}
@@ -41,17 +96,14 @@ const MetaTags = ({ title, description, url, image, schema, siteMeta }) => (
 
         {/* OpenGraph tags */}
         <meta property="og:url" content={url} />
-        {documentSEO && <meta property="og:type" content="article" />}
+        {article && <meta property="og:type" content="article" />}
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
         <meta property="og:image" content={image} />
 
         {/* Twitter Card tags */}
         <meta name="twitter:card" content="summary_large_image" />
-        <meta
-            name="twitter:creator"
-            content={siteMeta.social.twitter ? siteMeta.social.twitter : ''}
-        />
+        <meta name="twitter:creator" content={siteMeta.social.twitter || ''} />
         <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={description} />
         <meta name="twitter:image" content={image} />
@@ -59,27 +111,46 @@ const MetaTags = ({ title, description, url, image, schema, siteMeta }) => (
 )
 
 MetaTags.propTypes = {
-    description: PropTypes.string,
-    image: PropTypes.string,
-    url: PropTypes.string,
-    schema: PropTypes.string,
     title: PropTypes.string,
-    siteMeta: PropTypes.object
+    description: PropTypes.string,
+    url: PropTypes.string,
+    image: PropTypes.string,
+    schema: PropTypes.string,
+    siteMeta: PropTypes.object,
+    article: PropTypes.bool
 }
 
-const SEO = ({ title, description, slug }) => (
+const SEO = ({ title, description, slug, article }) => (
     <StaticQuery
         query={query}
         render={data => {
             const siteMeta = data.site.siteMetadata
+            const logo = data.logo.edges[0].node.relativePath
+
+            title = title || siteMeta.siteTitle
+            description = description || siteMeta.siteDescription
+            let url = siteMeta.siteUrl || siteMeta.siteUrl + slug
+            let image = `${siteMeta.siteUrl}/${logo}`
+
+            let schema = createSchemaOrg(
+                title,
+                description,
+                image,
+                url,
+                siteMeta,
+                article
+            )
+            schema = JSON.stringify(schema)
 
             return (
                 <MetaTags
-                    description={description}
-                    // image={image}
-                    url={url}
                     title={title}
+                    description={description}
+                    url={url}
+                    image={image}
+                    schema={schema}
                     siteMeta={siteMeta}
+                    article={article}
                 />
             )
         }}
@@ -89,7 +160,8 @@ const SEO = ({ title, description, slug }) => (
 SEO.propTypes = {
     title: PropTypes.string,
     description: PropTypes.string,
-    slug: PropTypes.string
+    slug: PropTypes.string,
+    article: PropTypes.bool
 }
 
 export default SEO

src/pages/404.jsx

@@ -6,7 +6,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import giphyAPI from 'giphy-js-sdk-core'
-import Helmet from 'react-helmet'
+import SEO from '../components/Seo'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
 import styles from './404.module.scss'
@@ -45,7 +45,7 @@ export default class NotFoundPage extends Component {
     render() {
         return (
             <>
-                <Helmet title="404 - Not Found" />
+                <SEO title="404 - Not Found" />
                 <Layout location={this.props.location}>
                     <Content>
                         <article className={styles.content}>

src/templates/Doc.jsx

@@ -13,6 +13,25 @@ import DocFooter from '../components/DocFooter'
 import SEO from '../components/Seo'
 import styles from './Doc.module.scss'
 
+const DocMain = ({ title, description, tableOfContents, post, single }) => (
+    <article className={single ? styles.mainSingle : styles.main}>
+        <DocHeader title={title} description={description} />
+
+        {tableOfContents && <DocToc tableOfContents={tableOfContents} />}
+
+        <DocContent html={post.html} htmlAst={post.htmlAst} />
+        <DocFooter post={post} />
+    </article>
+)
+
+DocMain.propTypes = {
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    tableOfContents: PropTypes.string.isRequired,
+    post: PropTypes.object.isRequired,
+    single: PropTypes.bool
+}
+
 export default class DocTemplate extends Component {
     static propTypes = {
         data: PropTypes.object.isRequired,
@@ -41,7 +60,12 @@ export default class DocTemplate extends Component {
                     <body className={section} />
                 </Helmet>
 
-                <SEO title={title} description={description} slug={slug} />
+                <SEO
+                    title={title}
+                    description={description}
+                    slug={slug}
+                    article
+                />
 
                 <Layout location={location}>
                     <HeaderSection title={section ? sectionTitle : title} />
@@ -55,42 +79,21 @@ export default class DocTemplate extends Component {
                                         sidebar={section}
                                     />
                                 </aside>
-                                <article className={styles.main}>
-                                    <DocHeader
-                                        title={title}
-                                        description={description}
-                                    />
-
-                                    {tableOfContents && (
-                                        <DocToc
-                                            tableOfContents={tableOfContents}
-                                        />
-                                    )}
-
-                                    <DocContent
-                                        html={post.html}
-                                        htmlAst={post.htmlAst}
-                                    />
-                                    <DocFooter post={post} />
-                                </article>
-                            </main>
-                        ) : (
-                            <article className={styles.mainSingle}>
-                                <DocHeader
+                                <DocMain
                                     title={title}
                                     description={description}
+                                    tableOfContents={tableOfContents}
+                                    post={post}
                                 />
-
-                                {tableOfContents && (
-                                    <DocToc tableOfContents={tableOfContents} />
-                                )}
-
-                                <DocContent
-                                    html={post.html}
-                                    htmlAst={post.htmlAst}
-                                />
-                                <DocFooter post={post} />
-                            </article>
+                            </main>
+                        ) : (
+                            <DocMain
+                                title={title}
+                                description={description}
+                                tableOfContents={tableOfContents}
+                                post={post}
+                                single
+                            />
                         )}
                     </Content>
                 </Layout>
@@ -112,6 +115,7 @@ export const pageQuery = graphql`
             }
             fields {
                 section
+                slug
             }
             ...PageFooter
         }