Page title is unique and descriptive

When every page of an application shares the same <title> tag — often the product name alone — screen reader users who open multiple browser tabs cannot distinguish between them. Browser tab switchers read the title aloud; a list of identically-titled tabs gives no navigational information. WCAG 2.2 SC 2.4.2 (Page Titled) requires that pages have titles that describe their topic or purpose. Section 508 2018 Refresh 501.1 mandates that content conform to WCAG 2.2. In single-page applications, client-side route transitions that do not update document.title also fail SC 2.4.2 — the title announces 'Home' even when the user has navigated to their account settings. This affects screen reader users navigating via browser tabs and sighted users managing many open tabs simultaneously.

Set unique, descriptive page titles using the format Page Name | Site Name. In Next.js App Router, export metadata from each route page.tsx:

// src/app/dashboard/page.tsx
export const metadata = {
  title: 'Dashboard | MyApp',
  description: 'View your account overview and recent activity.',
};

// src/app/products/[slug]/page.tsx
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const product = await getProduct(params.slug);
  return {
    title: `${product.name} | MyStore`,
    description: product.description,
  };
}

// SPA without Next.js — update on route change
useEffect(() => {
  document.title = `${currentPageName} | MyApp`;
}, [currentPageName]);

Set a global fallback in src/app/layout.tsx:

export const metadata = {
  title: {
    default: 'MyApp',
    template: '%s | MyApp',
  },
};

With the template, individual pages only need to set title: 'Dashboard' and the suffix is appended automatically.