All pages have descriptive title elements that differ meaningfully between pages

Screen reader users navigate multi-page applications by listening to the page title—it is announced immediately on load and is the primary orientation cue in browser tab lists and browser history. When every route shares the same title or a page has no title at all, users cannot distinguish where they are in the application. WCAG 2.2 SC 2.4.2 (Level A) requires descriptive, unique titles. Section 508 2018 Refresh 503.3.2 mirrors this requirement. Missing or duplicate titles produce a disorienting experience that forces re-reading full page content on every navigation.

Export a metadata object from every page file in the Next.js App Router. Use the pattern Page Name | App Name for consistency:

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

For dynamic routes, use generateMetadata:

// app/posts/[slug]/page.tsx
export async function generateMetadata({ params }: Props) {
  const post = await getPost(params.slug);
  return { title: `${post.title} | My Blog` };
}

Add a default title template in app/layout.tsx as a fallback:

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