Refactor code to address issues

src/pages/Profile.tsx

@@ -31,6 +31,7 @@ import { UserBlockButton } from '@/components/profile/UserBlockButton';
 import { PersonalLocationDisplay } from '@/components/profile/PersonalLocationDisplay';
 import { useUserRole } from '@/hooks/useUserRole';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 // Activity type definitions
 interface SubmissionActivity {
@@ -160,6 +161,15 @@ export default function Profile() {
   // Update document title when profile changes
   useDocumentTitle(profile?.username ? `${profile.username}'s Profile` : 'Profile');
 
+  useOpenGraph({
+    title: profile ? `${profile.display_name || profile.username} - ThrillWiki` : 'User Profile',
+    description: profile?.bio || (profile ? `${profile.display_name || profile.username}'s profile on ThrillWiki` : undefined),
+    imageUrl: profile?.avatar_url,
+    imageId: profile?.avatar_image_id,
+    type: 'profile',
+    enabled: !!profile
+  });
+
   // Username validation
   const usernameValidation = useUsernameValidation(editForm.username, profile?.username);
   useEffect(() => {