Initial SEO support

yumyo · May 14, 2024 · 55ec51e · 55ec51e
1 parent 7277ffc
commit 55ec51e
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 5 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -8,12 +8,14 @@ const path = require("path")
 
 module.exports = {
   siteMetadata: {
-    title: `Giulia Nicole Pernice`,
-    description: `Product Designer and Full Stack Developer`,
-    lastBuildDate: new Date(Date.now()).toISOString(),
     siteUrl: `https://nicolapernice.com`,
-    authorName: `Giulia Nicole Pernice`,
-    socialimage: `/exness_cover_social.jpeg`,
+    title: `Giulia Nicole Pernice || Design Engineering Portfolio`,
+    description: `A Digital Product Engineer blending design and technology to create innovative solutions. Based in London, Giulia specialises in  digital product design and full-stack development. Connect to bring your project to life.`,
+    author: `Giulia Nicole Pernice`,
+    keywords: `product design, design technologist, front-end engineer, full-stack developer, ui/ux, web design, javascript, react, wordpress, hubspot, creative coding, design systems, threejs`,
+    socialimage: `./src/images/media/about-g.png`,
+    lastBuildDate: new Date(Date.now()).toISOString(),
+    codepen: `https://codepen.io/yumyo`,
     twitter: `https://twitter.com/KdSign`,
     github: `https://github.com/yumyo`,
     gitlab: `https://gitlab.com/k30`,

diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -95,6 +95,7 @@ const Layout = ({ children }) => {
     <MainContainer
       className={`${isActive ? "is-locked" : ""} flex flex-col min-h-screen`}
     >
+
       <Header />
       <div
         className={`flex lg:hidden flex-row fixed top-k1 z-50 text-violet-400 right-k1 md:-mr-4`}

diff --git a/src/components/Seo.jsx b/src/components/Seo.jsx
@@ -0,0 +1,90 @@
+import React from "react"
+import { Helmet } from "react-helmet"
+import { useSiteMetadata } from "../hooks/use-site-metadata"
+
+function SEO({ metaTitle, metaDescription, metaImage, lang, meta, pathname }) {
+  const { 
+    siteUrl,
+    title,
+    description, 
+    author, 
+    keywords,
+    socialimage, 
+    lastBuildDate,
+    codepen,
+    twitter,
+    github,
+    linkedin,
+    stackoverflow,
+    secureEmail,
+    behance,
+    pinterest,
+    flickr,
+    tumblrJournal,
+    tumblrDesign,
+    dribble,
+    siteLanguage
+  } = useSiteMetadata()
+
+  const seoTitle = metaTitle || title;
+  const seoDescription = metaDescription || description;
+  const seoImage = metaImage || socialimage;
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        siteLanguage,
+      }}
+      title={seoTitle}
+      defer={false}
+      meta={[
+        {
+          name: `description`,
+          content: seoDescription,
+        },
+        {
+          name: `keywords`,
+          content: keywords,
+        },
+        {
+          property: `og:title`,
+          content: seoTitle,
+        },
+        {
+          property: `og:description`,
+          content: seoDescription,
+        },
+        {
+          property: `og:type`,
+          content: `website`,
+        },
+        {
+          property: `og:image`,
+          content: seoImage,
+        },
+        {
+          name: `twitter:card`,
+          content: seoDescription,
+        },
+        {
+          name: `twitter:image`,
+          content: seoImage,
+        },
+        {
+          name: `twitter:creator`,
+          content: author,
+        },
+        {
+          name: `twitter:title`,
+          content: seoTitle,
+        },
+        {
+          name: `twitter:description`,
+          content: seoDescription,
+        },
+      ]}
+    />
+  )
+}
+
+export default SEO
diff --git a/src/hooks/use-site-metadata.js b/src/hooks/use-site-metadata.js
@@ -5,15 +5,26 @@ export const useSiteMetadata = () => {
       query SITE_METADATA_QUERY {
         site {
           siteMetadata {
+            siteUrl
             title
             description
+            author
+            keywords
+            socialimage
+            lastBuildDate
+            codepen
             twitter
             github
+            linkedin
             stackoverflow
             secureEmail
             behance
             pinterest
+            flickr
             tumblrJournal
+            tumblrDesign
+            dribble
+            siteLanguage
           }
         }
       }

diff --git a/src/pages/about.js b/src/pages/about.js
@@ -4,6 +4,7 @@ import { gsap } from "gsap"
 import tw from "twin.macro"
 import { StaticImage } from "gatsby-plugin-image"
 import { PageTitle } from "../components/theme"
+import SEO from "../components/Seo"
 
 const AboutLayout = tw.div``
 
@@ -35,6 +36,7 @@ const AboutPage = ({ transitionStatus }) => {
   return (
     // min-h-screen
     <div className="anim-about mx-auto mt-k5v mb-k3v flex w-k8 sm:w-k8 flex-row flex-wrap items-baseline opacity-0 lg:w-k7  xl:w-k5 xl:pl-0 ">
+      <SEO metaTitle="Giulia Nicole Pernice || Design Engineering Portfolio || About" />
       <div className="bio">
         <h1 className={`${About_Title}`}>Giulia Nicole Pernice</h1>
         </div>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,6 +3,7 @@ import { gsap } from "gsap"
 import TransitionLink from "gatsby-plugin-transition-link"
 import tw from "twin.macro"
 import { Lead } from "../components/theme"
+import SEO from "../components/Seo"
 // PageDefault
 const IndexPage = ({ transitionStatus }) => {
   useEffect(() => {
@@ -36,6 +37,7 @@ const IndexPage = ({ transitionStatus }) => {
 
   return (
     <div className="flex flex-col justify-center  ">
+      <SEO />
       <div className="anim-home opacity-0 mx-auto w-k8 md:w-k7 2xl:w-k5 mt-k5v">
         <Title>
           Hi, my name is{" "}