diff --git a/locales/en/app.ftl b/locales/en/app.ftl index f231e1469..ee722cca6 100644 --- a/locales/en/app.ftl +++ b/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 diff --git a/locales/en/breaches.ftl b/locales/en/breaches.ftl index 682477365..f7f8b6b23 100644 --- a/locales/en/breaches.ftl +++ b/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 diff --git a/locales/en/settings.ftl b/locales/en/settings.ftl index 2746c0e91..fbb910d32 100644 --- a/locales/en/settings.ftl +++ b/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 diff --git a/src/controllers/breachDetail.js b/src/controllers/breachDetail.js index 159918480..b94bc8f4c 100644 --- a/src/controllers/breachDetail.js +++ b/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)) diff --git a/src/controllers/breaches.js b/src/controllers/breaches.js index 5c77f2f8f..f8f421107 100644 --- a/src/controllers/breaches.js +++ b/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)) diff --git a/src/controllers/landing.js b/src/controllers/landing.js index 9e955c91b..4d480c7cc 100644 --- a/src/controllers/landing.js +++ b/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. diff --git a/src/controllers/settings.js b/src/controllers/settings.js index 60bbdab33..e473562aa 100644 --- a/src/controllers/settings.js +++ b/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)) diff --git a/src/custom-types.d.ts b/src/custom-types.d.ts index 08870e032..b04dd8d8b 100644 --- a/src/custom-types.d.ts +++ b/src/custom-types.d.ts @@ -17,6 +17,11 @@ type ViewPartial = (data: ViewPartialParams & { part type GuestViewPartialData = { partial: ViewPartial; nonce: string; + meta?: { + title?: string; + socialTitle?: string; + socialDescription?: string; + }; } & ViewPartialParams; type MainViewPartialData = { fxaProfile: NonNullable['fxa_profile_json']; diff --git a/src/views/guestLayout.js b/src/views/guestLayout.js index 3537f4f56..2291cbe7d 100644 --- a/src/views/guestLayout.js +++ b/src/views/guestLayout.js @@ -12,18 +12,18 @@ const guestLayout = data => ` - ${getMessage('brand-fx-monitor')} + ${data.meta?.title ?? getMessage('brand-fx-monitor')} - + - - + + - - + + diff --git a/src/views/mainLayout.js b/src/views/mainLayout.js index 968d55901..3c2d5b796 100644 --- a/src/views/mainLayout.js +++ b/src/views/mainLayout.js @@ -12,18 +12,18 @@ const mainLayout = data => ` - ${getMessage('brand-fx-monitor')} + ${data.meta?.title ?? getMessage('brand-fx-monitor')} - + - - + + - - + + diff --git a/tsconfig.json b/tsconfig.json index c47f75a64..082bbc386 100644 --- a/tsconfig.json +++ b/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",