Page Title & Meta Description By Pixel Width In SERP Snippet
Page Title & Meta Description By Pixel Width In SERP Snippet
As outlined in our 2.30 release notes, the Screaming Frog SEO spider now calculates the pixel width of page titles and meta descriptions and has a SERP snippet emulator in the lower window tab.
Pixel width makes total sense for the search engines to use for their SERPs, but does make it harder for webmasters and SEOs to have control over their search snippets which is genuinely frustrating. Hence, best practice is really important here, ensure your key phrases are at the beginning of titles in particular to increase the likelihood they will be visible.
We had to perform a fair amount of research into how Google displays search results so that we could reverse engineer Google’s logic for calculating pixel width to provide greater accuracy in our SEO Spider. We believe the emulator is pretty close in accuracy; this is the first iteration however so we’d love your feedback and we will continue to improve with further revisions.
You can draw your own conclusions and best practices on pixel width by changing the new preferences configuration in the SEO Spider. However, please note, the preferences do not currently update the view in the SERP snippet tab, this remains based on our findings outlined below.
To provide a better understanding and share some of our research, we discovered following for our emulator –
Google calculate the pixel width of the characters used in titles with a limit of 512 pixels. Anything over this limit, Google truncate the title with CSS and include an ellipsis. ‘Over 512px’ is now our default filter in the page title tab.
Google now use 18px Arial for the title element, previously it was 16px. However interestingly, Google are still internally truncating based on 16px, but the CSS will kick in way before their ellipsis is shown due to the larger font size. The upshot of this change is that text is no longer truncated at word boundaries (before or after a word). Google may resolve this so that titles are chopped off at word boundaries as before, rather than in the middle of a word. It’s also worth noting that Google appear to remove non ASCII range characters from the beginning of the text when displaying in the SERP view. We do the same.
With the above in mind, there are a few things that can really impact the display of a page title in the SERPs.
Google embolden certain keywords that are used in a search query and this affects the pixel width greatly. For example, for our homepage for a search query of ‘Screaming Frog’, the snippet displays as –
The words in my query ‘Screaming Frog’ are obviously all bold in the title. So, if the query is adjusted to ‘Screaming Frog Search’, the snippet is –
So now ‘Screaming Frog’ and ‘Search’ are bold in this example, which means the pixel width is obviously greater than my previous query and one less character is displayed in the SERP snippet title.
At the moment we don’t take this bolding into consideration in our calculations (but are planning on it), so keep this in mind when you run searches and they don’t match entirely with the SERP snippet view. If you use an info: command which includes zero bolding, our results are typically very close. Although Google is using our Dmoz description in the below typically –
Our SERP snippet emulator –
For Mobile, Google play to different rules which we will be investigating further.
It’s also worth noting that Google ultimately have control over their snippets. They dynamically change the title by putting highlighted keywords at the end and truncating in the middle. We also see Google moving brand phrases to the start of a title dynamically, truncating much earlier than the 512px width on occassions or indeed using a completely different element (h1 etc) if they believe it to be more relevant.
Similar to page titles, we believe meta descriptions are calculated by pixel width, rather than characters. This pixel width is less than simply 512 pixels multiplied by two (1,024px) which you might expect and actually the CSS truncation appears to be around 920 pixels (in our SERP emulator it’s 923px).
Google still use 13px Arial for meta description text and chop off at word boundaries. Google can make key phrases bold as discussed above; include dates from the page, number of results (Results 1 – X of X, check this search for an example) and embed photos (from authorship) in the description field any of which can directly impact the amount of text shown in the snippet. Similar to page titles, Google are free to show any text here as the meta description if they deem it to be more relevant to the search query (including directories like Dmoz, or just the content of the page) not just the content of the meta description tag or just show much longer descriptions for longer queries.
We don’t take any of the above into consideration as yet, but we have attempted to build further logic into the emulator, such as Google changing pipes in meta descriptions to forward slashes (example here) and the way they switch the types of apostrophes used.
We haven’t performed much testing here as yet. Google use 13px Arial and we are simply chopping off at 512px in the SERP snippet emulator, allowing room for the ellipsis and the arrow dropdown for ‘cached’ and ‘similar’ pages. So this won’t be particularly accurate at all. Google sometimes shorten urls using double ellipsis, sometimes after the root domain, other times after first folder level based on the search query, both of these followed by the ellipsis at the end.
Conclusion, Caveats & Feedback (Please!)
Please note, this is our first iteration and not an exact measure or reflection of your search engine result page snippets. This is reverse engineering Google’s own SERPs which they can change anytime. It simply confirms that Google own the results, not us!
It’s impossible to control snippets in Google, but these new features will hopefully provide some further insight and control. Our tests have shown that we are (at most) a pixel out at times on page titles, which means you may see a single character difference, while Google still truncate in the middle of words. For meta descriptions, Google currently conform to word boundaries, so that pixel or two difference can mean an entire word difference between the real SERPs and our SERP snippet emulator.
There seems to be some pixel width discrepancies between platforms when calculating pixel widths for the same text using the same font. This means that you may see slightly different truncation results across platforms by plus or minus one character. Unfortunately this is Java font handling inconsistency across platforms which we will continue to revise to improve.
We hope to receive feedback around our findings, so please do let us know of any research or experiments you have performed or indeed any changes we can make to further improve accuracy. All comments are appreciated and thanks for the support as always.