Most people see Page Titles as either an ancient practice or an SEO valued content only. But what about the user? How does the USER see the page title?
Social Networks
Page Titles have started to play a pivotal role in social networks, news feeds, Google Reader, and more to show new posts, new updates, new messages, and to give the user a push-style notification within the browser. The page title shows the user what’s happening with that site, and what it is all about. Each network has its own way of notifying the user but most simply add a number in parentheses to signify new comments/posts ie. “(4) Facebook” and some even flash their titles to get your attention.
Browser Tabs
With the advent of tabs within a browser, the role of the page titles snowballed ever higher to provide the user with information about site in such a way as to distinguish itself from the ten other tabs open. While for SEO purposes, the title has to be under about 70 characters to show up correctly in a search engine, for the purposes of displaying the site’s worth and contrast to the other tabbed site, the first 20-30 characters have to “WOW” the user to keeping your tab on and referring back to it. A favicon can add a distinguishing and important element but a favicon will only tell the user “generally” what tab they’re on. Frequently (at least for me), I open several tabs on the same exact site and get lost in them.
Common Page Title Structure
The common “page title” structure recommended for SEO and for most websites is:
“Site Name | Site SubTitle | Site Post Title” – AntJanus | web development – design – writing | Page Titles – SEO vs UX
or
“Site Name | Site Post Title” – AntJanus | Page Titles – SEO vs UX
The Page Title SEO Structure
I saw this standard wane away in the past year or so and websites use the Site Name at the end of the page title, which is fine; however, I found a completely different and horrid trend come up: keyword page titles. While it’s great for SEO and when you’re searching for something, it’s honestly the worst thing possible for a user. Here’s an example:
Hubspot.com, the leading inbound marketing CMS and tracking provider is an expert at SEO; however, the page titles become useless and even misleading on their site.
- The main page has a title of “Hubspot Inbound Marketing…” which is okay, that’s who they are but the “about” page has this title “Internet Marketing Company” <- that tells me nothing about where I’m at. I could be looking at their mission statement, at anything. With a lot of tabs open, I’d only see “Internet Market” which would make me think I’m at their marketplace.
- Their software page shows up as “Internet Marketing Software” which again, shortens to “Internet Market” worse yet, their pricing page title is “Inbound Marketing Software” and case studies go back to “Internet Marketing Software”. No, that’s not a duplicate, it follows with a more thorough description invisible in a regular tab-based browser
- The only usable page title is their free trial: “30-Day Free Trial of Hubspo..”. I know their icon, I’ve been going through their site, I know exactly what tab that is.
Site vs Page Importance in Page Titles
The problem with this is that most users don’t care what site they’re on when reading post articles. Am I on smashwords? Am I on a random site? And when you have ten tabs from the same site open, what happens then? This:
(antjanus |… ) (antjanus |…) (antjanus |…) ( antjanu…)
Get on smashingmagazine and all you’ll see is “Smashing…” or when you click on an article, you’ll see something like “Adventures..”, “An introduction…”. The article title priority over site priority is a big deal but we could do better with article titles. How about instead of “Adventures In The Third Di…” (which is all I’ll ever see of their page title) they get straight to the point? -> “CSS 3D Transform..” which even contracted will become “CSS 3D” a good indicator as to what I was reading at the point.
What the new convention SHOULD be is article name and THEN site name, like so:
“Post Title | Site Title” – About Page Titles | AntJanus
So that pulling up ten tabs from just my own website will look like this:
(About Page… )(CSS Hove…)(Setting u….)(basic hea…)
How some of my pages are structured currently:
(Projects {A)(Weblog{A)(Simply Design)
Even though it may seem nonsensical, the titles will jog the user’s memory as to what they have open. “I want to read that article on page titles”, and they click on “About Page”.
To further identify articles from YOUR page, you’ll need to add a favicon (which will also help distinguish your site if it’s pinned down as an app).
WordPress:
In wordpress, this title structure is possible by adding a short code snippet between the “title” tags in your header.php file:
<?php wp_title(); ?>
Using an SEO plugin, I can achieve the following on top of all that:
- A separate page title and separate page name ie. page title can be “CSS3 animation” while the article name can be “An Introduction to CSS3 Animations”.
- I can still include Keywords and add some SEO value by placing my “proper” page title after the UX title like so: “CSS3 Animation | CSS3 advanced technique tutorial | {AntJanus} Development Blog”
How is THAT for UX and SEO combined?
Both are IMPORTANT!
I’ve seen a lot of “content-first” and “usability-first” articles online. Well, the thing is, you can have the nicest design in the world, the easiest website to use, and the most descriptive page titles but it’ll get you nowhere. You can have an eloquently written article about page titles but what happens when no one sees it?
On the other hand, what happens when SEO keywords are stuffed everywhere to the point where you’ve no idea what you’re reading, no idea what page you’re on, and can’t understand anything on a site?
Both will make you fail. It’s good to have a balance or reach compromises. Look at the title of this page! At the time of writing it’s: “Page Title UX vs SEO | Page Title Usability vs Page Title SEO” which shortens to “Page Title U…” on my computer. I think that’s good enough. Image may be NSFW.
Clik here to view.