SEO component

package.json

@@ -27,10 +27,10 @@
     "dms2dec": "^1.1.0",
     "fast-exif": "^1.0.1",
     "fraction.js": "^4.0.9",
-    "gatsby": "^2.0.7",
+    "gatsby": "^2.0.8",
     "gatsby-awesome-pagination": "^0.2.1",
-    "gatsby-image": "^2.0.8",
-    "gatsby-plugin-catch-links": "^2.0.2",
+    "gatsby-image": "^2.0.9",
+    "gatsby-plugin-catch-links": "^2.0.3",
     "gatsby-plugin-feed": "^2.0.5",
     "gatsby-plugin-lunr": "^1.2.0",
     "gatsby-plugin-matomo": "^0.5.0",
@@ -43,12 +43,12 @@
     "gatsby-redirect-from": "^0.1.1",
     "gatsby-remark-autolink-headers": "^2.0.6",
     "gatsby-remark-copy-linked-files": "^2.0.5",
-    "gatsby-remark-images": "^2.0.1",
+    "gatsby-remark-images": "^2.0.2",
     "gatsby-remark-prismjs": "^3.0.0",
     "gatsby-remark-smartypants": "^2.0.5",
     "gatsby-source-filesystem": "^2.0.1",
     "gatsby-transformer-remark": "^2.1.3",
-    "gatsby-transformer-sharp": "^2.1.1",
+    "gatsby-transformer-sharp": "^2.1.2",
     "gatsby-transformer-yaml": "^2.1.1",
     "graphql": "^0.13.2",
     "intersection-observer": "^0.5.0",
@@ -84,7 +84,7 @@
     "stylelint": "^9.5.0",
     "stylelint-config-css-modules": "^1.3.0",
     "stylelint-config-standard": "^18.2.0",
-    "stylelint-scss": "^3.3.0"
+    "stylelint-scss": "^3.3.1"
   },
   "engines": {
     "node": "^10.0.0"

src/components/atoms/SEO.jsx

@@ -0,0 +1,145 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
+import Helmet from 'react-helmet'
+
+const query = graphql`
+  query {
+    contentYaml {
+      title
+      tagline
+      url
+      author {
+        name
+        twitter
+        avatar {
+          childImageSharp {
+            resize(width: 160) {
+              src
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+class SEO extends Component {
+  static propTypes = {
+    post: PropTypes.object,
+    slug: PropTypes.string,
+    postSEO: PropTypes.bool
+  }
+
+  render() {
+    return (
+      <StaticQuery
+        query={query}
+        render={data => {
+          const siteMeta = data.contentYaml
+          const { post, slug, postSEO } = this.props
+          let title
+          let description
+          let image
+          let postURL
+
+          if (postSEO) {
+            const postMeta = post.frontmatter
+            title = `${postMeta.title} ¦ ${siteMeta.tagline}`
+            description = postMeta.description
+              ? postMeta.description
+              : post.excerpt
+            image = postMeta.image.childImageSharp.fluid.src
+            postURL = `${siteMeta.url}${slug}`
+          } else {
+            title = `${siteMeta.title} ¦ ${siteMeta.tagline}`
+            description = siteMeta.tagline
+            image = siteMeta.author.avatar.childImageSharp.resize.src
+          }
+
+          image = `${siteMeta.url}${image}`
+          const blogURL = siteMeta.url
+          const url = postSEO ? postURL : blogURL
+
+          const schemaOrgJSONLD = [
+            {
+              '@context': 'http://schema.org',
+              '@type': 'WebSite',
+              url: blogURL,
+              name: title,
+              alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : ''
+            }
+          ]
+
+          if (postSEO) {
+            schemaOrgJSONLD.push(
+              {
+                '@context': 'http://schema.org',
+                '@type': 'BreadcrumbList',
+                itemListElement: [
+                  {
+                    '@type': 'ListItem',
+                    position: 1,
+                    item: {
+                      '@id': postURL,
+                      name: title,
+                      image
+                    }
+                  }
+                ]
+              },
+              {
+                '@context': 'http://schema.org',
+                '@type': 'BlogPosting',
+                url: blogURL,
+                name: title,
+                alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '',
+                headline: title,
+                image: {
+                  '@type': 'ImageObject',
+                  url: image
+                },
+                description
+              }
+            )
+          }
+
+          return (
+            <Helmet>
+              <html lang="en" />
+
+              {/* General tags */}
+              <meta name="description" content={description} />
+              <meta name="image" content={image} />
+              <link rel="canonical" href={url} />
+
+              {/* Schema.org tags */}
+              <script type="application/ld+json">
+                {JSON.stringify(schemaOrgJSONLD)}
+              </script>
+
+              {/* OpenGraph tags */}
+              <meta property="og:url" content={url} />
+              {postSEO && <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.author.twitter ? siteMeta.author.twitter : ''}
+              />
+              <meta name="twitter:title" content={title} />
+              <meta name="twitter:description" content={description} />
+              <meta name="twitter:image" content={image} />
+            </Helmet>
+          )
+        }}
+      />
+    )
+  }
+}
+
+export default SEO

src/templates/Post.jsx

@@ -8,6 +8,7 @@ import PostTitle from '../components/atoms/PostTitle'
 import PostLead from '../components/atoms/PostLead'
 import PostContent from '../components/atoms/PostContent'
 import PostActions from '../components/atoms/PostActions'
+import SEO from '../components/atoms/SEO'
 import PostMeta from '../components/molecules/PostMeta'
 import Exif from '../components/atoms/Exif'
 import styles from './Post.module.scss'
@@ -16,6 +17,7 @@ const Post = ({ data, location }) => {
   const { markdownRemark: post } = data
   const { contentYaml: meta } = data
   const { title, image, type, linkurl, style } = post.frontmatter
+  const { slug } = post.fields
 
   return (
     <Layout location={location}>
@@ -23,19 +25,15 @@ const Post = ({ data, location }) => {
         {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} />
-
         <PostLead post={post} />
-
         {image && <PostImage fluid={image.childImageSharp.fluid} alt={title} />}
-
         {image && image.fields && <Exif exif={image.fields.exif} />}
-
         <PostContent post={post} />
-
-        <PostActions slug={post.fields.slug} url={meta.url} />
-
+        <PostActions slug={slug} url={meta.url} />
         <PostMeta post={post} meta={meta} />
       </article>
     </Layout>

src/templates/Posts.jsx

@@ -8,6 +8,7 @@ import PostLead from '../components/atoms/PostLead'
 import PostContent from '../components/atoms/PostContent'
 import PostMore from '../components/atoms/PostMore'
 import PostLinkActions from '../components/atoms/PostLinkActions'
+import SEO from '../components/atoms/SEO'
 import Pagination from '../components/molecules/Pagination'
 import Featured from '../components/molecules/Featured'
 import styles from './Posts.module.scss'
@@ -54,6 +55,7 @@ const Posts = ({ data, location, pageContext }) => {
 
   return (
     <Layout location={location}>
+      <SEO />
       {location.pathname === '/' && <Featured />}
       {tag && <h1 className={styles.archiveTitle}>{tag}</h1>}
       {previousPagePath && (