feat: add comprehensive SEO support with dynamic meta tags

Implement SEO component with multi-language support:
- Create reusable SEO component for meta tag management
- Update HTML lang attribute based on current language
- Add comprehensive SEO translations (EN, DE, HU)
- Include title, description, keywords for all pages
- Add Open Graph and Twitter Card meta tags

Pages updated with SEO:
- Crawler page (web crawler information)
- About page (company information)
- Privacy page (privacy policy)
- Terms page (terms and conditions)

Benefits:
- Better search engine visibility
- Improved social media sharing
- Language-specific meta tags
- Dynamic Open Graph images
- Consistent SEO across all pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/src/components/SEO.tsx

@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  ogTitle?: string;
+  ogDescription?: string;
+  ogImage?: string;
+  ogUrl?: string;
+  ogType?: string;
+}
+
+export const SEO = ({
+  title,
+  description,
+  keywords,
+  ogTitle,
+  ogDescription,
+  ogImage = '/og-image.png',
+  ogUrl,
+  ogType = 'website',
+}: SEOProps) => {
+  const { i18n } = useTranslation();
+
+  useEffect(() => {
+    // Update HTML lang attribute
+    document.documentElement.lang = i18n.language;
+
+    // Update title
+    if (title) {
+      document.title = title;
+    }
+
+    // Update or create meta tags
+    const updateMetaTag = (name: string, content: string, isProperty = false) => {
+      const attribute = isProperty ? 'property' : 'name';
+      let element = document.querySelector(`meta[${attribute}="${name}"]`);
+
+      if (!element) {
+        element = document.createElement('meta');
+        element.setAttribute(attribute, name);
+        document.head.appendChild(element);
+      }
+
+      element.setAttribute('content', content);
+    };
+
+    // Standard meta tags
+    if (description) {
+      updateMetaTag('description', description);
+    }
+    if (keywords) {
+      updateMetaTag('keywords', keywords);
+    }
+
+    // Open Graph meta tags
+    if (ogTitle) {
+      updateMetaTag('og:title', ogTitle, true);
+    }
+    if (ogDescription) {
+      updateMetaTag('og:description', ogDescription, true);
+    }
+    if (ogImage) {
+      updateMetaTag('og:image', ogImage, true);
+    }
+    if (ogUrl) {
+      updateMetaTag('og:url', ogUrl, true);
+    }
+    if (ogType) {
+      updateMetaTag('og:type', ogType, true);
+    }
+
+    // Twitter Card meta tags (using Open Graph data)
+    if (ogTitle) {
+      updateMetaTag('twitter:title', ogTitle);
+      updateMetaTag('twitter:card', 'summary_large_image');
+    }
+    if (ogDescription) {
+      updateMetaTag('twitter:description', ogDescription);
+    }
+    if (ogImage) {
+      updateMetaTag('twitter:image', ogImage);
+    }
+  }, [title, description, keywords, ogTitle, ogDescription, ogImage, ogUrl, ogType, i18n.language]);
+
+  return null;
+};
+
+export default SEO;

shopcall.ai-main/src/i18n/locales/de.json

