Refactor code to address issues

src/pages/ManufacturerModels.tsx

@@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 interface RideModelWithCount extends RideModel {
   ride_count: number;
@@ -101,6 +102,17 @@ export default function ManufacturerModels() {
     model.description?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useOpenGraph({
+    title: manufacturer ? `${manufacturer.name} - Ride Models` : 'Manufacturer Models',
+    description: manufacturer 
+      ? `Browse ${filteredModels.length} ride models by ${manufacturer.name}` 
+      : undefined,
+    imageUrl: manufacturer?.banner_image_url || filteredModels[0]?.banner_image_url,
+    imageId: manufacturer?.banner_image_id || filteredModels[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!manufacturer && !loading
+  });
+
   const handleCreateSubmit = async (data: any) => {
     try {
       if (!manufacturer) {