fix canonical tags

Author: agent

index.html

@@ -13,7 +13,7 @@
     <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
     <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
     <meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
-    <link rel="canonical" href="https://snapforest.in" />
+    <!-- Canonical tag is dynamically set per page via React -->
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />

src/App.tsx

@@ -39,6 +39,7 @@ import RoastBattle from './pages/play/RoastBattle'
 import CustomCursor from './components/CustomCursor'
 import KonamiEasterEgg from './components/KonamiEasterEgg'
 import PWAInstallPrompt from './components/PWAInstallPrompt'
+import CanonicalTag from './components/CanonicalTag'
 
 function PageWrapper({ children }: { children: React.ReactNode }) {
   const location = useLocation()
@@ -60,6 +61,7 @@ function PageWrapper({ children }: { children: React.ReactNode }) {
 export default function App() {
   return (
     <>
+      <CanonicalTag />
       <CustomCursor />
       <KonamiEasterEgg />
       <Routes>

src/components/CanonicalTag.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router'
+
+export default function CanonicalTag() {
+  const location = useLocation()
+
+  useEffect(() => {
+    const canonicalUrl = `https://www.snapforest.in${location.pathname}`
+
+    let link = document.querySelector('link[rel="canonical"]') as HTMLLinkElement | null
+
+    if (!link) {
+      link = document.createElement('link')
+      link.rel = 'canonical'
+      document.head.appendChild(link)
+    }
+
+    link.href = canonicalUrl
+  }, [location.pathname])
+
+  return null
+}