feat(seo): added seo optimisations

RSickenberg · Jul 9, 2024 · a866aa4 · a866aa4
1 parent 970b2de
commit a866aa4
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- SEO optimisations
+
+### Fixed
+- Changed links to spans
 
 ## [1.0.1] - 2024-07-09
 ### Fixed
@@ -171,7 +176,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Few issues on dark mode and event listener
 
-[unreleased]: https://github.com/RSickenberg/rsickenberg.me/compare/v1.0.1...HEAD
+[Unreleased]: https://github.com/RSickenberg/rsickenberg.me/compare/v1.0.1...HEAD
 [1.0.1]: https://github.com/RSickenberg/rsickenberg.me/compare/v1.0.0...v1.0.1
 [1.0.0]: https://github.com/RSickenberg/rsickenberg.me-next/compare/v0.2.10...v1.0.0
 [0.2.10]: https://github.com/RSickenberg/rsickenberg.me-next/compare/v0.2.9...v0.2.10

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "@tailwindcss/typography": "^0.5.13",
     "astro": "^4.11.5",
     "astro-icon": "^1.1.0",
+    "astro-seo": "^0.8.4",
     "gsap": "^3.12.5",
     "preact": "^10.22.1",
     "tailwindcss": "^3.4.4",

diff --git a/src/components/Contact.astro b/src/components/Contact.astro
@@ -48,8 +48,8 @@ const contactMediums: IContactMedium[] = [
                 <p class="mb-8 text-center md:text-xl sm:text-justify">
                     Here are few ways to learn more about me.<br> If you have a project, an idea or a coffee to share, be
                     free to contact me!<br><br>
-                    I'll try my best to make it <a
-                        class="underline decoration-2 decoration-gray-500 dark:decoration-gray-200">for you</a>.
+                    I'll try my best to make it <span
+                        class="underline decoration-2 decoration-gray-500 dark:decoration-gray-200">for you</span>.
                 </p>
 
                 <div class={'grid grid-flow-row grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-3 md:gap-4'}>

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
-import Navbar from "components/Navbar.astro";
 import "styles/global.scss";
+import {SEO} from 'astro-seo';
+import profileImage from '../assets/profile/antistatique_romain-31-web.jpg'
 
 export interface Props {
     title: string;
@@ -13,6 +14,24 @@ const {title} = Astro.props;
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <SEO
+        title={Astro.generator}
+        description="Full-Stack developer - Made in Switzerland 🇨🇭"
+        twitter={{creator: '@AKirbo320'}}
+        openGraph={{
+            basic: {
+                title: 'Romain Sickenberg - Full-Stack developer',
+                type: 'profile',
+                image: profileImage.src,
+            },
+            image: {
+                alt: 'Romain, a developer.',
+            },
+        }}
+        extend={{
+            link: [{ rel: 'icon', href: '/favicon.ico' }],
+        }}
+    />
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="icon" type="image/ico" href="/favicon.ico"/>

diff --git a/src/ui/ProjectList.tsx b/src/ui/ProjectList.tsx
@@ -74,7 +74,7 @@ export default function ProjectList() {
     return (
         <ul class={"w-[90%] mx-auto pb-10"} role="list">
             {projects.map((project: IProject, index: number) => (
-                <a
+                <span
                     href={project.url}
                     target="_blank"
                     key={project.id}
@@ -99,7 +99,7 @@ export default function ProjectList() {
                             <p key={index}>{role}.</p>
                         ))}
                     </div>
-                </a>
+                </span>
             ))}
 
             {/* Floating images on hover */}