Choosing the Best Title Separators

Published Wednesday, July 30, 2008 @ 10:01 am • 15 Responses

[ ~{*}~ ] While writing my previous article on creating the perfect WordPress title tags, I deliberately avoided discussing the use of separators in titles. I feel that the topic is worthy of its own article, enabling a more thorough exploration of the details. Title separators are the symbols, punctuation, and other characters used to distinguish between various parts of the page title. For example, a title may include the blog name, post title and blog description, with each element separated by a hyphen. Any Google search will reveal that some of the most commonly used title separators include the hyphen, the dash, and angled quotes. Many others are used as well, and we will explore some of them in this article.

To get a feel for how other sites use title separators, let’s look at the titles of a few “high-profile” web pages:

Quite a variety, certainly, but you have to dig through the search results to see it. It seems that a majority of websites use the simple hyphen for multi-part titles. This is fine for titles with two components, such as those shown above, however for three or more components, hyphenated titles appear a bit homogeneous and slightly tedious. To see this, have a look at these imaginary examples:

  • Mystery Blog - Pancakes, Chickens, and Vodka - Behind the Scenes - Archives
  • Am I too old to drive a car? - Deep thoughts for geezers - Geezer Blog - Archives
  • How to Rank for Clam Store in Google - SEO God - Manny McMillionz - Articles

These are ridiculous examples, yes, but they certainly make the point: hyphens are quickly over-used, especially when also appearing within title words and phrases. Even worse, many browsers add an additional hyphen between the page title and the name of the browser:

Mystery Blog - Pancakes, Chickens, and Vodka - Behind the Scenes - Archives - Mozilla Firefox

Yikes! Pretty scary stuff. The purpose of each of these title elements may not be clear to the average user. To improve the structural and semantic clarity of such titles, we might inject an alternate character or two. Instead of using hyphens after every title element, we could use a more distinctive character such as the bullet ( • ) or vertical bar ( | ) to distinguish the main title of the article from the other title elements. Then, after dropping unnecessary phrases, employing additional separators further enhances visual interest and title structure. Here is one way of sharpening the appearance of the previous examples:

  • Pancakes, Chickens, and Vodka — Behind the Scenes « Mystery Blog Archives
  • Am I too old to drive a car? • Deep thoughts for geezers • Geezer Blog Archives
  • How to Rank for Clam Store in Google | SEO God : Manny McMillionz

The possibilities are endless. When used intelligently, separators bring structure and clarity to your page titles. The key is to choose characters that facilitate usability while enhancing the aesthetic quality of your titles. From an SEO perspective, the sequence in which title elements appears is an important ranking factor. Placing your post title information before other title elements increases page relevance in the search engines. Then, eliminating unnecessary elements such as page type and blog tagline improves readability and keeps the focus on the essential:

  • Dark Knight Review – More Popcorn Please
  • Another WordPress Update « Jumping for Joy
  • Presidential Politics | World First News

Of course, with many blogging platforms, unique titles may be generated for different page types. With WordPress, for example, different titles may be created for each of the following page types:

  • Home page
  • Tag archives
  • Search results
  • 404 error pages
  • Individual pages and single posts
  • Archived post, date, category, and author pages

While the home page typically displays the blog name only, you may also want to include your site’s description:

Dropnine ~ Technology Blog

For tag archives and search results, title elements can be separated by more than single characters:

  • Dropnine's Tag Archive for "Hamburglar"
  • Search for "Chimpanzees" at Dropnine

Here, we are using actual words to join the different parts of the title. This may not work for all page types, but for certain pages such as the 404 error page, it seems worthwhile:

The Requested Resource was Not Found at Dropnine

Nice, clean and simple. Here at Perishable Press, I am a big fan of bullets. I have been serving bullets, so to speak, for the past year or so, and just love how it makes my page titles “pop” in the search engine results:

Google search results for 'Perishable'

Title bullets bring a sense of solidity and permanence to the title. As you scan through a list of search results, title text appears mostly the same, leaving separators and other decorative characters to distinguish titles and grab attention. Decorative characters, when used properly, add a touch of flair and originality to your titles. I have seen many good (and bad) examples of this:

  • * Design Netwerk *
  • $$$ T "money" Dollaz $$$
  • ^ ^Maddie^ ^'s Blog on Shine

These results don’t always make it to the top of the pile, but when they appear, it is hard to ignore them. These examples also demonstrate the effectiveness of underused and underrated characters. There are many visually interesting characters available from the keyboard; why the hyphen remains so popular is a bit of a mystery. For example, consider the humble bracket. Square brackets are extremely practical and serve well in many title configurations, for example:

  • Toilet Huffing [Perishable Press]
  • Monzilla Media [Archive] • Perishable Press
  • Tag Archive for [gibbonz] • Perishable Press
  • Search Results for [marz] • Perishable Press