@@ -720,6 +720,13 @@
   "about": {
     "title": "Über ShopCall.ai",
     "backHome": "Zurück zur Startseite",
+    "seo": {
+      "title": "Über ShopCall.ai - KI-gestützter Kundendienst für E-Commerce",
+      "description": "Erfahren Sie mehr über ShopCall.ais Mission, den E-Commerce-Kundendienst mit KI-Telefonsupport in über 50 Sprachen zu transformieren. Lernen Sie unser Team und unsere Werte kennen.",
+      "keywords": "über ShopCall.ai, KI-Kundenservice-Unternehmen, E-Commerce-Support, KI-Telefonsupport, Unternehmensmission, mehrsprachiges Support-Team",
+      "ogTitle": "Über ShopCall.ai",
+      "ogDescription": "Transformation des Kundenservice für E-Commerce-Unternehmen weltweit mit KI-gestütztem Telefonsupport in über 50 Sprachen."
+    },
     "hero": {
       "description": "Unsere Mission ist es, den Kundenservice für E-Commerce-Unternehmen weltweit zu transformieren. Seit der Gründung im Jahr 2023 hat ShopCall.ai bereits über 1.000 Unternehmen dabei geholfen, ihre Kundenservice-Kosten zu senken und gleichzeitig die Kundenzufriedenheit zu verbessern.",
       "stats": {
@@ -788,6 +795,13 @@
   "privacy": {
     "title": "Datenschutzrichtlinie",
     "backHome": "Zurück zur Startseite",
+    "seo": {
+      "title": "Datenschutzrichtlinie - ShopCall.ai",
+      "description": "Lesen Sie die Datenschutzrichtlinie von ShopCall.ai, um zu verstehen, wie wir Ihre Daten sammeln, verwenden und schützen. DSGVO-konform mit branchenüblichen Verschlüsselungs- und Sicherheitsmaßnahmen.",
+      "keywords": "Datenschutzrichtlinie, Datenschutz, DSGVO-Konformität, Datensicherheit, ShopCall.ai Datenschutz, Benutzerdaten, Verschlüsselung",
+      "ogTitle": "ShopCall.ai Datenschutzrichtlinie",
+      "ogDescription": "Erfahren Sie, wie ShopCall.ai Ihre Privatsphäre schützt und Ihre Daten mit branchenüblichen Sicherheitsmaßnahmen und DSGVO-Konformität behandelt."
+    },
     "lastUpdated": "Zuletzt aktualisiert: 11. Dezember 2024",
     "principles": {
       "dataProtection": {
@@ -871,6 +885,13 @@
   "terms": {
     "title": "Allgemeine Geschäftsbedingungen",
     "backHome": "Zurück zur Startseite",
+    "seo": {
+      "title": "Allgemeine Geschäftsbedingungen - ShopCall.ai",
+      "description": "Lesen Sie die Allgemeinen Geschäftsbedingungen von ShopCall.ai. Verstehen Sie Ihre Rechte, Pflichten und unsere Servicevereinbarung für KI-gestützten Kundensupport.",
+      "keywords": "Allgemeine Geschäftsbedingungen, Servicevereinbarung, Nutzungsbedingungen, ShopCall.ai AGB, Benutzervereinbarung, rechtliche Bedingungen",
+      "ogTitle": "ShopCall.ai Allgemeine Geschäftsbedingungen",
+      "ogDescription": "Überprüfen Sie die Allgemeinen Geschäftsbedingungen für die Nutzung der KI-gestützten Kundenservice-Plattform von ShopCall.ai."
+    },
     "lastUpdated": "Zuletzt aktualisiert: 12. Dezember 2024",
     "overview": {
       "acceptance": {
@@ -1228,6 +1249,13 @@
   "crawler": {
     "title": "ShopCall.ai Web-Crawler",
     "backHome": "Zurück zur Startseite",
+    "seo": {
+      "title": "ShopCall.ai Web-Crawler - So crawlen wir E-Commerce-Seiten",
+      "description": "Erfahren Sie mehr über den ShopCall.ai Web-Crawler: Wie wir robots.txt respektieren, nur registrierte Shops crawlen und sitemap.xml nutzen, um KI-Wissensdatenbanken für besseren Kundensupport aufzubauen.",
+      "keywords": "Web-Crawler, ShopCall.ai Crawler, robots.txt, sitemap.xml, E-Commerce-Crawler, KI-Web-Scraper, respektvolles Crawling, User Agent, Webshop-Crawler",
+      "ogTitle": "ShopCall.ai Web-Crawler Informationen",
+      "ogDescription": "Transparente Informationen darüber, wie ShopCall.ai E-Commerce-Websites crawlt, um den KI-Kundensupport zu verbessern. Volle Benutzerkontrolle, robots.txt-Konformität und gezielte Inhaltserkennung."
+    },
     "hero": {
       "description": "Unser Web-Crawler wurde entwickelt, um Ihren E-Commerce-Shop besser zu verstehen und unserer KI zu helfen, genaueren und persönlicheren Kundensupport zu bieten. Erfahren Sie, wie wir crawlen, was wir sammeln und wie Sie die volle Kontrolle behalten."
     },

shopcall.ai-main/src/i18n/locales/en.json

@@ -809,6 +809,13 @@
   "about": {
     "title": "About ShopCall.ai",
     "backHome": "Back to Home",
+    "seo": {
+      "title": "About ShopCall.ai - AI-Powered Customer Service for E-commerce",
+      "description": "Learn about ShopCall.ai's mission to transform e-commerce customer service with AI phone support in 50+ languages. Meet our team and discover our values.",
+      "keywords": "about ShopCall.ai, AI customer service company, e-commerce support, AI phone support, company mission, multilingual support team",
+      "ogTitle": "About ShopCall.ai",
+      "ogDescription": "Transforming customer service for e-commerce businesses worldwide with AI-powered phone support in 50+ languages."
+    },
     "hero": {
       "description": "We're on a mission to transform customer service for e-commerce businesses worldwide. Founded in 2023, ShopCall.ai has already helped over 1,000 businesses reduce their customer service costs while improving customer satisfaction.",
       "stats": {
@@ -877,6 +884,13 @@
   "privacy": {
     "title": "Privacy Policy",
     "backHome": "Back to Home",
+    "seo": {
+      "title": "Privacy Policy - ShopCall.ai",
+      "description": "Read ShopCall.ai's privacy policy to understand how we collect, use, and protect your data. GDPR compliant with industry-standard encryption and security measures.",
+      "keywords": "privacy policy, data protection, GDPR compliance, data security, ShopCall.ai privacy, user data, encryption",
+      "ogTitle": "ShopCall.ai Privacy Policy",
+      "ogDescription": "Learn how ShopCall.ai protects your privacy and handles your data with industry-standard security measures and GDPR compliance."
+    },
     "lastUpdated": "Last updated: December 11, 2024",
     "principles": {
       "dataProtection": {
@@ -960,6 +974,13 @@
   "terms": {
     "title": "Terms and Conditions",
     "backHome": "Back to Home",
+    "seo": {
+      "title": "Terms and Conditions - ShopCall.ai",
+      "description": "Read ShopCall.ai's terms and conditions. Understand your rights, responsibilities, and our service agreement for AI-powered customer support.",
+      "keywords": "terms and conditions, service agreement, terms of service, ShopCall.ai terms, user agreement, legal terms",
+      "ogTitle": "ShopCall.ai Terms and Conditions",
+      "ogDescription": "Review the terms and conditions for using ShopCall.ai's AI-powered customer service platform."
+    },
     "lastUpdated": "Last updated: December 12, 2024",
     "overview": {
       "acceptance": {
@@ -1384,6 +1405,13 @@
   "crawler": {
     "title": "ShopCall.ai Web Crawler",
     "backHome": "Back to Home",
+    "seo": {
+      "title": "ShopCall.ai Web Crawler - How We Crawl E-commerce Sites",
+      "description": "Learn about ShopCall.ai's web crawler: how we respect robots.txt, crawl registered stores only, and use sitemap.xml to build AI knowledge bases for better customer support.",
+      "keywords": "web crawler, ShopCall.ai crawler, robots.txt, sitemap.xml, e-commerce crawler, AI web scraper, respectful crawling, user agent, webshop crawler",
+      "ogTitle": "ShopCall.ai Web Crawler Information",
+      "ogDescription": "Transparent information about how ShopCall.ai crawls e-commerce websites to improve AI customer support. Full user control, robots.txt compliance, and targeted content discovery."
+    },
     "hero": {
       "description": "Our web crawler is designed to understand your e-commerce store better, helping our AI provide more accurate and personalized customer support. Learn how we crawl, what we collect, and how you maintain full control."
     },

shopcall.ai-main/src/i18n/locales/hu.json

@@ -799,6 +799,13 @@
   "about": {
     "title": "A ShopCall.ai-ról",
     "backHome": "Vissza a főoldalra",
+    "seo": {
+      "title": "A ShopCall.ai-ról - AI-alapú Ügyfélszolgálat E-kereskedelemhez",
+      "description": "Tudjon meg többet a ShopCall.ai küldetéséről, hogy átalakítsa az e-kereskedelmi ügyfélszolgálatot AI telefon támogatással több mint 50 nyelven. Ismerje meg csapatunkat és értékeinket.",
+      "keywords": "ShopCall.ai-ról, AI ügyfélszolgálati cég, e-kereskedelmi támogatás, AI telefon támogatás, vállalati küldetés, többnyelvű támogatási csapat",
+      "ogTitle": "A ShopCall.ai-ról",
+      "ogDescription": "Az ügyfélszolgálat átalakítása e-kereskedelmi vállalkozások számára világszerte AI-alapú telefon támogatással több mint 50 nyelven."
+    },
     "hero": {
       "description": "Küldetésünk az ügyfélszolgálat átformálása az e-kereskedelmi vállalkozások számára világszerte. A 2023-ban alapított ShopCall.ai már több mint 1000 vállalkozásnak segített csökkenteni ügyfélszolgálati költségeit, miközben javította az ügyfélelégedettséget.",
       "stats": {
@@ -867,6 +874,13 @@
   "privacy": {
     "title": "Adatvédelmi irányelvek",
     "backHome": "Vissza a főoldalra",
+    "seo": {
+      "title": "Adatvédelmi Irányelvek - ShopCall.ai",
+      "description": "Olvassa el a ShopCall.ai adatvédelmi irányelveit, hogy megértse, hogyan gyűjtjük, használjuk és védjük adatait. GDPR-kompatibilis ipari szabványú titkosítással és biztonsági intézkedésekkel.",
+      "keywords": "adatvédelmi irányelvek, adatvédelem, GDPR megfelelés, adatbiztonság, ShopCall.ai adatvédelem, felhasználói adatok, titkosítás",
+      "ogTitle": "ShopCall.ai Adatvédelmi Irányelvek",
+      "ogDescription": "Tudja meg, hogyan védi a ShopCall.ai az Ön adatait ipari szabványú biztonsági intézkedésekkel és GDPR megfeleléssel."
+    },
     "lastUpdated": "Utolsó frissítés: 2024. december 11.",
     "principles": {
       "dataProtection": {
@@ -950,6 +964,13 @@
   "terms": {
     "title": "Felhasználási feltételek",
     "backHome": "Vissza a főoldalra",
+    "seo": {
+      "title": "Felhasználási Feltételek - ShopCall.ai",
+      "description": "Olvassa el a ShopCall.ai felhasználási feltételeit. Értse meg jogait, felelősségeit és szolgáltatási megállapodásunkat az AI-alapú ügyfélszolgálathoz.",
+      "keywords": "felhasználási feltételek, szolgáltatási megállapodás, használati feltételek, ShopCall.ai feltételek, felhasználói megállapodás, jogi feltételek",
+      "ogTitle": "ShopCall.ai Felhasználási Feltételek",
+      "ogDescription": "Tekintse át a ShopCall.ai AI-alapú ügyfélszolgálati platformjának használatára vonatkozó feltételeket."
+    },
     "lastUpdated": "Utolsó frissítés: 2024. december 12.",
     "overview": {
       "acceptance": {
@@ -1374,6 +1395,13 @@
   "crawler": {
     "title": "ShopCall.ai Web Crawler",
     "backHome": "Vissza a Főoldalra",
+    "seo": {
+      "title": "ShopCall.ai Web Crawler - Hogyan Crawloljuk az E-kereskedelmi Oldalakat",
+      "description": "Tudjon meg többet a ShopCall.ai web crawlerről: hogyan tiszteljük a robots.txt-et, csak regisztrált boltokat crawlolunk, és a sitemap.xml-t használjuk AI tudásbázisok építéséhez a jobb ügyfélszolgálat érdekében.",
+      "keywords": "web crawler, ShopCall.ai crawler, robots.txt, sitemap.xml, e-kereskedelmi crawler, AI web scraper, tiszteletteljes crawling, user agent, webshop crawler",
+      "ogTitle": "ShopCall.ai Web Crawler Információk",
+      "ogDescription": "Átlátható információk arról, hogyan crawlolja a ShopCall.ai az e-kereskedelmi weboldalakat az AI ügyfélszolgálat javítása érdekében. Teljes felhasználói kontroll, robots.txt megfelelés és célzott tartalom felfedezés."
+    },
     "hero": {
       "description": "Webes crawlerünk arra lett tervezve, hogy jobban megértse e-kereskedelmi áruházát, segítve AI-nkat pontosabb és személyre szabottabb ügyfélszolgálat nyújtásában. Tudja meg, hogyan gyűjtünk adatokat, mit gyűjtünk, és hogyan tartja meg a teljes irányítást."
     },

shopcall.ai-main/src/pages/About.tsx

@@ -3,10 +3,14 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Users, Target, Award, Globe, Zap, Shield } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import SEO from "@/components/SEO";
 
 const About = () => {
   const { t } = useTranslation();
 
+  // Get the current URL for Open Graph
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : 'https://shopcall.ai/about';
+
   const values = [
     {
       icon: Target,
@@ -59,6 +63,15 @@ const About = () => {
 
   return (
     <div className="min-h-screen bg-slate-900 text-white">
+      <SEO
+        title={t('about.seo.title')}
+        description={t('about.seo.description')}
+        keywords={t('about.seo.keywords')}
+        ogTitle={t('about.seo.ogTitle')}
+        ogDescription={t('about.seo.ogDescription')}
+        ogUrl={currentUrl}
+        ogType="website"
+      />
       {/* Header */}
       <header className="border-b border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

shopcall.ai-main/src/pages/Crawler.tsx

@@ -2,10 +2,14 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Bot, Globe, Shield, FileSearch, Lock, Settings } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import SEO from "@/components/SEO";
 
 const Crawler = () => {
   const { t } = useTranslation();
 
+  // Get the current URL for Open Graph
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : 'https://shopcall.ai/crawler';
+
   const features = [
     {
       icon: Shield,
@@ -31,6 +35,15 @@ const Crawler = () => {
 
   return (
     <div className="min-h-screen bg-slate-900 text-white">
+      <SEO
+        title={t('crawler.seo.title')}
+        description={t('crawler.seo.description')}
+        keywords={t('crawler.seo.keywords')}
+        ogTitle={t('crawler.seo.ogTitle')}
+        ogDescription={t('crawler.seo.ogDescription')}
+        ogUrl={currentUrl}
+        ogType="website"
+      />
       {/* Header */}
       <header className="border-b border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

shopcall.ai-main/src/pages/Privacy.tsx

@@ -3,10 +3,14 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Shield, Lock, Eye, Database, UserCheck, Globe } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import SEO from "@/components/SEO";
 
 const Privacy = () => {
   const { t } = useTranslation();
 
+  // Get the current URL for Open Graph
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : 'https://shopcall.ai/privacy';
+
   const privacyPrinciples = [
     {
       icon: Shield,
@@ -32,6 +36,15 @@ const Privacy = () => {
 
   return (
     <div className="min-h-screen bg-slate-900 text-white">
+      <SEO
+        title={t('privacy.seo.title')}
+        description={t('privacy.seo.description')}
+        keywords={t('privacy.seo.keywords')}
+        ogTitle={t('privacy.seo.ogTitle')}
+        ogDescription={t('privacy.seo.ogDescription')}
+        ogUrl={currentUrl}
+        ogType="website"
+      />
       {/* Header */}
       <header className="border-b border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

shopcall.ai-main/src/pages/Terms.tsx

@@ -3,10 +3,14 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { ScrollText, Shield, AlertTriangle, Scale } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import SEO from "@/components/SEO";
 
 const Terms = () => {
   const { t } = useTranslation();
 
+  // Get the current URL for Open Graph
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : 'https://shopcall.ai/terms';
+
   const sections = [
     {
       icon: ScrollText,
@@ -32,6 +36,15 @@ const Terms = () => {
 
   return (
     <div className="min-h-screen bg-slate-900 text-white">
+      <SEO
+        title={t('terms.seo.title')}
+        description={t('terms.seo.description')}
+        keywords={t('terms.seo.keywords')}
+        ogTitle={t('terms.seo.ogTitle')}
+        ogDescription={t('terms.seo.ogDescription')}
+        ogUrl={currentUrl}
+        ogType="website"
+      />
       {/* Header */}
       <header className="border-b border-slate-800">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">