Add unique page titles

locales/en/app.ftl

@@ -868,7 +868,7 @@ ad-unit-6-before-you-complete = Before you complete that next signup, use an ema
 
 ## Search Engine Optimization
 
-meta-desc = Find out if you’ve been part of a data breach with { -brand-fx-monitor }. Sign up for alerts about future breaches and get tips to keep your accounts safe.
+meta-desc-2 = Find out if you've been part of a data breach with { -brand-fx-monitor }. We’ll help you understand what to do next and continuously monitor for any new breaches.
 
 ## Header
 

locales/en/breaches.ftl

@@ -2,6 +2,20 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+breach-meta-title = { -brand-fx-monitor } - Dashboard
+
+breach-all-meta-title = { -brand-fx-monitor } - All Data Breaches
+breach-all-meta-social-title = All Breaches Detected by { -brand-fx-monitor }
+breach-all-meta-social-description = Browse the complete list of known breaches detected by { -brand-fx-monitor }, then find out if your information was exposed.
+
+# Variables:
+#   $company (String) - Name of the company that was breached, e.g. "PHP Freaks"
+breach-detail-meta-title = { $company } - Data Breach
+# Variables:
+#   $company (String) - Name of the company that was breached, e.g. "PHP Freaks"
+breach-detail-meta-social-title = Were you affected by the { $company } Data Breach?
+breach-detail-meta-social-description = Use { -brand-fx-monitor } to find out if your personal information was exposed in this breach, and understand what to do next.
+
 ## Breaches header
 
 # Data classes pie chart title

locales/en/settings.ftl

@@ -4,6 +4,7 @@
 
 # Settings page
 
+settings-meta-title = { -brand-fx-monitor } - Settings
 settings-page-title = { -product-short-name } Settings
 
 ## Breach alert preferences

src/controllers/breachDetail.js

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { getBreachByName } from '../utils/hibp.js'
+import { getMessage } from '../utils/fluent.js'
 
 import { guestLayout } from '../views/guestLayout.js'
 import { allBreaches } from '../views/partials/allBreaches.js'
