diff --git a/1.hello-world/1.hello-world.html b/1.hello-world/1.hello-world.html
index a48818a4..7bdc3e1b 100644
--- a/1.hello-world/1.hello-world.html
+++ b/1.hello-world/1.hello-world.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="description" content="Quickly read barcodes with Dynamsoft Barcode Reader from a live camera stream.">
     <meta name="keywords" content="camera based barcode reading">
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/1.hello-world.html">
     <title>Dynamsoft Barcode Reader Sample - Hello World (Decoding via Camera)</title>
 </head>
 
diff --git a/1.hello-world/10.read-video-pwa/helloworld-pwa.html b/1.hello-world/10.read-video-pwa/helloworld-pwa.html
index a5b1f740..9c71f8f5 100644
--- a/1.hello-world/10.read-video-pwa/helloworld-pwa.html
+++ b/1.hello-world/10.read-video-pwa/helloworld-pwa.html
@@ -7,6 +7,7 @@
     <meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader in a PWA application.">
     <meta name="keywords" content="read barcode from camera in PWA">
     <title>Dynamsoft Barcode Reader PWA Sample - Hello World (Decoding via Camera)</title>
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/10.read-video-pwa/helloworld-pwa.html">
     <link rel="manifest" href="./helloworld-pwa.json">
 </head>
 
diff --git a/1.hello-world/3.read-video-angular/src/index.html b/1.hello-world/3.read-video-angular/src/index.html
index 5c992256..1669c369 100644
--- a/1.hello-world/3.read-video-angular/src/index.html
+++ b/1.hello-world/3.read-video-angular/src/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="Dynamsoft Barcode Reader in an Angular Application, this online demo lets you scan barcodes using a camera.">
     <meta name="keywords" content="read barcodes from camera in Angular">
+    <link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/1.hello-world/3.read-video-angular/dist/hello-world/">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
diff --git a/1.hello-world/4.read-video-react/public/index.html b/1.hello-world/4.read-video-react/public/index.html
index 32c8cecc..8ab35107 100644
--- a/1.hello-world/4.read-video-react/public/index.html
+++ b/1.hello-world/4.read-video-react/public/index.html
@@ -9,6 +9,7 @@
     <meta name="description" content="Web site created using create-react-app" />
     <meta name="description" content="Read barcode with Dynamsoft Barcode Reader in a React Application.">
     <meta name="keywords" content="read barcode from camera in React">
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/4.read-video-react/build/">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -42,4 +43,4 @@
     -->
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/1.hello-world/6.read-video-vue3/public/index.html b/1.hello-world/6.read-video-vue3/public/index.html
index 362a2f48..b5ee1f68 100644
--- a/1.hello-world/6.read-video-vue3/public/index.html
+++ b/1.hello-world/6.read-video-vue3/public/index.html
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="description" content="Read barcodes from camera with Dynamsoft Barcode Reader in a Vue3 Application.">
     <meta name="keywords" content="read barcode from camera in Vue3">
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/1.hello-world/6.read-video-vue3/dist/">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>
         <%= htmlWebpackPlugin.options.title %>
@@ -21,4 +22,4 @@
     <!-- built files will be auto injected -->
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/4.use-case/1.fill-a-form-with-barcode-reading.html b/4.use-case/1.fill-a-form-with-barcode-reading.html
index fe5308d6..b5b60527 100644
--- a/4.use-case/1.fill-a-form-with-barcode-reading.html
+++ b/4.use-case/1.fill-a-form-with-barcode-reading.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="description" content="Read barcodes and fill form fields using barcode with Barcode Reader. Get quick and accurate results in no time.">
     <meta name="keywords" content="fill form fields using barcodes">
+    <link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/4.use-case/1.fill-a-form-with-barcode-reading.html">
     <title>Dynamsoft Barcode Reader Simple Sample - Read Video - Fill Form</title>
     <!--
       This sample makes use of the library hosted by the CDN jsDelivr. If you would rather use the
diff --git a/4.use-case/2.read-a-drivers-license.html b/4.use-case/2.read-a-drivers-license.html
index 6ed4fca5..959067bc 100644
--- a/4.use-case/2.read-a-drivers-license.html
+++ b/4.use-case/2.read-a-drivers-license.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="description" content="Read the PDF417 barcode on Driver's Licenses instantly with this barcode reader.">
     <meta name="keywords" content="read driver's license barcode">
+    <link rel="canonical" href="https://demo.dynamsoft.com/samples/dbr/js/4.use-case/2.read-a-drivers-license.html">
     <title>Dynamsoft Barcode Reader Simple Sample - Read Driver License</title>
 </head>
 
@@ -505,4 +506,4 @@ <h1 id='header'>Read A Driver's License <a href="javascript:void(0)" id='readAga
     }
 </style>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index fbdca4ad..8da8f86a 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="canonical" href="https://demo.dynamsoft.com/Samples/DBR/JS/index.html">
     <link rel="stylesheet" href="balloon.min.css">
     <!-- Used for tooltip styling -->
     <title>Dynamsoft Barcode Reader Samples</title>
@@ -372,4 +373,4 @@ <h3>Barcode Reader Samples</h3>
     }
 </script>
 
-</html>
\ No newline at end of file
+</html>