Refactor font loading functions to implement caching for improved performance. The loadSiteOgFonts and loadRehberOgFonts functions now utilize promises to prevent redundant loading, enhancing efficiency. Additionally, minor adjustments were made to ensure consistent font data structure and style definitions.

src/app/bolum/[slug]/opengraph-image.tsx

@@ -0,0 +1,31 @@
+import { getAllBolumler } from "@/lib/katalog";
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Bölüm taban puanları ve sıralamaları — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const bolum = getAllBolumler().find((b) => b.slug === slug);
+  const ad = bolum?.ad ?? "Bölüm";
+  const programSayisi = bolum?.programSayisi;
+  const sayi =
+    programSayisi != null
+      ? `${programSayisi.toLocaleString("tr-TR")} program · `
+      : "";
+
+  return createOgSayfaImage({
+    eyebrow: "Bölüm",
+    title: `${ad} taban puanları`,
+    description: `${sayi}2025 yerleştirme verileri · 2026 tercih rehberi`,
+  });
+}

src/app/bolumler/opengraph-image.tsx

@@ -0,0 +1,18 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt =
+  "Tüm bölümlerin taban puanları ve sıralamaları 2026 — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Katalog",
+    title: "Tüm bölümlerin taban puanları ve sıralamaları",
+    description: "Lisans ve önlisans programları · 2025 yerleştirme verileri",
+  });
+}

src/app/giris/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Giriş — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Hesap",
+    title: "Giriş yap",
+    description: "Tercih listene ve soru hakkına kaldığın yerden devam et",
+  });
+}

src/app/gizlilik/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Gizlilik ve KVKK — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Yasal",
+    title: "Gizlilik ve KVKK",
+    description: "Hangi veriler toplanır, nasıl işlenir ve haklarınız nelerdir",
+  });
+}

src/app/iletisim/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "İletişim — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Destek",
+    title: "İletişim",
+    description: "Sorular, geri bildirim ve iade talepleri için bize yaz",
+  });
+}

src/app/kosullar/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Kullanım ve Satış Koşulları — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Yasal",
+    title: "Kullanım ve satış koşulları",
+    description: "Hizmet kapsamı, ödeme, iade politikası ve sorumluluk sınırları",
+  });
+}

src/app/listem/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Listem — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Hesabım",
+    title: "Listem",
+    description: "Kişisel tercih listen, risk analizi ve soru hakkı",
+  });
+}

src/app/meraklisina/opengraph-image.tsx

@@ -0,0 +1,18 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Meraklısına: KolayTercih nasıl çalışır?";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Meraklısına",
+    title: "KolayTercih nasıl çalışır?",
+    description:
+      "Dilimler, risk renkleri ve daralan filtreler — öğrenci diliyle",
+  });
+}

src/app/odeme/sonuc/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Ödeme sonucu — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Ödeme",
+    title: "Ödeme sonucu",
+    description: "Siparişinin durumunu buradan takip edebilirsin",
+  });
+}

src/app/paket/opengraph-image.tsx

@@ -0,0 +1,18 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Tercih Dönemi Paketi — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Paket",
+    title: "Tercih Dönemi Paketi",
+    description:
+      "Sıralamana özel 24 tercihlik liste, risk analizi ve soru hakkı",
+  });
+}

src/app/rapor/yazdir/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Tercih raporu — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Rapor",
+    title: "Tercih raporu",
+    description: "Yazdırmaya hazır kişisel tercih listesi özeti",
+  });
+}

src/app/rehber/opengraph-image.tsx

@@ -0,0 +1,18 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Tercih Rehberi 2026 — YKS tercih dönemi yazıları — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Rehber",
+    title: "YKS tercih dönemi rehberi",
+    description:
+      "Tercih listesi, ölü tercih, ek yerleştirme ve sıralama — öğrenci diliyle",
+  });
+}

src/app/sonuc/opengraph-image.tsx

@@ -0,0 +1,17 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Tercih listeni kur — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Tercih listesi",
+    title: "Tercih listeni kur",
+    description: "Sıralamana göre dengeli 24 tercihlik listen hazırlanıyor",
+  });
+}

src/app/universite/[slug]/opengraph-image.tsx