..and so on. Again, the point of this exercise is to get creative with your title separators, increase the number of possibilities, and optimize your page titles for visual prominence in search-engine results. So, before closing this semi-casual stroll through the fascinating land of title separators, I would like to inspire you with a few ideas for separating and embellishing your titles:

  • The Post Title +++ Blog Name
  • The Post Title *** Blog Name
  • The Post Title ::: Blog Name
  • The Post Title ||| Blog Name
  • The Post Title ___ Blog Name
  • The Post Title $$$ Blog Name
  • The Post Title /// Blog Name
  • The Post Title <<< Blog Name
  • The Post Title <-- Blog Name
  • The Post Title <= Blog Name
  • The Post Title <> Blog Name
  • The Post Title at Blog Name
  • The Post Title @ Blog Name
  • The Post Title ~ Blog Name
  • The Post Title • Blog Name
  • The Post Title [Blog Name]

..ad nauseam! Hopefully, this article gets you thinking about the many possibilities for configuring and displaying your page titles. Bottom line: an easy way to sharpen your titles and stand out from the crowd involves using unique characters and intelligent separators to bring structure and clarity to your titles.

..and I’m out! (:!Thanks for reading!:)


Dialogue

15 Responses Jump to comment form

1Geert

July 30, 2008 at 11:57 am

Details. But, yes, it matters. Nice post.

I guess another related discussion could be about where you place the name of the site: in front or at the end of the title?

2Louis

July 30, 2008 at 3:41 pm

Some time ago I tried the bullet point as you do here at PP, but I felt later that it was not what I wanted. I then went back to the hyphen.

Oh, when you list some inspirationnal examples, why not go crazy and link to a ASCII characters collection? They might by some really great stuff there :p

Note: I vote the have the “Notify me of follow-up comments via email” checkbox checked by default!

3Mike

July 30, 2008 at 5:12 pm

I like some of the title ideas you’ve thrown out there. I’ve been a bullet man myself for a while, but I’m interested in trying the “Post Title @ Blog Title” for single pages.

4Aaron

July 31, 2008 at 8:05 am

Great post Jeff.. It inspired me to switch from using | to using the bullets as separators. It really stands out when you look at the title.. I’m surprised I didn’t think of that before.. I guess I thought special characters were not allowed or indexed.

5traveler

August 3, 2008 at 3:39 am

Hmm, after reading this I think it’s definitely time to rethink headers on my blogs. The dot is great, but how about other ascii entries such as ÷ ø ‡ - they should make some nice seperators as well, what do you think?

6Jeff Starr

August 3, 2008 at 8:19 am

@Geert: that is a good question. According to my reading, I am under the impression that, in general, the title of your post (page, whatever) is more likely to prove relevant in the search engines than is the name of your blog. Given that, it seems logical to place the blog name after the post title.

@Louis: That is an excellent idea! There are so many great characters to choose from, why limit ourselves to just a few! Also, since you are the only person to cast a vote concerning the default option for the “Subscribe to Comments”s feature, the choice is all yours! I don’t know why I haven’t thought of doing that myself, but nonetheless, the change has been made — the Subscribe box is now checked by default. It will be interesting to see the effect ;)

7Jeff Starr

August 3, 2008 at 8:29 am

@Aaron: An excellent choice, if I do say so myself! ;) Bullets are definitely allowed and indexed by the search engines, so no worries :)

@traveler: Yes, as Louis points out, there are many great ascii characters that would improve and enhance your titles. I especially like the ø and characters. Very nice! One thing that I should mention here is that it is important to specify the proper character set (utf-8, ISO 8859-1, etc.) before the title element, regardless of which characters you decide to use.

8Louis

August 4, 2008 at 4:53 am

Thanks for the checkbox Jeff :D

Quick note concerning what you say just above this comment, that “it is important to specify the proper character set (utf-8, ISO 8859-1, etc.) before the title element“.

Are you sure that the position of the meta within the head element has any influence. My understanding of the browsers mechanisms is that the page starts rendering only after the head has entirely been loaded. This implies that the order is not important, like it isn’t with CSS — because the CSS is not interpreted until the file is all loaded.

What do you think about it ?

9Jeff Starr

August 4, 2008 at 3:28 pm

