Wire optional PuzzleConfig.image into og:image/twitter:image + test coverage

- src/server/render.puzzlePage.web.tsx: extracted the description/
  openGraphData/twitterData construction into a new, pure, exported
  buildPuzzlePageMetaData(webTitle, puzzleConfig) function (previously
  inline in renderPuzzlePage). This is specifically so it's directly unit
  testable without needing to invoke the full render pipeline, which
  requires a webpack build manifest not present in the test environment -
  there is no render.*.web.tsx unit test convention anywhere else in this
  repo to extend, so extracting the pure logic avoids inventing new
  render-pipeline test infrastructure just for this. openGraphData/
  twitterData now conditionally spread in 'og:image'/'twitter:image' only
  when puzzleConfig.image is set - when it's unset, the keys are omitted
  entirely (not sent as an empty string or placeholder), matching how
  htmlPageTemplate's generateMetaTags() only emits a <meta> tag for keys
  actually present in the object (verified by reading its
  Object.entries()-based implementation before assuming this).
- fixtures/manual/puzzlePage.ts: added samplePuzzleImageUrl (a clearly
  fixture-only placeholder image URL) and createPuzzleConfigWithImage(slug),
  a fixture-only helper returning a copy of a real registry PuzzleConfig
  with image set - used to exercise the with-image branch in tests without
  touching the real registry itself (which still has no image configured
  on any of the 6 V0 entries, per the previous commit).
- src/server/render.puzzlePage.web.test.ts (new): 4 tests for
  buildPuzzlePageMetaData - description sourced from puzzleConfig,
  og:title/twitter:title from webTitle, og:image/twitter:image omitted
  entirely when image is unset, and included with the correct value when
  set (using the new fixture helper).

tsc --noEmit clean, eslint clean, 5 suites / 51 tests passing across all
Puzzle Page test files (no regressions).

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Author: andresilva-guardian

dotcom-rendering/fixtures/manual/puzzlePage.ts

@@ -1,3 +1,4 @@
+import type { PuzzleConfig } from '../../src/model/puzzles/puzzleConfigs';
 import { puzzleConfigs } from '../../src/model/puzzles/puzzleConfigs';
 import type { FEPuzzlePageType } from '../../src/types/puzzlePage';
 import type { PuzzleItem } from '../../src/types/puzzlesPage';
@@ -87,3 +88,29 @@ export const puzzlePageFixtures: Record<string, FEPuzzlePageType> = Object.keys(
 	acc[slug] = createPuzzlePage(slug);
 	return acc;
 }, {});
+
+/**
+ * A fixture-only illustrative preview/share image URL. None of the real
+ * `puzzleConfigs` registry entries have a real image configured yet (see
+ * docs/puzzle-page.md) - this exists purely so both the with-image and
+ * without-image branches of Puzzle Page's OG/Twitter metadata have fixture
+ * and test coverage, without inventing a placeholder image for the real
+ * registry itself.
+ */
+export const samplePuzzleImageUrl =
+	'https://i.guim.co.uk/img/media/fixture-only-example/puzzle-preview.jpg?width=1200&height=630&quality=85';
+
+/**
+ * Returns a copy of `slug`'s real `PuzzleConfig` with `image` set to
+ * `samplePuzzleImageUrl` - a fixture-only variant for exercising the
+ * with-image branch (the real registry entry itself is left untouched).
+ */
+export const createPuzzleConfigWithImage = (slug: string): PuzzleConfig => {
+	const puzzleConfig = puzzleConfigs[slug];
+
+	if (!puzzleConfig) {
+		throw new Error(`Unknown puzzle slug in fixture: ${slug}`);
+	}
+
+	return { ...puzzleConfig, image: samplePuzzleImageUrl };
+};

dotcom-rendering/src/server/render.puzzlePage.web.test.ts

