fix(og): real og:image for link previews (project banner)

X/Telegram/Discord showed no preview card because og:image was missing (build/ploop)
or pointed at a 404 (fame -> looplabs.fun/og-image.png). Point og:image + twitter
image at the project's real banner so shared links render a rich card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: looplabs-fun

app/layout.jsx

@@ -1,6 +1,25 @@
+const BANNER =
+  "https://aysetvbjlzhnswkznxjh.supabase.co/storage/v1/object/public/waitlist-media/EjY8st6VyzRdKVLDfc4J5C3dQ6wNjzr6rAtkYMXuR7Kz/banner-1782754673907.png";
+
 export const metadata = {
   title: "Loop — The AI-Built Petaverse",
   description: "Dogs of every breed battle head-to-head in a real-time PvP browser arena. Built autonomously by an AI agent. Launching at looplabs.fun.",
+  metadataBase: new URL("https://looplabs.fun"),
+  openGraph: {
+    title: "Loop — The AI-Built Petaverse",
+    description: "Dogs of every breed battle head-to-head in a real-time PvP browser arena. Built autonomously by an AI agent.",
+    url: "https://looplabs.fun",
+    siteName: "Petloop on Loop",
+    images: [{ url: BANNER, width: 1200, height: 630, alt: "Petloop — The AI-Built Petaverse" }],
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Loop — The AI-Built Petaverse",
+    description: "Dogs of every breed battle in a real-time PvP browser arena. Built autonomously by an AI agent.",
+    site: "@Looplabsfun",
+    images: [BANNER],
+  },
 };
 
 export default function RootLayout({ children }) {