diff --git a/apps/web/src/routes/+layout.svelte b/apps/web/src/routes/+layout.svelte
index ac6dd12..b35df15 100644
--- a/apps/web/src/routes/+layout.svelte
+++ b/apps/web/src/routes/+layout.svelte
@@ -4,8 +4,16 @@
 </script>
 
 <svelte:head>
-  <meta name="theme-color" content="#0f0f1a" />
+  <meta name="theme-color" content="#6366f1" />
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22><text y=%2224%22 font-size=%2224%22>⚡</text></svg>" />
+  
+  <!-- Global Open Graph -->
+  <meta property="og:site_name" content="DevCard" />
+  <meta property="og:type" content="website" />
+  
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@DevCard" />
 </svelte:head>
 
 {@render children()}
diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index 363a491..bfb5cc5 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -26,6 +26,10 @@
     name="description"
     content="Open source developer profile exchange platform. Share all your developer profiles with one QR code."
   />
+  <meta property="og:title" content="DevCard — One Tap. Every Profile. Every Platform." />
+  <meta property="og:description" content="Open source developer profile exchange platform. Share all your developer profiles with one QR code." />
+  <meta name="twitter:title" content="DevCard — One Tap. Every Profile. Every Platform." />
+  <meta name="twitter:description" content="Open source developer profile exchange platform. Share all your developer profiles with one QR code." />
 </svelte:head>
 
 <main class="landing">
diff --git a/apps/web/src/routes/u/[username]/+page.svelte b/apps/web/src/routes/u/[username]/+page.svelte
index f7750ec..5f331bd 100644
--- a/apps/web/src/routes/u/[username]/+page.svelte
+++ b/apps/web/src/routes/u/[username]/+page.svelte
@@ -18,8 +18,20 @@
   {#if profile}
     <title>{profile.displayName} — DevCard</title>
     <meta name="description" content="{profile.bio || `${profile.displayName}'s developer profiles`}" />
+    
+    <!-- Open Graph -->
     <meta property="og:title" content="{profile.displayName} — DevCard" />
     <meta property="og:description" content="{profile.bio || 'Developer profile card'}" />
+    {#if profile.avatarUrl}
+      <meta property="og:image" content={profile.avatarUrl} />
+    {/if}
+    
+    <!-- Twitter -->
+    <meta name="twitter:title" content="{profile.displayName} — DevCard" />
+    <meta name="twitter:description" content="{profile.bio || 'Developer profile card'}" />
+    {#if profile.avatarUrl}
+      <meta name="twitter:image" content={profile.avatarUrl} />
+    {/if}
   {:else}
     <title>User Not Found — DevCard</title>
   {/if}