You may be correct about this — I was too lazy to research it myself. I mentioned it for three reasons. First, most of the live (X)HTML markup that I have seen have placed the content-type meta tag directly before the title tag. Most of the time, it seems to have been placed in that location quite deliberately. So, given this experience, as well a the fact the contents of the title tag must also be rendered by the browser, I have adopted the practice of specifying the charset immediately after the head element and just before the title element. Finally, I also recall reading about this somewhere, but it didn’t occur to me to bother bookmarking the page. What you say makes logical sense, of course; I guess one of us needs to take the time to Google it! ;)

10Louis

August 5, 2008 at 8:46 am

After some researches, I think that you are right.

This W3C recommendation explains that:

The META declaration must only be used when the character encoding is organized such that ASCII-valued bytes stand for ASCII characters (at least until the META element is parsed). META declarations should appear as early as possible in the HEAD element.

Therefore it seems that the meta elements are parsed on-the-fly. This is a pretty tricky thing to know.

Glad you pushed me to figure it out :)

11Jeff Starr

August 5, 2008 at 3:06 pm

Thanks Louis! :)

12Kuntal

September 3, 2008 at 11:43 pm

Well nice post,, !! :)

I’ve rarely seen any page ranking with competitive keywords in the Google SERPs,, which are having special symbols in their Title Tags..!!!

Don’t you feel that ?? :D

And if some page(using special symbol) is ranking then the site is too old & have grown a big trust factor which lets the title tag ignored,,(in this case even if u dont use those words in title tag you will still rank) ,,

So in my opinion ,,(if you also consider SERPs position using special symbols in title you can use special symbols in your Title tag) any new websites or new blogs should not use special characters in the Titles.

‘m i right jeff ???

13Jeff Starr

September 6, 2008 at 4:03 pm

Wow, Kuntal, that is quite a hypothesis you have there. Although I can neither confirm nor deny such a theory, I tend to agree with you that “special” characters in the title tag are not as prevalent in the search-engine results as are some of the more common separators such as hyphens and dashes. Of course, such observations may point more at the fact that people just aren’t using some of the more unique characters in their titles. Nonetheless, it is an interesting idea that needs to be tested before any definitive conclusions may be made.

14Kuntal

September 22, 2008 at 5:27 am

Hi, Jeff,
Thanx..! :) I’m sure you will be doing some research on it .. lolz, , yeah you might b right with your point that ‘people just aren’t using some of the more unique characters’, ,, it might be the case that my observation was based on several common words and highly competitive ones, where there are tons of web-pages fully optimized for SERPs to ram such beautiful, less optimized titles ?

15Jeff Starr

September 24, 2008 at 3:14 pm

Ha! Surely there must be some SEOs out there that are concerned with beautiful titles and creative title separators..? Frankly, I am not as concerned with SEO as I am with creating sites and writing articles. But you’re right, I probably won’t take the time to do the research/testing on this one! ;)

Subscribe to comments on this post


Share your thoughts..

TopRead official comment policy

Contact Perishable Press

  • Contact Jeff via form

Search Perishable Press

About Perishable Press

Perishable Press is the virtual playground of Jeff Starr — visionary, founder and lead developer of Monzilla Media, a small web and graphic design company in the lush desert oasis of Moses Lake, Washington. Perishable Press features articles and tutorials on many aspects of digital design..

Read more..

Perishable on Twitter

Google tells users to drop support for IE6! @ http://www.tgdaily.com/content/view/40785/140/

Perishable on Tumblr

WordPress Tip for Multiple Themes

Sunday, 4 January 2009, 5:16 pm

If your site makes available multiple themes for users to choose from, remember to include the JavaScript (or any other required code) for any statistical applications that you might be using, such as Mint, Google Analytics, and so forth. I am not sure about the various WordPress statistics plugins, but they may need to be included as well. A good way to check if your stats plugin is tracking data across all themes is to either visit a few pages that you know others aren’t hitting, or else activate each of the alternate themes and check the source code of each one for the required code.

Earlier today, I realized that only several of my most recent themes included the required JavaScript for Mint and Google Analytics. I am now in the process of editing each of the 18 themes available for users at Perishable Press. Haven’t decided on whether or not both statistics apps are needed for all themes, but I will certainly be using at least one of them to keep an eye on everything.

Insane Christmas

Monday, 22 December 2008, 9:47 pm

For as long as I can remember, Christmas has always been a relatively peaceful affair. Sure there’s the usual holiday stress — traffic, shopping, presents, relatives, and all that goes with the preparation of a traditional celebration, but when it’s all said and done, you get to relax and enjoy the peace and harmony of gathering together and basking in the reason for the season: the birth of Christ.