@@ -12,7 +13,12 @@ async function breachesPage (req, res) {
   const data = {
     partial: allBreaches,
     breaches: req.app.locals.breaches,
-    breachLogos: req.app.locals.breachLogoMap
+    breachLogos: req.app.locals.breachLogoMap,
+    meta: {
+      title: getMessage('breach-all-meta-title'),
+      socialTitle: getMessage('breach-all-meta-social-title'),
+      socialDescription: getMessage('breach-all-meta-social-description')
+    }
   }
 
   res.send(guestLayout(data))
@@ -31,7 +37,12 @@ async function breachDetailPage (req, res) {
     partial: breachDetail,
     skipPartialModule: true,
     breach: featuredBreach,
-    breachLogos: req.app.locals.breachLogoMap
+    breachLogos: req.app.locals.breachLogoMap,
+    meta: {
+      title: getMessage('breach-detail-meta-title', { company: featuredBreach.Name }),
+      socialTitle: getMessage('breach-detail-meta-social-title', { company: featuredBreach.Name }),
+      socialDescription: getMessage('breach-detail-meta-social-description')
+    }
   }
 
   res.send(guestLayout(data))

src/controllers/breaches.js

@@ -5,6 +5,7 @@
 import { mainLayout } from '../views/mainLayout.js'
 import { breaches } from '../views/partials/breaches.js'
 import { setBreachResolution, updateBreachStats } from '../db/tables/subscribers.js'
+import { getMessage } from '../utils/fluent.js'
 import { appendBreachResolutionChecklist } from '../utils/breachResolution.js'
 import { generateToken } from '../utils/csrf.js'
 import { getAllEmailsAndBreaches } from '../utils/breaches.js'
@@ -29,7 +30,10 @@ async function breachesPage (req, res) {
     selectedEmailIndex,
     partial: breaches,
     csrfToken: generateToken(res),
-    fxaProfile: req.user.fxa_profile_json
+    fxaProfile: req.user.fxa_profile_json,
+    meta: {
+      title: getMessage('breach-meta-title')
+    }
   }
 
   res.send(mainLayout(data))

src/controllers/landing.js

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+import { getMessage } from '../utils/fluent.js'
 import { getCountryCode } from '../utils/countryCode.js'
 import { guestLayout } from '../views/guestLayout.js'
 import { generateToken } from '../utils/csrf.js'
@@ -11,7 +12,12 @@ function landingPage (req, res) {
   const data = {
     partial: landing,
     csrfToken: generateToken(res),
-    countryCode: getCountryCode(req)
+    countryCode: getCountryCode(req),
+    meta: {
+      title: getMessage('brand-fx-monitor'),
+      socialTitle: getMessage('brand-fx-monitor'),
+      socialDescription: getMessage('meta-desc-2')
+    }
   }
 
   // Backward-compatibility with Monitor V1, for SEO.

src/controllers/settings.js

@@ -60,7 +60,10 @@ async function settingsPage (req, res) {
     emails,
     breachCounts,
     limit: AppConstants.MAX_NUM_ADDRESSES,
-    csrfToken: generateToken(res)
+    csrfToken: generateToken(res),
+    meta: {
+      title: getMessage('settings-meta-title')
+    }
   }
 
   res.send(mainLayout(data))

src/custom-types.d.ts

@@ -17,6 +17,11 @@ type ViewPartial<ViewPartialParams = object> = (data: ViewPartialParams & { part
 type GuestViewPartialData<ViewPartialParams = object> = {
     partial: ViewPartial<ViewPartialParams>;
     nonce: string;
+    meta?: {
+      title?: string;
+      socialTitle?: string;
+      socialDescription?: string;
+    };
   } & ViewPartialParams;
 type MainViewPartialData<ViewPartialParams = object> = {
     fxaProfile: NonNullable<import('express').Request['user']>['fxa_profile_json'];

src/views/guestLayout.js

@@ -12,18 +12,18 @@ const guestLayout = data => `
 <!doctype html>
 <html lang=${getLocale()}>
   <head>
-    <title>${getMessage('brand-fx-monitor')}</title>
+    <title>${data.meta?.title ?? getMessage('brand-fx-monitor')}</title>
     <style>html {display: none;}</style>
 
     <meta charset='utf-8'>
     <meta name='viewport' content='width=320, initial-scale=1'>
-    <meta name='description' content='${getMessage('meta-desc')}'>
+    <meta name='description' content='${data.meta?.socialDescription ?? getMessage('meta-desc-2')}'>
     <meta name='twitter:card' content='summary_large_image'>
-    <meta name='twitter:title' content='${getMessage('brand-fx-monitor')}'>
-    <meta name='twitter:description' content='${getMessage('meta-desc')}'>
+    <meta name='twitter:title' content='${data.meta?.socialTitle ?? getMessage('brand-fx-monitor')}'>
+    <meta name='twitter:description' content='${data.meta?.socialDescription ?? getMessage('meta-desc-2')}'>
     <meta name='twitter:image' content='${AppConstants.SERVER_URL}/images/og-image.webp'>
-    <meta property='og:title' content='${getMessage('brand-fx-monitor')}'>
-    <meta property='og:description' content='${getMessage('meta-desc')}'>
+    <meta property='og:title' content='${data.meta?.socialTitle ?? getMessage('brand-fx-monitor')}'>
+    <meta property='og:description' content='${data.meta?.socialDescription ?? getMessage('meta-desc-2')}'>
     <meta property='og:site_name' content='${getMessage('brand-fx-monitor')}'>
     <meta property='og:type' content='website'>
     <meta property='og:url' content='${AppConstants.SERVER_URL}'>

src/views/mainLayout.js

@@ -12,18 +12,18 @@ const mainLayout = data => `
 <!doctype html>
 <html lang=${getLocale()}>
   <head>
-    <title>${getMessage('brand-fx-monitor')}</title>
+    <title>${data.meta?.title ?? getMessage('brand-fx-monitor')}</title>
     <style>html {display: none;}</style>
 
     <meta charset='utf-8'>
     <meta name='viewport' content='width=320, initial-scale=1'>
-    <meta name='description' content='${getMessage('meta-desc')}'>
+    <meta name='description' content='${data.meta?.socialDescription ?? getMessage('meta-desc-2')}'>
     <meta name='twitter:card' content='summary_large_image'>
-    <meta name='twitter:title' content='${getMessage('brand-fx-monitor')}'>
-    <meta name='twitter:description' content='${getMessage('meta-desc')}'>
+    <meta name='twitter:title' content='${data.meta?.socialTitle ?? getMessage('brand-fx-monitor')}'>
+    <meta name='twitter:description' content='${data.meta?.socialDescription ?? getMessage('meta-desc-2')}'>
     <meta name='twitter:image' content='${AppConstants.SERVER_URL}/images/og-image.webp'>
-    <meta property='og:title' content='${getMessage('brand-fx-monitor')}'>
-    <meta property='og:description' content='${getMessage('meta-desc')}'>
+    <meta property='og:title' content='${data.meta?.socialTitle ?? getMessage('brand-fx-monitor')}'>
+    <meta property='og:description' content='${data.meta?.socialDescription ?? getMessage('meta-desc-2')}'>
     <meta property='og:site_name' content='${getMessage('brand-fx-monitor')}'>
     <meta property='og:type' content='website'>
     <meta property='og:url' content='${AppConstants.SERVER_URL}'>

tsconfig.json

@@ -2,6 +2,7 @@
   "include": [
     "src/custom-types.d.ts",
     "src/client/js/components/**/*",
+    "src/views/guestLayout.js",
     "src/views/partials/add-email.js",
     "src/views/partials/admin.js",
     "src/views/partials/exposure-scan.js",