Above the Fold Content & How to Use It to Attract Attention

Michelle Ofiwe

Sep 16, 20215 min read
above the fold

In the world of web design, “above the fold” refers to the part of a website the user sees at first sight without scrolling. Though the concept has expanded over the years, many still believe the information you display at the top of your webpage can impact user experience, bounce rates, and SEO.

What Does “Above the Fold” Mean?

In the publishing world, “above the fold” once referred to the stories featured above the fold of a newspaper. Publishers placed important and attention-grabbing stories at the top of the page so readers wouldn’t have to unfold their newspapers to read more.

With web content, the principle remains the same. When someone lands on your website, above-the-fold content is what they see when they first land on the page, without having to scroll down.

As a general rule of thumb, good above-the-fold content should include internal links to other pages on your site and should be SEO optimized. Inform users about the page’s content with bold images and a solid H1 header. 

In the example below, this IKEA page is clearly about shelves. We can see the bold header text, a brief description, and link to further reading. If you weren’t looking for shelves, you’d immediately know this isn’t the right page for you.

above the fold

Say you landed on the page below. At first glance, you know that the content is about portable Bluetooth speakers. Again, we see the bold header, a brief page description, and a call to action to purchase their newest Sonos items (“Shop now”).

above the fold

Why Is Above the Fold Content Important?

Above-the-fold content is the first thing your users see when a web page loads. If you can show the user they’re on a page that matches their search intent, they’re less likely to bounce back to the SERP and click on your competition’s links.

If you’re running banner ads for a campaign, above the fold is a prime location for views. Users are less likely to notice ads as they scroll down. 

Considerations for Mobile and Desktop

With the rise in mobile device use, the “above the fold” standard has changed. Devices these days vary in size and resolution, so there isn’t a “one-size-fits-all” fold for any website. 

It’s still a good idea to use best practices when working with above-the-fold content so that you can maintain a good page load speed on every device. Mobile load speed is an essential factor for ranking, thanks to Google’s Core Web Vitals update.

Use responsive design when building out your web pages. Ensure that your content, layouts, and images fit most device screens, and design your above-the-fold content with mobile in mind.

How Does Above the Fold Content affect SEO?

Above the fold content is arguably the area of the webpage with the most visibility. Users and crawl bots use this area to understand the webpage and the rest of its content. Poor above-the-fold content can lead to an increase in bounce rate, which negatively impacts your SEO.

Strong copy, formatting, and CTAs work well above the fold, but don’t overcrowd this space. Google penalizes websites that stuff ads or keywords in this area.

Above the Fold Content & Core Web Vitals

The Core Web Vitals update to Google’s algorithm emphasized page load speed and user experience. Since it’s often the first thing to load on your website, above-the-fold content is a Core Web Vitals metrics factor.

Recommended reading: Core Web Vitals: A Guide to Improving Page Speed

Largest Contentful Paint scores how long it takes for all of the content above the fold to load. Anything below 2.5 seconds is considered a good CLP score. Optimizing your above-fold content to load in less than 2.5 seconds is a great way to earn a good LCP score.

To avoid longer page load times, try tweaking the CSS and Javascript you use on your webpage. You can try:

  • Implementing Critical CSS: “Critical CSS” is a technique that places CSS for above-the-fold content in the <head> tag. Only add the CSS needed to load all your above fold content; you want to render content for the user as quickly as possible. 
  • Preloading hero images: Hero images are the most prominent above-fold element for content. Loading them faster assists with your page load speeds. Using “link rel=preload” will significantly decrease load times on images loaded with CSS or JS.

Measuring Your Website’s Core Web Vitals

As you build out your above-the-fold content, it’s important to test your page load speed and Core Web Vitals. Site auditing tools help you quickly understand your site’s current CWV scores and any issues impacting your page load speed. 

Use the Site Audit tool for auditing your site’s speed and performance. The Core Web Vitals thematic report displays your CWV scores directly from Google Lighthouse: 

google lighthouse

Review the Site Performance thematic report for the average page load speed for a general overview of your site’s performance. The tool indicates any issue impacting your load times and ways to improve: 

above the fold

Recommended reading: How to Perform a Technical SEO Audit in 15 Steps

Find and Fix Sitemap Errors

with the Site Audit Tool

ADS illustration

How to Optimize Above the Fold Content

Ensure any content you include above the fold engages the user and informs crawl bots. If a user lands on your page and they’re confused or unimpressed, they’ll bounce back to the SERP. Use your above-the-fold content to capture their attention.

A striking and catchy H1 tag can clarify what’s on the page and let them know if they want to explore your content further.

above the fold

Striking visuals catch a user’s eye, keep them on the page longer, and signal the content below might be helpful. An ecommerce website can include hero images and a call to action for its focal product or service: 

above the fold

Use above-the-fold CTAs sparingly. Each CTA should include one direct action (“Shop,” Buy,” “Book,” etc) that tells your users what you want them to do. 

If you want your users to contact you, include buttons they can easily read and click on. Email addresses and contact numbers are ideal, especially for mobile users.

6wC5ICCwmuRLcNS9-JHgEJZpfUutvE0Z53wPDJ_m6o7YsmzOSKfYuLxF90bYDuD9L-7FJwd8k3bUE85jLaCH93_nm28H7JXsf53DZhdIwXUJYydCZ7-B1Y8C-_jEr5w57yyXsyIZ=s0

Above the fold is a great place to feature internal links to other parts of your website. It helps speed up navigation and increase user experience — both elements of good SEO.

above the fold

Below you can see quite a bit of above-the-fold content for this family clinic. How do we know it’s a family clinic? The hero image is of a family, and there’s a cross logo in the top left, which reminds us of the Red Cross.

From this one area above the fold, we can book an appointment to see a doctor or get a vaccination. We can also call the clinic for more detailed inquiries.

There are also other menu options pointing to other parts of their website. All information is presented in a way that’s easy to follow and isn’t overwhelming.

above the fold

Key Takeaways

Above-the-fold content is the first thing users see when they load your web page, so you’ll need to make your mark. Use H1 tags, brand visuals, and a call to action to engage your visitors. 

Too much content can overwhelm a user or slow down your page load speed. Instead, use images, shortened code, and simple language to communicate what the page is about. 

With a few tweaks to your above-the-fold content, you have a great chance of rising the ranks of Google.

Author Photo
Michelle OfiweEditor & writer, deeply dedicated to good copy. Based in Houston, TX.
Subscribe to learn more about SEO
By clicking “Subscribe” you agree to Semrush Privacy Policy and consent to Semrush using your contact data for newsletter purposes