add social media banner image and handle, SEO keywords and canonical link

Author: Muguku

gatsby-config.js

@@ -7,7 +7,41 @@ module.exports = {
     title: `Muguku`,
     owner: `Macharia Muguku`,
     description: `A Macharia Muguku software engineer portfolio website`,
-    author: `Macharia Muguku <[email protected]>`
+    author: `Macharia Muguku <[email protected]>`,
+    // don't use trailing slash
+    siteUrl: "http://muguku.co.ke",
+    social: {
+      twitter: "@charmgk"
+    },
+    keywords: [
+      "macharia muguku",
+      "macharia",
+      "muguku",
+      "software engineer",
+      "full-stack developer",
+      "software",
+      "engineer",
+      "developer",
+      "fullstack",
+      "front-end",
+      "frontend",
+      "minimalist",
+      "gatsby",
+      "portfolio",
+      "react",
+      "reactjs",
+      "react.js",
+      "node",
+      "nodejs",
+      "node.js",
+      "golang",
+      "go",
+      "docker",
+      "react",
+      "nginx",
+      "graphql",
+      "mpesa"
+    ]
   },
   plugins: [
     `gatsby-transformer-sharp`,

src/components/homeLayout.js

@@ -222,23 +222,34 @@ export const HomeLayout = () => {
   // check if media is mobile
   const isMobileOrTablet = useMediaQuery("(max-width: 48rem)");
 
-  // query for side data
+  // query for site data and optimized SEO image
   const {
-    site: { siteMetadata }
+    site: { siteMetadata },
+    SeoImage
   } = useStaticQuery(graphql`
-    query SiteTitleQuery {
+    query SiteTitleQueryAndSeoImage {
       site {
         siteMetadata {
           title
           owner
         }
       }
+      SeoImage: file(relativePath: { eq: "screenshot.png" }) {
+        childImageSharp {
+          fixed(width: 1280, height: 640) {
+            ...GatsbyImageSharpFixed
+          }
+        }
+      }
     }
   `);
 
   return (
     <VerticalContainer>
-      <SEO title={activeMenuAndComponent.Menu} />
+      <SEO
+        title={activeMenuAndComponent.Menu}
+        image={SeoImage.childImageSharp.fixed}
+      />
       <Header
         siteTitle={siteMetadata.title}
         scrollToTop={scrollToTop}

src/components/seo.js

@@ -10,7 +10,14 @@ import PropTypes from "prop-types";
 import Helmet from "react-helmet";
 import { useStaticQuery, graphql } from "gatsby";
 
-export function SEO({ description, lang, meta, title }) {
+export function SEO({
+  description,
+  lang,
+  meta,
+  image: metaImage,
+  title,
+  pathname
+}) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -19,13 +26,22 @@ export function SEO({ description, lang, meta, title }) {
             title
             description
             author
+            keywords
+            siteUrl
+            social {
+              twitter
+            }
           }
         }
       }
     `
   );
 
   const metaDescription = description || site.siteMetadata.description;
+  const image = metaImage?.src
+    ? `${site.siteMetadata.siteUrl}${metaImage.src}`
+    : null;
+  const canonical = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : null;
 
   return (
     <Helmet
@@ -34,6 +50,16 @@ export function SEO({ description, lang, meta, title }) {
       }}
       title={title}
       titleTemplate={`%s | ${site.siteMetadata.title}`}
+      link={
+        canonical
+          ? [
+              {
+                rel: "canonical",
+                href: canonical
+              }
+            ]
+          : []
+      }
       meta={[
         {
           name: `description`,
@@ -43,6 +69,14 @@ export function SEO({ description, lang, meta, title }) {
           property: `og:title`,
           content: title
         },
+        {
+          name: "keywords",
+          content: site.siteMetadata.keywords.join(",")
+        },
+        {
+          property: `og:url`,
+          content: site.siteMetadata.siteUrl
+        },
         {
           property: `og:description`,
           content: metaDescription
@@ -51,13 +85,9 @@ export function SEO({ description, lang, meta, title }) {
           property: `og:type`,
           content: `website`
         },
-        {
-          name: `twitter:card`,
-          content: `summary`
-        },
         {
           name: `twitter:creator`,
-          content: site.siteMetadata.author
+          content: site.siteMetadata.social.twitter
         },
         {
           name: `twitter:title`,
@@ -67,7 +97,39 @@ export function SEO({ description, lang, meta, title }) {
           name: `twitter:description`,
           content: metaDescription
         }
-      ].concat(meta)}
+      ]
+        .concat(
+          metaImage
+            ? [
+                {
+                  property: "og:image",
+                  content: image
+                },
+                {
+                  property: `og:image:alt`,
+                  content: title
+                },
+                {
+                  property: "og:image:width",
+                  content: metaImage.width
+                },
+                {
+                  property: "og:image:height",
+                  content: metaImage.height
+                },
+                {
+                  name: "twitter:card",
+                  content: "summary_large_image"
+                }
+              ]
+            : [
+                {
+                  name: "twitter:card",
+                  content: "summary"
+                }
+              ]
+        )
+        .concat(meta)}
     />
   );
 }
@@ -82,5 +144,11 @@ SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  image: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    height: PropTypes.number.isRequired,
+    width: PropTypes.number.isRequired
+  }),
+  pathname: PropTypes.string
 };