diff --git a/frontend/src/app/components/app/app.component.ts b/frontend/src/app/components/app/app.component.ts
index b54af73c1..6a961710a 100644
--- a/frontend/src/app/components/app/app.component.ts
+++ b/frontend/src/app/components/app/app.component.ts
@@ -9,7 +9,7 @@ import { StateService } from 'src/app/services/state.service';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
-  link: HTMLLinkElement;
+  link: HTMLElement = document.getElementById('canonical');
 
   constructor(
     public router: Router,
@@ -28,19 +28,8 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.router.events.subscribe((val) => {
       if (val instanceof NavigationEnd) {
-        this.updateCanonicalUrlElement('https://mempool.space' + location.pathname);
+        this.link.setAttribute('href', 'https://mempool.space' + (location.pathname === '/' ? '' : location.pathname));
       }
     });
   }
-
-  updateCanonicalUrlElement(url: string) {
-    if (!this.link) {
-      this.link = window.document.createElement('link');
-      this.link.setAttribute('rel', 'canonical');
-      window.document.head.appendChild(this.link);
-    }
-    this.link.setAttribute('href', url);
-  }
-
-
 }
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 41471424b..940f38042 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -23,6 +23,8 @@
   <link rel="icon" type="image/png" sizes="16x16" href="/resources/favicons/favicon-16x16.png">
   <link rel="manifest" href="/resources/favicons/site.webmanifest">
   <link rel="shortcut icon" href="/resources/favicons/favicon.ico">
+  <link id="canonical" rel="canonical" href="https://mempool.space">
+
   <meta name="msapplication-TileColor" content="#000000">
   <meta name="msapplication-config" content="/resources/favicons/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">