fix(opengraph): use metadata rather than head element

rodneyosodo · rodneyosodo · commit bf50bcec160e · 2025-04-01T21:16:28.000+03:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,8 +11,57 @@ const robotoMono = Roboto_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "PyConKE 2025",
+  title: "Welcome to PyCon Kenya 2025",
   description: "Africa's largest Python conference, held in Nairobi, Kenya.",
+  authors: [
+    {
+      name: "Rodney Osodo",
+      url: "https://rodneyosodo.com",
+    },
+  ],
+  keywords: [
+    "Python",
+    "Conference",
+    "Africa",
+    "Nairobi",
+    "Kenya",
+    "Developer",
+    "Community",
+  ],
+  openGraph: {
+    type: "website",
+    title: "Welcome to PyCon Kenya 2025",
+    description:
+      "Africa's largest Python conference, held in Nairobi, Kenya. Join us for a weekend of inspiring talks, informative workshops, and fun networking events.",
+    url: process.env.NEXT_PUBLIC_BASE_URL || "https://pycon.ke",
+    siteName: "PyConKE 2025",
+    images: [
+      {
+        url: `${process.env.NEXT_PUBLIC_BASE_URL || "https://pycon.ke"}/opengraph.png`,
+        secureUrl: `${process.env.NEXT_PUBLIC_BASE_URL || "https://pycon.ke"}/opengraph.png`,
+        alt: "PyConKE 2025",
+        type: "image/png",
+        width: 1200,
+        height: 630,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Welcome to PyCon Kenya 2025",
+    description:
+      "Africa's largest Python conference, held in Nairobi, Kenya. Join us for a weekend of inspiring talks, informative workshops, and fun networking events.",
+    images: [
+      {
+        url: `${process.env.NEXT_PUBLIC_BASE_URL || "https://pycon.ke"}/opengraph.png`,
+        secureUrl: `${process.env.NEXT_PUBLIC_BASE_URL || "https://pycon.ke"}/opengraph.png`,
+        alt: "PyConKE 2025",
+        type: "image/png",
+        width: 1200,
+        height: 630,
+      },
+    ],
+  },
 };
 
 export default function RootLayout({
@@ -23,29 +72,6 @@ export default function RootLayout({
   const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
   return (
     <html lang="en">
-      <head>
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content="Welcome to PyCon Kenya 2025" />
-        <meta
-          property="og:description"
-          content="Africa's largest Python conference, held in Nairobi, Kenya. Join us for a weekend of inspiring talks, informative workshops, and fun networking events."
-        />
-        <meta property="og:url" content={`${baseUrl}/opengraph.png`} />
-
-        <meta property="og:image" content={`${baseUrl}/opengraph.png`} />
-        <meta property="og:image:width" content="1200" />
-        <meta property="og:image:height" content="630" />
-
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="Welcome to PyCon Kenya 2025" />
-        <meta
-          name="twitter:description"
-          content="Africa's largest Python conference, held in Nairobi, Kenya. Join us for a weekend of inspiring talks, informative workshops, and fun networking events."
-        />
-        <meta name="twitter:image" content={`${baseUrl}/opengraph.png`} />
-        <meta name="twitter:image:width" content="1200" />
-        <meta name="twitter:image:height" content="630" />
-      </head>
       <body className={`${robotoMono.className} antialiased`}>
         <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]">
           <NavBar />
