From ea102864f158f0c940d31bbe25882ad3d755bc49 Mon Sep 17 00:00:00 2001
From: Stephanie Hobson <stephaniehobson@users.noreply.github.com>
Date: Wed, 4 Nov 2026 14:23:15 -0700
Subject: [PATCH] Add a twitter:card tag so shared links show the large preview
 image (fix #96)

Add a static og:title that Helmet replaces on each page
---
 index.html                                |  3 +++
 tests/playwright/specs/jsDisabled.spec.js |  4 ++++
 tests/playwright/specs/og-title.spec.js   | 29 +++++++++++++++++++++++
 3 files changed, 36 insertions(+)
 create mode 100644 tests/playwright/specs/og-title.spec.js

diff --git a/index.html b/index.html
index a10425f1..a3828263 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,9 @@
     <link rel="shortcut icon" href="/img/icons/favicon.ico">
     <meta property="og:image" content="https://data.firefox.com/img/ogimage.png">
     <meta property="og:type" content="website">
+    <meta name="twitter:card" content="summary_large_image">
+    <!-- data-rh lets react-helmet-async replace this with each page's own og:title. -->
+    <meta property="og:title" content="Firefox Public Data Report" data-rh="true">
     <title>Firefox Public Data Report</title>
   </head>
   <body>
diff --git a/tests/playwright/specs/jsDisabled.spec.js b/tests/playwright/specs/jsDisabled.spec.js
index 5e7a2a33..c309f8cf 100644
--- a/tests/playwright/specs/jsDisabled.spec.js
+++ b/tests/playwright/specs/jsDisabled.spec.js
@@ -20,3 +20,7 @@ test('Correct <noscript> message is displayed when JavaScript is disabled', asyn
     await expect(page.locator('#enable-javascript')).toBeVisible();
     await expect(page.locator('#enable-javascript')).toHaveText('You need to enable JavaScript to run this app.');
 });
+
+test('index.html has an og:title for crawlers that do not run JavaScript', async ({ page }) => {
+    await expect(page.locator('meta[property="og:title"]')).toHaveAttribute('content', 'Firefox Public Data Report');
+});
diff --git a/tests/playwright/specs/og-title.spec.js b/tests/playwright/specs/og-title.spec.js
new file mode 100644
index 00000000..f8ce2e50
--- /dev/null
+++ b/tests/playwright/specs/og-title.spec.js
@@ -0,0 +1,29 @@
+const { test, expect } = require('../fixtureData');
+
+
+const pages = [
+    ['/', 'Firefox Public Data Report'],
+    ['/contact', 'Contact | Firefox Public Data Report'],
+    ['/dashboard/hardware', 'Hardware Across the Web | Firefox Public Data Report'],
+];
+
+for (const [path, title] of pages) {
+    test(`${path} replaces the static og:title with its own`, async ({ page }) => {
+        await page.goto(path);
+        await expect(page).toHaveTitle(title);
+
+        const ogTitle = page.locator('meta[property="og:title"]');
+        await expect(ogTitle).toHaveCount(1);
+        await expect(ogTitle).toHaveAttribute('content', title);
+    });
+}
+
+test('Navigating between pages keeps a single og:title', async ({ page }) => {
+    await page.goto('/contact');
+    await page.locator('#main-navigation a', { hasText: 'Hardware' }).click();
+    await expect(page).toHaveTitle('Hardware Across the Web | Firefox Public Data Report');
+
+    const ogTitle = page.locator('meta[property="og:title"]');
+    await expect(ogTitle).toHaveCount(1);
+    await expect(ogTitle).toHaveAttribute('content', 'Hardware Across the Web | Firefox Public Data Report');
+});