@@ -0,0 +1,53 @@
+import {
+	createPuzzleConfigWithImage,
+	samplePuzzleImageUrl,
+} from '../../fixtures/manual/puzzlePage';
+import { puzzleConfigs } from '../model/puzzles/puzzleConfigs';
+import { buildPuzzlePageMetaData } from './render.puzzlePage.web';
+
+describe('buildPuzzlePageMetaData', () => {
+	const withoutImage = puzzleConfigs.wordiply!;
+	const withImage = createPuzzleConfigWithImage('wordiply');
+
+	it('uses the puzzle config description as the page description', () => {
+		const { description } = buildPuzzlePageMetaData(
+			'wordiply | The Guardian',
+			withoutImage,
+		);
+		expect(description).toBe(withoutImage.description);
+	});
+
+	it('builds og:title/og:description and twitter:title/twitter:description from webTitle/description', () => {
+		const { openGraphData, twitterData } = buildPuzzlePageMetaData(
+			'wordiply | The Guardian',
+			withoutImage,
+		);
+
+		expect(openGraphData['og:title']).toBe('wordiply | The Guardian');
+		expect(openGraphData['og:description']).toBe(withoutImage.description);
+		expect(twitterData['twitter:title']).toBe('wordiply | The Guardian');
+		expect(twitterData['twitter:description']).toBe(
+			withoutImage.description,
+		);
+	});
+
+	it('omits og:image/twitter:image entirely when puzzleConfig.image is unset', () => {
+		const { openGraphData, twitterData } = buildPuzzlePageMetaData(
+			'wordiply | The Guardian',
+			withoutImage,
+		);
+
+		expect(openGraphData).not.toHaveProperty('og:image');
+		expect(twitterData).not.toHaveProperty('twitter:image');
+	});
+
+	it('includes og:image/twitter:image when puzzleConfig.image is set', () => {
+		const { openGraphData, twitterData } = buildPuzzlePageMetaData(
+			'wordiply | The Guardian',
+			withImage,
+		);
+
+		expect(openGraphData['og:image']).toBe(samplePuzzleImageUrl);
+		expect(twitterData['twitter:image']).toBe(samplePuzzleImageUrl);
+	});
+});

dotcom-rendering/src/server/render.puzzlePage.web.tsx

@@ -11,11 +11,55 @@ import { renderToStringWithEmotion } from '../lib/emotion';
 import { polyfillIO } from '../lib/polyfill.io';
 import { extractNAV } from '../model/extract-nav';
 import { createGuardian } from '../model/guardian';
+import type { PuzzleConfig } from '../model/puzzles/puzzleConfigs';
 import type { Config } from '../types/configContext';
 import { htmlPageTemplate } from './htmlPageTemplate';
 
 type Props = { puzzlePage: ResolvedPuzzlePage };
 
+/**
+ * Builds the SEO metadata for a Puzzle Page from its resolved
+ * `PuzzleConfig` and `webTitle`: the `<meta name="description">` value,
+ * plus `openGraphData`/`twitterData` for `htmlPageTemplate`'s
+ * `generateMetaTags()`. Pulled out as a small, pure function (rather than
+ * inlined in `renderPuzzlePage`) specifically so it's directly unit
+ * testable without needing to invoke the full render pipeline (which
+ * requires a webpack build manifest not present in the test environment -
+ * there is no existing render.*.web.tsx unit test convention in this repo
+ * to extend).
+ *
+ * `og:image`/`twitter:image` are only included when `puzzleConfig.image`
+ * is set - DCR has no site-wide default/fallback share image for pages
+ * without one (confirmed by investigation - see docs/puzzle-page.md), so
+ * when `image` is unset these keys are omitted entirely rather than sent
+ * empty or with a placeholder, matching `generateMetaTags()`'s behaviour
+ * of only emitting a `<meta>` tag for keys actually present in the object.
+ */
+export const buildPuzzlePageMetaData = (
+	webTitle: string,
+	puzzleConfig: PuzzleConfig,
+): {
+	description: string;
+	openGraphData: Record<string, string>;
+	twitterData: Record<string, string>;
+} => {
+	const { description, image } = puzzleConfig;
+
+	return {
+		description,
+		openGraphData: {
+			'og:title': webTitle,
+			'og:description': description,
+			...(image ? { 'og:image': image } : {}),
+		},
+		twitterData: {
+			'twitter:title': webTitle,
+			'twitter:description': description,
+			...(image ? { 'twitter:image': image } : {}),
+		},
+	};
+};
+
 export const renderPuzzlePage = ({
 	puzzlePage,
 }: Props): { html: string; prefetchScripts: string[] } => {
@@ -68,15 +112,10 @@ export const renderPuzzlePage = ({
 		unknownConfig: puzzlePage.config,
 	});
 
-	const description = puzzlePage.puzzleConfig.description;
-	const openGraphData = {
-		'og:title': puzzlePage.webTitle,
-		'og:description': description,
-	};
-	const twitterData = {
-		'twitter:title': puzzlePage.webTitle,
-		'twitter:description': description,
-	};
+	const { description, openGraphData, twitterData } = buildPuzzlePageMetaData(
+		puzzlePage.webTitle,
+		puzzlePage.puzzleConfig,
+	);
 
 	return {
 		html: htmlPageTemplate({