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

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.

Stack of folded newspapers

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?

Line drawing of a robot with a question mark in a thought bubble

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.

Young panda bear exploring a wood deck

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.

Typographic treatment of the word 'experience'

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.

Download a free sample from my book, Design Fundamentals.

15 comments

  1. When I redesigned my website one of the main objectives was to place the content as far up in the code as possible. I didn’t know about “the fold” when I did it.

    In my experience this was easier done than I had expected, once I’d got the navigation stuff from the right hand side to the left, because I could put it in the footer now.

    • The fold comes from newspapers. They’re typically folded and you want to get your most important information and probably the information to help sell the paper on the side where it’s most visible.

      CSS makes it easier to have content be first in the code, but not first to display on the page. However if you start designing more for mobile devices you’ll find you need to have both be the same, at least until things like the flexible box model come along.

      I wouldn’t worry about going overboard with making sure your content is first in your code. Higher up will be better, but I don’t think you lose anything by not having it be the absolute first thing in there.

  2. “What exactly does this algorithmic change mean for web designers?”

    Absolutely **** all. That’s what it means.

    All that matters is that good design principles are adhered to and usability principles considered when designing websites. All else will follow.

  3. Thanks for posting this…I heard that Google was changing their algorithms again, but I thought it mostly had to do with Google+ Your Life and social search. Glad I saw this post.

    • Google makes changes to their algorithms all the time. They did recently make some changes in regards to Google+ too. Mostly it’s that Google+ profiles are being shown more and if you’re logged in to Google you’ll starting seeing more content recommended by people in your circles on Google+

      Google is pushing + a lot and they’re looking to it more for signals about where to rank web pages. If you don’t already have one you should probably get a Google+ profile and start networking a bit.

  4. # Is this based on where ads appear in the code or where they appear visually on the page?

    As Matt would typically say, “A bit of both”, as in to say that both are factored but other factors are also involved. Obviously not every user of the web is ever going to access content in the same order because visual users can have content served in a different order to code order.

    # Can Google algorithmically determine how the page appears visually?

    Yes they can. Using Google’s own webmaster tools you can confirm this for yourself. I personally think that once upon a time this would have been a huge resource intensive task, but partly due to the slow way in which Google and other search engines index content, I think this is now more realistic than ever before.

    About time I think. So long as content can be created and delivered to manipulate search engines ranking, we are just going to have to live with this. Creative marketing is one thing, but I think we can all live with less crappy content slowing our searches down.

    • I’d be happy seeing less results that lead to pages filled with ads too.

      I’m not sure how intensive this has to be. Let’s face it, most of the pages we’re talking about are using AdSense. You’d think Google could identify those pages without too much trouble.

      They’re doing it now though and that’s a good thing.

  5. This is probably one of Google’s better changes – I applaud anything that essentially argues for a better user experience – after all none of us want to land on sites just full of ads.

    And we design our sites with key content above the fold for that very reason.

    M

  6. If Google starts truly looking at content above the fold, relevance awards for those publishing useful content would be great. With that said, ads should be secondary to any real content.

  7. Does it really make a difference if any cool message appears before or after the fold? NO! So long as it’s visually interesting before and after the fold the user experience is well received.

    • Sure, but this post was about how Google’s algorithms might see things and how what you place at the top of the page could affect where the page shows up in search results. I don’t think the algorithms are going to have some notion about “cool” built in.

      Where “the fold” is concerned, there’s certainly no real fold on a web page, but it probably still makes sense to place important messages toward the top of the page. People will scroll, but you do need to give them a reason to in the visible area that loads in their device.

Leave a Reply

Your email address will not be published.

css.php