Skip to content

Browser tab titles

Format

All pages must use the pipe (|) separator between the page name and app name.

Page name | Pebbl

Rationale

The pipe (|) is the modern standard for SaaS and web applications. Most contemporary products use it, including Notion, Linear, Figma, Vercel, and Stripe.

The dash (-) is associated with the older SEO-optimized web. It also creates ambiguity when the page name itself contains hyphens (e.g., Account Settings - My-App is harder to parse than Account Settings | My App).

The pipe provides a stronger visual boundary in the browser tab, making it easier to distinguish the page name from the app name at a glance.

Exceptions

Better Stack status page

The Better Stack status page (status.pebblfinance.com) does not follow this convention. Customizing the browser tab title is a paid feature. Once we upgrade, the title should be updated to match the Page name | Pebbl format.

Rules

  • Always use | Pebbl as the suffix (space, pipe, space, then Pebbl).
  • The page name comes first since that is the part most likely to be truncated in narrow tabs, and the app name is less important when users are already in the app.
  • Keep page names short. The browser tab has limited space, especially when many tabs are open.