diff --git a/packages/ui/components/head-seo/HeadSeo.tsx b/packages/ui/components/head-seo/HeadSeo.tsx
index 15d6be4e8b..977a9d42f5 100644
--- a/packages/ui/components/head-seo/HeadSeo.tsx
+++ b/packages/ui/components/head-seo/HeadSeo.tsx
@@ -11,7 +11,6 @@ import {
 } from "@calcom/lib/OgImages";
 import { getBrowserInfo } from "@calcom/lib/browser/browser.utils";
 import { APP_NAME } from "@calcom/lib/constants";
-import isCalcom from "@calcom/lib/isCalcom";
 import { seoConfig, getSeoImage } from "@calcom/lib/next-seo.config";
 import { truncateOnWord } from "@calcom/lib/text";
 
@@ -74,10 +73,18 @@ const buildSeoMeta = (pageProps: {
 };
 
 export const HeadSeo = (props: HeadSeoProps): JSX.Element => {
-  // build the canonical url to ensure it's always cal.com (not app.cal.com)
-  const router = useRouter();
-  const calcomUrl = (`https://cal.com` + (router.asPath === "/" ? "" : router.asPath)).split("?")[0]; // cut off search params
-  const defaultUrl = isCalcom ? calcomUrl : getBrowserInfo()?.url;
+  // The below code sets the defaultUrl for our canonical tags
+
+  // Get the current URL from the window object
+  const url = getBrowserInfo()?.url;
+  // Check if the URL is from cal.com
+  const isCalcom = url && new URL(url).hostname.endsWith("cal.com");
+  // Get the router's path
+  const path = useRouter().asPath;
+  // Build the canonical URL using the router's path, without query parameters. Note: on homepage it omits the trailing slash
+  const calcomCanonical = `https://cal.com${path === "/" ? "" : path}`.split("?")[0];
+  // Set the default URL to either the current URL (if self-hosted) or https://cal.com canonical URL
+  const defaultUrl = isCalcom ? calcomCanonical : url;
 
   const { title, description, siteName, canonical = defaultUrl, nextSeoProps = {}, app, meeting } = props;