fix(seo): declare the share card, which the route group stopped inheriting

The staging E2E gate's one failure. Every link to the site pasted into
a chat has been rendering bare.

Staging serves og:title, og:description, og:url, og:site_name, og:type
and twitter:card, and no og:image at all. So metadata from the layout
reaches the page; only the file convention does not.

app/opengraph-image.tsx does work — _not-found, which lives in the app
root segment, carries an og:image from it in the build output. It does
not reach the site's pages, which live in the (frontend) route group
whose own layout.tsx is the root layout. The icon conventions are not
affected: /icon.png and /apple-icon.png are both linked correctly on
the same page, verified against staging. The asymmetry is the whole
bug, and it arrived with the route-group split that Payload required.

The file stays at the app root. Moving metadata files into a route
group is what drops /robots.txt and hashes /icon.png, which CLAUDE.md
records and which this must not undo — the build still emits all four
of /robots.txt, /icon.png, /apple-icon.png and /opengraph-image. The
root layout points at the route instead, and metadataBase makes it
absolute, which the journey needs since it calls new URL() on the value.

twitter.images is set for the same reason: the card is declared
summary_large_image, and claiming a large-image card while supplying no
image is worse than claiming a summary card.

Checked before fixing that og:image was the only broken assertion in
that journey: the test aborts at line 911, so its apple-touch-icon and
maskable-icon assertions had never run. All four of those assets return
200 image/png from staging, so this does not simply move the failure
further down the test.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DXnXQKnPpZBBP61fBQiFkq

nextjs-app/__tests__/app/metadata.test.ts

@@ -2,6 +2,7 @@ import { metadata as homeMetadata } from '@/app/(frontend)/page';
 import { metadata as rankingsMetadata } from '@/app/(frontend)/rankings/page';
 import { metadata as admissionsMetadata } from '@/app/(frontend)/admissions/page';
 import { generateMetadata as compareMetadata } from '@/app/(frontend)/compare/page';
+import { metadata as rootMetadata } from '@/app/(frontend)/layout';
 
 describe('canonical URLs', () => {
   it('the homepage canonicalises to the bare root', () => {
@@ -128,3 +129,41 @@ describe('C1 snippet copy', () => {
     }
   });
 });
+
+/**
+ * The share card must be declared, not inherited.
+ *
+ * `app/opengraph-image.tsx` is a metadata file convention, and it does attach
+ * to routes in the app root segment — `_not-found` gets an og:image from it.
+ * It does NOT attach to the site's pages, which live in the `(frontend)`
+ * route group whose own layout is a root layout. Staging served og:title,
+ * og:description, og:url, og:site_name and og:type and no og:image at all,
+ * so every link pasted into a chat rendered bare.
+ *
+ * The file stays at the app root, because /robots.txt and /icon.png depend on
+ * it being there. The site's root layout points at the route it generates.
+ */
+describe('the share card', () => {
+  it('declares an opengraph image on the site root layout', () => {
+    // No og:image means every link pasted into a chat renders bare.
+    const images = rootMetadata.openGraph?.images;
+    expect(images).toBeTruthy();
+    expect(JSON.stringify(images)).toContain('/opengraph-image');
+  });
+
+  it('declares a twitter image too', () => {
+    // twitter.card is summary_large_image. Claiming a large-image card and
+    // supplying no image is worse than claiming a summary card.
+    // Metadata['twitter'] is a union and `card` is not on every member, so
+    // this reads the serialised shape rather than narrowing the type.
+    const twitter = JSON.stringify(rootMetadata.twitter);
+    expect(twitter).toContain('summary_large_image');
+    expect(twitter).toContain('/opengraph-image');
+  });
+
+  it('resolves the card to an absolute url via metadataBase', () => {
+    // The e2e journey does `new URL(ogUrl)`, which throws on a relative path.
+    expect(rootMetadata.metadataBase?.toString())
+      .toBe('https://www.schoolcompare.co.uk/');
+  });
+});

nextjs-app/app/(frontend)/layout.tsx

@@ -59,14 +59,32 @@ export const metadata: Metadata = {
   authors: [{ name: 'schoolcompare' }],
   manifest: '/manifest.json',
   // No `icons` key on purpose: setting it here would override the file
-  // conventions. app/icon.svg and app/apple-icon.tsx are the source, and
-  // app/opengraph-image.tsx supplies og:image and twitter:image.
+  // conventions. app/icon.png and app/apple-icon.png are the source.
+  //
+  // og:image and twitter:image are NOT inherited from
+  // app/opengraph-image.tsx — see the note on openGraph.images below. The
+  // icon conventions do reach these pages; the opengraph-image one does not.
   metadataBase: new URL(SITE_URL),
   openGraph: {
     type: 'website',
     title: 'Compare Schools Side by Side | schoolcompare',
     description:
       'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
+    /*
+     * Declared, not inherited.
+     *
+     * app/opengraph-image.tsx is a metadata file convention, and it does
+     * attach to routes in the app root segment — _not-found gets an og:image
+     * from it. It does not reach the site's pages, which live in the
+     * (frontend) route group whose own layout.tsx is a root layout. Staging
+     * served og:title, og:description, og:url, og:site_name and og:type with
+     * no og:image at all, so every link pasted into a chat rendered bare.
+     *
+     * The file stays at the app root: /robots.txt and /icon.png depend on it
+     * being there, and moving it is what broke those before. This points at
+     * the route it generates instead. metadataBase makes it absolute.
+     */
+    images: ['/opengraph-image'],
     url: SITE_URL,
     siteName: 'schoolcompare',
   },
@@ -76,6 +94,9 @@ export const metadata: Metadata = {
     title: 'Compare Schools Side by Side | schoolcompare',
     description:
       'Put five English schools on one screen — SATs, GCSE results, Ofsted grades, and how close you had to live to get a place.',
+    // The card is summary_large_image; claiming that and supplying no image
+    // is worse than claiming a summary card.
+    images: ['/opengraph-image'],
   },
 };