canonical seo

src/App.js

@@ -1,4 +1,4 @@
-import { Route, Link, Routes, BrowserRouter as Router } from "react-router-dom";
+import { Route, Link, Routes, BrowserRouter as Router, Navigate } from "react-router-dom";
 
 import "./assets/css/App.css";
 import "./assets/css/checkbox.css"
@@ -37,6 +37,7 @@ function App() {
           </Nav>
         </div>
         <Routes>
+          <Route exact path='' element={ <Navigate to='/' />} />
           <Route exact path="/" element={<Home />}></Route>
           <Route exact path="/projects" element={<Projects />}></Route>
           <Route exact path="activities" element={<Activities />}></Route>

src/pages/AboutMe.js

@@ -26,6 +26,7 @@ export default function AboutMe() {
         name="description"
         content="About Andrew Simonson - learn all about me and the stuff I do, it's real great."
       />
+      <link rel="canonical" href="https://asimonson.com/about"></link>
       <div className="col">
         <div id="aboutMe" data-aos="fade-up">
           <h2 className="concentratedHead">About Me</h2>

src/pages/Activities.js

@@ -1,7 +1,14 @@
-import Neon from '../componets/Neon'
+import Neon from "../componets/Neon";
 
 export default function ErrorNotFound() {
-    return (
-        <Neon color='#fff'><h1 className='neon'>ERROR 404</h1><br /><h3 className='neon'>URL Not Found</h3></Neon>
-    )
-}
+  return (
+    <>
+      <link rel="canonical" href="https://asimonson.com/activities"></link>
+      <Neon color="#fff">
+        <h1 className="neon">ERROR 404</h1>
+        <br />
+        <h3 className="neon">URL Not Found</h3>
+      </Neon>
+    </>
+  );
+}

src/pages/Error.js

@@ -1,7 +1,8 @@
 import Neon from '../componets/Neon'
 
 export default function ErrorNotFound() {
-    return (
+    return (<>
+    <link rel="canonical" href="https://asimonson.com/404"></link>
         <Neon color='#fff'><h1 className='neon'>ERROR 404</h1><br /><h3 className='neon'>URL Not Found</h3></Neon>
-    )
+    </>)
 }

src/pages/Home.js

@@ -16,6 +16,7 @@ export default function Home() {
 
   return (
     <div id="home">
+      <link rel="canonical" href="https://asimonson.com/"></link>
       <meta
         name="description"
         content="Andrew Simonson's Portfolio Website - Homepage"

src/pages/Projects.js

@@ -22,6 +22,7 @@ export default function Projects() {
 
   return (
     <div className="foreground" onLoad={() => toggle('')}>
+      <link rel="canonical" href="https://asimonson.com/projects"></link>
       <meta
         name="description"
         content="Recent projects by Andrew Simonson on his lovely portfolio website :)"