fix: add caching headers to Open Graph image generation for improved performance

Author: jakejarvis

app/[domain]/opengraph-image.tsx

@@ -173,6 +173,11 @@ export default async function OGImage({
     {
       ...size,
       fonts,
+      headers: {
+        "Cache-Control": "public, max-age=604800, stale-while-revalidate=3600",
+        "Vercel-CDN-Cache-Control":
+          "max-age=604800, stale-while-revalidate=3600",
+      },
     },
   );
 }

app/[domain]/page.tsx

@@ -20,7 +20,9 @@ export async function generateMetadata({
   const normalized = normalizeDomainInput(decoded);
 
   return {
-    title: `${normalized} — Domain Report`,
+    title: {
+      absolute: `${normalized} — Domain Report`,
+    },
     description: `Domainstack report for ${normalized}: WHOIS lookup, DNS & SSL scan, HTTP headers, hosting & email provider data, and SEO metadata.`,
     alternates: {
       canonical: `/${normalized}`,

app/layout.tsx

@@ -13,13 +13,23 @@ import { TRPCProvider } from "@/trpc/client";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Domainstack — Domain Intelligence Made Easy",
+  title: {
+    default: "Domainstack — Domain Intelligence Made Easy",
+    template: "%s — Domainstack",
+  },
   description:
     "Unlock full domain intelligence in one tool. Instantly view registration history, DNS and SSL records, HTTP headers, hosting & email details, and live SEO signals — all in one clean, fast interface.",
   metadataBase: new URL(BASE_URL),
   alternates: {
     canonical: "/",
   },
+  formatDetection: {
+    telephone: false,
+    date: false,
+    address: false,
+    email: false,
+    url: false,
+  },
 };
 
 export default function RootLayout({

app/not-found.tsx

@@ -1,4 +1,5 @@
 import { FileQuestionMark } from "lucide-react";
+import type { Metadata } from "next";
 import { DomainSearch } from "@/components/domain/domain-search";
 import {
   Empty,
@@ -9,6 +10,11 @@ import {
   EmptyTitle,
 } from "@/components/ui/empty";
 
+export const metadata: Metadata = {
+  title: "Not Found",
+  description: "The page you're looking for doesn't exist.",
+};
+
 export default function NotFound() {
   return (
     <div className="container mx-auto my-auto flex items-center justify-center px-6">

app/opengraph-image.tsx

@@ -143,6 +143,11 @@ export default async function OGImage() {
     {
       ...size,
       fonts,
+      headers: {
+        "Cache-Control": "public, max-age=604800, stale-while-revalidate=3600",
+        "Vercel-CDN-Cache-Control":
+          "max-age=604800, stale-while-revalidate=3600",
+      },
     },
   );
 }

lib/opengraph-image.ts

@@ -1,5 +1,6 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import { cacheLife } from "next/cache";
 
 // ── Brand palette
 export const BRAND = {
@@ -57,20 +58,24 @@ async function loadGeistFromPackage() {
   }
 }
 
-async function fetchGoogleWoff2(cssUrl: string, revalidateSec = 60 * 60 * 24) {
-  const cssRes = await fetch(cssUrl, { next: { revalidate: revalidateSec } });
+async function fetchGoogleWoff2(cssUrl: string) {
+  "use cache";
+  cacheLife("max");
+
+  const cssRes = await fetch(cssUrl);
   if (!cssRes.ok) throw new Error(`Font CSS fetch failed: ${cssUrl}`);
   const css = await cssRes.text();
   const match = css.match(/src:\s*url\((https:[^)]+\.woff2)\)/);
   if (!match?.[1]) throw new Error(`No .woff2 URL found in CSS: ${cssUrl}`);
-  const fontRes = await fetch(match[1], {
-    next: { revalidate: revalidateSec },
-  });
+  const fontRes = await fetch(match[1]);
   if (!fontRes.ok) throw new Error(`Font binary fetch failed: ${match[1]}`);
   return fontRes.arrayBuffer();
 }
 
 async function loadGeistFromGoogle() {
+  "use cache";
+  cacheLife("max");
+
   try {
     const regular = await fetchGoogleWoff2(
       "https://fonts.googleapis.com/css2?family=Geist:wght@400&display=swap",