Central Perk

joi, 20 martie 2014

New Title Tag Guidelines & Preview Tool

Posted: 19 Mar 2014 04:10 PM PDT

Google's recent SERP redesign may not seem like a big deal to the casual observer, but at least one change could have a real impact on SEOs. This post will explore the impact of the redesign on title tags, and define a new, data-driven length limit, but first, a new tool...

Title tag preview tool (2014 edition)

Pardon the reverse order of this post, but we wanted to put the tool first for repeat visitors. Just enter your title and the search query keywords (for highlighting) below to preview your result in the redesign:

Enter Your Full Title Text:

Enter Search Phrase (optional):

I'm really happy for you, and Imma let you finish, but Beyonce has one of the best

www.example.com/example

This is your page description. The font and size of the description has not changed in the latest redesign. Descriptions get cut off after roughly 160 characters ...

Note: Enter keyword phrases as natural queries, without commas. This preview tool only highlights exact-match text (not related concepts) and is only intended as an approximation of actual Google results.

How the redesign impacts titles

Google's redesign increased the font size of result titles, while keeping the overall container the same size. Look at the following search result both before and after the redesign:

The title on the top (old design) has a small amount of room to spare. After the redesign (bottom), it's lost six full characters. The old guidelines no longer apply, and so the rest of this post is an attempt to create a new set of guidelines for title tag length based on data from real SERPs.

It's harder than it sounds

You may be thinking: "Ok, so gimme the magic number!", but unfortunately it's not that easy. While we try to set a reasonable length limit as a rule of thumb, the reality is that Arial (the title font) is proportionally spaced. Put simply, different characters have different widths. For example, the following two titles are both exactly 40 characters long:

As you can see, these two 40-character titles cover a wide range. Let's break down what's going on here...

(1) Narrow letters are narrow

Ok, that's probably obvious, but let's just put it out there. The first title is full of lowercase l's and i's which take up relatively little space. Meanwhile, m's and w's take up quite a bit more space. In this font, three lowercase l's are actually narrower than one lowercase w.

(2) ALL CAPS take up more space

Capital letters are wider than lowercase letters â€" again, not a big surprise. All-caps titles also tend to be hard to read and are the visual equivalent of shouting. In some cases, like "LEGO" above, capitalization is important and necessary. In other cases, like "BRIDGEWATER COMMONS", it's just noise.

(3) Width varies with the query

Google highlights (bolds) the query keywords, so a longer query will bold more keywords. Bolded characters take up slightly more space. So, even if you found a title that just squeezed into the width limit, the actual display of that title would change depending on the keywords searchers use to find it.

(4) Cut-off titles have less characters

Google is cutting off titles with CSS, and the browser appends "â€¦" whenever a title is truncated. So, a title that's just slightly too long and gets cut will actually be shorter than a title that barely squeaks in under the width limit, due to the additional space required by "â€¦".

Data from real-life searches

In order to really understand what's happening to title tags in the wild, we need to collect the data. So, we set about looking at real searches to understand where title tags were getting cut off after the redesign. Before I get into the methodology, I'd like to thank Bernt Johansson, founder of Swedish SEO firm Firstly for his generous help in hacking together this particular jQuery monster.

We looked at page 1 search results for 10,000 queries. Since not all SERPs have 10 results, this resulted in 93,438 total search results. An encoding error caused some issues with special characters, requiring us to toss out some bad data â€" this left us with 89,787 titles to work with. Query highlighting was preserved from the original searches. This data was all collected from Google.com using English search queries.

Since Google is truncating the titles using CSS, we have to replicate them as rendered (not just look at source code). Once the titles were extracted, each of them was displayed in a browser (Chrome on Windows 7) at the same size and width as a Google desktop search (18-point Arial in a 512-pixel wide <div>). Then, a somewhat bizarre combination of JavaScript, jQuery, AJAX and PHP stored the display length for analysis. Due to minor variations, our display lengths could vary from Google's by Â±2 characters.

Means, distributions & confidence

Sorry, it's about to get mathy up in here. Let's look at just the titles that were truncated by Google, to find out how their lengths varied. This leaves 28,410 titles for analysis. I can tell you that the mean (average) length of those titles was 57.7 characters, but don't run off just yet. If the distribution of these lengths was normal, then setting the mean as a reasonable limit would mean that half of the titles at that length would still get cut off. That's hardly ideal. Also, this doesn't account for the titles that weren't cut off.

Just out of curiosity, though, let's look at the overall distribution of cut-off title lengths (post-cut-off):

The good news is that this distribution is roughly normal, peaking at about 57-58 characters. Post-cut-off title tags ranged in length from 42 to 68 characters. Here's a title cut off at 42 characters:

Again, all-caps titles take up more space, and the query ("anywho reverse lookup") is fairly long. Here's a title that makes it up to 68 characters after being cut off:

In this example, the query is short ("Giftster"), the title only has two capitalized words, and there are quite a few lowercase l's and i's in play. Keep in mind that all of the lengths in the graph above are after the cut-off. Gifster could probably get away with 1-3 more characters beyond what's displayed. We also need to consider the pre-cut-off length and account for the ellipsis.

So, how do we turn this all into something that's actually useful? What do we really want to know? Ultimately, we want to find a reasonable length at which we can be fairly confident our titles won't get cut off. At each length, I looked at what percentage of titles were cut off. Since the distribution is fairly normal, longer titles were (as expected) more likely to get cut off. Here are the cut-off lengths at five different levels of confidence:

80% - 57 characters (81.6%)
90% - 56 characters (91.6%)
95% - 55 characters (95.8%)
99% - 53 characters (98.7%)
99.9% - 49 characters (99.9%)

Since character lengths are integers, we can't hit the 80%, 90%, etc. marks right on the money, so these are the closest numbers (the actual percentages are in parentheses). Maybe I'm biased by my statistics background, but I tend to think 95% is a pretty reasonable level. Put simply, if all of your title tags were exactly 55 characters long, then you could expect about 95% of them to be left alone (1 in 20 would be cut off).

There's no magic number

I feel comfortable saying that 55 characters is a reasonable title-length limit under the new design, but keep in mind that your title lengths may vary quite a bit. In addition, a cut-off title isn't the kiss of death â€" Google still processes keywords beyond the cut-off (including for ranking purposes), and other formats, like vertical results and Google+, may display your full titles. Here's an example from Google news vertical results:

In this example, the first news result actually displays the full title of the article, whereas the second result is truncated. Ultimately, if you're really concerned about any given result, you need to see it for yourself. In some cases, a mysterious trailing "â€¦" may even make a title more clickable (I wouldn't bank on it, but it's possible).

In many cases, like blog posts titles, it's not worth going back and revising everything based on this new data. I'd look closely at your core pages, view the SERPs for your target keywords, and make sure that your snippets look the way you'd like them to. Use your judgment, and keep the guideline in mind for future SEO efforts, but don't start hacking at characters. Google could change the rules again.

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don't have time to hunt down but want to read!