diff --git a/src/app/extensions/seo/store/seo/seo.effects.ts b/src/app/extensions/seo/store/seo/seo.effects.ts
index ca11a2cd81f..8ffd9f9ce8e 100644
--- a/src/app/extensions/seo/store/seo/seo.effects.ts
+++ b/src/app/extensions/seo/store/seo/seo.effects.ts
@@ -196,7 +196,7 @@ export class SeoEffects {
   private setCanonicalLink(url: string) {
     // the canonical URL of a production system should always be with 'https:'
     // even though the PWA SSR container itself is usually not deployed in an SSL environment so the URLs need manual adaption
-    const canonicalUrl = url.replace('http:', 'https:');
+    const canonicalUrl = encodeURI(url.replace('http:', 'https:'));
     let canonicalLink = this.doc.querySelector('link[rel="canonical"]');
     if (!canonicalLink) {
       canonicalLink = this.doc.createElement('link');