First-level Navigation
Or, “the homepage”. Here are some possibilities:
- [ NAME OF SITE ]
Short and to the point
Ex. CSS-Tricks - [ NAME OF SITE ] – Short Tagline
Taking the opportunity to explain the site
Ex. CSS-Tricks – A Web Design Community - [ NAME OF SITE ] – Keywords
Site titles are SEO Opportunities
Ex. CSS-Tricks – Web Design, jQuery, Downloads, Screencasts, Forums - Other?
Second-level Navigation
This gets a little more interesting I think.
- [ NAME OF SITE ] – [ ARTICLE TITLE ]
Places more importance on the source
Ex. CSS-Tricks – The CSS Box Model - [ ARTICLE TITLE ] – [ NAME OF SITE ]
Places more importance on the subject, but reminds of the source
Ex. The CSS Box Model – CSS-Tricks - [ ARTICLE TITLE ]
Short and to the point
Ex. The CSS Box Model - [ NAME OF SITE ] – Heirarchy – [ ARTICLE TITLE ]
Indicative of structure
CSS-Tricks – Blog – The CSS Box Model - [ ARTICLE TITLE ] – Short Summary
More informative
The CSS Box Model – Explained through examples and diagrams - Other? Specialty? (e.g. include the date)
Separators
- Space
Ex. CSS-Tricks The CSS Box Model - Bullet •
Ex. CSS-Tricks • The CSS Box Model - Hypen –
Ex. CSS-Tricks – The CSS Box Model - En Dash –
Ex. CSS-Tricks The CSS Box Model - Em Dash —
Ex. CSS-Tricks The CSS Box Model - Single Arrow >
Ex. CSS-Tricks > The CSS Box Model - Double Arrows »
Ex. CSS-Tricks » The CSS Box Model - Tilde ~
Ex. CSS-Tricks ~ The CSS Box Model - Vertical Bar |
Ex. CSS-Tricks | The CSS Box Model - Period .
Ex. CSS-Tricks . The CSS Box Model - Slash /
Ex. CSS-Tricks / The CSS Box Model - 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!
Whilst the tag is useful for SEO purposes, putting keywords in there just looks plain ugly from an enduser POV. Is there any indication of how keywords in this tag are judged in comparison to the tag?
I prefer for first level : Site Name – Catchprhase / Short Description
then second level : Site Name – Article Title
Simple and established.
I prefer
[page title] – [company name]
ex What’s The Best Way To Handle Page Titles? – CSS Tricks.com
In the early stages of page ranking (at least with Google) there is a direct relationship between the relevance of the page title and search engine ranking. I tweaked my page titles various times and found that it would drop off the search engine radar without the proper keywords. Until you build up authority it’s important to use some keywords.
I like to use #3 for first-level navigation, #2 for second-level navigation and #9 for separators.
I would have to agree though, from an end user point of view, too many keywords in the page title is ugly and uninviting.
The one strong opinion I have on this is that the name of the page be before the site name. If you have a long company name and this proceeds your page names; a user when looking through his bookmarks won’t know the difference between your pages.
Totally agreed. For SEO purposes, having a description of the content (which is what a title is, after all) BEFORE the company name is helpful. Plus from an end user perspective, it’s more helpful to be able to bookmark and see the relevant page title before what site is offering the content.
I use [page title] | [company name] usually, I think it’s the easiest!
#1 and reverse-#4 ( [ ARTICLE TITLE ] – Hierarchy – [ NAME OF SITE ]) for me most of the time – it puts prominence on the site brand on all pages for search purposes, but makes it easy to find a specific article in a search history.
And is more usable when the back button of the browser is used :) Anyway I prefer only ARTICLE TITLE – SITE TITLE.
forgot to say that I prefer :: as a seperator – but I also use –
It should always be [keywords] [page title] [company name] having [company name] before keywords has an adverse effect on targeting keywords in SEO
My standard setup:
#2 – #2 – #9
@Lynde, How about including lots of keywords in the title and then through javascript set the title to something more human-readable? ;) I wouldn’t personally do this, but it’s probably beneficial if you say it is
#3, #2 (actually article title + full #3), #9.
Though it’s definitely something that I’m rethinking at the moment. I’m slowly working on an overall and significant redesign of my site from the ground up, and this is one of the many considerations to take into account. I think probably something along the lines of #2, #2, #9 is most likely.
Hey Chris,
read somewhere not so long ago that search engines digest through first 60 characters of the title with much more easy compared to loooong yet descriptive ones. Since working with WordPress I have adopted #2 for the “landing” page and #2 for second level and either #9 or » (yep, the other way) for anything else. Using Webmaster Tools (by the big G) the count of indexed pages has rocketed up and it doesn’t flag up pages with duplicate titles anymore.
Found the article: http://tinyurl.com/nvff77.
Restructuring my existing projects now, all the new clients since the discovery benefit from the new title scheme… :)
There are some useful points from an SEO perspective in Google’s recently released SEO Starter Guide (www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf ).
My experience with working with SEO companies has been that 1 is good for top-level navigation, number 4 (or less preferably number 2) for any lower navigation, and that a hypen is the optimal separator.
I prefer to prefix the site name, rather then appending to the end (all pages will stay with eachother in bookmarks and history).
At the same time… these days people have more and more tabs, and most browser cut off the end of the title (except for Safari), which would be a good argument for appending the title to the end.
First #1, Second #1, Third #7
Site » Title
I hadn’t thought of the fact that putting the site name first keeps all the local bookmarks together… although I guess that would only be the case if they were sorted alphabetically which isn’t the default in most cases.
I’ve had the best luck with “FREE CELEBRITY SEX VIDEOS – WATCH ONLINE NOW!!!!”
Really? No way?
Good ‘ol spam
One of the factors I always keep in mind is that the title tag will become the big blue link in a Google listing. When targeting very specific items (a product name or person’s name, for instance) the wording of the title tag will be competing with those of other pages. Look at your search competition and try to figure out what would make your title/link more visible and clickable. I almost always end up with [article title] – [site name] with the articles very carefully named. Don’t even get me started on the description tag!
that’s a very good point – and one that is easily overlooked when defining page titles
Personally, I like [article or section title] | [site name] for non-home pages. And [site name ] | [Tagline] for home
Just my personal preference, but I’ve always done “Site Name | Article Title”. I can understand why you might want to put the article name first, but that seems illogical to me, since the site owns the article and not the other way around.
I also prefer the vertical bar/pipe for the separator, since it’s easy to type but it looks professional.
I do like the double arrows though…how do you type that? :-P
Because the page is about the topic first, brand second. Same sorta concept where people put their logos in h1 tags. Basically that means every page is about the “logo” first and the topic second.
With Google SERPS, you want your keywords at the front.
Have to watch the » used in sites. Each time you use one and a user with a screen reader comes to your site, they hear “Right Double Angle Bracket” for each instance of this character. Ultimately, it depends on what you expect your audience to live with as everything’s a delicate balancing act when it comes to how your site looks and works. Lean too heavily on one thing (like SEO) and something else will have to fall lower in priority.
When having many tabs open in the browser, it’s useful to have the page title first. I also think it’s nice to have the site name in the title, to find it easier when browsing history or whatever. That’s the way I do it on my sites, with different separators.
@James: »
Definitely 2. [ ARTICLE TITLE ] – [ NAME OF SITE ]
So that you can see the name of page 1st in your bookmarks, otherwise with long site titles, you don’t even see the name of the specific page in your bookmarks (which is particularly annoying if you mark more than one page of same site). For search engine listings, and the browser window view, it is also a good idea for page title to go first incase the end of it gets cut off.
Vertical separator is better as sometimes hypen included in page titles.
I’m using #1, and second #7! Using the double arrows “»” will make your site stand out from the rest of the Google results. Because it’s not a very common character it will catch the eye of your visitors.
After reading through this, I think this is my favorite format which I think I will implement on my own site.
[ NAME OF SITE ] – Short Tagline
[ ARTICLE TITLE ] – Short Summary
Hypen –
I always put the “sitename” last, I’m a tab guy and how often haven’t you been looking at 4 tabs before finding the youtube video that is running or trying to find that facebook profile your where looking at? I hate when the “sitename” is first and I have a lot of tabs open.
In my opinion the content is the main priority of every single page and should be the thing people see first, both in google and on the actual site, Would you start your h1 tag with “sitename”??
Favicon
Proximity matters, placement matters, character count matters. Keep it semantically proper (i.e. don’t stuff keywords), pay attention to how GOOG displays titles in result pages, and put your brand at the end.
First level, #2 or #3.
Second level, #2.
I can see why people would want to prefix the site name instead. It looks nicer to me, and seems more logical.
From an SEO standpoint, though, I’m of the opinion that having the article/page title first is beneficial. Whether or not it actually helps ranking is one thing. It probably does. But if someone searches for [whatever your article is about] and they see that topic right there in the result title, they’re likely to click. If the article title is prefixed with your sitename, it may not be instantly noticeable, and you may lose a visitor who’s searching for exactly what your article is about.
I use dashes for separators, but Emily H makes a good point — vertical separators makes sense.
To comment on 2nd level navigation, perhaps it was coincidental or depending on something else, but I made a site a few years ago and used method #1, and the second-level pages weren’t doing too well with indexing in Google results. I did some research and switched all of the pages to method #2, and that seemed to make a significant, positive difference.
Overall, I am a #1, #2, #9 -er.
I like #2 for first level (depending on if I can come up with some catchy byline), and #2 for second level. I put the site title there because if someone bookmarks your article, it’s nice to know what site it was from without having to either wait for a hover or look at the link properties.
I also like pipes for the separator. Currently I actually use double pipes on my homepage (Joel G Goodman || new media – design – history) to separate the Site name and tagline. Then second level I use a single pipe (Lifestream | Joel G Goodman).
But for other sites it’s different. On one of my recent projects I used left double arrows («) but kept the same order formatting (you can check it out in my portfolio if you want. It’s called Prodigious). The double arrows seemed to fit a) the overall design and b) the person I built it for better.
#2, #2, #9
I tend to use
page title – site name
page title | site name
or
key phrase i want emphasised | section | site name
I lean towards “[page title] @ [site name]” (sometimes with a date) because when my clients search, they look for their keywords rather than the source. Then I rely on a single, human-friendly H1 with well-placed H2s and H3s.
2,2,9
I believe that » (double arrow) should never be used as a separator: it is the French closing quotation mark, and I believe other countries use it in that way as well. You wouldn’t use a closing quotation mark to separate things, would you?
Chirs
ill use this post to say how this site is helping me in my projects
i want to ty for all u job here.
@mediashake raises an excellent point that I hadn’t really thought about. Standing out in the SERPs is sometimes about more than just keywords.
I tend to do:
[Site Name] | [Headline w/ keywords]
for my site’s homepage, contact info, about us, privacy, etc. and:
[Page Title] | [Site Name]
for the “meat” of the website.
I have been using » for my breadcrumbs like:
Home » Category » Article
but I think I’m going to change that. @Patrick and @George_Walters raise valid concerns with using the symbol that way.
Does anyone have a suggestion of how to better display a breadcrumbs trail?
I think neither of these solutions handles all of the aforementioned issues but imho the following one covers most:
I always try to
– place a favicon: this helps a lot in tabbed browsing and local bookmarking to visually identify your brand. Having 12 tabs opened with the same title “YouTube – …” is kind of confusing.
– 1st level: –
– higher levels: –
Whenever others link to your site, they have a chance to use your well designed pagetitles for their links. Thats especially important if they generate their links automatically: Google, Delicious,…
– use dashes as dividers:
for me, using dashes is more semantic than all the other suggestions. And you can keep the commas and periods in your articles title, when needed
Sorry, that was missing:
– 1st level: “site name” – “short description/claim/…”
– higher levels: “article title” – “name site”
Because tabs can get squished (especially when you have a lot), I put my descriptive bit before the name of my site, because it’s more important for the user experience.
Strings of keywords look ugly, of course, but there’s nothing stopping you from designing a keyword-rich title or description, which also happens to give the site visitor a clear idea of what’s going on.
As for separators, I’ve historically always used the pipe. Lately, though, I’ve realized how bad it looks; use a bullet, if you can. It tends to remind me of a separator without any specific meaning, like a comma or hyphen would have.
The double-arrows also look great, but keep in mind that there’s a directional cue attached to that.
Wow, was way back in 2006 when I wrote about titles. I cite a very useful article by Peter Krantz’ “The Sound of the Accessible Title Text Separator” that people may find interesting.
I’m #1, #2 and #9
[TITLE][SEPARATOR][SITE NAME]
is good for accesability reasons. It’s boring to hear the site name everytime you want to know the page title (suposing the user is using a screen reader).
Things are similar to following windows xp settings like
#1. optimize for best performance.
#2. Optimize for best appearance.
#3 a balance between these two.
So for SEF Titles.
#1 Good looking and fine for human readers
#2 Bad looking for human but good for SEO spiders (keywords)
#3 a balance between this two
so my choice is
1st: #2 [short tagline could be tricky]
2nd: #3 [title could be tricky]
Fine ;)
Just what I needed most, … all alternatives listed for the rat’s eye.
Thx.
Now I finally can decide on that matter considering that I used to type the separators by the lunar orbit, … ’till now :P
Kind regards
Rata
Never have the name of the site before the title
Note: There were a ton of comments, and didn’t have time to read through all of them before making my comment here…
On the index page we (myself too) generally do this:
company name | page title to include keywords
Then, on subsequent pages:
page title to include keywords | company name
You get points in rankings if keywords are closer to the beginning, but at the same time you want someone to be able to find your site in all the links presented to them… hence the “company then page name” patter on the index.
Also, good follow up to this post would be about the keyword and description meta tags. You come across a lot of naysayers in regards to these meta tags, but I tend to disagree with them. You can’t use meta tags as a crutch, but it can be a supporting mechanism to other SEO you’ve done on a site.
#2 #5 #3
My favorite way of doing it is number 2 for first-level navigation where I use a hyphen as a separator and number 2 for second-level navigation where I use the word “by” as a separator. Like so:
First-level: CSS-Tricks – A Web Design Community
Second-level: The CSS Box Model by CSS-Tricks
I think this would be the best option for the homepage:
Web Design, jQuery, Downloads, Screencasts & Forums | CSS-Tricks
Text with Keywords | Name
And for the single post pages, [ ARTICLE TITLE ].
From a SEO perspective:
No need to optimize for your name, unless it’s very generic and competitive. Make sure your title isnt to long, looks bad it its cut in the SERPs.
If your brand name is actually a pretty good keyword to shoot for anyway (like, for instance, CSS Tricks) then putting site name first on your Home page might be the smartest move.
I prefer a topic-first-version. Your brand or Blogname is indexed by a search engine automatically i think, because of the main url. But for SEO-Purposes you still can set your blogline or whatever behind the topic. For examle seperated with a double dash, which has no value for search engines.
I follow what everyone has been echoing – lead with your content title. Depending on the client/requirements I prefer to drop the site name off it altogether, but if need be, it’s appended to the end.
Supposedly, the best SEO benefit is [keywords], but I find that drab and more “designing for search engines, not for users.” I prefer [match the h1 tag that describes the article content].