diff --git a/app.vue b/app.vue
index 41ca9fd7..a403fabb 100644
--- a/app.vue
+++ b/app.vue
@@ -4,6 +4,14 @@ const ogTitle = 'Debbie codes and helps others learn Playwright, testing, React,
 const twitterDescription = 'My website of where I play around with Nuxt, Playwright and more and showcase my blog, resources etc'
 const twitterCard = 'https://debbie.codes/twitter-card.png'
 const mySite = 'https://debbie.codes'
+
+const { path } = useRoute()
+const canonical = computed(()=> {
+  if (path === '/') return mySite
+  const { href: canonical } = new URL(path, mySite)
+  return canonical
+})
+
 useHead({
   htmlAttrs: {
     lang: 'en',
@@ -70,7 +78,7 @@ useHead({
     { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
     {
       rel: 'canonical',
-      href: mySite,
+      href: canonical.value,
     },
   ],
 })
diff --git a/server/middleware/removeTrailingSlash.js b/server/middleware/removeTrailingSlash.js
new file mode 100644
index 00000000..c7b98cac
--- /dev/null
+++ b/server/middleware/removeTrailingSlash.js
@@ -0,0 +1,7 @@
+export default defineEventHandler((event) => {
+  if (event.path !== '/' && event.path.endsWith('/')) {
+    const { path } = event
+    const nextPath = path.replace(/\/+$/, '') || '/'
+    return sendRedirect(event, nextPath, 301)
+  }
+})