@@ -0,0 +1,33 @@
+import { getAllUniversiteler } from "@/lib/katalog";
+import { trBaslikDuzeni } from "@/lib/slug";
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt = "Üniversite taban puanları ve sıralamaları — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = await params;
+  const uni = getAllUniversiteler().find((u) => u.slug === slug);
+  const ad = uni?.ad ?? "Üniversite";
+  const parcalar: string[] = [];
+  if (uni?.il) parcalar.push(trBaslikDuzeni(uni.il));
+  if (uni?.programSayisi != null) {
+    parcalar.push(`${uni.programSayisi.toLocaleString("tr-TR")} program`);
+  }
+  parcalar.push("2025 yerleştirme verileri");
+
+  return createOgSayfaImage({
+    eyebrow: "Üniversite",
+    title: `${ad} taban puanları`,
+    description: parcalar.join(" · "),
+  });
+}

src/app/universiteler/opengraph-image.tsx

@@ -0,0 +1,18 @@
+import {
+  createOgSayfaImage,
+  OG_CONTENT_TYPE,
+  OG_SIZE,
+} from "@/lib/og-sayfa";
+
+export const alt =
+  "Üniversitelerin taban puanları ve sıralamaları 2026 — KolayTercih";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default async function Image() {
+  return createOgSayfaImage({
+    eyebrow: "Katalog",
+    title: "Üniversitelerin taban puanları ve sıralamaları",
+    description: "Devlet ve vakıf üniversiteleri · 2025 yerleştirme verileri",
+  });
+}

src/lib/og-fonts.ts

@@ -39,91 +39,105 @@ async function latinPair(
   ];
 }
 
+let siteOgFontsPromise: Promise<OgFont[]> | null = null;
+let rehberOgFontsPromise: Promise<OgFont[]> | null = null;
+
 /** Ana sayfa OG: Bricolage (marka) + ClarityCity (gövde). */
