Every page has a unique, descriptive title

Generic or missing page titles mean screen reader users hear "untitled" or the app name alone when switching browser tabs or windows — they cannot determine which page they are on without reading the content. WCAG 2.2 SC 2.4.2 (Page Titled) is a Level A requirement. Duplicate titles compound the problem for users navigating open tabs. For SPAs, a title that never updates after the initial load means every route is indistinguishable.

Export a metadata object from every page in the Next.js App Router with a unique, descriptive title. Follow the Page Name | Site Name pattern.

// app/dashboard/settings/page.tsx
export const metadata = {
  title: 'Account Settings | YourApp',
  description: 'Manage your account preferences, security, and notifications.',
}

For pages that derive their title from data (e.g., a project name), use generateMetadata:

export async function generateMetadata({ params }: { params: { id: string } }) {
  const project = await getProject(params.id)
  return { title: `${project.name} | YourApp` }
}

For React SPAs without a framework, update document.title in a useEffect on every route change.