feat(places): ItemList and BreadcrumbList, and the e2e gate

ItemList tells Google the page is a ranked set rather than prose;
BreadcrumbList puts the place in a hierarchy. School URLs in the markup are
absolute on the canonical host, since a relative URL in JSON-LD is ambiguous.

Eight journeys covering all four families, the two-namespace guarantee, the
threshold, the canonical, the sitemap and the local-versus-England line — the
last because that comparison is the reason these pages are not a name dropped
into a template.

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

nextjs-app/__tests__/components/PlaceView.test.tsx

@@ -68,3 +68,26 @@ describe('PlaceView', () => {
     expect(screen.queryByTestId('local-vs-england')).not.toBeInTheDocument();
   });
 });
+
+describe('PlaceView structured data', () => {
+  function jsonLd() {
+    const { container } = render(<PlaceView detail={detail} phase="primary"
+      englandAverage={61} neighbours={[]} />);
+    const el = container.querySelector('script[type="application/ld+json"]');
+    return JSON.parse(el!.textContent!);
+  }
+
+  it('declares the page as a ranked list, not prose', () => {
+    const types = jsonLd()['@graph'].map((n: { '@type': string }) => n['@type']);
+    expect(types).toContain('ItemList');
+    expect(types).toContain('BreadcrumbList');
+  });
+
+  it('gives every listed school an absolute URL on the canonical host', () => {
+    const list = jsonLd()['@graph'].find((n: { '@type': string }) => n['@type'] === 'ItemList');
+    expect(list.itemListElement).toHaveLength(2);
+    for (const item of list.itemListElement) {
+      expect(item.url).toMatch(/^https:\/\/www\.schoolcompare\.co\.uk\/school\//);
+    }
+  });
+});

nextjs-app/components/places/PlaceView.tsx

@@ -13,6 +13,7 @@ import Link from 'next/link';
 import type { PlaceDetail, PlaceSummary } from '@/lib/places';
 import { placeUrl, authoritySlug } from '@/lib/places';
 import { schoolUrl } from '@/lib/utils';
+import { absoluteUrl } from '@/lib/site';
 import styles from './PlaceView.module.css';
 
 interface Props {
@@ -39,8 +40,40 @@ export function PlaceView({ detail, phase, englandAverage, neighbours }: Props)
     .map(([grade, label]) => [label, schools.filter((s) => s.ofsted_grade === grade).length] as const)
     .filter(([, n]) => n > 0);
 
+  // ItemList tells Google this page is a ranked set rather than prose;
+  // BreadcrumbList puts the place in a hierarchy. Capped at 20 because that
+  // is what the page shows above the fold and what the markup should mirror.
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@graph': [
+      {
+        '@type': 'ItemList',
+        name: `${phaseWord} in ${place.name}`,
+        numberOfItems: schools.length,
+        itemListElement: schools.slice(0, 20).map((s, i) => ({
+          '@type': 'ListItem',
+          position: i + 1,
+          url: absoluteUrl(schoolUrl(s.urn, s.school_name)),
+          name: s.school_name,
+        })),
+      },
+      {
+        '@type': 'BreadcrumbList',
+        itemListElement: [
+          { '@type': 'ListItem', position: 1, name: 'Schools',
+            item: absoluteUrl('/') },
+          { '@type': 'ListItem', position: 2, name: place.name },
+        ],
+      },
+    ],
+  };
+
   return (
     <div className={styles.container}>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <header className={styles.header}>
         <h1>{phaseWord} in {place.name}</h1>
         <p className={styles.summary}>