-export async function loadSiteOgFonts(): Promise<OgFont[]> {
+export function loadSiteOgFonts(): Promise<OgFont[]> {
-  const [bricolage, clarityLight, claritySemiBold] = await Promise.all([
+  if (!siteOgFontsPromise) {
-    Promise.all([
+    siteOgFontsPromise = (async () => {
-      latinPair(
+      const [bricolage, clarityLight, claritySemiBold] = await Promise.all([
-        "Bricolage Grotesque",
+        Promise.all([
-        300,
+          latinPair(
-        "bricolage-grotesque-latin-300-normal.woff",
+            "Bricolage Grotesque",
-        "bricolage-grotesque-latin-ext-300-normal.woff",
+            300,
-      ),
+            "bricolage-grotesque-latin-300-normal.woff",
-      latinPair(
+            "bricolage-grotesque-latin-ext-300-normal.woff",
-        "Bricolage Grotesque",
+          ),
-        600,
+          latinPair(
-        "bricolage-grotesque-latin-600-normal.woff",
+            "Bricolage Grotesque",
-        "bricolage-grotesque-latin-ext-600-normal.woff",
+            600,
-      ),
+            "bricolage-grotesque-latin-600-normal.woff",
-    ]).then((pairs) => pairs.flat()),
+            "bricolage-grotesque-latin-ext-600-normal.woff",
-    loadFont("ClarityCity-Light.ttf"),
+          ),
-    loadFont("ClarityCity-SemiBold.ttf"),
+        ]).then((pairs) => pairs.flat()),
-  ]);
+        loadFont("ClarityCity-Light.ttf"),
+        loadFont("ClarityCity-SemiBold.ttf"),
+      ]);
 
-  return [
+      return [
-    ...bricolage,
+        ...bricolage,
-    {
+        {
-      name: "Clarity City",
+          name: "Clarity City",
-      data: clarityLight,
+          data: clarityLight,
-      weight: 300,
+          weight: 300,
-      style: "normal",
+          style: "normal" as const,
-    },
+        },
-    {
+        {
-      name: "Clarity City",
+          name: "Clarity City",
-      data: claritySemiBold,
+          data: claritySemiBold,
-      weight: 600,
+          weight: 600,
-      style: "normal",
+          style: "normal" as const,
-    },
+        },
-  ];
+      ];
+    })();
+  }
+  return siteOgFontsPromise;
 }
 
-/** Rehber kapak OG: ClarityCity + Cal Sans + Bricolage. */
+/** Rehber / sayfa OG: ClarityCity + Cal Sans + Bricolage. */
-export async function loadRehberOgFonts(): Promise<OgFont[]> {
+export function loadRehberOgFonts(): Promise<OgFont[]> {
-  const [clarityBold, calSans, light, semiBold, extraBold] = await Promise.all([
+  if (!rehberOgFontsPromise) {
-    loadFont("ClarityCity-Bold.ttf"),
+    rehberOgFontsPromise = (async () => {
-    latinPair(
+      const [clarityBold, calSans, light, semiBold, extraBold] =
-      "Cal Sans",
+        await Promise.all([
-      400,
+          loadFont("ClarityCity-Bold.ttf"),
-      "cal-sans-latin-400-normal.woff",
+          latinPair(
-      "cal-sans-latin-ext-400-normal.woff",
+            "Cal Sans",
-    ),
+            400,
-    latinPair(
+            "cal-sans-latin-400-normal.woff",
-      "Bricolage Grotesque",
+            "cal-sans-latin-ext-400-normal.woff",
-      300,
+          ),
-      "bricolage-grotesque-latin-300-normal.woff",
+          latinPair(
-      "bricolage-grotesque-latin-ext-300-normal.woff",
+            "Bricolage Grotesque",
-    ),
+            300,
-    latinPair(
+            "bricolage-grotesque-latin-300-normal.woff",
-      "Bricolage Grotesque",
+            "bricolage-grotesque-latin-ext-300-normal.woff",
-      600,
+          ),
-      "bricolage-grotesque-latin-600-normal.woff",
+          latinPair(
-      "bricolage-grotesque-latin-ext-600-normal.woff",
+            "Bricolage Grotesque",
-    ),
+            600,
-    latinPair(
+            "bricolage-grotesque-latin-600-normal.woff",
-      "Bricolage Grotesque",
+            "bricolage-grotesque-latin-ext-600-normal.woff",
-      800,
+          ),
-      "bricolage-grotesque-latin-800-normal.woff",
+          latinPair(
-      "bricolage-grotesque-latin-ext-800-normal.woff",
+            "Bricolage Grotesque",
-    ),
+            800,
-  ]);
+            "bricolage-grotesque-latin-800-normal.woff",
+            "bricolage-grotesque-latin-ext-800-normal.woff",
+          ),
+        ]);
 
-  // Sitede italic kullanılıyor; ayrı italic dosya yok — aynı kesimi italic olarak kaydet.
+      // Sitede italic kullanılıyor; ayrı italic dosya yok — aynı kesimi italic olarak kaydet.
-  const extraBoldItalic = extraBold.map((font) => ({
+      const extraBoldItalic = extraBold.map((font) => ({
-    ...font,
+        ...font,
-    style: "italic" as const,
+        style: "italic" as const,
-  }));
+      }));
 
-  return [
+      return [
-    {
+        {
-      name: "Clarity City",
+          name: "Clarity City",
-      data: clarityBold,
+          data: clarityBold,
-      weight: 700,
+          weight: 700,
-      style: "normal",
+          style: "normal" as const,
-    },
+        },
-    ...calSans,
+        ...calSans,
-    ...light,
+        ...light,
-    ...semiBold,
+        ...semiBold,
-    ...extraBold,
+        ...extraBold,
-    ...extraBoldItalic,
+        ...extraBoldItalic,
-  ];
+      ];
+    })();
+  }
+  return rehberOgFontsPromise;
 }

src/lib/og-sayfa.tsx

@@ -0,0 +1,216 @@
+import { ImageResponse } from "next/og";
+import { loadRehberOgFonts } from "@/lib/og-fonts";
+
+export const OG_SIZE = { width: 1200, height: 630 };
+export const OG_CONTENT_TYPE = "image/png";
+
+const PIXELS: [number, number, number][] = [
+  [960, 50, 0.16],
+  [980, 50, 0.28],
+  [1020, 50, 0.12],
+  [940, 70, 0.24],
+  [980, 70, 0.12],
+  [1000, 70, 0.3],
+  [1060, 70, 0.18],
+  [960, 90, 0.12],
+  [1000, 90, 0.2],
+  [1040, 90, 0.1],
+  [1080, 90, 0.26],
+  [1080, 110, 0.14],
+  [1120, 110, 0.22],
+  [1140, 110, 0.12],
+  [60, 490, 0.12],
+  [100, 490, 0.25],
+  [120, 490, 0.14],
+  [40, 510, 0.24],
+  [80, 510, 0.12],
+  [120, 510, 0.3],
+  [160, 510, 0.16],
+  [60, 530, 0.14],
+  [100, 530, 0.22],
+  [140, 530, 0.1],
+  [180, 530, 0.27],
+];
+
+function baslikBoyutu(title: string): number {
+  if (title.length > 70) return 44;
+  if (title.length > 52) return 50;
+  if (title.length > 36) return 56;
+  return 62;
+}
+
+/** Sayfa OG kartı — rehber kapağıyla aynı dil: eyebrow, başlık, marka. */
+export async function createOgSayfaImage(opts: {
+  eyebrow: string;
+  title: string;
+  description?: string;
+}): Promise<ImageResponse> {
+  const fonts = await loadRehberOgFonts();
+  const { eyebrow, title, description } = opts;
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          background: "white",
+          color: "#2563eb",
+          fontFamily: "Bricolage Grotesque",
+        }}
+      >
+        {PIXELS.map(([left, top, opacity], i) => (
+          <span
+            key={i}
+            style={{
+              position: "absolute",
+              display: "flex",
+              left,
+              top,
+              width: 14,
+              height: 14,
+              borderRadius: 4,
+              background: "#2563eb",
+              opacity,
+            }}
+          />
+        ))}
+        <span
+          style={{
+            position: "absolute",
+            display: "flex",
+            left: 1040,
+            top: 50,
+            width: 14,
+            height: 14,
+            borderRadius: 4,
+            background: "#ff5a00",
+            opacity: 0.8,
+          }}
+        />
+        <span
+          style={{
+            position: "absolute",
+            display: "flex",
+            left: 80,
+            top: 530,
+            width: 14,
+            height: 14,
+            borderRadius: 4,
+            background: "#ff5a00",
+            opacity: 0.8,
+          }}
+        />
+        <div
+          style={{
+            position: "absolute",
+            width: "100%",
+            height: "100%",
+            border: "2px solid rgba(37,99,235,0.15)",
+          }}
+        />
+
+        <div
+          style={{
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+            width: "100%",
+            padding: "58px 68px 52px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              fontFamily: "Clarity City",
+              fontSize: 20,
+              fontWeight: 700,
+              letterSpacing: "0.18em",
+              textTransform: "uppercase",
+              color: "#2563eb",
+            }}
+          >
+            <span>{eyebrow}</span>
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              maxWidth: 980,
+              gap: 18,
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexWrap: "wrap",
+                fontFamily: "Cal Sans",
+                fontSize: baslikBoyutu(title),
+                fontWeight: 400,
+                lineHeight: 1.05,
+                letterSpacing: "-0.025em",
+                color: "#2563eb",
+              }}
+            >
+              {title}
+            </div>
+            {description ? (
+              <div
+                style={{
+                  display: "flex",
+                  fontFamily: "Clarity City",
+                  fontSize: 26,
+                  fontWeight: 700,
+                  lineHeight: 1.35,
+                  color: "#64748b",
+                  maxWidth: 860,
+                }}
+              >
+                {description}
+              </div>
+            ) : null}
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+            }}
+          >
+            <svg
+              width="38"
+              height="38"
+              viewBox="0 0 180 180"
+              style={{ display: "flex" }}
+            >
+              <rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
+              <rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
+              <rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
+            </svg>
+            <span
+              style={{
+                display: "flex",
+                marginLeft: 2,
+                fontFamily: "Bricolage Grotesque",
+                fontSize: 24,
+                letterSpacing: "-0.05em",
+                color: "#2563eb",
+              }}
+            >
+              <span style={{ fontWeight: 300 }}>Kolay</span>
+              <span style={{ fontWeight: 600 }}>Tercih</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    ),
+    { ...OG_SIZE, fonts },
+  );
+}