feat: Implement dynamic OG images

src/pages/RideDetail.tsx

@@ -53,6 +53,7 @@ import { VersionIndicator } from '@/components/versioning/VersionIndicator';
 import { EntityHistoryTabs } from '@/components/history/EntityHistoryTabs';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 // Extended Ride type with additional properties for easier access
 interface RideWithParkId extends Ride {
@@ -74,6 +75,16 @@ export default function RideDetail() {
   
   // Update document title when ride changes
   useDocumentTitle(ride?.name || 'Ride Details');
+  
+  // Update Open Graph meta tags
+  useOpenGraph({
+    title: ride?.name ? `${ride.name}${ride.park?.name ? ` at ${ride.park.name}` : ''}` : '',
+    description: ride?.description || (ride ? `${ride.name} - A thrilling ride${ride.park?.name ? ` at ${ride.park.name}` : ''}` : ''),
+    imageUrl: ride?.banner_image_url,
+    imageId: ride?.banner_image_id,
+    type: 'website',
+    enabled: !!ride
+  });
 
   useEffect(() => {
     if (parkSlug && rideSlug) {