Merge pull request #387 from probablyABug/feat/seo-meta-tags

feat: add dynamic SEO and OpenGraph meta tags #188

Author: Otaiki1

client/index.html

@@ -7,10 +7,13 @@
     <link rel="apple-touch-icon" href="/vite.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#ffffff" />
-    <title>Tikka App</title>
-    <meta name="description" content="Tikka Application" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <title>Tikka | Decentralized Raffles on Stellar</title>
+    <meta name="description" content="Transparent, secure, and provably fair raffles powered by Soroban smart contracts on the Stellar network." />
+    <meta property="og:title" content="Tikka | Decentralized Raffles on Stellar" />
+    <meta property="og:description" content="Transparent, secure, and provably fair raffles powered by Soroban smart contracts." />
+    <meta property="og:image" content="/og-image.png" />
+    <meta property="og:type" content="website" />
+    <meta name="twitter:card" content="summary_large_image" />
     <script>
         // Apply dark class immediately to avoid flash of wrong theme
         document.documentElement.classList.toggle(

client/package.json

@@ -28,6 +28,7 @@
         "lucide-react": "^0.544.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-helmet-async": "^3.0.0",
         "react-i18next": "^17.0.4",
         "react-router-dom": "^7.13.2",
         "recharts": "^3.8.1",

client/src/main.tsx

@@ -8,13 +8,16 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import ErrorBoundary from './components/ui/ErrorBoundary.tsx'
+import { HelmetProvider } from 'react-helmet-async'
 import './i18n'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ErrorBoundary>
-      <App />
-    </ErrorBoundary>
+    <HelmetProvider>
+      <ErrorBoundary>
+        <App />
+      </ErrorBoundary>
+    </HelmetProvider>
   </StrictMode>,
 )
 

client/src/pages/RafflePage.tsx

@@ -25,6 +25,7 @@ import AddToCalendar from "../components/ui/AddToCalendar";
 import Line from "../assets/svg/Line";
 import detailimage from "../assets/detailimage.png";
 import { Breadcrumbs } from "../components/ui/Breadcrumbs";
+import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 
 const Skeleton = ({ className }: { className?: string }) => (
@@ -109,6 +110,19 @@ const RafflePage = () => {
 
     return (
         <div className="w-full mx-auto max-w-7xl px-6 md:px-12 lg:px-16 py-8 flex flex-col space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
+            <Helmet>
+                <title>{title} | Tikka Raffles</title>
+                <meta name="description" content={description || "Join this raffle on Tikka!"} />
+                <meta property="og:title" content={title} />
+                <meta property="og:description" content={description || "Join this raffle on Tikka!"} />
+                <meta property="og:image" content={image || detailimage} />
+                <meta property="og:url" content={window.location.href} />
+                <meta property="og:type" content="website" />
+                <meta name="twitter:card" content="summary_large_image" />
+                <meta name="twitter:title" content={title} />
+                <meta name="twitter:description" content={description || "Join this raffle on Tikka!"} />
+                <meta name="twitter:image" content={image || detailimage} />
+            </Helmet>
             <Breadcrumbs
                 items={[
                     { label: t("navbar.discover"), href: "/home" },