seo: every indexable page gets its own share card

Next replaces nested metadata objects, so pages that set only title and
description inherited the root layout's openGraph/twitter whole: the home
card's title, and og:url pointing at /. pageMetadata() sets canonical,
og and twitter per page, and names the site image (a page's own openGraph
drops the inherited file image).

Also: the chain page's list heading id no longer collides with LaunchList's.

Author: kevincodex1

app/src/app/about/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { pageMetadata } from "@/lib/seo";
 import Link from "next/link";
 import { ArrowRight, ArrowUpRight } from "lucide-react";
 import SectionIntro from "@/components/sections/SectionIntro";
@@ -12,11 +13,11 @@ import { chainLandingPath } from "@/lib/chainLanding";
  * official channels, and separates the brand from look-alikes. Facts only (CONTRIBUTING.md):
  * what the contracts do, where the code is, which accounts are ours. No claims about value.
  */
-export const metadata: Metadata = {
+export const metadata: Metadata = pageMetadata({
+  path: "/about",
   title: `About ${BRAND}`,
   description: `${BRAND} is a free, open-source token launchpad on Base, Robinhood Chain and Arc. What it does, who builds it, and which channels are official.`,
-  alternates: { canonical: "/about" },
-};
+});
 
 const DIFFERENCES = [
   ["No platform fee", "The factory and the locker have no fee address, fee variable or treasury. There is nothing to switch on later."],

app/src/app/agents/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { pageMetadata } from "@/lib/seo";
 import { ArrowDown, ArrowRight, ArrowUpRight, Braces, FileCode2, Terminal } from "lucide-react";
 import SectionIntro from "@/components/sections/SectionIntro";
 import AgentsCodeBlock from "@/components/sections/AgentsCodeBlock";
@@ -8,7 +9,7 @@ import { launchpad } from "@/lib/launchpad/config";
 import { CHAIN_KEYS, CHAIN_LABELS, CHAINS, SITE_URL, explorerAddress } from "@/lib/chainPublic";
 import { BRAND_GITHUB } from "@/lib/brand";
 
-export const metadata: Metadata = { title: "Agents", description: "Launch and trade tokens from an agent: one contract call, plus a JSON API for the list, trades and metadata.", alternates: { canonical: "/agents" } };
+export const metadata: Metadata = pageMetadata({ path: "/agents", title: "Agents", description: "Launch and trade tokens from an agent: one contract call, plus a JSON API for the list, trades and metadata." });
 
 const sections = [
   { id: "launch", number: "01", label: "Launch a token" },

app/src/app/feed/page.tsx

@@ -1,12 +1,13 @@
 import type { Metadata } from "next";
+import { pageMetadata } from "@/lib/seo";
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 import CommunityFeed from "@/components/sections/CommunityFeed";
 import SectionIntro from "@/components/sections/SectionIntro";
 import styles from "@/components/sections/SectionShell.module.css";
 import { listFeed } from "@/lib/launchpad/postsServer";
 
-export const metadata: Metadata = { title: "Posts", description: "What people are saying about tokens launched on openlaunch.lol.", alternates: { canonical: "/feed" } };
+export const metadata: Metadata = pageMetadata({ path: "/feed", title: "Posts", description: "What people are saying about tokens launched on openlaunch.lol." });
 export const dynamic = "force-dynamic";
 
 export default async function FeedPage() {

app/src/app/launch/page.tsx

@@ -1,15 +1,16 @@
 import type { Metadata } from "next";
+import { pageMetadata } from "@/lib/seo";
 import LaunchForm from "@/components/launchpad/LaunchForm";
 import { ethUsd } from "@/lib/launchpad/ethPrice";
 import { gitlawbUsd } from "@/lib/launchpad/gitlawbServer";
 import { DEFAULT_CHAIN, chainKeyOr, type ChainKey } from "@/lib/chainPublic";
 import { CONFIGURED_CHAINS, launchpad } from "@/lib/launchpad/config";
 
-export const metadata: Metadata = {
+export const metadata: Metadata = pageMetadata({
+  path: "/launch",
   title: "Launch a token for free",
   description: "Deploy a token on Base, Robinhood Chain or Arc with 100% of supply locked as Uniswap v4 liquidity. No platform fee. Gas only.",
-  alternates: { canonical: "/launch" },
-};
+});
 
 export const dynamic = "force-dynamic";
 

app/src/app/metadata.test.ts

@@ -18,7 +18,7 @@ test("root layout declares no canonical and renders the site entity JSON-LD", ()
   assert.match(layout, /<script type="application\/ld\+json" dangerouslySetInnerHTML=\{\{ __html: siteJsonLd \}\} \/>/);
 });
 
-test("every indexable page declares its own canonical path", () => {
+test("every indexable page declares its own canonical path and share card", () => {
   const pages: [string, string][] = [
     ["./(home)/page.tsx", "/"],
     ["./launch/page.tsx", "/launch"],
@@ -28,7 +28,10 @@ test("every indexable page declares its own canonical path", () => {
     ["./about/page.tsx", "/about"],
   ];
   for (const [file, path] of pages) {
-    assert.ok(read(file).includes(`alternates: { canonical: "${path}" }`), `${file} must canonicalise to ${path}`);
+    const src = read(file);
+    // the home page's title, description and card are the layout's own; every other page goes through pageMetadata
+    const ok = path === "/" ? src.includes(`alternates: { canonical: "/" }`) : new RegExp(`pageMetadata\\(\\{\\s*path: "${path}"`).test(src);
+    assert.ok(ok, `${file} must canonicalise to ${path}`);
   }
 });
 

app/src/app/rules/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { pageMetadata } from "@/lib/seo";
 import Link from "next/link";
 import { ArrowDown, ArrowRight, ArrowUpRight, ChevronDown, FileCode2, LockKeyhole } from "lucide-react";
 import SectionIntro from "@/components/sections/SectionIntro";
@@ -8,7 +9,7 @@ import { launchpad } from "@/lib/launchpad/config";
 import { CHAINS, CHAIN_KEYS, CHAIN_LABELS, explorerAddress } from "@/lib/chainPublic";
 import { BRAND_GITHUB } from "@/lib/brand";
 
-export const metadata: Metadata = { title: "How it works", description: "What a launch does on-chain, what it costs (gas), and what can never happen to your liquidity.", alternates: { canonical: "/rules" } };
+export const metadata: Metadata = pageMetadata({ path: "/rules", title: "How it works", description: "What a launch does on-chain, what it costs (gas), and what can never happen to your liquidity." });
 
 const STEPS = [
   { title: "Your token is deployed", description: "A plain ERC-20 with EIP-2612 permit. Fixed supply, 1 billion by default. No mint, no pause, no blacklist, no transfer tax, no owner.", value: "1B", label: "default supply" },

app/src/components/launchpad/ChainLanding.tsx

@@ -13,11 +13,12 @@ import { getLaunchTotals, listLaunchesPage } from "@/lib/launchpad/queries";
 import { PAGE_SIZE } from "@/lib/launchpad/paging";
 import { ethUsd } from "@/lib/launchpad/ethPrice";
 import { dbConfigured } from "@/lib/db";
+import { pageMetadata } from "@/lib/seo";
 
 /** Metadata for /<chain>: its own title, snippet and canonical (never "/", see app/metadata.test.ts). */
 export function chainLandingMetadata(chain: ChainKey): Metadata {
   const c = CHAIN_LANDING[chain];
-  return { title: c.title, description: c.description, alternates: { canonical: chainLandingPath(chain) } };
+  return pageMetadata({ path: chainLandingPath(chain), title: c.title, description: c.description });
 }
 
 /**
@@ -61,8 +62,8 @@ export default async function ChainLanding({ chain }: { chain: ChainKey }) {
         ) : null}
       </section>
 
-      <section className={`${shell.anchorSection} mt-14`} aria-labelledby="launches-heading">
-        <h2 id="launches-heading" className="font-display text-2xl sm:text-3xl font-bold tracking-tight text-ink">Tokens on {CHAIN_LABELS[chain]}</h2>
+      <section className={`${shell.anchorSection} mt-14`} aria-labelledby="chain-launches-heading">
+        <h2 id="chain-launches-heading" className="font-display text-2xl sm:text-3xl font-bold tracking-tight text-ink">Tokens on {CHAIN_LABELS[chain]}</h2>
         <div className="mt-6">
           <LaunchList initial={page.items} initialHasMore={page.hasMore} initialSort="live" initialWindow="all" initialChain={chain} initialFilter={null} hasDb={dbConfigured()} />
         </div>

app/src/components/sections/about.test.ts

@@ -11,7 +11,7 @@ const llms = readFileSync(new URL("../../app/llms.txt/route.ts", import.meta.url
 test("about page is the brand entity page, built from brand.ts constants", () => {
   assert.match(page, /import \{ BRAND, BRAND_DOMAIN, BRAND_GITHUB, BRAND_X, LEGACY_DOMAIN \} from "@\/lib\/brand"/);
   assert.match(page, /title=\{`What \$\{BRAND\} is`\}/);
-  assert.match(page, /alternates: \{ canonical: "\/about" \}/);
+  assert.match(page, /pageMetadata\(\{\s*path: "\/about"/);
   assert.match(page, /https:\/\/x\.com\/\$\{BRAND_X\}/);
   assert.match(page, /href=\{BRAND_GITHUB\}/);
   assert.match(page, /CHAIN_KEYS\.map/);

app/src/lib/chainLanding.test.ts

@@ -31,7 +31,8 @@ test("landing copy fits search snippets and names its chain", () => {
 
 test("landing pages canonicalise to themselves, not to / or ?chain=", () => {
   const comp = read("../components/launchpad/ChainLanding.tsx");
-  assert.match(comp, /alternates: \{ canonical: chainLandingPath\(chain\) \}/);
+  assert.match(comp, /pageMetadata\(\{ path: chainLandingPath\(chain\)/);
+  assert.doesNotMatch(comp, /id="launches-heading"/, "LaunchList already owns that id");
   assert.match(comp, /notFound\(\)/, "an unconfigured chain 404s instead of rendering an empty list");
 });
 

app/src/lib/seo.test.ts

@@ -6,6 +6,7 @@ import {
   isCanonicalTokenPath,
   jsonLdHtml,
   jsonLdScript,
+  pageMetadata,
   siteJsonLd,
   siteJsonLdHtml,
   siteVerification,
@@ -163,3 +164,19 @@ test("siteVerification renders only the tags that are configured", () => {
   assert.deepEqual(siteVerification({ BING_SITE_VERIFICATION: "b456" }), { other: { "msvalidate.01": "b456" } });
   assert.deepEqual(siteVerification({ GOOGLE_SITE_VERIFICATION: "g", BING_SITE_VERIFICATION: "b" }), { google: "g", other: { "msvalidate.01": "b" } });
 });
+
+test("pageMetadata gives a page its own canonical and share card, never the home page's", () => {
+  const long = "Deploy a token on Base, Robinhood Chain or Arc with 100% of supply locked as Uniswap v4 liquidity. No platform fee. Gas only.";
+  const m = pageMetadata({ path: "/launch", title: "Launch a token for free", description: long });
+  assert.equal(m.description, long, "the search snippet keeps the full description");
+  assert.deepEqual(m.alternates, { canonical: "/launch" });
+  assert.equal(m.openGraph.url, "/launch");
+  assert.equal(m.openGraph.title, "Launch a token for free");
+  assert.equal(m.openGraph.siteName, "openlaunch.lol");
+  assert.equal(m.twitter.title, "Launch a token for free");
+  assert.equal(m.twitter.site, "@openlaunch_lol");
+  // a page's own openGraph drops the inherited file image: the card must name it or previews go blank
+  assert.deepEqual(m.openGraph.images.map((i) => i.url), ["/opengraph-image"]);
+  assert.deepEqual(m.twitter.images, m.openGraph.images);
+  assert.ok(m.openGraph.description.length <= 125 && m.twitter.description === m.openGraph.description, "share text is clamped for previews");
+});