Grow your CSS skills. Land your dream job.

New Poll: Site Title Structure

Published by Chris Coyier

The new poll is up in the sidebar of the site. This time it's about the structure of page titles. Literally, the <title> tag in the head of a site that gives the browser window/tab its title. I'm just asking for your "favorite", as in, personal preference. Take that how you will, we can discuss the reasonings in the comments and in the poll wrap-up post. The official question:

Of these choices, what is your favorite page title structure for blog article in a specific category?

So there are three bits of relevant information of this page that we'll be dealing with:

  • Article title
  • Category
  • Site name

The poll options are various configurations of those three things.

Maybe we can do a follow-up poll on favorite separators. I like the vertical bar. Wufoo uses the &middot; a lot which I also like. I dislike the little arrows. Tangent alert.

Comments

  1. Permalink to comment#

    my separator of choice is the Paamayim Nekudotayim.

  2. I think that [Article Title] – [Site Name] is generally going to be more useful than [Article Title] – [Category] – [Site Name], but not on every site; an article’s title should give an indication of what it’s about, so category may be rendered unnecessary. Then again, there are different types of “categories” that could be being considered; it could be “I blog about personal stuff and about programming stuff, cleanly separate the two”, or it could be that several people blog and the “category” is actually who wrote it. So I think it’s not quite fair to differentiate between the two without some more specific information and a hypothetical case. Or even a particular live case.

    An interesting change in StackOverflow from a few months ago puts tags which aren’t mentioned in the question title at the start of the <title>. An interesting choice, I think. That becomes [Filtered category -] [Article Title] – [Site Name], where [Filtered category -] is the list of tags minus ones that appear in the question title already, space separated and with a separator afterwards if there are any.

    • I’d have to agree with “that depends” you described. Generally I rather use [Site Name] – [Article Title]. Thats my personal preference – when I have a lot of tabs open in browser, coming from a lot of sites, I find it easier to navigate them looking at the site name, rather than article name. But my second choice would be [Article Title] – [Site Name]. Again, it all depends on what we want to achieve.

      I actually start to miss regular title bars in browsers, tabs are too short to fit any kind of reasonable title in them and it still is a nice navigational feature. Quick glance at well titled, well – titlebar, let me find out exactly where am I without having to scan the page.

    • I agree with @lxolite. Actually, a different window needs it in that order even more than a tab, because a tab can usually be identified by it’s favicon. While a window on the other hand has only the name, and it will probably be cut off.

    • @Chris but yeah, the category isn’t really too important to have in the title.

    • egiova
      Permalink to comment#

      Yeap, I’m in this family Article+Site. I think it’s a small place to put too much things, almost everybody have always more than one tab opened, and space is even smaller. More information is confusing. So my bet is to inform about What you are reading and Where.

    • Permalink to comment#

      StackOverflow made that change to get huge SEO benefits.

  3. Permalink to comment#

    My separator is usually | or •, BUt i like to try sometimes a “+” sign or a diamonds, or arrows, whatever fits the theme.

    • I prefer m dashes (—), colons (:), and sometimes bullets (•) as my separators. Pipes (|) are nice though.
      I know it’s probably more search engine friendly to put the article title first and then the site name, but it makes more sense to me for human readability to start at the top of the hierarchy by identifying the site first. Even though I know it would help SEO the other way around, especially because Google cuts off the last part of long titles in search results, I still write my pages with the site name first.. It feels more up front and professional to me for some reason.

    • I’ve never even though about using anything but | before. I think a • would look much nicer. hmm…

    • Permalink to comment#

      The &middot; ( · ) is quite nice too, not as chunky as the bullet.

  4. Chris, I format my <title&rt; tag just like you do.

    For inner pages,
    Page or Post Title | Site Name

    For the homepage,
    Site Name | Slogan

  5. Permalink to comment#

    I am kinda at odds with it. In the title bar I am rather fond of [article name] | [site name], however, lately I have been moving towards just [article name] everywhere but on the front page for the sole reason that I find it really tacky when a user shares the post on a social network. I hate how the site name and article name end up being too long when put in paragraph format and become obnoxious looking.

    If it is a short site name, no big deal, but longer ones can be brutal, especially when a long article title comes along.

    • Social media sharing is an excellent consideration! I would have said [article name] | [site name] until I read your comment. Now I’ll have to think twice about it.

  6. Andrew Zen
    Permalink to comment#

    I think it depends.

    But for articles, it makes sense that it should be [Article title] – [Site name]. Because when you’re searching for an article you care first what the article is before you care what site it’s from. If you then care about what site it’s from, then you can narrow your search to that site or use the search on their site, in which case [Site name] matters even less.

    One thing I wasn’t aware of until just now, was that Safari 5.1 rewrites the tab titles depending on what the titles on all the tabs are.

    E.g. depending on how many tabs you’ve got open and how wide those tabs are, if you start on this page, http://en.wikipedia.org/wiki/Star_Wars_(disambiguation), and then open Episode IV, “Star Wars” will disappear; and then if you also open Episode V in another new tab, “Episode” will disappear too.

  7. To me, it depends on the benefits that the user would get out of the tabs. If the site’s name isn’t long, I’ll use site name + article title. If the site’s name IS long, I’ll use article title + site name. Other than these 2, I never use the category. It’s useless, and it doesn’t serve a purpose in the title. Though, if I HAD to use the category, it would either be after or between the article title and site name.

    Think about a newsletter headline. If you saw the category in the headline, how would it actually appeal to your interest?

  8. Permalink to comment#

    When I’m on the web and I have a lot of tabs open, I want to quickly see what the sites offer. I don’t really care where I read it, more important is simply what I read. So in my opinion it makes more sense to have [Article name] – [Site name] though for some cases it might be different.

  9. Connor Crosby
    Permalink to comment#

    I usually have it as [Article Name] | [Site Name]. Then when it comes to the homepage, I have it set to [Site Name] | [Slogan].

  10. I think a lot of people can tell which site they’re browsing on their tabs by the favicon, at least if they’re familiar with the site already, so I don’t see any benefit of putting the site name first in the title in article pages.

  11. Permalink to comment#

    [Article title] – [Site name] has another advantage: when you click the browser’s back button to return to some article, is more easy if you can read the title of that article.

  12. I’m shocked that SEO has not been brought into this discussion as of yet. As a rule of thumb for me when trying to decide the symantic way to handle something like this I go with “what would be best for SEO”. Obviously in order to make those decisions you need to have a good handle on SEO but the title tag is pretty much SEO 101. Also it is important to note that Google uses the title tag as the bold blue link in the search results- so I would think in terms of how you want that to appear. My method is typically Article Name | Site Name. Since you are limited in space if the site name gets cut off you are still in good shape.

  13. My favorite is
    Article title – Site name

  14. Permalink to comment#

    Article title – Site name … I leave category out because the title and site name are too long enough already.

  15. Article title – Site name ……. that’s what I use often

  16. I look at it from more of an SEO perspective. Typically I will do [Article title] – [Category] – [Site Name]. I want the article title first so that it shows first in the Google search result – it is usually the most relevant information in the for people performing searches.

  17. I normally include the site name but not at the start – if you’ve got a favicon then you can see what site the tab is from.

  18. Some guy
    Permalink to comment#

    Article name or a page name – (en dash, the alt+150) site name. It’s better, because you read from left to right, and when many tabs open, you don’t see same title everywhere (as if you use site name first or spam in title).

    Bla-bla – Whatever.com

  19. What I like most is Twitter’s page title structure :

    Twitter / Home
    Twitter / Messages
    Twitter / Resources

    On blogs I’m not sure a site name is needed in the title. I think it’s better off to just have the Title of the article.

  20. Permalink to comment#

    We took a look at how browsers use titles, and most… between bookmarks, truncating tabs, etc. show a little of the beginning and a little of the end (worst-case… best-case, they show the entire thing, so no problem).

    We finally decided on

    [Resource name] – [Application Name] – [Org. name]

    Which works out well with links, bookmarks, emails, etc. Not perfectly, but fairly well. Of course, we have millions of pages, so [Resource Name] may not be appropriate for every case.

  21. Alright, alright, alright, alright. You convinced me. I just changed it on my site to:
    [Article Title] | [Site Name] — [category]
    Happy?

  22. Namdnal Siroj
    Permalink to comment#

    I normally use [Page title] – [Sitename].
    IMO this order is most user friendly in Google results and tabs.

    Separator depends on the site’s design, but my default separator is [ - ] (space-dash-space).
    Semantically, other dashes might be more appropriate, but some clients can’t display them.

  23. Permalink to comment#

    Personal preference is [article title] | [site name] and I think it works better, due to when browsing for buying something like clothes, electronics, etc. Making a group of things you like the look of and narrowing it down the article title being first makes life way easier.

  24. I agree with Ninique people can tell which site they’re browsing on their tabs by the favicon. [article] [site name] apart from home page.

  25. Permalink to comment#

    Site name -> article title mus be. It’s just how the search engines work.

  26. It has to be what is most useful to the real people visiting the website, with search engines getting a consideration second.

    In most cases I think [Article Title] [separator] [Site Name] is going to be most appropriate. I think categories will come in if they have specific meaning to your website, although I think most people add categories for search engines, not for the real visitors.

    It is interesting how tabbed browsers have changed the game for titles, even with a single tab open you now only have around 20% of the space you used to have for a title.

  27. Permalink to comment#

    I think [Article Title] – [Site Name] will be the winner. For long titles i would go only [Article Title] as it makes more sence http://goo.gl/eqHfZ

  28. Stephen Kestle
    Permalink to comment#

    The other day I stumbled across a Q & A site that would trim the first few words off the [Article Title] for the title of the page.

    e.g. if I was asking “How do I change the background color on a web page”, the title would be “change the background colour on a web page”.

    Utterly awesome for a site where you are probably going to end up with more tabs than your browser’s going to show comfortably.

    Now if only I could remember what site it was…

  29. kyle
    Permalink to comment#

    It really depends on the URL whether or not you put the Site Name in the title…if your URL is the same as your Site Name, there wouldn’t be any need to add Site Name to the title….it would be redundant, IMO.

    IF the URL was the same as the Company Name, my preference would be:
    [Article Title]

    If the URL wasn’t the same as the Company Name, my preference would be:
    [Article Name] | [Site Name]

  30. The important thing is making it useful to your site visitors. To me, this means that “Article Title – Site Name” is the best choice. I used to like the site name first, but over time I was swayed to forgo my hubris and reverse it.

    Even if you are thinking in terms of search engines, title-first makes sense. Users tend to quickly scan the results of a search. You want a good title to grab their attention easily, and it can’t do that if it comes after your site name.

    Generally speaking, I don’t think category is useful in the title, unless your site has faceted search, or the user is specifically browsing a category-based archive.

  31. Permalink to comment#

    I use sitename – Article Title. The reason is that most newly created sites don’t have their names quite established, so it’s good to include them on the title for the time being. Once they are big enough, you might want to revise them but I usually leave that up to the client as I install them a plug-in for them to edit their page titles

  32. Permalink to comment#

    I think there are to primary considerations:

    * Usability

    * SEO

    Typically the first few letters are what will show up in the tab title. Typically it’d be more useful for that to be the article title.

    For SEO, you want your target keywords to show up as close as possible to the beginning of the title. Typically that includes your article tags, the category, and the site name.

    So: – – –

    For this page that’d be something like:

    New Poll: Site Title Structure | page structure, usability, seo, html, title | Polls | CSS Tricks – a web design community curated by Chris Coyier | The Ultimate Resource for CSS and Web Design Tips

  33. Shane
    Permalink to comment#

    This one’s a no-brainer: Article+Site

    For SEO reasons alone, you do not want all your links listed with duplicate content at the front (ie, site or category) which would likely hide the important, unique text as links are truncated on search engine results.

    I, personally, don’t have a favorite separator, although I use pipe a lot.

    • Good point. I can also back this up with my own anecdotal experience. I get the best SEO performance out of page titles when I use [postname] | [blogtitle]. Since the [blogtitle] is repeated over and over again, it just seems more logical to put it at the rear of the title. When I’m working with WordPress I do like to use a plugin (All-in-one SEO pack) to tweak the titles. It’s annoying to do so in the title block of a WordPress page. I hope this was a helpful tangent.

  34. I would normally use:

    Article Name | Site Name

    apart from situations where site name matter the most (e.g. more for web applications then I use:

    Site Name – Page Name

    I use the pipe to seperate it from the hierarchy, just like the browser name was included in the end once (though then it was mostly a dash as I remember).

  35. Permalink to comment#

    Echoing some of the comments prior to mine, I chose based on a combination of SEO and usability:

    Article Name | Site Name

    Essentially, I’d go in order of uniqueness, which would also keep the most important keywords at the front of the title tag. Having the article name would be more helpful at the front, since you likely only see the first 30 – 40 characters when using tabbed browsing.

    Including the category (after the article name) wouldn’t be bad, but then you’d easily end up with titles that are way longer than 70 characters (the max shown on Google search result pages). Also, if you’re an established brand (like CSS-Tricks), making the site name visible in SERPs (by staying under the char limit) lends credibility and may influence searchers to click through.

  36. [Article Title] – [Site Name] would be the best according to me

  37. Permalink to comment#

    I use [Article Title]. Or, in my case, [Offer Title]. And the url is always the title hyphenated [in lowercase].

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".