# Accurate Page Titles

**MUST** · **ID:** `content-page-titles` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-page-titles

> MUST: `<title>` matches current context

Title element reflects the current context

The page title appears in browser tabs, bookmarks, and search results. Update it dynamically to reflect the current view (e.g., "Edit Profile - Settings - MyApp"). This helps users navigate between tabs and understand their location.

## Bad — do not do this

`content-page-titles-bad`

```tsx
export function PageTitlesBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="flex items-center gap-2 mb-3">
          <div className="w-4 h-4 bg-muted rounded-sm" />
          <span className="text-sm font-medium">Browser Tab</span>
        </div>
        <div className="bg-muted rounded-lg p-3 mb-3">
          <div className="flex items-center gap-2">
            <div className="w-3 h-3 bg-primary rounded-full" />
            <span className="text-xs font-mono truncate">My App</span>
          </div>
        </div>
        <p className="text-xs text-muted-foreground">
          Page title stays "My App" everywhere. Users with multiple tabs can't distinguish between pages.
        </p>
        <div className="mt-3 bg-error/10 border border-error/20 rounded-lg p-2">
          <code className="text-xs text-error font-mono">
            {'<title>My App</title>'} {/* Static on all pages */}
          </code>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        Same title on all pages - can't identify tabs
      </p>
    </div>
  );
}
```

## Good — do this

`content-page-titles-good`

```tsx
export function PageTitlesGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <div className="flex items-center gap-2 mb-3">
          <div className="w-4 h-4 bg-muted rounded-sm" />
          <span className="text-sm font-medium">Browser Tabs</span>
        </div>
        <div className="space-y-2 mb-3">
          <div className="bg-muted rounded-lg p-2">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 bg-primary rounded-full" />
              <span className="text-xs font-mono truncate">Dashboard - My App</span>
            </div>
          </div>
          <div className="bg-muted rounded-lg p-2">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 bg-primary rounded-full" />
              <span className="text-xs font-mono truncate">Settings - My App</span>
            </div>
          </div>
          <div className="bg-muted rounded-lg p-2">
            <div className="flex items-center gap-2">
              <div className="w-3 h-3 bg-primary rounded-full" />
              <span className="text-xs font-mono truncate">Edit Profile - My App</span>
            </div>
          </div>
        </div>
        <p className="text-xs text-muted-foreground">
          Each page has a unique title reflecting the current context.
        </p>
      </div>
      <p className="text-xs text-success mt-4">
        Dynamic titles help users navigate between tabs
      </p>
    </div>
  );
}
```

## References

- [Title element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/title)