What Does Google’s Page Layout Algorithm Mean For Web Designers?

Posted: 30 Jan 2012 05:30 AM PST

About a week and a half ago, Matt Cutt’s posted to the Google Webmaster Central blog, about an algorithmic change that considers the layout of a webpage, particularly what appears “above the fold” as a signal in where the page should rank.

Since this change is about page layout it’s something designers and developers should understand.

What is the Page Layout Algorithm Change?

In a nutshell, Google receives complaints from people that click on a link in the search results and land on a page filled with ads. The pages often have little content or content that is difficult to find. I’m sure you’ve landed on a few of these pages. I know I have.

As you might expect, Matt was pretty vague when it comes to the details of this change. Here’s the meat from the post in his own words:

…sites that don't have much content "above-the-fold" can be affected by this change. If you click on a website and the part of the website you see first either doesn't have a lot of visible content above-the-fold or dedicates a large fraction of the site's initial screen real estate to ads, that's not a very good user experience. Such sites may not rank as highly going forward.

Matt does later say it’s ok to have ads above the fold. It’s a matter of excess.

Having an ad above-the-fold doesn't imply that you're affected by this change. It's that excessive behavior that we're working to avoid for our users.

Let’s momentarily ignore the fact that “the fold” isn’t really a meaningful concept anymore, given all the different devices people use to access sites and let’s also ignore the hypocrisy in this as Google’s own search results often fail the test of too many ads above the imaginary fold. And why not also ignore the irony of an email, sent out by the AdSense team on the same day as Matt’s post, suggesting site owners surround their content with more ads.

What exactly does this algorithmic change mean for web designers?

Questions Matt’s Post Raises

The usual and understandable vagueness around this change raises some questions.

What’s considered “the fold”?
How much content needs to be “above the fold”?
What does Google consider an ad and how do they determine that algorithmically?
How many ads is excessive?
Is this based on where ads appear in the code or where they appear visually on the page?
Can Google algorithmically determine how the page appears visually?

Our best bet for answering the first is to use Google’s browser size tool. It won’t give exact dimensions, but it attempts to show where “the fold” is for most users. I doubt Google will ever be more specific than excessive in regards to how many ads is too many.

When it comes to how they distinguish an ad from an image they likely look for the image to be wrapped in an external link and for that link to contain some kind of tracking code. I’m sure this results in some false positives and some missed ads, but I bet they do a pretty good job with this overall.

To me the most important questions are the last two when it comes to how we should design and develop pages.

My guess is Google looks algorithmically at the code to find potential offenders and set a flag or some kind of score. They’ll send some of these pages to their quality inspectors who’ll visually consider if a page’s content is buried in excessive ads, which will further suggest patterns Google can look for algorithmically.

In the end Google probably looks at both the code and the visual appearance of the page to decide.

An Extension of Panda

As my gypsy friend Dave points out this change is likely an extension of the panda update, which also puts emphasis on quality content and user experiences.

In his post, Dave shared that reports from inside his SEO Dojo indicate the page layout algorithm has probably been in effect for awhile before its announcement.

While you’re at Dave’s site search for some of his posts on page segmentation. Of course, Dave isn’t the only one writing about this so here are a few other articles I collected when the news broke.

It’s All About User Experience

Again, this algorithm change is designed to demote sites that make it difficult for a user to get to the content and offer a bad user experience.

Regardless of the details and the right or wrong of it all, this change comes from the idea that users don’t want to have to spend time searching to find your content when they first land on your site or page.

“we've heard complaints from users that if they click on a result and it's difficult to find the actual content, they aren't happy with the experience.”

In the Search Engine Journal article I linked to above (the first in the list), Alan Bleiweiss notes that “SEO is about understanding user experience as seen through search algorithms,” which is a point I’ve been trying to get across for years.

User experience is the key here. What can we do as designers to help people find the content?

Make the main page heading the dominant element
Use more minimalist design so content stands out
Add less superfluous elements in general
Use grids and strong alignment for clear content placement
Clearly separate content from ads — make it clear which is which
Use proximity to better organize page elements
Make better use of space
Adjust visual weights to create a clear visual hierarchy

In other words follow basic design principles. If we think about our visitors first we should be ok and not suffer from the page layout algorithm change. Quite honestly if you’re following basic design principles and paying attention to user experience you shouldn’t need to change anything. You’re likely doing the right thing now.

The above is all well and good when it comes to the visual side of things. How about when we’re structuring our code?

You probably want to place content as close to top as possible. That doesn’t mean it needs to be the absolute first thing in the file, but you probably want to get content in there above any ads if possible.

This is how things need to be done in responsive design anyway as, outside of complex css positioning, single columns will always show elements in same order they appear in html.

This will change when the flexible box model is more widely adopted by browsers and designers, but for now the order you see things in a single column layout is pretty much the same order things appear in the code so your html structure and visuals need to be in the same order.

And you probably don’t want to follow Google’s AdSense heatmap shown below, or at least understand you aren’t meant to fill every block with an ad.

Google AdSense heatmap with ads dominating content

Summary

As with all Google algorithm changes this one is long on vagueness and short on detail. The overall message is that too many ads obscuring your content is bad and will be treated as bad in the search results. If you try to stuff too many ads at the top of your page, expect a drop in ranking.

While the details aren’t specific you can probably use a little common sense in regards to what’s excessive and where “the fold” is. I’m sure before too long SEOs will be figure out some of the details and share them with us.

I applaud Google’s efforts in wanting to rank pages richer in content than ads, even if they wouldn’t always pass their own tests. Even more I’m excited that how a web page is designed is continuing to show more importance in Google’s algorithms.

Design matters and if you think real people first and treat your visitors well, you’ll probably find search engines treat you well in return.