refactor: centralize site title suffix in metadata

src/components/Nav/MobileMenu/MenuHeader.tsx

@@ -1,5 +1,7 @@
 import { SheetClose, SheetTitle } from "@/components/ui/sheet"
 
+import { SITE_TITLE } from "@/lib/constants"
+
 import { useTranslation } from "@/hooks/useTranslation"
 
 const MenuHeader = () => {
@@ -8,7 +10,7 @@ const MenuHeader = () => {
   return (
     <div className="flex items-center justify-between p-6">
       <SheetTitle className="p-0 text-md text-body-medium uppercase">
-        {t("site-title")}
+        {SITE_TITLE}
       </SheetTitle>
       <SheetClose className="w-fit text-md" data-testid="mobile-menu-close">
         {t("close")}

src/components/Nav/MobileMenu/MobileMenuClient.tsx

@@ -9,6 +9,8 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 import { cn } from "@/lib/utils/cn"
 
+import { SITE_TITLE } from "@/lib/constants"
+
 import HamburgerButton from "./HamburgerButton"
 
 import { useCloseOnNavigate } from "@/hooks/useCloseOnNavigate"
@@ -102,7 +104,7 @@ const MobileMenuClient = ({ className, side }: MobileMenuClientProps) => {
         className="flex flex-col"
         onOpenChange={handleOpenChange}
         triggerRef={triggerRef}
-        aria-label={t("site-title")}
+        aria-label={SITE_TITLE}
         data-testid="mobile-menu-dialog"
       >
         {hasBeenOpened && (

src/intl/en/common.json

@@ -474,7 +474,6 @@
   "show-less": "Show less",
   "single-slot-finality": "Single-slot finality",
   "site-description": "Ethereum is a global, decentralized platform for money and new kinds of applications. On Ethereum, you can write code that controls money, and build applications accessible anywhere in the world.",
-  "site-title": "ethereum.org",
   "skip-to-main-content": "Skip to main content",
   "smart-contracts": "Smart contracts",
   "solo": "Solo staking",

src/intl/en/page-ethereum-history-founder-and-ownership.json

@@ -1,5 +1,5 @@
 {
-  "page-ethereum-history-founder-and-ownership-meta-title": "History of Ethereum: founder, launch and ownership | ethereum.org",
+  "page-ethereum-history-founder-and-ownership-meta-title": "History of Ethereum: founder, launch and ownership",
   "page-ethereum-history-founder-and-ownership-meta-description": "Learn about Ethereum's history, including who created it, when it launched and who controls it today.",
   "page-ethereum-history-founder-and-ownership-twitter-meta-description": "Learn the differences between Bitcoin and Ethereum, including use cases, network performance, token economics and more.",
   "page-ethereum-history-founder-and-ownership-title": "History of Ethereum: founder, launch and ownership",

src/intl/en/page-ethereum-vs-bitcoin.json

@@ -1,5 +1,5 @@
 {
-  "page-ethereum-vs-bitcoin-meta-title": "Ethereum vs Bitcoin: what is the difference? | ethereum.org",
+  "page-ethereum-vs-bitcoin-meta-title": "Ethereum vs Bitcoin: what is the difference?",
   "page-ethereum-vs-bitcoin-meta-description": "Learn the differences between Bitcoin and Ethereum, including use cases, network performance, security, token economics, level of decentralisation and more.",
   "page-ethereum-vs-bitcoin-twitter-meta-description": "Learn the differences between Bitcoin and Ethereum, including use cases, network performance, token economics and more.",
   "page-ethereum-vs-bitcoin-title": "Ethereum vs Bitcoin: what is the difference?",

src/intl/en/page-index.json

@@ -1,5 +1,5 @@
 {
-  "page-index-meta-title": "Ethereum - The complete guide from Ethereum.org",
+  "page-index-meta-title": "Ethereum - The complete guide from ethereum.org",
   "page-index-meta-description": "Ethereum is a global, decentralized platform for money and new kinds of applications. On Ethereum, you control your own money, data, and identity. No bank, no middleman, no permission needed.",
   "page-index-description": "The leading platform for innovative apps and blockchain networks",
   "page-index-title": "Welcome to Ethereum",

src/intl/en/page-layer-2-learn.json

@@ -1,5 +1,5 @@
 {
-  "page-layer-2-learn-meta-title": "What is layer 2? | ethereum.org",
+  "page-layer-2-learn-meta-title": "What is layer 2?",
   "page-layer-2-learn-title": "What is layer 2?",
   "page-layer-2-learn-description": "Scaling Ethereum for mass adoption",
   "page-layer-2-learn-button-1-label": "What is layer 2?",

src/intl/en/page-roadmap.json

@@ -1,6 +1,6 @@
 {
   "page-roadmap-title": "Ethereum roadmap",
-  "page-roadmap-meta-title": "Ethereum roadmap | ethereum.org",
+  "page-roadmap-meta-title": "Ethereum roadmap",
   "page-roadmap-meta-description": "The path to more scalability, security and sustainability for Ethereum.",
   "page-roadmap-banner-notification": "Ethereum's development is community-driven and subject to change.",
   "page-roadmap-changes-coming-title": "What changes are coming to Ethereum?",

src/intl/en/page-wallets-find-wallet.json

@@ -5,7 +5,7 @@
   "page-find-wallet-description": "Wallets store and transact your ETH. You can choose from a variety of products that tailor to your needs.",
   "page-find-wallet-last-updated": "Last updated",
   "page-find-wallet-meta-description": "Compare Ethereum wallets side by side. Filter by features like hardware wallet support, open source, self-custody, multi-chain, staking, NFT support, and more to find the right wallet for you.",
-  "page-find-wallet-meta-title": "Find and compare Ethereum wallets | ethereum.org",
+  "page-find-wallet-meta-title": "Find and compare Ethereum wallets",
   "page-find-wallet-title": "Choose your wallet",
   "page-find-wallet-table-title": "Browse all wallets",
   "page-find-wallet-try-removing": "Try removing a feature or two",

src/intl/en/page-what-is-ether.json

@@ -1,5 +1,5 @@
 {
-  "page-what-is-ether-meta-title": "What is Ether (ETH)? (A complete guide) | ethereum.org",
+  "page-what-is-ether-meta-title": "What is Ether (ETH)? (A complete guide)",
   "page-what-is-ether-meta-description": "Ether (ETH) is Ethereum's native cryptocurrency. Learn what it's used for, how and where to buy it, how much of it there is and what affects its price.",
   "page-what-is-ether-twitter-meta-description": "Ether (ETH) is Ethereum's native cryptocurrency. Learn what it's used for, how and where to buy it, how much of it there is and more.",
   "page-what-is-ether-title": "What is Ether (ETH)?",

src/intl/en/page-what-is-ethereum.json

@@ -1,5 +1,5 @@
 {
-  "page-what-is-ethereum-meta-title": "What is Ethereum? (A Complete Guide) | ethereum.org",
+  "page-what-is-ethereum-meta-title": "What is Ethereum? (A Complete Guide)",
   "page-what-is-ethereum-meta-description": "A full overview of what Ethereum is, how it works, what it does and how to start using or building on it. Explained in simple terms.",
   "page-what-is-ethereum-title": "What is Ethereum?",
   "page-what-is-ethereum-hero-description-1": "Ethereum is a decentralized blockchain network and software development platform, powered by the cryptocurrency ether (ETH).",

src/intl/en/page-what-is-the-ethereum-network.json

@@ -1,5 +1,5 @@
 {
-  "page-what-is-ethereum-network-meta-title": "What is the Ethereum network? | ethereum.org",
+  "page-what-is-ethereum-network-meta-title": "What is the Ethereum network?",
   "page-what-is-ethereum-network-meta-description": "Understand what the Ethereum network is, staking and security, network fees (aka gas), layer 2 scaling networks and how to explore live network data.",
   "page-what-is-ethereum-network-twitter-meta-description": "Understand what the Ethereum network is, staking and security, network fees, layer 2 scaling networks and how to explore live network data.",
   "page-what-is-ethereum-network-title": "What is the Ethereum network?",

src/lib/constants.ts

@@ -37,6 +37,7 @@ export const EDIT_CONTENT_URL = `https://github.com/ethereum/ethereum-org-websit
 export const MAIN_CONTENT_ID = "main-content"
 export const WEBSITE_EMAIL = "website@ethereum.org"
 export const DEFAULT_OG_IMAGE = "/images/home/hero.png"
+export const SITE_TITLE = "ethereum.org"
 
 // Config
 export const CONTENT_IMAGES_MAX_WIDTH = 800

src/lib/utils/metadata.ts

@@ -4,6 +4,7 @@ import { getTranslations } from "next-intl/server"
 import {
   DEFAULT_OG_IMAGE,
   IS_PRODUCTION_DEPLOY,
+  SITE_TITLE,
   SITE_URL,
 } from "@/lib/constants"
 
@@ -65,7 +66,14 @@ export const getMetadata = async ({
   const t = await getTranslations("common")
 
   const description = descriptionProp || t("site-description")
-  const siteTitle = t("site-title")
+
+  const titleAlreadyHasBrand = title
+    .toLowerCase()
+    .includes(SITE_TITLE.toLowerCase())
+
+  const finalTitle = titleAlreadyHasBrand
+    ? title
+    : `${title} | \u2066${SITE_TITLE}\u2069`
 
   // Auto-detect translated locales if not provided
   const finalTranslatedLocales =
@@ -93,7 +101,7 @@ export const getMetadata = async ({
     : []
 
   const base: Metadata = {
-    title,
+    title: finalTitle,
     description,
     formatDetection: { telephone: false },
     metadataBase: new URL(SITE_URL),
@@ -109,24 +117,24 @@ export const getMetadata = async ({
       }),
     },
     openGraph: {
-      title,
+      title: finalTitle,
       description,
       locale,
       type: "website",
       url,
-      siteName: siteTitle,
+      siteName: SITE_TITLE,
       images: [
         {
           url: ogImage,
         },
       ],
     },
     twitter: {
-      title,
+      title: finalTitle,
       description: twitterDescription || description,
       card: "summary_large_image",
-      creator: author || siteTitle,
-      site: author || siteTitle,
+      creator: author || SITE_TITLE,
+      site: author || SITE_TITLE,
       images: [
         {
           url: ogImage,