This year, however, the stress factor has been kicked up a few notches, making for a rather insane Christmas if I do say so myself. In addition to the usual holiday chaos, we are currently purchasing a brand new home, and quickly realizing the incredible amount of work involved in the process. If you’ve ever bought a newly built home, you know exactly what I am talking about here.

Plus, as if all the paperwork, inspections, insurance, costs, and anxious anticipation weren’t enough to confound the usual holiday stress, we are also packing up everything, dealing with kids, working full-time jobs, and — beginning on Christmas Eve — moving into our new house.

It certainly is all a great joy and blessing to have such amazing things going on, but combined with the work that I do on the Web — blogging, designing, projects, helping people, and so on — it really becomes all too much rather quickly. We are doing are best to get through everything with our sanity intact, but I have to admit that this is the most insane Christmas I have ever experienced.

New (4G) Blacklist Now in Beta

Monday, 22 December 2008, 9:27 pm

Just a quick note to anyone interested in securing their websites against malicious activity, spam, and other nonsense. Several months after releasing my 3G Blacklist, I have finally begun work on the next incarnation of the blacklist: the 4G Firewall!

The first part of the blacklist is now ready for testing, and I plan on setting it up on Perishable Press within the next few days. While testing on my own site, I thought it would beneficial to also invite a few “beta” testers to run the code on their own site(s) as well.

So, if you have a site that receives its share of malicious attacks, and cracker exploits, drop me a line via the contact form at Perishable Press and I will send you the initial block of HTAccess directives. This version of the Blacklist is looking better than ever, and I look forward to releasing the complete version to the public early in 2009.

Thanks for the Free Traffic and Link Juice

Sunday, 7 December 2008, 1:26 pm

Just wanted to thank the fine folks at fafich.ufmg.br for all the free traffic and link juice. Thanks to their misapplication of my comprehensive canonicalization code, every non-canonical version of their 21,700 indexed pages points directly to my site, Perishable Press. This means that every one of their permalink URLs that is mistyped, lacks the “www” prefix, or contains the superfluous “index.php” file name is directed via permanent redirect directly to the home page of my site.

I have tried contacting the site owner(s) about this situation, but it has been over a week and I have yet to hear anything back. Hopefully, they will take notice soon and correct the issue by properly configuring their htaccess file, but in the meantime, I certainly don’t mind the extra link juice and free traffic! :)

No Plugin Needed for Feed Delay

Monday, 24 November 2008, 10:01 am

I recently saw a WordPress plugin that was designed to delay the publication of your WordPress feed by any specified time interval. While it is a good idea to carefully proofread your content before posting it, a plugin certainly is not required to do so.

As savvy WordPress users already know, WordPress has a built-in post-preview feature that enables authors to view their unpublished content as a published post. This enables authors to do any amount of proofreading and browser checking until they are satisfied with the results.

To do this, simply write your post as usual, and then click on the “Preview this post” button on the right-hand side of the screen. In older versions of WordPress (less than 2.5, I think), you actually need to save (without publishing!) the post first and then re-open it as if to continue editing. You will then see a “Preview »” link sort of hidden (due to poor CSS design) in the upper-right corner near the edit post field. Right-click on that link to open in new tab and you are good to go.

No extra plugin needed! :)

Read more on Tumblr..

Subscribe to Comments Recent Dialogue

  • Jeff Starr: Well said, Mark! Here is some news that I find ...
  • Jeff Starr: Thank you all for the great feedback! I wrote this article as a way to purge some of my thoughts on Twitter, but now see that some of...
  • Jeff Starr: Thank you so much for the thoughtful feedback, Adrian. It has been a good year indeed, and I certainly hope that 2009 brings many ble...
  • Jeff Starr: Hi heywho, glad to hear you are doing well! ;) I wish I could join in the festivities.. it has been so long that I almost have forgot...
  • Rob Barrett: Thanks for posting about the Stealth Publish plugin -- just what I needed for my site. Works perfectly!...
  • Jeff Starr: Hi Chiwan, I got your email and have sent some information that may help you with this. Cheers, Jeff...
  • Chiwan: Hi. This is cool. So I can I replace the clock that comes with your Apathy theme with this clock? If that's not possible, how do ...
  • Brass Engraved: Thankyou very much for this, worked like a dream!...
  • Patrix: I'm using FeedBurner and the Feedsmith plugin for my filter blog, DesiPundit. I found your post via the WordPress page for RSS feeds ...
  • teddY: @Jessi Hance: Sorry to hear about your experience with Twitter spammers/flamers. I was once a victim of flamers and it sucks that peo...

Read more recent comments..

Attention: Do NOT follow this link!