Merge pull request #191 from IamOluwatoyin/feat/seo-metadata-overhaul

feat: overhaul SEO metadata with structured data, dynamic OG cards, a…

Author: zeemscript

.env.example

@@ -1,3 +1,8 @@
+# ─── Site ──────────────────────────────────────────
+NEXT_PUBLIC_SITE_URL=https://deenbridge.com
+# Canonical origin. Used as metadataBase, and for absolute Open Graph, sitemap.xml
+# and robots.txt URLs. Falls back to the Vercel deployment URL, then localhost.
+
 # ─── API ───────────────────────────────────────────
 NEXT_PUBLIC_API_URL=http://localhost:5000
 # Base URL of the dnb-backend REST API

.gitignore

@@ -19,6 +19,7 @@
 
 # production
 /build
+/build.log
 
 # misc
 .DS_Store

app/[locale]/(pages)/(auth)/login/page.jsx

@@ -4,6 +4,31 @@ import { GalleryVerticalEnd } from 'lucide-react'
 import React from 'react'
 import Image from "next/image"
 import Link from 'next/link'
+import { siteUrl, siteName } from "@/lib/config/site.config"
+
+export const metadata = {
+  title: { absolute: "Sign in | Deen Bridge" },
+  description:
+    "Sign in to your Deen Bridge account to access your courses, books, community spaces, and AI assistant.",
+  alternates: { canonical: "/login" },
+  openGraph: {
+    title: "Sign in | Deen Bridge",
+    description:
+      "Sign in to your Deen Bridge account to access your courses, books, community spaces, and AI assistant.",
+    url: `${siteUrl}/login`,
+    siteName,
+    locale: "en_US",
+    type: "website",
+    images: [{ url: "/og.png", width: 1200, height: 630, alt: "Deen Bridge" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Sign in | Deen Bridge",
+    description:
+      "Sign in to your Deen Bridge account to access your courses, books, community spaces, and AI assistant.",
+    images: ["/og.png"],
+  },
+}
 const page = () => {
   return (
     <div className="grid min-h-svh lg:grid-cols-2">

app/[locale]/(pages)/(auth)/signup/page.jsx

@@ -2,6 +2,31 @@ import { GalleryVerticalEnd } from "lucide-react"
 import { SignupForm } from "@/components/organisms/auth/signup-form"
 import Image from "next/image"
 import Link from "next/link"
+import { siteUrl, siteName } from "@/lib/config/site.config"
+
+export const metadata = {
+  title: { absolute: "Create account | Deen Bridge" },
+  description:
+    "Create your free Deen Bridge account and start learning the Qur'an, Arabic, fiqh, and more from verified Islamic educators.",
+  alternates: { canonical: "/signup" },
+  openGraph: {
+    title: "Create account | Deen Bridge",
+    description:
+      "Create your free Deen Bridge account and start learning the Qur'an, Arabic, fiqh, and more from verified Islamic educators.",
+    url: `${siteUrl}/signup`,
+    siteName,
+    locale: "en_US",
+    type: "website",
+    images: [{ url: "/og.png", width: 1200, height: 630, alt: "Deen Bridge" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Create account | Deen Bridge",
+    description:
+      "Create your free Deen Bridge account and start learning the Qur'an, Arabic, fiqh, and more from verified Islamic educators.",
+    images: ["/og.png"],
+  },
+}
 export default function SignupPage() {
   return (
     <div className="grid min-h-svh lg:grid-cols-2">

app/[locale]/(pages)/blog/layout.jsx

@@ -1,7 +1,8 @@
 import Navbar from "@/components/molecules/ladingpage/Navbar";
+import { siteUrl, siteName } from "@/lib/config/site.config";
 
 export const metadata = {
-    title: "Deen Bridge Blog | Islamic Learning, Qur'an, Arabic, Fiqh & More",
+    title: { absolute: "Deen Bridge Blog | Islamic Learning, Qur'an, Arabic, Fiqh & More" },
     description:
         "Explore the Deen Bridge Blog for authentic Islamic knowledge, tips, and stories. Learn Qur'an, Arabic, Fiqh, and more through expert articles and community insights.",
     keywords: [
@@ -20,30 +21,30 @@ export const metadata = {
         title: "Deen Bridge Blog | Islamic Learning, Qur'an, Arabic, Fiqh & More",
         description:
             "Explore the Deen Bridge Blog for authentic Islamic knowledge, tips, and stories. Learn Qur'an, Arabic, Fiqh, and more through expert articles and community insights.",
-        url: "https://deenbridge.com/blog",
+        url: `${siteUrl}/blog`,
         type: "website",
         images: [
             {
-                url: "/favicon.ico",
+                url: "/og.png",
                 width: 1200,
                 height: 630,
                 alt: "Deen Bridge - Islamic Learning Platform",
             },
         ],
-        site_name: "Deen Bridge Blog",
+        site_name: siteName,
     },
     twitter: {
         card: "summary_large_image",
         title: "Deen Bridge Blog | Islamic Learning, Qur'an, Arabic, Fiqh & More",
         description:
             "Explore the Deen Bridge Blog for authentic Islamic knowledge, tips, and stories. Learn Qur'an, Arabic, Fiqh, and more through expert articles and community insights.",
-        images: ["/favicon.ico"],
-        site: "@deenbridge",
-        creator: "@deenbridge"
+        images: ["/og.png"],
+        site: "@deen_bridge",
+        creator: "@deen_bridge"
     },
-    authors: [{ name: "Deen Bridge Team", url: "https://deenbridge.com/about" }],
+    authors: [{ name: "Deen Bridge Team", url: `${siteUrl}/about` }],
     creator: "Deen Bridge Team",
-    publisher: "Deen Bridge",
+    publisher: siteName,
     robots: "index, follow",
 };
 

app/[locale]/(pages)/educators/[profileid]/EducatorPageClient.jsx

@@ -33,12 +33,12 @@ import {
 } from "@/lib/config/font.config";
 import Button from "@/components/atoms/form/Button";
 
-export default function PublicEducatorPage({ params }) {
+export default function PublicEducatorPage({ params, educator: educatorProp }) {
   const { profileid } = use(params);
   const { user: currentUser } = useAuth();
   const router = useRouter();
 
-  const [educator, setEducator] = useState(null);
+  const [educator, setEducator] = useState(educatorProp || null);
   const [courses, setCourses] = useState([]);
   const [books, setBooks] = useState([]);
   const [spaces, setSpaces] = useState([]);
@@ -54,8 +54,11 @@ export default function PublicEducatorPage({ params }) {
       setLoading(true);
       setError(false);
       try {
-        const res = await getUserById(profileid);
-        const u = res?.user || null;
+        let u = educatorProp;
+        if (!u) {
+          const res = await getUserById(profileid);
+          u = res?.user || null;
+        }
         if (!u) {
           setError(true);
           setLoading(false);
@@ -100,7 +103,7 @@ export default function PublicEducatorPage({ params }) {
       }
     }
     load();
-  }, [profileid, currentUser?._id]);
+  }, [profileid, educatorProp, currentUser?._id]);
 
   const handleFollowToggle = async () => {
     if (!currentUser?._id) {

app/[locale]/(pages)/educators/[profileid]/opengraph-image.jsx

@@ -0,0 +1,33 @@
+import { getUserById } from "@/lib/actions/users/getUserById";
+import {
+  renderOgCard,
+  OG_IMAGE_SIZE,
+} from "@/components/seo/renderOgCard";
+import { truncateText } from "@/lib/utils/seo";
+
+export const runtime = "nodejs";
+export const alt = "Educator on Deen Bridge";
+export const size = OG_IMAGE_SIZE;
+export const contentType = "image/png";
+
+export default async function Image({ params }) {
+  const { profileid } = await params;
+
+  let educator = null;
+  try {
+    const res = await getUserById(profileid);
+    educator = res?.user || null;
+  } catch {
+    educator = null;
+  }
+
+  const title = educator?.name || "Meet an educator on Deen Bridge";
+  const subtitle =
+    truncateText(educator?.bio, 140) ||
+    "Courses, books and live spaces from a verified educator — on Deen Bridge.";
+  const badge = educator?.isVerified
+    ? "Verified Educator"
+    : "Educator on Deen Bridge";
+
+  return renderOgCard({ title, subtitle, badge, typeLabel: "EDUCATOR" });
+}

app/[locale]/(pages)/educators/[profileid]/page.jsx

@@ -1,24 +1,81 @@
+import { cache } from "react";
+import { notFound } from "next/navigation";
+import { getUserById } from "@/lib/actions/users/getUserById";
 import EducatorPageClient from "./EducatorPageClient";
+import { JsonLd } from "@/components/seo/JsonLd";
+import { siteUrl, siteName } from "@/lib/config/site.config";
+import { truncateText } from "@/lib/utils/seo";
+
+// getUserById uses axios (not fetch), so React cache() deduplicates the call
+// between generateMetadata and the page, keeping it to one backend hit.
+const getEducator = cache(getUserById);
+
+async function resolveEducator(profileid) {
+  const res = await getEducator(profileid);
+  return res?.user || null;
+}
 
 export async function generateMetadata({ params }) {
   const { profileid } = await params;
+  const educator = await resolveEducator(profileid);
+  if (!educator) return {};
+
+  const name = educator.name || "Educator";
+  const title = `${name} | Deen Bridge`;
+  const description =
+    truncateText(educator.bio, 160) ||
+    `Learn from ${name} — courses, books and live spaces on Deen Bridge.`;
+  const nameParts = name.split(/\s+/).filter(Boolean);
+
   return {
-    title: "Educator Profile - Deen Bridge",
-    description: "View this educator's courses, books, and spaces on Deen Bridge.",
+    title: { absolute: title },
+    description,
+    alternates: { canonical: `/educators/${profileid}` },
     openGraph: {
-      title: "Educator Profile - Deen Bridge",
-      description: "View this educator's courses, books, and spaces on Deen Bridge.",
-      url: `https://deenbridge.com/educators/${profileid}`,
+      title,
+      description,
+      url: `${siteUrl}/educators/${profileid}`,
+      siteName,
+      locale: "en_US",
       type: "profile",
+      profile: {
+        firstName: nameParts[0] || undefined,
+        lastName: nameParts.slice(1).join(" ") || undefined,
+        username: profileid,
+      },
     },
     twitter: {
       card: "summary_large_image",
-      title: "Educator Profile - Deen Bridge",
-      description: "View this educator's courses, books, and spaces on Deen Bridge.",
+      title,
+      description,
     },
   };
 }
 
-export default function EducatorPage({ params }) {
-  return <EducatorPageClient params={params} />;
+function buildProfileJsonLd(educator, profileid) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "ProfilePage",
+    mainEntity: {
+      "@type": "Person",
+      name: educator.name,
+      url: `${siteUrl}/educators/${profileid}`,
+      description: truncateText(educator.bio, 200) || undefined,
+      image: educator.avatar || undefined,
+    },
+  };
 }
+
+export default async function EducatorPage({ params }) {
+  const { profileid } = await params;
+  const educator = await resolveEducator(profileid);
+
+  if (!educator) return notFound();
+
+  return (
+    <>
+      <JsonLd data={buildProfileJsonLd(educator, profileid)} />
+      <EducatorPageClient params={params} educator={educator} />
+    </>
+  );
+}

app/[locale]/(pages)/educators/[profileid]/twitter-image.jsx

@@ -0,0 +1,33 @@
+import { getUserById } from "@/lib/actions/users/getUserById";
+import {
+  renderOgCard,
+  OG_IMAGE_SIZE,
+} from "@/components/seo/renderOgCard";
+import { truncateText } from "@/lib/utils/seo";
+
+export const runtime = "nodejs";
+export const alt = "Educator on Deen Bridge";
+export const size = OG_IMAGE_SIZE;
+export const contentType = "image/png";
+
+export default async function Image({ params }) {
+  const { profileid } = await params;
+
+  let educator = null;
+  try {
+    const res = await getUserById(profileid);
+    educator = res?.user || null;
+  } catch {
+    educator = null;
+  }
+
+  const title = educator?.name || "Meet an educator on Deen Bridge";
+  const subtitle =
+    truncateText(educator?.bio, 140) ||
+    "Courses, books and live spaces from a verified educator — on Deen Bridge.";
+  const badge = educator?.isVerified
+    ? "Verified Educator"
+    : "Educator on Deen Bridge";
+
+  return renderOgCard({ title, subtitle, badge, typeLabel: "EDUCATOR" });
+}

app/[locale]/dashboard/courses/[courseId]/opengraph-image.jsx

@@ -0,0 +1,33 @@
+import { getCourseById } from "@/lib/actions/courses/get-course";
+import {
+  renderOgCard,
+  OG_IMAGE_SIZE,
+} from "@/components/seo/renderOgCard";
+
+export const runtime = "nodejs";
+export const alt = "Deen Bridge course";
+export const size = OG_IMAGE_SIZE;
+export const contentType = "image/png";
+
+export default async function Image({ params }) {
+  const { courseId } = await params;
+
+  let course = null;
+  try {
+    course = await getCourseById(courseId);
+  } catch {
+    course = null;
+  }
+
+  const title = course?.title || "Learn authentic Islamic knowledge";
+  const subtitle = course?.createdBy?.name
+    ? `Taught by ${course.createdBy.name}`
+    : "Courses on Qur'an, Arabic, fiqh and more — on Deen Bridge.";
+  const badge = course
+    ? course.price === 0
+      ? "Free"
+      : `$${course.price} USDC`
+    : "Deen Bridge";
+
+  return renderOgCard({ title, subtitle, badge });
+}