From a9cee458a9154a14ece356fb324429b053da26a7 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Thu, 3 Aug 2023 12:33:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8E=20Add=20canonical=20url=20(#800)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/landing/src/pages/_app.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/landing/src/pages/_app.tsx b/apps/landing/src/pages/_app.tsx
index 25c39999f..64ddf5e65 100644
--- a/apps/landing/src/pages/_app.tsx
+++ b/apps/landing/src/pages/_app.tsx
@@ -11,6 +11,7 @@ import { NextPage } from "next";
 import { AppProps } from "next/app";
 import { Inter } from "next/font/google";
 import Head from "next/head";
+import { useRouter } from "next/router";
 import { appWithTranslation } from "next-i18next";
 import { DefaultSeo } from "next-seo";
 import React from "react";
@@ -34,6 +35,7 @@ type AppPropsWithLayout = AppProps<PageProps> & {
 };
 
 const MyApp: NextPage<AppPropsWithLayout> = ({ Component, pageProps }) => {
+  const router = useRouter();
   React.useEffect(() => {
     if (process.env.NEXT_PUBLIC_ENABLE_ANALYTICS) {
       // calling inject directly to avoid having this run for self-hosted instances
@@ -41,15 +43,25 @@ const MyApp: NextPage<AppPropsWithLayout> = ({ Component, pageProps }) => {
     }
   }, []);
 
+  const canonicalUrl = React.useMemo(() => {
+    const path = router.pathname === "/" ? "" : router.pathname;
+    if (router.locale === router.defaultLocale) {
+      return absoluteUrl(path);
+    } else {
+      return absoluteUrl(`/${router.locale}${path}`);
+    }
+  }, [router.defaultLocale, router.locale, router.pathname]);
+
   const getLayout = Component.getLayout ?? ((page) => page);
 
   return (
     <LazyMotion features={domMax}>
       <DefaultSeo
+        canonical={canonicalUrl}
         openGraph={{
           siteName: "Rallly",
           type: "website",
-          url: absoluteUrl(),
+          url: canonicalUrl,
           images: [
             {
               url: absoluteUrl("/og-image-1200.png"),