Move legal pages to React Router

src/components/SEO/SEO.tsx

@@ -5,28 +5,31 @@ interface SEOProps {
   description?: string;
   ogImage?: string;
   keywords?: string;
+  canonical?: string;
 }
 
 export function SEO({ 
   title = 'Rosetta - Secure Messaging for Everyone',
   description = 'End-to-end encrypted messaging app with military-grade security. Download for Windows, Linux, and Android.',
-  ogImage = '/og-image.png',
-  keywords = 'secure messaging, encrypted chat, private messenger'
+  ogImage = '/og.png',
+  keywords = 'secure messaging, encrypted chat, private messenger',
+  canonical = 'https://rosetta.im/'
 }: SEOProps) {
   useEffect(() => {
-    // Update title
     document.title = title;
     
-    // Update meta tags
     updateMetaTag('name', 'description', description);
     updateMetaTag('name', 'keywords', keywords);
     updateMetaTag('property', 'og:title', title);
     updateMetaTag('property', 'og:description', description);
     updateMetaTag('property', 'og:image', ogImage);
+    updateMetaTag('property', 'og:url', canonical);
     updateMetaTag('name', 'twitter:title', title);
     updateMetaTag('name', 'twitter:description', description);
     updateMetaTag('name', 'twitter:image', ogImage);
-  }, [title, description, ogImage, keywords]);
+    updateMetaTag('name', 'twitter:url', canonical);
+    updateCanonical(canonical);
+  }, [title, description, ogImage, keywords, canonical]);
 
   return null;
 }
@@ -42,3 +45,15 @@ function updateMetaTag(attr: string, name: string, content: string) {
   
   element.setAttribute('content', content);
 }
+
+function updateCanonical(href: string) {
+  let element = document.querySelector<HTMLLinkElement>('link[rel="canonical"]');
+
+  if (!element) {
+    element = document.createElement('link');
+    element.rel = 'canonical';
+    document.head.appendChild(element);
+  }
+
+  element.href = href;
+}