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.
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”).
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:
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:
Recommended reading: How to Perform a Technical SEO Audit in 15 Steps
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.
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:
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.
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.
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.
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.
Innovative SEO services
SEO is a patience game; no secret there. We`ll work with you to develop a Search strategy focused on producing increased traffic rankings in as early as 3-months.
A proven Allinclusive. SEO services for measuring, executing, and optimizing for Search Engine success. We say what we do and do what we say.
Our company as Semrush Agency Partner has designed a search engine optimization service that is both ethical and result-driven. We use the latest tools, strategies, and trends to help you move up in the search engines for the right keywords to get noticed by the right audience.
Today, you can schedule a Discovery call with us about your company needs.
Source:
