Refactor: Improve Open Graph meta tags

index.html

@@ -9,26 +9,34 @@
     <meta name="theme-color" content="#6366f1" />
     
     <!-- Favicon -->
-    <link rel="icon" type="image/png" sizes="256x256" href="/favicon.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon16">
-    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon32">
-    <link rel="apple-touch-icon" href="/favicon.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon48">
+    <link rel="icon" type="image/png" sizes="64x64" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon64">
+    <link rel="icon" type="image/png" sizes="128x128" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon128">
+    <link rel="icon" type="image/png" sizes="256x256" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon256">
+    <link rel="icon" type="image/png" sizes="512x512" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon512">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon180">
+    <link rel="apple-touch-icon" sizes="192x192" href="https://cdn.thrillwiki.com/images/5d06b122-a3a3-47bc-6176-f93ad8f0ce00/favicon192">
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="ThrillWiki" />
     <meta property="og:title" content="ThrillWiki - Theme Park & Roller Coaster Database" />
     <meta property="og:description" content="Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts" />
-    <meta property="og:image" content="/og-image.png" />
+    <meta property="og:image" content="https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
     <meta property="og:image:alt" content="ThrillWiki - Theme Park & Roller Coaster Database" />
+    <meta property="og:url" content="https://www.thrillwiki.com/" />
 
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="ThrillWiki - Theme Park & Roller Coaster Database" />
     <meta name="twitter:description" content="Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts" />
-    <meta name="twitter:image" content="/og-image.png" />
+    <meta name="twitter:image" content="https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original" />
     <meta name="twitter:image:alt" content="ThrillWiki - Theme Park & Roller Coaster Database" />
+    <meta name="twitter:url" content="https://www.thrillwiki.com/" />
     
     <!-- Google Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com">

src/hooks/useOpenGraph.ts

@@ -26,11 +26,11 @@ export function useOpenGraph({
     if (!enabled || !title) return;
 
     // Determine the image to use
-    let finalImageUrl = '/og-image.png';
+    let finalImageUrl = 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original';
     
     if (imageId) {
       const bannerUrls = getBannerUrls(imageId);
-      finalImageUrl = bannerUrls.desktop || imageUrl || '/og-image.png';
+      finalImageUrl = bannerUrls.desktop || imageUrl || 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original';
     } else if (imageUrl) {
       finalImageUrl = imageUrl;
     }
@@ -40,6 +40,9 @@ export function useOpenGraph({
       finalImageUrl = window.location.origin + finalImageUrl;
     }
 
+    // Update document title
+    document.title = title.includes('ThrillWiki') ? title : `${title} | ThrillWiki`;
+
     // Update or create meta tags
     updateMetaTag('og:title', title);
     updateMetaTag('og:description', description || 'Explore theme parks and roller coasters worldwide with ThrillWiki');
@@ -51,16 +54,20 @@ export function useOpenGraph({
     updateMetaTag('twitter:title', title, 'name');
     updateMetaTag('twitter:description', description || 'Explore theme parks and roller coasters worldwide with ThrillWiki', 'name');
     updateMetaTag('twitter:image', finalImageUrl, 'name');
+    updateMetaTag('twitter:url', currentUrl, 'name');
 
     return () => {
+      document.title = 'ThrillWiki - Theme Park & Roller Coaster Database';
       updateMetaTag('og:title', 'ThrillWiki - Theme Park & Roller Coaster Database');
       updateMetaTag('og:description', 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts');
-      updateMetaTag('og:image', window.location.origin + '/og-image.png');
+      updateMetaTag('og:image', 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original');
       updateMetaTag('og:type', 'website');
+      updateMetaTag('og:url', 'https://www.thrillwiki.com/');
       
       updateMetaTag('twitter:title', 'ThrillWiki - Theme Park & Roller Coaster Database', 'name');
       updateMetaTag('twitter:description', 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts', 'name');
-      updateMetaTag('twitter:image', window.location.origin + '/og-image.png', 'name');
+      updateMetaTag('twitter:image', 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original', 'name');
+      updateMetaTag('twitter:url', 'https://www.thrillwiki.com/', 'name');
     };
   }, [title, description, imageUrl, imageId, type, currentUrl, enabled]);
 }

vercel.json

@@ -0,0 +1,36 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        {
+          "key": "X-Content-Type-Options",
+          "value": "nosniff"
+        },
+        {
+          "key": "X-Frame-Options",
+          "value": "DENY"
+        },
+        {
+          "key": "X-XSS-Protection",
+          "value": "1; mode=block"
+        }
+      ]
+    },
+    {
+      "source": "/(.*)\\.(js|css|jpg|jpeg|png|gif|svg|ico|woff|woff2|ttf|eot|webp)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    }
+  ]
+}