What’s The Best Way To Handle Page Titles?

Published by Chris Coyier

First-level Navigation

Or, "the homepage". Here are some possibilities:

  1. [ NAME OF SITE ]
    Short and to the point
    Ex. CSS-Tricks
  2. [ NAME OF SITE ] - Short Tagline
    Taking the opportunity to explain the site
    Ex. CSS-Tricks - A Web Design Community
  3. [ NAME OF SITE ] - Keywords
    Site titles are SEO Opportunities
    Ex. CSS-Tricks - Web Design, jQuery, Downloads, Screencasts, Forums
  4. Other?

Second-level Navigation

This gets a little more interesting I think.

  1. [ NAME OF SITE ] - [ ARTICLE TITLE ]
    Places more importance on the source
    Ex. CSS-Tricks - The CSS Box Model
  2. [ ARTICLE TITLE ] - [ NAME OF SITE ]
    Places more importance on the subject, but reminds of the source
    Ex. The CSS Box Model - CSS-Tricks
  3. [ ARTICLE TITLE ]
    Short and to the point
    Ex. The CSS Box Model
  4. [ NAME OF SITE ] - Heirarchy - [ ARTICLE TITLE ]
    Indicative of structure
    CSS-Tricks - Blog - The CSS Box Model
  5. [ ARTICLE TITLE ] - Short Summary
    More informative
    The CSS Box Model - Explained through examples and diagrams
  6. Other? Specialty? (e.g. include the date)

Separators

  1. Space
    Ex. CSS-Tricks The CSS Box Model
  2. Bullet •
    Ex. CSS-Tricks • The CSS Box Model
  3. Hypen -
    Ex. CSS-Tricks - The CSS Box Model
  4. En Dash –
    Ex. CSS-Tricks The CSS Box Model
  5. Em Dash —
    Ex. CSS-Tricks The CSS Box Model
  6. Single Arrow >
    Ex. CSS-Tricks > The CSS Box Model
  7. Double Arrows »
    Ex. CSS-Tricks » The CSS Box Model
  8. Tilde ~
    Ex. CSS-Tricks ~ The CSS Box Model
  9. Vertical Bar |
    Ex. CSS-Tricks | The CSS Box Model
  10. Period .
    Ex. CSS-Tricks . The CSS Box Model
  11. Slash /
    Ex. CSS-Tricks / The CSS Box Model
  12. Other? Combo?

Considerations

  • Are there SEO benefits to any particular method over another?
  • Local bookmarking - will the page be easy to find in a sea of bookmarks?
  • Social bookmarking - does the title represent itself well publicly?
  • Does the title help the user (e.g. navigational grounding)?
  • Are titles presented consistently across the whole site?
  • Are there emerging standards that should be followed?

What I Do

I'm afraid I don't have any strong opinions on all of this, but I do find it interesting. On this site, I choose #1 for first-level navigation, #3 for second-level navigation, and typically I use #9 the vertical bar for separators. I'd love to hear everyone's opinions!