We all know that first impressions count, and that applies to websites too. Regarding SEO rankings, the content that’s “above the fold,” or what people can see without having to scroll down, matters more than you’d think.
And not just for the user but for search engines too.
So, What’s Above the Fold Content?
Above the fold content is everything that appears on a web page before you scroll down. It applies to both mobile and desktop websites.
It’s also the first thing users see right after they click on a page’s URL.
In other words, the fold is where a loaded page first cuts off at the bottom of the user’s monitor, and any content above it is “above the fold.”
Similarly, the content below the fold is obscured from view until scrolling down — and it’s considered to be below the fold.
What’s the Measurement for Above-the-fold Real Estate?
There’s no standard measurement for above-the-fold real estate. That’s because it tends to vary depending on the user’s screen size, browser settings, and operating system.
Many other factors affect the size of the above-the-fold area, such as device orientation, font size settings, screen resolutions, page zoom settings, and so on.
For instance, if a website is opened on a desktop computer with a large screen size, the fold may appear much lower than if opened on a smaller device such as an iPhone.
However, most designers seem to agree that the average above-the-fold placement is somewhere between 600 and 1,000 pixels from the top of the page.
Here are the common dimensions:
For Mobile Screens:
- 360 x 640
- 375 x 667
- 414 x 896
- 360 x 780
- 375 x 812
For Tablet Screens:
- 1024 x 768
- 1280 x 800
- 800 x 128
- 601 x 962
- 962 x 601
For Desktop Screens:
- 1366 x 768
- 1920 x 1080
- 1440 x 900
- 1536 x 864
- 1024 x 768
A heatmap tool is the most effective way to determine your above-the-fold measurements. Heatmaps display user interaction on a website, and they can help you identify how far down people scroll or which areas of the page are most engaging.
Benefits of Optimizing Above the Fold
Optimizing the above-the-page section of your website is critical to ensuring users don’t bounce off your website immediately. It’s your first opportunity to impress and engage your visitors and see if you can get them to become customers.
Here are some of the benefits of optimizing above the fold:
- Increased User Engagement: Optimizing above-the-fold content helps visitors interact with your website more quickly and easily. It’s your chance to invite visitors right off the gate to reach out to you, shop, subscribe to your email list, read your blog, check out your YouTube channel, sign up for your services, or make a purchase.
- Greet Users with On-brand Messaging: Above the fold is your opportunity to make a memorable first impression. All your messages must align with your brand and create an inviting user environment.
Example of on-brand messaging: “Welcome to XYZ- the home of premium products that will revolutionize your lifestyle.”
- Improved SEO Rankings: Optimizing Above the fold content helps search engine crawlers understand what each page is about and how it should be indexed in their database. That means that when people search for topics related to your website, they’ll find you faster.
- Increased Conversion Rate: Above-the-fold content that accurately describes what users will find on your website has been proven to increase conversion rates. It’s one of the most important elements of successful website design and should be taken seriously.
- Show the Results Your Website Visitors Are Likely to See After They Use Your Product or Services: Showing visitors the results they can expect after using your product or services is a great way to encourage them to take action. That could include before-and-after pictures, success stories, stats, and more.
Why is the Above-the-Fold Content Important for SEO Rankings?
The first thing the user sees on a page is the above-the-fold content. It’s also the first part of a web page that search engine crawlers check to determine what the page is about.
So, unless you put your best foot forward and fill in the above-the-fold space with valuable and relevant content, both users and search engine crawlers will have a hard time understanding what your page is about.
Think of it like this: If a page’s above-the-fold content doesn’t contain enough information to catch the attention of users or search engine crawlers, then the chances of getting the user to stay on the page or get a good SEO ranking automatically become slim.
The Purpose of the Above-the-Fold Content
Above-the-fold content aims to get users interested in the page and make them want to stay on it. It’s meant to convince them not to close the page and move on to something else.
Think of it as the first page of the newspaper. It’s typically filled with the most exciting stories and headlines, so readers will want to keep reading.
The above-the-fold content is also meant to generate engagement and conversions. If users find the content interesting enough, they may be more likely to scroll down and explore the page further or take action (such as buying a product).
It also acts as a TL; DR (too long; didn’t read) of the page — this is especially useful for search engine crawlers, as it gives them a quick overview of what the page is about.
Strategic convincing happens below the fold, but the above-the-fold content needs to convince users and search engine crawlers to get there.
Lastly, the above-the-fold content sets a webpage’s tone, feel, and look. It should be well-designed, eye-catching, and engaging enough to capture the users’ attention. It should give a basic concept of what your website is about and what it offers to its users.
Whereas the homepage is a book’s cover, above-the-fold content is its title. You still have to read the book to understand the story, but having a catchy, well-crafted title will make you want to start reading.
Examples to Illustrate What Above-the-fold Content Looks Like
Above-the-fold content can take many forms. It could be a hero image, a video, a header or banner, sliders, or any other kind of graphic, depending on the type of website.
For example, e-commerce websites can have above-the-fold content that displays the latest offers and discounts, while a blog may have a featured article or two.
Here are a few real-time examples of the above-the-fold content on some popular websites:
Amazon.com: A Slick Design with Hero Images, Sliders, and Banners
Amazon’s above-the-fold content is well-designed and engaging. It’s a multi-layered combination of hero images, sliders, and banners, all keeping users informed and engaged. It highlights their latest offers and discounts and provides easy access to different categories of products.
Netflix – A Straight-to-the-point Title Summarizing what the Website is About and an Enter Your “Email Address” to Get Started CTA
Netflix’s above-the-fold content is direct and to the point. It’s a simple title that summarizes what the website is about, “Unlimited Movies, TV Shows, and More”, with a CTA asking you to enter your email to get started. It’s all very straightforward yet engaging and effective.
Content Marketing Institute: Best Performing Blog Posts
Content Marketing Institute’s above-the-fold content is an embedded video of the founder discussing content marketing and a link to some of their top-performing blog posts.
The video serves as an introduction and incentive for users to explore further, while the blog post link encourages them to dive deeper into their content.
You can tell they’re using their blog to promote their YouTube channel and vice versa.
Research Evidence of Above-the-fold Content Impacting SEO
#1. 2012 Update — Above-the-Fold
What better place to start than with the Google algorithm update of January 2012, titled the “Page Layout Algorithm Improvement.” In this update, Google mentions above the fold six times.
The update was made at a time when people were selling ads in prime real estate spots, which forced content below the fold. Google promised to de-rank sites that employed this tactic.
Google also clarifies that their algorithm won’t impact websites that placed ads above the fold to a “normal degree” and that content should still appear above ads.
Google also clarifies that their algorithm won’t impact websites that placed ads above the fold to a “normal degree” and that content should still appear above ads.
However, websites that place ads above the fold to an “excessive” degree would feel the full effects of this algorithm.
While it’s evident that Google doesn’t like it when websites stuff ads above the fold, they also prefer content being placed there.
Two statements stick out in their report:
-
“Users Want to See Content Right Away”
Although the statement relates to ads, we deduce that Google is against anything that prevents the user from seeing your content right away.
That includes sliders and huge hero images that push your content below the fold.
Google wants users to find what they’re looking for quickly, and it’s no surprise that this notion is reflected in their algorithm.
-
“Either Doesn’t Have a Lot of Visible Content Above-the-Fold or Dedicates a Large Fraction of its Screen Real Estate to Ads”
Google paints two scenarios: either your page doesn’t have any content above-the-fold or has too much space dedicated to ads.
Both are bad for SEO purposes.
From this, you can tell Google expects the above-the-fold section to be complete, actionable, and representative of your business.
#2. January 2017 Update — Mobile and Interstitial Ads
On January 10th, 2017, Google unleashed a new algorithm update intended to enforce the types of ads shown on mobile devices. The update would be first announced on August 23rd, 2016.
They included interstitial ads on mobile as a negative ranking signal.
Interstitial ads are those annoying ads you see when you first try to access a website or an article.
Our interest is in no-ads content above the fold. Google warns us against using a layout structure where the above-the-fold section of a webpage appears like a standalone interstitial ad.
That means that all content or information featured above the fold should be relevant to the user’s search and, of course, be informative.
What to Put in the Above-the-folder Section of a Website
The content in your above-the-fold should give an insight into what the page is about.
From the images you use to the language you use to the buttons and calls-to-action you include — it should all be closely aligned with your business’s goals and objectives.
That said, here are some elements you can use to populate your above-the-fold section:
-
An Intriguing Headline and a Few Lines of Copy
A catchy headline is essential to grabbing the attention of your website’s visitors.
A few lines of descriptive copy should follow the headline to give users a better understanding of what this page is about and why they should scroll down or take action.
For example, a few lines of copy can inform users about what they stand to gain from taking the next step.
-
A CTA (Call to Action)
A single call-to-action should be placed within the above-the-fold section, as this is the first thing visitors will see when they hit your page.
CTAs should be placed above the fold to allow visitors to take action immediately without having to scroll or click away.
Remember, not everyone visiting your website isn’t familiar with your brand or product. Some already know exactly what they’re looking for. You want to ensure the CTA is visible and easy for them to find.
You also want to avoid stuffing the above-the-fold with too many CTAs, as this can overwhelm and confuse your visitors. Just one or two CTAs should be enough.
-
Images/Videos (But only if Necessary)
Images and videos are also a great way to grab visitors’ attention.
These can be used to showcase your product or service, explain how it works, or introduce visitors to your team. But again, only include these elements if necessary —too many images and videos can slow down your website and hurt your SEO rankings.
-
Intuitive Navigation
Above-the-fold content should also include easy navigation options that allow visitors to quickly and easily browse your website for more information.
The visitor shouldn’t struggle to figure out how to find the information they are looking for. There should be no obstacle to their journey.
The navigation should be intuitive and offer easy-to-understand labels that clearly explain what each page contains.
-
Responsive Design
Last but not least, make sure your website is responsive and optimized for both mobile and desktop devices.
The above-the-fold section should load quickly and function flawlessly on all devices and browsers. If it doesn’t, your visitors may not stay long enough to explore the rest of your website.
So, test your website, specifically the above-the-fold section, across different devices and browsers to ensure everything works as expected.
What Not to Put Above the Fold
You should also be aware of what not to put above the fold.
Cluttered and distracting content, such as large pop-ups, ads, and banners, should be avoided at all costs. Also, don’t include too much text or other elements that could overwhelm visitors.
Here’s a list of some of the things not to put above the fold:
- Ads and pop-ups
- Large banners or graphics
- Too much text
- Text that is not relevant to the page
- Anything distracting or overwhelming
7 Best Practices for Above-the-Fold Content
Now that you know what to put and what not to put in above-the-fold content, let’s go over some best practices for optimizing it:
#1. Your Homepage’s H1 and Tagline Should be Simple, Clear, and Compelling
These two elements should be the first thing visitors see when they visit your website. Ensure the H1 is relevant to your brand and clearly communicates what you do, while the tagline should evoke a strong emotional response from your audience.
The goal is to show value to your target audience and compel them to stay on your website, and what better way to do it than with a big, powerful statement that says, “We Sell Cars” or “Stop Searching, Start Saving” – something that resonates with your audience.
After that, you want to deliver a powerful tagline, explaining to the customer that they have found the right place.
Your entire above-the-fold section should eco your brand voice while being informative and actionable.
You also want to include a CTA, like “Learn More,” “Shop Now,” or “Get Started.”
#2. Tell Your Users What You Want Them to Do
Your above-the-fold content should include a call to action (CTA) that entices users to take action. Whether it’s signing up for your emails, downloading an eBook, or shopping around on your website—make sure there is something for visitors to do.
Your CTA should be easy to find, motivating, and, most importantly, encouraging visitors to act.
Ideally, you want to use a clickable link or button.
It helps to think about the language you use.
Be creative and compelling with your words while ensuring it still reflects your brand.
For example, if you’re a travel agency, you can use phrases like “Book Now,” “Let’s Get Away,” or “Start Exploring” to get visitors interested in what you have to offer.
The goal is to empower users to take the next step and move forward on their journey with your website.
#3. Navigation: Less is More (5 to 7 Menu Items Is Enough)
In addition to your above-the-fold content, you should also think about navigation.
The fewer menu options on your homepage, the better. It’s recommended to keep it under seven items and focus on giving customers easy access to key pages.
Your main navigation can be divided into categories such as About Us, Products/Services, and Contact Us.
You want to make sure the most important pages are easy to find, and it’s also a good idea to use drop-down menus for lower-priority items.
You want visitors to be able to find what they’re looking for quickly, so having simple navigation options is key.
Avoid cramming too much into the menu, as it can be overwhelming and frustrating for users.
Your navigation should be designed to make it easy for visitors to get around your website, not harder.
#4. Make Sure the Theme is Optimized for Above the Fold Content
You’ve probably seen websites with gigantic featured images or large banner logos at the top of the page.
We must admit the websites usually look cool, but they are not optimized for SEO.
The truth is, above-the-fold content should always be text-based and should include words that are relevant to what your website does.
The idea is to get users and search engines to understand what your website is about at first glance.
Having an attractive theme is great, but ensure it doesn’t take away from the content that should be above the fold.
We recommend using a minimalistic design with readable fonts and plenty of white space so your message isn’t lost in a sea of distractions.
#5. Lead with Text, Not an Image
Search engines parse text more easily than images. That explains why we’re encouraged to use words in our anchor text, not images.
The same concept applies to above-the-fold content as well.
You don’t want to start with an image and then have a few lines of text – it should be the other way around.
The Final Wrap
In conclusion, optimizing Above the fold content not only helps you create an inviting experience for your website visitors but also positively impacts your SEO rankings and conversion rate.
With every website you create or design, you want to pay attention to the first thing search engines see and scan when they visit your website. You don’t want to introduce them to ads, irrelevant content, gigantic banners, etc. Instead, you want to show them the best and most relevant content your website has to offer.
You also want to design everything with the user in mind. Think about intent or, better, research about it. It’s the only way to ensure you’ll create content Above the fold that provides value to both search engines and users.
So, take a second, consider what your visitors are looking for on your website, and start optimizing the above fold content for them.
