✅ SEO and Accessibility

keithrfung · Oct 26, 2023 · e89245b · e89245b
1 parent 0efc9f2
commit e89245b
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 14 deletions.
diff --git a/gatsby-config.ts b/gatsby-config.ts
@@ -3,7 +3,8 @@ import type { GatsbyConfig } from "gatsby";
 const config: GatsbyConfig = {
   siteMetadata: {
     title: `keithrfung.dev`,
-    siteUrl: `https://www.yourdomain.tld`,
+    description: "Keith Fung's personal website.",
+    siteUrl: `https://www.keithrfung.dev`,
   },
   // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
   // If you use VSCode you can also use the GraphQL plugin

diff --git a/src/components/AnimatedBackground.tsx b/src/components/AnimatedBackground.tsx
@@ -105,6 +105,7 @@ export const AnimatedBackground: FC = () => {
           blobVariations[index];
         return (
           <motion.div
+            key={`floating-blob-${index}`}
             style={{
               position: "absolute",
               maxWidth: "fit-content",

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,8 +1,9 @@
 /** @jsx jsx */
-import { Box, jsx, Text } from "theme-ui";
+import { jsx, Text } from "theme-ui";
 
 import { FC } from "react";
-import Link from "./link";
+
+const linkStyle = { color: "spiroDiscoBall", textDecoration: "none" };
 
 export const Footer: FC = () => (
   <footer
@@ -18,17 +19,24 @@ export const Footer: FC = () => (
   >
     <Text>
       Designed & Developed by{" "}
-      <Link href="https://keithrfung.dev">Keith Fung</Link> © 2023
+      <a href="https://keithrfung.dev" sx={linkStyle}>
+        Keith Fung
+      </a>{" "}
+      © 2023
     </Text>
     <Text sx={{ fontSize: [1, 2, 2] }}>
       Icons by{" "}
-      <Link href="https://freeicons.io/profile/823" alt="Muhammad Haq Profile">
+      <a
+        href="https://freeicons.io/profile/823"
+        aria-label="Muhammad Haq Profile"
+        sx={linkStyle}
+      >
         Muhammad Haq
-      </Link>{" "}
+      </a>{" "}
       from{" "}
-      <Link href="https://freeicons.io/" alt="Freeicons.io">
+      <a href="https://freeicons.io/" aria-label="Freeicons.io" sx={linkStyle}>
         freeicons.io
-      </Link>
+      </a>
     </Text>
   </footer>
 );

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -54,8 +54,8 @@ export const Header: FC = () => (
     }}
   >
     <Link
-      href="/"
-      aria-label="Reload Site"
+      to="/"
+      aria-label="keithrfung.dev"
       sx={{
         color: "text",
         verticalAlign: "center",
@@ -70,9 +70,9 @@ export const Header: FC = () => (
     <Box>
       {links
         .sort((a, b) => a.order - b.order)
-        .map(({ href, alt, Icon, hoverColor, ariaLabel }) => (
-          <Shaker style={{ marginLeft: 10 }}>
-            <Link href={href} aria-label={ariaLabel}>
+        .map(({ href, alt, Icon, hoverColor, ariaLabel }, index) => (
+          <Shaker style={{ marginLeft: 10 }} key={`nav-icon-link-${index}`}>
+            <a href={href} aria-label={ariaLabel}>
               <Icon
                 alt={alt}
                 sx={{
@@ -84,7 +84,7 @@ export const Header: FC = () => (
                   },
                 }}
               />
-            </Link>
+            </a>
           </Shaker>
         ))}
     </Box>

diff --git a/src/components/seo.tsx b/src/components/seo.tsx
@@ -0,0 +1,29 @@
+import React, { FC, ReactElement } from "react";
+import { useSiteMetadata } from "../hooks/use-site-metadata";
+
+export const SEO: FC<{
+  title: string;
+  description: string;
+  pathname: string;
+  children: ReactElement;
+}> = ({ title, description, pathname, children }) => {
+  const {
+    title: defaultTitle,
+    description: defaultDescription,
+    siteUrl,
+  } = useSiteMetadata();
+
+  const seo = {
+    title: title || defaultTitle,
+    description: description || defaultDescription,
+    url: `${siteUrl}${pathname || ``}`,
+  };
+
+  return (
+    <>
+      <title>{seo.title}</title>
+      <meta name="description" content={seo.description} />
+      {children}
+    </>
+  );
+};
diff --git a/src/hooks/use-site-metadata.tsx b/src/hooks/use-site-metadata.tsx
@@ -0,0 +1,17 @@
+import { graphql, useStaticQuery } from "gatsby";
+
+export const useSiteMetadata = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+          description
+          siteUrl
+        }
+      }
+    }
+  `);
+
+  return data.site.siteMetadata;
+};
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -1,4 +1,5 @@
 export { Layout as default } from "../components/layout";
+import { SEO } from "../components/seo";
 import Portrait from "../components/portrait";
 
 <Portrait />
@@ -8,3 +9,5 @@ import Portrait from "../components/portrait";
 ## Software Developer • Tech Enthusiast • Late Night Gamer
 
 A passionate full-stack developer and team leader who's always ready to learn and explore. Whether it's code, tech, music, art, or the world itself, I'm always looking for new challenges and experiences to grow and improve.
+
+export const Head = () => <SEO />;