fix

app/api/og/route.tsx

@@ -0,0 +1,49 @@
+import { ImageResponse } from 'next/og'
+import { appConfig } from '../../config/app'
+
+export const runtime = 'edge'
+
+export async function GET(request: Request) {
+  const url = new URL(request.url)
+  const baseUrl = `${url.protocol}//${url.host}`
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: appConfig.assets.ogImage.bgColor,
+          fontSize: 60,
+          fontWeight: 600,
+        }}
+      >
+        <img
+          src={`${baseUrl}${appConfig.assets.favicon}`}
+          alt={appConfig.name}
+          width={200}
+          height={200}
+          style={{ margin: '0 0 40px' }}
+        />
+        <div style={{ marginBottom: 20 }}>{appConfig.name}</div>
+        <div 
+          style={{ 
+            fontSize: 30, 
+            fontWeight: 400,
+            color: appConfig.assets.ogImage.textColor
+          }}
+        >
+          {appConfig.description}
+        </div>
+      </div>
+    ),
+    {
+      width: appConfig.assets.ogImage.width,
+      height: appConfig.assets.ogImage.height,
+    },
+  )
+} 

app/components/SpeechBubble.tsx

@@ -10,7 +10,7 @@ interface SpeechBubbleProps {
   triggerCount: number;
 }
 
-export function SpeechBubble({ isShaken, triggerCount }: SpeechBubbleProps) {
+export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
   const [message, setMessage] = useState('');
   const [isVisible, setIsVisible] = useState(false);
   const [messageQueue, setMessageQueue] = useState<string[]>([]);

app/config/app.ts

@@ -0,0 +1,14 @@
+export const appConfig = {
+  name: 'Shake the Frog',
+  description: 'A fun interactive frog that reacts to shaking!',
+  url: 'https://shakethefrog.vercel.app',
+  assets: {
+    favicon: '/images/frog.svg',
+    ogImage: {
+      width: 1200,
+      height: 630,
+      bgColor: '#f0fdf4',
+      textColor: '#374151'
+    }
+  }
+} as const 

app/layout.tsx

@@ -1,15 +1,36 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { ThemeProvider } from './providers/ThemeProvider'
+import { appConfig } from './config/app'
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Shake the Frog',
-  description: 'A fun interactive frog that reacts to shaking!',
+  title: appConfig.name,
+  description: appConfig.description,
   icons: {
-    icon: '/images/frog.svg'
+    icon: appConfig.assets.favicon
+  },
+  openGraph: {
+    title: appConfig.name,
+    description: appConfig.description,
+    url: appConfig.url,
+    siteName: appConfig.name,
+    images: [{
+      url: '/api/og',
+      width: appConfig.assets.ogImage.width,
+      height: appConfig.assets.ogImage.height,
+      alt: `${appConfig.name} preview`
+    }],
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: appConfig.name,
+    description: appConfig.description,
+    images: ['/api/og']
   }
 }