feat: update SEO

kevelopment · Nov 7, 2023 · f9ae7c5 · f9ae7c5 · vercel · Nov 7, 2023
1 parent 7e73a23
commit f9ae7c5
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 19 deletions.
diff --git a/src/components/buttons/LegalNotice.jsx b/src/components/buttons/LegalNotice.jsx
@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import useLegalNoticeData from "../../hooks/useLegalNoticeData";
-import { Link } from "gatsby";
 import "./LegalNotice.scss";
-import Pages from "../nav/Pages";
 
 function LegalNotice() {
   const { html } = useLegalNoticeData();
@@ -22,6 +20,7 @@ function LegalNotice() {
       {isOpen ? (
         <div className="modal-overlay blurred-container">
           <div className="legalnotice-modal elevation has-text-left">
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <button onClick={closeModal} className="button is-light top-right" type="button">
               <span className="icon is-small">
                 <i className="fas fa-times" />
@@ -35,15 +34,6 @@ function LegalNotice() {
           </div>
         </div>
       ) : null}
-      <Link to={Pages.IMPRESS} style={{ display: "none" }} title="Impress">
-        Impressum
-      </Link>
-      <Link to={Pages.ABOUT} style={{ display: "none" }} title="About me">
-        About Me
-      </Link>
-      <Link to={Pages.HOME} style={{ display: "none" }} title="Home">
-        Home
-      </Link>
     </>
   );
 }

diff --git a/src/components/nav/Footer.jsx b/src/components/nav/Footer.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import * as Scroll from "react-scroll";
-import { SiBulma, Gatsby, SiGatsby } from "@icons-pack/react-simple-icons";
+import { SiBulma, SiGatsby } from "@icons-pack/react-simple-icons";
 import footerData from "../../content/footer.json";
 import LegalNotice from "../buttons/LegalNotice";
 import SocialMediaButton from "../buttons/SocialMediaButton";

diff --git a/src/components/nav/Navbar.jsx b/src/components/nav/Navbar.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Link } from "react-scroll";
 import "./navbar.scss";
 import Routes from "./Routes";
+import Pages from "./Pages";
 
 const links = [
   { label: "Info", route: Routes.INFO },
@@ -52,6 +53,18 @@ export default function Navbar() {
           </div>
         </div>
       </div>
+      <a href={Pages.IMPRESS} style={{ display: "none" }} title="Impress">
+        Impressum
+      </a>
+      <a href={Pages.ABOUT} style={{ display: "none" }} title="About me">
+        About Me
+      </a>
+      <a href={Pages.EXPERIENCE} style={{ display: "none" }} title="Experience">
+        Experience
+      </a>
+      <a href={Pages.HOME} style={{ display: "none" }} title="Home">
+        Home
+      </a>
     </nav>
   );
 }
diff --git a/src/components/nav/Pages.js b/src/components/nav/Pages.js
@@ -2,4 +2,5 @@ export default Object.freeze({
   HOME: "/",
   IMPRESS: "/impress",
   ABOUT: "/about",
+  EXPERIENCE: "/experience",
 });
diff --git a/src/components/seo/Head.jsx b/src/components/seo/Head.jsx
@@ -21,15 +21,14 @@ export default function Head() {
       <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 property="og:type" content="website" />
+      <meta property="og:title" content={title} />
+      <meta property="og:url" content={siteUrl} />
+      <meta property="og:description" content={description} />
       <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} />
@@ -38,9 +37,34 @@ export default function Head() {
         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" />
+      <meta name="twitter:card" content={description} />
 
-      <link rel="canonical" href="https://kevelopment.dev/" />
+      <link rel="canonical" href={siteUrl} />
+
+      <script type="application/ld+json">
+        {`
+          {
+              "@context": "http://schema.org/",
+              "@type": "Person",
+              "name": "Kevin Adam",
+              "image": "https://media.licdn.com/dms/image/C4D03AQGO3MR_R0e7Tg/profile-displayphoto-shrink_800_800/0/1633511356625?e=1704931200&v=beta&t=Jz-7-TqitVqx39waSjLsehBRDuZ-7vqOABOEPEHmQ7k",
+              "url": "https://www.kevelopment.dev",
+              "jobTitle": "Freelance Software Developmer",
+              "worksFor": {
+                "@type": "Organization",
+                "name": "Kevelopment · Software Development and Consulting"
+              },
+              "address": {
+                  "@type": "PostalAddress",
+                  "streetAddress": "Müggenweg 15",
+                  "addressLocality": "Oldenburg",
+                  "addressRegion": "Lower Saxony",
+                  "postalCode": "26133",
+                  "addressCountry": "Germany"
+              }
+          }
+        `}
+      </script>
     </>
   );
 }
diff --git a/src/pages/experience.jsx b/src/pages/experience.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { Link } from "gatsby";
+import Head from "../components/seo/Head";
+import Pages from "../components/nav/Pages";
+import useExperienceData from "../hooks/useExperienceData";
+import Job from "../components/cv/Job";
+
+export default function Experience() {
+  const { nodes } = useExperienceData();
+
+  return (
+    <>
+      <Head />
+
+      <div className="hero-body">
+        <div className="container has-text-centered">
+          <h2 className="title">Experience</h2>
+          <h3 className="subtitle">Profession &bull; Education</h3>
+        </div>
+      </div>
+
+      {nodes.map(({ frontmatter, html }, index) => (
+        <Job
+          key={`${frontmatter.title} - ${frontmatter.company}`}
+          description={html}
+          title={frontmatter.title}
+          company={frontmatter.company}
+          start={frontmatter.start}
+          end={frontmatter.end}
+          showDivider={index !== nodes.length - 1}
+        />
+      ))}
+      <Link to={Pages.HOME} title="Home">
+        Home
+      </Link>
+    </>
+  );
+}