docs: Add Open Graph and Twitter Card meta tags with social image

Author: vveerrgg

docs/index.html

@@ -5,6 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NostrKey - Cross-Browser Nostr Key Management</title>
     <meta name="description" content="Secure Nostr key management for Chrome, Safari, and iOS. NIP-07 signing, encrypted vault, and nsecBunker support.">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://nostrkey.com/">
+    <meta property="og:title" content="NostrKey - Cross-Browser Nostr Key Management">
+    <meta property="og:description" content="Secure Nostr key management for Chrome, Safari, and iOS. NIP-07 signing, encrypted vault, and nsecBunker support.">
+    <meta property="og:image" content="https://nostrkey.com/og-image.svg">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:url" content="https://nostrkey.com/">
+    <meta name="twitter:title" content="NostrKey - Cross-Browser Nostr Key Management">
+    <meta name="twitter:description" content="Secure Nostr key management for Chrome, Safari, and iOS. NIP-07 signing, encrypted vault, and nsecBunker support.">
+    <meta name="twitter:image" content="https://nostrkey.com/og-image.svg">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' stroke='%23a6e22e' stroke-width='4' fill='%233e3d32'/><path d='M35 50L45 60L65 40' stroke='%23a6e22e' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>">
+    
     <style>
         :root {
             --bg: #272822;