diff --git a/public/og.png b/public/og.png
new file mode 100644
index 0000000..689d4d5
Binary files /dev/null and b/public/og.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1738fd3..4b36b90 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,11 +6,46 @@ import { Analytics } from "@vercel/analytics/react";
 import { useEffect, useState } from "react";
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata: Metadata = {
-  title: "Create beautiful graphs - Firegraph",
-  description: "Create beautiful graphs - Firegraph",
+const meta = {
+  title: 'Firegraph',
+  description: 'Create beautiful graphs. From GitHub star charts to custom data. Made by Firecrawl team.',
+  cardImage: '/og.png',
+  robots: 'follow, index',
+  favicon: '/favicon.ico',
+  url: 'https://firegraph.vercel.app/'
 };
 
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: meta.title,
+    description: meta.description,
+    referrer: 'origin-when-cross-origin',
+    keywords: ['Firegraph', 'Graphs', 'Data Visualization', 'GitHub', 'Firecrawl'],
+    authors: [{ name: 'Firecrawl', url: 'https://www.firecrawl.dev/' }],
+    creator: 'Firecrawl',
+    publisher: 'Firecrawl',
+    robots: meta.robots,
+    icons: { icon: meta.favicon },
+    metadataBase: new URL(meta.url),
+    openGraph: {
+      url: meta.url,
+      title: meta.title,
+      description: meta.description,
+      images: [meta.cardImage],
+      type: 'website',
+      siteName: meta.title
+    },
+    twitter: {
+      card: 'summary_large_image',
+      site: '@Vercel',
+      creator: '@Vercel',
+      title: meta.title,
+      description: meta.description,
+      images: [meta.cardImage]
+    }
+  };
+}
+
 export default function RootLayout({
   children,
 }: Readonly<{