Fix the <Seo /> component to render canonical URLs without trailing s…

…lashes (#1622)
Shopify · Jan 9, 2024 · 36d6fa2 · 36d6fa2
1 parent eb0f4bc
commit 36d6fa2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/.changeset/polite-singers-joke.md b/.changeset/polite-singers-joke.md
@@ -0,0 +1,7 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Fix the `<Seo />` component to render canonical URLs without trailing slashes. For example, both https://hydrogen.shop/collections/freestyle/ and https://hydrogen.shop/collections/freestyle return a canonical link of https://hydrogen.shop/collections/freestyle.
+
+Thank you @joshuafredrickson for reporting.
diff --git a/packages/hydrogen/src/seo/generate-seo-tags.ts b/packages/hydrogen/src/seo/generate-seo-tags.ts
@@ -411,15 +411,16 @@ export function generateSeoTags<
         }
 
         const urlWithoutParams = content.split('?')[0];
+        const urlWithoutTrailingSlash = urlWithoutParams.replace(/\/$/, '');
 
         tagResults.push(
           generateTag('link', {
             rel: 'canonical',
-            href: urlWithoutParams,
+            href: urlWithoutTrailingSlash,
           }),
           generateTag('meta', {
             property: 'og:url',
-            content: urlWithoutParams,
+            content: urlWithoutTrailingSlash,
           }),
         );