feat: fix further seo findings and remove react-helmet

kevelopment · Nov 7, 2023 · fcf53db · fcf53db · vercel · Nov 7, 2023
1 parent 1b339e9
commit fcf53db
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 38 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,7 +1,6 @@
 module.exports = {
   siteMetadata: {
-    title: "Kevelopment",
-    titleTemplate: "%s · Freelance Software Development and Consulting",
+    title: "Kevelopment · Freelance Software Development and Consulting",
     author: "Kevin Adam",
     siteUrl: "https://www.kevelopment.dev",
     image: "src/images/profile.png",
@@ -12,15 +11,17 @@ module.exports = {
       "web developer",
       "full stack developer",
       "application web developer",
-      "frontend developer",
+      "senior frontend developer",
+      "react developer",
+      "next.js developer",
       "backend developer",
       "mobile developer",
       "freelancer oldenburg",
       "freelance software developer",
       "freelance web developer",
       "freelancer start up",
       "mvp development",
-      "minimal viable product"
+      "minimal viable product",
     ],
     lang: "en",
     description: "Kevin Adam - the Freelance Web Developer from Oldenburg ready for your Project. You're a Start up looking for someone who can drive forward your MVP? Search no more and hit me up!",
@@ -31,7 +32,6 @@ module.exports = {
     "gatsby-plugin-sharp",
     "gatsby-transformer-sharp",
     "gatsby-transformer-remark",
-    "gatsby-plugin-react-helmet",
     "gatsby-plugin-sitemap",
     {
       resolve: "gatsby-plugin-robots-txt",

diff --git a/src/components/AboutMe.jsx b/src/components/AboutMe.jsx
@@ -35,7 +35,8 @@ function AboutMe() {
                         roundBorders)
                     }
                     src="../images/kevin.jpeg"
-                    alt="Me"
+                    alt="Picture of me in the nature"
+                    title="Picture of me in the nature"
                   />
                 </div>
               </Fade>

diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -14,7 +14,7 @@ export default function Contact() {
           <div className="container has-text-centered pb-6">
             <h2 className="title has-text-light">{title}</h2>
             <h3 className="subtitle has-text-light">{subtitle}</h3>
-            <a href="mailto:info@kevelopment.dev" rel="author" className="button is-white is-outlined is-rounded">
+            <a href="mailto:info@kevelopment.dev" rel="author" className="button is-white is-outlined is-rounded" title="contact me">
               <span className="icon is-medium">
                 <i className="fa-lg far fa-paper-plane" />
               </span>

diff --git a/src/components/References.jsx b/src/components/References.jsx
@@ -36,7 +36,7 @@ const projects = [
       <Postgresql title="PostgreSQL" color="#4169E1" />,
       <Heroku title="Heroku" color="#430098" />,
     ],
-    image: <StaticImage alt="doku-coach application" src="../images/projects/dokucoach.png" />,
+    image: <StaticImage alt="doku-coach application" title="DokuCoach @ DokuCoach GmbH" src="../images/projects/dokucoach.png" />,
     homepage: "https://www.doku-coach.de",
   },
   {
@@ -45,7 +45,7 @@ const projects = [
     homepage: "https://www.cryptohunt.it",
     // description:
     //   "Lorem ipsizzle dolor fizzle shizzle my nizzle crocodizzle, cool adipiscing elit. Yippiyo fo shizzle velizzle, away volutpizzle, bling bling quizzle, gravida vel, da bomb. Lorem ipsizzle dolor fizzle shizzle my nizzle crocodizzle",
-    image: <StaticImage alt="cryptohunt application" src="../images/projects/cryptohunt.png" />,
+    image: <StaticImage alt="cryptohunt application" title="Cryptohunt @ Aircooled Ventures, Inc." src="../images/projects/cryptohunt.png" />,
     stack: [
       <Nextdotjs title="Next.js" color="#000000" />,
       <Nestjs title="NestJS" color="#E0234E" />,
@@ -58,7 +58,7 @@ const projects = [
     name: "Hitcap.gg",
     client: "Hitcap eSports GmbH",
     homepage: "https://www.hitcap.gg",
-    image: <StaticImage alt="hitcap application" src="../images/projects/hitcap.png" />,
+    image: <StaticImage alt="hitcap application" title="hitcap.gg @ Hitcap eSports GmbH" src="../images/projects/hitcap.png" />,
     stack: [
       <ReactJs title="React" color="#61DAFB" />,
       <Awsamplify title="AWS Amplify" color="#FF9900" />,
@@ -70,9 +70,7 @@ const projects = [
   {
     name: "School Book Order Platform",
     client: "SBL Fulfilment GmbH",
-    // description:
-    //   "Lorem ipsizzle dolor fizzle shizzle my nizzle crocodizzle, cool adipiscing elit. Yippiyo fo shizzle velizzle, away volutpizzle, bling bling quizzle, gravida vel, da bomb. Lorem ipsizzle dolor fizzle shizzle my nizzle crocodizzle",
-    image: <StaticImage alt="school-book-orders application" src="../images/projects/school-book-orders.png" />,
+    image: <StaticImage alt="school-book-orders application" title="School Book Order Platform @ SBL Fulfilment GmbH" src="../images/projects/school-book-orders.png" />,
     stack: [
       <Nextdotjs title="Next.js" color="#000000" />,
       <Mui title="Material UI Component Library" color="#007FFF" />,
@@ -85,7 +83,7 @@ const projects = [
     name: "moreEvent",
     client: "meetingmasters.de e.K.",
     homepage: "https://www.meetingmasters.de/teilnehmermanagement-moreevent",
-    image: <StaticImage alt="moreDirect application" src="../images/projects/moreevent.png" />,
+    image: <StaticImage alt="moreEvent application" title="moreEvent @ meetingmasters.de e.K." src="../images/projects/moreevent.png" />,
     stack: [
       <Spring title="Spring (Boot)" color="#6DB33F" />,
       <Hibernate title="Hibernate" color="#59666C" />,
@@ -97,7 +95,7 @@ const projects = [
     name: "moreDirect",
     client: "meetingmasters.de e.K.",
     homepage: "https://direct.meetingmasters.de/direct/r/LocationSearch.action",
-    image: <StaticImage alt="moreDirect application" src="../images/projects/moredirect.png" />,
+    image: <StaticImage alt="moreDirect application" title="moreDirect @ meetingmasters.de e.K." src="../images/projects/moredirect.png" />,
     stack: [
       <Spring title="Spring (Boot)" color="#6DB33F" />,
       <Postgresql title="PostgreSQL" color="#4169E1" />,
@@ -108,7 +106,7 @@ const projects = [
     name: "Dog License Trainer",
     client: "Kevelopment",
     homepage: "https://doggo.kevelopment.dev",
-    image: <StaticImage alt="doggo trainer website" src="../images/projects/doggo.png" />,
+    image: <StaticImage alt="doggo trainer website" title="Dog License Trainer @ Kevelopment" src="../images/projects/doggo.png" />,
     stack: [
       <Nextdotjs title="Next.js" color="#000000" />,
       <Mui title="Material UI Component Library" color="#007FFF" />,
@@ -119,7 +117,7 @@ const projects = [
     name: "Portfolio Website",
     client: "Kevelopment",
     homepage: "https://www.kevelopment.dev",
-    image: <StaticImage alt="kevelopment website" src="../images/projects/kevelopment.png" />,
+    image: <StaticImage alt="kevelopment portfolio website" title="Portfolio Website @ Kevelopment" src="../images/projects/kevelopment.png" />,
     stack: [
       <Gatsby title="Gatsby" color="#663399" />,
       <Bulma title="Bulma" color="#00D1B2" />,
@@ -147,7 +145,7 @@ export default function References() {
                   <p className="is-size-4 pb-4">{project.name}</p>
                   {project.image &&
                     (project.homepage ? (
-                      <a href={project.homepage} target="_blank" rel="noreferrer">
+                      <a href={project.homepage} target="_blank" rel="noreferrer" title={`${project.name} @ ${project.client}`}>
                         {project.image}
                       </a>
                     ) : (

diff --git a/src/components/buttons/SocialMediaButton.jsx b/src/components/buttons/SocialMediaButton.jsx
@@ -14,6 +14,7 @@ export default function SocialMediaButton({ iconClass, label, url }) {
       aria-label={`Social Media Button to ${label}`}
       target="_blank"
       rel="noreferrer"
+      title={label}
       className="button is-outlined is-light is-rounded mx-4"
     >
       <span className="icon fa-2x">{SocialMediaButtonIcons[iconClass]}</span>

diff --git a/src/components/head/SplashScreen.jsx b/src/components/head/SplashScreen.jsx
@@ -41,6 +41,7 @@ const image = (
     style={styles.avatar}
     imgStyle={{ borderRadius }}
     alt="Kevin Adams Profile Picture"
+    title="Kevin ADams Profile Picture"
     src="../../images/profile.jpg"
   />
 );

diff --git a/src/components/nav/Footer.jsx b/src/components/nav/Footer.jsx
@@ -5,8 +5,6 @@ import footerData from "../../content/footer.json";
 import LegalNotice from "../buttons/LegalNotice";
 import SocialMediaButton from "../buttons/SocialMediaButton";
 import "./footer.scss";
-import Routes from "./Routes";
-import {Link} from "gatsby";
 
 function Footer() {
   const { socialMediaButtons } = footerData;
@@ -48,6 +46,7 @@ function Footer() {
                 aria-label="Link to Gatsby Homepage"
                 rel="noreferrer"
                 className="has-text-info"
+                title="GatsbyJS"
                 href="https://www.gatsbyjs.com"
               >
                 <Gatsby size={14} />
@@ -59,6 +58,7 @@ function Footer() {
                 aria-label="Link to Bulma Homepage"
                 rel="noreferrer"
                 className="has-text-info"
+                title="Bulma"
                 href="https://www.bulma.io"
               >
                 <Bulma size={14} />
@@ -70,6 +70,7 @@ function Footer() {
                 aria-label="Youtube Link"
                 rel="noreferrer"
                 className="has-text-info"
+                title="rickroll"
                 href="https://youtu.be/3rzgrP7VA_Q?t=14"
               >
                 <span className="icon has-text-info">
@@ -80,7 +81,8 @@ function Footer() {
             <p>Copyright © 2021 - 2023 <a
                 rel="author"
                 className="has-text-info"
-                href=""
+                title="author"
+                href="https://www.kevelopment.dev"
             >Kevin Adam</a>
             </p>
           </div>

diff --git a/src/components/seo/SEO.jsx → src/components/seo/Head.jsx b/src/components/seo/SEO.jsx → src/components/seo/Head.jsx
@@ -1,37 +1,36 @@
-import { Helmet } from "react-helmet";
 import React from "react";
 import useSeoData from "../../hooks/useSeoData";
 
-function SEO() {
-  const { title, titleTemplate, author, lang, description, keywords, siteUrl, image } = useSeoData();
+export default function Head() {
+  const { title, author, lang, description, keywords, siteUrl, image } = useSeoData();
 
   return (
-    <Helmet title={title} titleTemplate={titleTemplate} htmlAttributes={{ lang }}>
+    <>
       {/* General Tags */}
       <html lang={lang} />
+      <title>{title}</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta charSet="utf-8" content="text/html" />
       <meta name="google-site-verification" content="q8yR-dQtcpS226CtIxSP3iAwC1cT1UTpI1DcqkFvibQ" />
       <meta name="description" content={description} />
       <meta name="keywords" content={keywords.join(",")} />
-      <meta name="image" content={image} />
+      <meta name="image" content="https://media.licdn.com/dms/image/C4D03AQGO3MR_R0e7Tg/profile-displayphoto-shrink_800_800/0/1633511356625?e=1704931200&v=beta&t=Jz-7-TqitVqx39waSjLsehBRDuZ-7vqOABOEPEHmQ7k" />
       <meta name="author" content={author} />
 
       {/* OpenGraph aka Facebook Tags */}
       <meta name="og:title" content={title} />
       <meta name="og:site_name" content={title} />
       <meta name="og:description" content={description} />
       <meta name="og:url" content={siteUrl} />
-      <meta name="og:image" content={image} />
+      <meta name="og:image" content="https://media.licdn.com/dms/image/C4D03AQGO3MR_R0e7Tg/profile-displayphoto-shrink_800_800/0/1633511356625?e=1704931200&v=beta&t=Jz-7-TqitVqx39waSjLsehBRDuZ-7vqOABOEPEHmQ7k" />
       <meta name="og:type" content="website" />
 
       {/* Twitter Tags */}
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
-      <meta name="twitter:image" content={image} />
+      <meta name="twitter:image" content="https://media.licdn.com/dms/image/C4D03AQGO3MR_R0e7Tg/profile-displayphoto-shrink_800_800/0/1633511356625?e=1704931200&v=beta&t=Jz-7-TqitVqx39waSjLsehBRDuZ-7vqOABOEPEHmQ7k" />
       <meta name="twitter:card" content="summary" />
-    </Helmet>
+    </>
   );
 }
 
-export default SEO;
diff --git a/src/content/experience/mm.md b/src/content/experience/mm.md
@@ -7,5 +7,5 @@ end: 2019-11
 
 As a Full-Stack Java-Developer at meetingmasters.de e.K. I was able to drive forward the development of following Systems
 
-- Participant Management System [moreEvent](https://www.meetingmasters.de/leistungen/teilnehmermanagement/leistungsuebersicht/)
-- Hotelbooking-Engine [moreDirect](https://direct.meetingmasters.de/direct/StartHotelSearchForm.action)
+- Participant Management System moreEvent
+- Hotelbooking-Engine moreDirect
diff --git a/src/hooks/useExperienceData.jsx b/src/hooks/useExperienceData.jsx
@@ -3,8 +3,8 @@ import { graphql, useStaticQuery } from "gatsby";
 const GET_EXPERIENCE_DATA = graphql`
   {
     allMarkdownRemark(
-      filter: { fileAbsolutePath: { regex: "/(experience)/" } }
-      sort: { fields: [frontmatter___start], order: DESC }
+      filter: {fileAbsolutePath: {regex: "/(experience)/"}}
+      sort: {frontmatter: {start: DESC}}
     ) {
       nodes {
         html

diff --git a/src/hooks/useSeoData.jsx b/src/hooks/useSeoData.jsx
@@ -5,7 +5,6 @@ const GET_SEO_DATA = graphql`
     site {
       siteMetadata {
         title
-        titleTemplate
         lang
         keywords
         description
@@ -18,7 +17,6 @@ const GET_SEO_DATA = graphql`
 
 const useSeoData = () => {
   const { site } = useStaticQuery(GET_SEO_DATA);
-  console.log({ site });
   return site.siteMetadata;
 };
 

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -6,13 +6,13 @@ import Skills from "../components/cv/Skills";
 import Info from "../components/head/Info";
 import Footer from "../components/nav/Footer";
 import References from "../components/References";
-import Seo from "../components/seo/SEO";
+import Head from "../components/seo/Head";
 import "../scss/styles.scss";
 
 function IndexPage() {
   return (
     <>
-      <Seo />
+      <Head />
       <Info />
       <AboutMe />
       <Experience />