feat: update seo data

gatsby-config.js

@@ -1,8 +1,14 @@
 module.exports = {
   siteMetadata: {
-    title: "Trust Jamin Okpukoro",
-    description: "Hi, I'm Trust Jamin Okpukoro a Frontend Developer and a JavaScript Engineer passionate about making the web easily accessible for everyone. I love building web products, here you'll find some of my previous projects and some information about me.",
+    title: "Trust Jamin",
+    titleTemplate: "%s | Trust Jamin Okpukoro",
+    siteUrl: "https://www.jagaban.dev", // No trailing slash allowed!
+    description:
+      "Hi, I'm Trust Jamin  a Frontend Developer and a JavaScript Engineer passionate about making the web easily accessible for everyone. I love building web products, here you'll find some of my previous projects and some information about me.",
     author: "@codejagaban",
+    url: "https://www.jagaban.dev", // No trailing slash allowed!
+    image: "/static/banner.png", // Path to the image placed in the 'static' folder, in the project's root directory.
+    twitterUsername: "@codejagaban",
   },
   plugins: [
     "gatsby-plugin-react-helmet",

src/components/Seo/index.tsx

@@ -1,76 +1,77 @@
-
-
 import React from "react";
+import { useLocation } from "@reach/router";
 import { useStaticQuery, graphql } from "gatsby";
 import { Helmet } from "react-helmet";
 
-interface SeoProps  {
-  lang?: string,
-  meta?: [],
-  description?: string,
-  title: string
+interface SeoProps {
+  lang?: string;
+  description?: string;
+  title: string;
+  image?: string;
 }
-const Seo = ({ description, lang= "en", meta, title }: SeoProps) => {
-  const { site } = useStaticQuery(
+const Seo = ({ description, lang = "en", image, title }: SeoProps) => {
+  const { pathname } = useLocation();
+  const { site, defaultImage } = useStaticQuery(
     graphql`
       query {
         site {
           siteMetadata {
-            title
-            description
-            author
+            defaultTitle: title
+            titleTemplate
+            defaultDescription: description
+            siteUrl: url
+            twitterUsername
           }
         }
+        defaultImage: file(relativePath: { eq: "images/banner.png" }) {
+          publicURL
+        }
       }
-    `
+    `,
   );
 
-  const metaDescription = description || site.siteMetadata.description;
-
+  const {
+    defaultTitle,
+    titleTemplate,
+    defaultDescription,
+    siteUrl,
+    twitterUsername,
+  } = site.siteMetadata;
+  const seo = {
+    title: title || defaultTitle,
+    description: description || defaultDescription,
+    image: `${image || defaultImage.publicURL}`,
+    url: `${siteUrl}${pathname}`,
+  };
   return (
     <Helmet
       htmlAttributes={{
         lang,
       }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
-      meta={meta && [
-        {
-          name: "description",
-          content: metaDescription,
-        },
-        {
-          property: "og:title",
-          content: title,
-        },
-        {
-          property: "og:description",
-          content: metaDescription,
-        },
-        {
-          property: "og:type",
-          content: "website",
-        },
-        {
-          name: "twitter:card",
-          content: "summary",
-        },
-        {
-          name: "twitter:creator",
-          content: site.siteMetadata.author,
-        },
-        {
-          name: "twitter:title",
-          content: title,
-        },
-        {
-          name: "twitter:description",
-          content: metaDescription,
-        },
-      ].concat(meta)}
+      title={seo.title}
+      titleTemplate={titleTemplate}
     >
+      <meta name="description" content={seo.description} />
+      <meta name="image" content={image} />
+      <meta property="og:sitename" content="Trust Jamin" />
+      {seo.url && <meta property="og:url" content={seo.url} />}
+      {seo.title && <meta property="og:title" content={seo.title} />}
+      {seo.description && (
+        <meta property="og:description" content={seo.description} />
+      )}
+      {seo.image && <meta property="og:image" content={seo.image} />}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta property="twitter:site" content="@codejagaban"></meta>
+      {twitterUsername && (
+        <meta name="twitter:creator" content={twitterUsername} />
+      )}
+      {seo.title && <meta name="twitter:title" content={seo.title} />}
+      {seo.description && (
+        <meta name="twitter:description" content={seo.description} />
+      )}
+      {seo.image && <meta name="twitter:image" content={seo.image} />}
     </Helmet>
   );
 };
 
-export default Seo;
+export default Seo;