diff --git a/web/cloudflare/handler/contribution.ts b/web/cloudflare/handler/contribution.ts
index f9963ac0f..d07b975bd 100644
--- a/web/cloudflare/handler/contribution.ts
+++ b/web/cloudflare/handler/contribution.ts
@@ -56,7 +56,8 @@ export const handleContributionRequest: PagesFunction<Env> = async (context) =>
     const newData = htmlTemplate
       .replace(/{{template-title}}/g, pageTitle)
       .replace(/{{template-description}}/g, localize("contribute-description"))
-      .replace(/{{template-lang}}/g, language);
+      .replace(/{{template-lang}}/g, language)
+      .replace(/{{template-canonical}}/g, `${fullstackConfig.web.url}${pathName}`);
 
     return new Response(newData, { headers: { "content-type": "text/html; charset=utf-8" } });
   } catch (error) {
diff --git a/web/cloudflare/handler/contributor.ts b/web/cloudflare/handler/contributor.ts
index 3bdbe700d..0c1d69557 100644
--- a/web/cloudflare/handler/contributor.ts
+++ b/web/cloudflare/handler/contributor.ts
@@ -55,7 +55,8 @@ export const handleContributorRequest: PagesFunction<Env> = async (context) => {
     const newData = htmlTemplate
       .replace(/{{template-title}}/g, pageTitle)
       .replace(/{{template-description}}/g, localize("team-description"))
-      .replace(/{{template-lang}}/g, language);
+      .replace(/{{template-lang}}/g, language)
+      .replace(/{{template-canonical}}/g, `${fullstackConfig.web.url}${pathName}`);
 
     return new Response(newData, { headers: { "content-type": "text/html; charset=utf-8" } });
   } catch (error) {
diff --git a/web/cloudflare/handler/project.ts b/web/cloudflare/handler/project.ts
index b0c73d5a9..64cd8d729 100644
--- a/web/cloudflare/handler/project.ts
+++ b/web/cloudflare/handler/project.ts
@@ -53,7 +53,8 @@ export const handleProjectRequest: PagesFunction<Env> = async (context) => {
     const newData = htmlTemplate
       .replace(/{{template-title}}/g, pageTitle)
       .replace(/{{template-description}}/g, localize("projects-description"))
-      .replace(/{{template-lang}}/g, language);
+      .replace(/{{template-lang}}/g, language)
+      .replace(/{{template-canonical}}/g, `${fullstackConfig.web.url}${pathName}`);
 
     return new Response(newData, { headers: { "content-type": "text/html; charset=utf-8" } });
   } catch (error) {
diff --git a/web/src/_build/gen-multiple-htmls.ts b/web/src/_build/gen-multiple-htmls.ts
index 57c2c2b3a..2d1cc073b 100644
--- a/web/src/_build/gen-multiple-htmls.ts
+++ b/web/src/_build/gen-multiple-htmls.ts
@@ -7,6 +7,7 @@ import { readFileSync, writeFileSync, mkdirSync } from "fs";
 import { allPages } from "./pages";
 import { Environment, environments } from "@dzcode.io/utils/dist/config/environment";
 import { SENTRY_ORIGIN } from "../../src/utils/sentry-origin";
+import { fsConfig } from "@dzcode.io/utils/dist/config";
 
 let stage = process.env.STAGE as Environment;
 if (!environments.includes(stage)) {
@@ -14,6 +15,7 @@ if (!environments.includes(stage)) {
   stage = "development";
 }
 
+const config = fsConfig(stage);
 const distFolder = "./bundle";
 
 const indexHtmlPath = join(distFolder, "index.html");
@@ -56,6 +58,10 @@ allPages.forEach((pageInfo) => {
   newHtml = newHtml.replace(/{{keywords}}/g, pageInfo.keywords);
   newHtml = newHtml.replace(/{{title}}/g, pageInfo.title);
   newHtml = newHtml.replace(/{{description}}/g, pageInfo.description);
+  newHtml = newHtml.replace(
+    /{{canonical}}/g,
+    pageInfo.canonicalUrl || `${config.web.url}${pageInfo.uri}`,
+  );
   newHtml = newHtml.replace(/{{ogImage}}/g, pageInfo.ogImage);
   newHtml = newHtml.replace(/{{sentryOrigin}}/g, `https://${SENTRY_ORIGIN}`);
 
diff --git a/web/src/_build/pages/index.ts b/web/src/_build/pages/index.ts
index f225046d5..8e7e052e9 100644
--- a/web/src/_build/pages/index.ts
+++ b/web/src/_build/pages/index.ts
@@ -6,6 +6,7 @@ import { templatePages } from "./template-pages";
 
 export interface PageInfo {
   uri: string;
+  canonicalUrl?: string;
   title: string;
   description: string;
   ogImage: string;
diff --git a/web/src/_build/pages/template-pages.ts b/web/src/_build/pages/template-pages.ts
index f31694c97..e2348ad09 100644
--- a/web/src/_build/pages/template-pages.ts
+++ b/web/src/_build/pages/template-pages.ts
@@ -9,5 +9,6 @@ export const templatePages: PageInfo[] = [
       "https://images.unsplash.com/photo-1527285341945-715b98b98ea2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&h=627&q=80",
     keywords: "open-source, algeria, dzcode",
     lang: "{{template-lang}}" as unknown as PageInfo["lang"],
+    canonicalUrl: "{{template-canonical}}",
   },
 ];
diff --git a/web/src/_entry/index.html b/web/src/_entry/index.html
index a4c10ce99..68ec0c68d 100644
--- a/web/src/_entry/index.html
+++ b/web/src/_entry/index.html
@@ -16,6 +16,9 @@
     <title>{{title}}</title>
     <meta name="description" content="{{description}}" />
 
+    <!-- SEO -->
+    <link rel="canonical" href="{{canonical}}" />
+
     <!-- Facebook Meta Tags -->
     <meta property="og:type" content="website" />
     <meta property="og:title" content="{{title}}" />
diff --git a/web/src/pages/contribute/contribution/index.tsx b/web/src/pages/contribute/contribution/index.tsx
index 1d2d19e38..8642ef25a 100644
--- a/web/src/pages/contribute/contribution/index.tsx
+++ b/web/src/pages/contribute/contribution/index.tsx
@@ -41,7 +41,6 @@ export default function Page(): JSX.Element {
             {localize("contribution-title-post")}
           </title>
           <meta name="description" content={localize("contribute-description")} />
-          {/* @TODO-ZM: add canonical url on all pages */}
           <link rel="canonical" href={getContributionURL(contribution)} />
         </Helmet>
       ) : null}
diff --git a/web/src/pages/contribute/index.tsx b/web/src/pages/contribute/index.tsx
index 06c17a2a6..b09d115b8 100644
--- a/web/src/pages/contribute/index.tsx
+++ b/web/src/pages/contribute/index.tsx
@@ -18,7 +18,6 @@ export default function Page(): JSX.Element {
     dispatch(fetchContributionsListAction());
   }, [dispatch]);
 
-  // @TODO-ZM: add filters and search
   return (
     <main className="flex flex-col self-center">
       <Helmet>
diff --git a/web/src/pages/projects/project/index.tsx b/web/src/pages/projects/project/index.tsx
index 298e6cb52..cf82cc8f6 100644
--- a/web/src/pages/projects/project/index.tsx
+++ b/web/src/pages/projects/project/index.tsx
@@ -49,7 +49,6 @@ export default function Page(): JSX.Element {
             {localize("project-title-pre")} {project.name} {localize("project-title-post")}
           </title>
           <meta name="description" content={localize("projects-description")} />
-          {/* @TODO-ZM: add canonical url on all pages */}
           <link rel="canonical" href={getProjectURL(project)} />
         </Helmet>
       ) : null}
diff --git a/web/src/utils/contribution.ts b/web/src/utils/contribution.ts
index 41e728da8..390c4b44a 100644
--- a/web/src/utils/contribution.ts
+++ b/web/src/utils/contribution.ts
@@ -4,6 +4,5 @@ export function getContributionURL({
   id,
   title,
 }: Pick<ContributionEntity, "id" | "title">): string {
-  // @TODO-ZM: use slug instead
   return `/contribute/${title.replace(/\s/g, "-")}-${id}`;
 }