feat: add OG image and complete meta tags

apps/landing/public/og-image.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#f59e0b"/>
+      <stop offset="100%" style="stop-color:#ea580c"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <text x="600" y="280" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="72" font-weight="800" fill="white">SnapOtter</text>
+  <text x="600" y="350" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="28" font-weight="400" fill="rgba(255,255,255,0.85)">Self-Hosted Image Processing</text>
+  <text x="600" y="400" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="20" font-weight="400" fill="rgba(255,255,255,0.6)">50+ Tools · Local AI · 100% Offline · Open Source</text>
+</svg>

apps/landing/src/app/layout.tsx

@@ -16,12 +16,21 @@ export const metadata: Metadata = {
     url: "https://snapotter.com",
     siteName: "SnapOtter",
     type: "website",
+    images: [
+      {
+        url: "/og-image.svg",
+        width: 1200,
+        height: 630,
+        alt: "SnapOtter — Self-Hosted Image Processing",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
     title: "SnapOtter — Self-Hosted Image Processing",
     description:
       "50+ image processing tools with local AI. Runs 100% offline. No data leaves your network.",
+    images: ["/og-image.svg"],
   },
 };