From 90b7435920717a053d8b7fed7115e15197bf8424 Mon Sep 17 00:00:00 2001
From: Melvin Jones Repol <mrepol742@gmail.com>
Date: Thu, 26 Mar 2026 01:39:56 +0800
Subject: [PATCH] feat(seo): add Open Graph and Twitter metadata

- Add keywords, openGraph and twitter metadata to login, signup,
  flex and leaderboard pages
- Set canonical full URL for join metadata
- Make layout generateMetadata use request pathname for url
- Minor JSX formatting and whitespace cleanup
---
 app/(auth)/login/page.tsx         | 88 ++++++++++++++++++++++++++-----
 app/(auth)/signup/page.tsx        | 73 ++++++++++++++++++++-----
 app/(public)/flex/page.tsx        | 46 ++++++++++++++++
 app/(public)/join/page.tsx        |  2 +-
 app/(public)/leaderboard/page.tsx | 47 +++++++++++++++++
 app/layout.tsx                    |  2 +-
 6 files changed, 229 insertions(+), 29 deletions(-)

diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index b2c5a73..affe353 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -7,6 +7,48 @@ export const metadata: Metadata = {
   title: "Login - DevPulse",
   description:
     "Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
+  keywords: [
+    "DevPulse",
+    "login",
+    "coding activity tracker",
+    "developer leaderboards",
+    "WakaTime integration",
+    "coding stats",
+    "programming habits",
+    "developer competition",
+    "flex your projects",
+    "coding streaks",
+    "productivity insights",
+  ],
+  openGraph: {
+    title: "Login - DevPulse",
+    description:
+      "Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
+    url: "https://devpulse-waka.vercel.app/login",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Login - DevPulse",
+    description:
+      "Log in to your DevPulse account to monitor your coding activity and compete on leaderboards.",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
 };
 
 export default async function Login(props: {
@@ -14,7 +56,9 @@ export default async function Login(props: {
 }) {
   const redirectParam = (await props.searchParams)?.redirect;
   const redirectTo =
-    redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
+    redirectParam &&
+    redirectParam.startsWith("/") &&
+    !redirectParam.startsWith("//")
       ? redirectParam
       : undefined;
 
@@ -26,9 +70,14 @@ export default async function Login(props: {
         <div className="absolute inset-0 grid-bg opacity-30" />
 
         <div className="relative z-10">
-          <Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
+          <Link
+            href="/"
+            className="flex items-center gap-3 w-fit hover:opacity-80 transition"
+          >
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
-            <span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
+            <span className="text-2xl font-bold tracking-tight text-white">
+              DevPulse
+            </span>
           </Link>
         </div>
 
@@ -37,26 +86,31 @@ export default async function Login(props: {
             Welcome back to your dashboard.
           </h1>
           <p className="text-gray-400 text-lg leading-relaxed mb-8">
-            Access your personalized coding metrics, compare your stats, and keep your productivity streak alive.
+            Access your personalized coding metrics, compare your stats, and
+            keep your productivity streak alive.
           </p>
-          
+
           <div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
             <div className="flex items-center gap-2 mb-4">
               <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
-              <span className="ml-2 text-xs font-mono text-gray-500">devpulse-auth.ts</span>
+              <span className="ml-2 text-xs font-mono text-gray-500">
+                devpulse-auth.ts
+              </span>
             </div>
             <div className="space-y-1.5 font-mono text-sm">
               <div className="flex">
-                <span className="text-indigo-400 mr-2">import</span> 
-                <span className="text-gray-200">{"{ Metrics }"}</span> 
-                <span className="text-indigo-400 mx-2">from</span> 
-                <span className="text-green-400">&apos;@devpulse/core&apos;</span>
+                <span className="text-indigo-400 mr-2">import</span>
+                <span className="text-gray-200">{"{ Metrics }"}</span>
+                <span className="text-indigo-400 mx-2">from</span>
+                <span className="text-green-400">
+                  &apos;@devpulse/core&apos;
+                </span>
                 <span className="text-gray-400">;</span>
               </div>
               <div className="flex mt-2">
-                <span className="text-purple-400 mr-2">await</span> 
+                <span className="text-purple-400 mr-2">await</span>
                 <span className="text-blue-400">Metrics</span>
                 <span className="text-gray-200">.</span>
                 <span className="text-yellow-200">syncToday</span>
@@ -79,7 +133,7 @@ export default async function Login(props: {
       {/* Right Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
         <div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
-        
+
         <div className="w-full max-w-sm relative z-10">
           <div className="lg:hidden flex items-center justify-center gap-3 mb-10">
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
@@ -88,7 +142,9 @@ export default async function Login(props: {
 
           <div className="mb-8 text-left">
             <h2 className="text-3xl font-bold text-white mb-2">Log in</h2>
-            <p className="text-gray-400">Enter your credentials to access your account.</p>
+            <p className="text-gray-400">
+              Enter your credentials to access your account.
+            </p>
           </div>
 
           <LoginForm />
@@ -96,7 +152,11 @@ export default async function Login(props: {
           <p className="mt-8 text-center text-sm text-gray-400">
             Don&apos;t have an account?{" "}
             <Link
-              href={redirectTo ? `/signup?redirect=${encodeURIComponent(redirectTo)}` : "/signup"}
+              href={
+                redirectTo
+                  ? `/signup?redirect=${encodeURIComponent(redirectTo)}`
+                  : "/signup"
+              }
               className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
             >
               Sign up
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index 9e11db5..438601a 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -7,6 +7,35 @@ export const metadata: Metadata = {
   title: "Sign Up - DevPulse",
   description:
     "Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
+  openGraph: {
+    title: "Sign Up - DevPulse",
+    description:
+      "Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
+    url: "https://devpulse-waka.vercel.app/signup",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Sign Up - DevPulse",
+    description:
+      "Create a DevPulse account to monitor your coding activity and compete on leaderboards.",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
 };
 
 export default async function Signup(props: {
@@ -14,7 +43,9 @@ export default async function Signup(props: {
 }) {
   const redirectParam = (await props.searchParams)?.redirect;
   const redirectTo =
-    redirectParam && redirectParam.startsWith("/") && !redirectParam.startsWith("//")
+    redirectParam &&
+    redirectParam.startsWith("/") &&
+    !redirectParam.startsWith("//")
       ? redirectParam
       : undefined;
 
@@ -26,9 +57,14 @@ export default async function Signup(props: {
         <div className="absolute inset-0 grid-bg opacity-30" />
 
         <div className="relative z-10">
-          <Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
+          <Link
+            href="/"
+            className="flex items-center gap-3 w-fit hover:opacity-80 transition"
+          >
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
-            <span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
+            <span className="text-2xl font-bold tracking-tight text-white">
+              DevPulse
+            </span>
           </Link>
         </div>
 
@@ -37,21 +73,24 @@ export default async function Signup(props: {
             Start measuring your coding pulse.
           </h1>
           <p className="text-gray-400 text-lg leading-relaxed mb-8">
-            Join thousands of developers tracking their progress, competing on leaderboards, and leveling up their skills.
+            Join thousands of developers tracking their progress, competing on
+            leaderboards, and leveling up their skills.
           </p>
-          
+
           <div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
             <div className="flex items-center gap-2 mb-4">
               <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
               <div className="w-3 h-3 rounded-full bg-green-500/80"></div>
-              <span className="ml-2 text-xs font-mono text-gray-500">setup.ts</span>
+              <span className="ml-2 text-xs font-mono text-gray-500">
+                setup.ts
+              </span>
             </div>
             <div className="space-y-1.5 font-mono text-sm">
               <div className="flex">
-                <span className="text-purple-400 mr-2">const</span> 
-                <span className="text-blue-400">dev</span> 
-                <span className="text-gray-200 mx-2">=</span> 
+                <span className="text-purple-400 mr-2">const</span>
+                <span className="text-blue-400">dev</span>
+                <span className="text-gray-200 mx-2">=</span>
                 <span className="text-indigo-400 mr-2">new</span>
                 <span className="text-yellow-200">Developer</span>
                 <span className="text-gray-200">();</span>
@@ -81,7 +120,7 @@ export default async function Signup(props: {
       {/* Right Side - Form */}
       <div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
         <div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
-        
+
         <div className="w-full max-w-sm relative z-10">
           <div className="lg:hidden flex items-center justify-center gap-3 mb-10">
             <Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
@@ -89,8 +128,12 @@ export default async function Signup(props: {
           </div>
 
           <div className="mb-8 text-left">
-            <h2 className="text-3xl font-bold text-white mb-2">Create an account</h2>
-            <p className="text-gray-400">Start tracking your coding stats today.</p>
+            <h2 className="text-3xl font-bold text-white mb-2">
+              Create an account
+            </h2>
+            <p className="text-gray-400">
+              Start tracking your coding stats today.
+            </p>
           </div>
 
           <SignupForm />
@@ -98,7 +141,11 @@ export default async function Signup(props: {
           <p className="mt-8 text-center text-sm text-gray-400">
             Already have an account?{" "}
             <Link
-              href={redirectTo ? `/login?redirect=${encodeURIComponent(redirectTo)}` : "/login"}
+              href={
+                redirectTo
+                  ? `/login?redirect=${encodeURIComponent(redirectTo)}`
+                  : "/login"
+              }
               className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
             >
               Log in
diff --git a/app/(public)/flex/page.tsx b/app/(public)/flex/page.tsx
index 0072e7f..ad182b2 100644
--- a/app/(public)/flex/page.tsx
+++ b/app/(public)/flex/page.tsx
@@ -6,6 +6,52 @@ import Image from "next/image";
 import { timeAgo } from "@/app/utils/time";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExternalLink } from "@fortawesome/free-solid-svg-icons";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Flexes - DevPulse",
+  description:
+    "Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
+  keywords: [
+    "DevPulse",
+    "coding flexes",
+    "developer projects",
+    "coding achievements",
+    "programming flexes",
+    "open source projects",
+    "developer community",
+    "coding inspiration",
+  ],
+  openGraph: {
+    title: "Flexes - DevPulse",
+    description:
+      "Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
+    url: "https://devpulse-waka.vercel.app/flex",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Flexes - DevPulse",
+    description:
+      "Flex your coding projects and share your achievements with the DevPulse community. See what others are working on and get inspired!",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
+};
 
 export default async function Flexs() {
   const supabase = await createClient();
diff --git a/app/(public)/join/page.tsx b/app/(public)/join/page.tsx
index 9b8ea7c..8bd997d 100644
--- a/app/(public)/join/page.tsx
+++ b/app/(public)/join/page.tsx
@@ -63,7 +63,7 @@ export async function generateMetadata({
       description,
       type: "website",
       siteName: "DevPulse",
-      url: `/join?id=${encodeURIComponent(code)}`,
+      url: `https://devpulse-waka.vercel.app/join?id=${encodeURIComponent(code)}`,
     },
     twitter: {
       card: "summary_large_image",
diff --git a/app/(public)/leaderboard/page.tsx b/app/(public)/leaderboard/page.tsx
index db786ff..1091881 100644
--- a/app/(public)/leaderboard/page.tsx
+++ b/app/(public)/leaderboard/page.tsx
@@ -3,6 +3,53 @@ import { createClient } from "../../lib/supabase/server";
 import Footer from "@/app/components/layout/Footer";
 import CTA from "@/app/components/layout/CTA";
 import Image from "next/image";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Leaderboards - DevPulse",
+  description:
+    "Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
+  keywords: [
+    "DevPulse",
+    "developer leaderboards",
+    "coding rankings",
+    "programming competition",
+    "developer stats",
+    "coding achievements",
+    "programming leaderboards",
+    "developer community",
+    "coding inspiration",
+  ],
+  openGraph: {
+    title: "Leaderboards - DevPulse",
+    description:
+      "Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
+    url: "https://devpulse-waka.vercel.app/leaderboard",
+    siteName: "DevPulse",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        width: 1200,
+        height: 630,
+        alt: "DevPulse Cover Image",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Leaderboards - DevPulse",
+    description:
+      "Explore the DevPulse leaderboards and see how you rank against other developers. Check out the top coders and get inspired to climb the ranks!",
+    images: [
+      {
+        url: "https://devpulse-waka.vercel.app/images/devpulse.cover.png",
+        alt: "DevPulse Cover Image",
+      },
+    ],
+  },
+};
 
 export default async function Leaderboards() {
   const supabase = await createClient();
diff --git a/app/layout.tsx b/app/layout.tsx
index e5fc9ea..fc26504 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -50,7 +50,7 @@ export async function generateMetadata(): Promise<Metadata> {
         "DevPulse - Monitor Your Coding Activity and Compete on Leaderboards",
       description:
         "DevPulse is a platform that tracks your coding activity and allows you to compete with other developers on leaderboards. Sign up now to start monitoring your coding habits and see how you stack up against the competition!",
-      url: "https://devpulse-waka.vercel.app",
+      url: `https://devpulse-waka.vercel.app${h.get("x-pathname")}`,
       siteName: "DevPulse",
       images: [
         {