Above the fold section (above the fold line – ATF) refers to the visible upper part of a website before the user starts scrolling. The fold line is therefore the point where the unscrolled page ends at the bottom. Everything that requires scrolling is below the fold line. Note – the term “above the fold” comes from newspaper publishing. Newspapers are usually displayed on stands when folded in half, so editors place the most attention-grabbing elements above the fold line.
Why is the above the fold section important?
ATF content on a website is important because it creates the user’s first impression. This is the place where users expect to see specific features of the site (e.g. a registration link). If users do not immediately find what they are looking for, they may leave the page.
Such behaviour can negatively affect the effectiveness of your business and SEO. Search engines such as Google want to provide results that positively engage users. In addition, Google considers the content that appears near the top of the page to be the most important.
This means that ATF content has a greater impact on the position on the search results page than content in the BTF section (Below The Fold – below the fold). That is why Above The Fold SEO should be a priority.
- 01First impressionBuilds trust, meets expectations.
- 02User behaviourQuick exit when there is no content.
- 03Effectiveness and SEONegative impact, poorer results.
- 04Google priorityATF content is the most important.
Content visible on the first screen is crucial for engagement and ranking in Google.
Best practices related to the above the fold section
Content above the fold plays a key role in drawing users’ attention. There are many practices that positively affect user experience (UX) and lead to increased revenue.
There are also special Above The Fold SEO strategies that will make it easier to improve website rankings in Google. Here are the most important best practices for ATF designs.
Using a responsive website design
A responsive website design automatically adapts to the size and shape of the display on the user’s device. With this solution, you can be sure that illustrations, text and other elements are properly fitted.
- 01CTA in the ATF sectionQuick interaction, visible straight away
- 02CTA in the BTF sectionMore information before making a decision
- 03A/B testsCheck what works best
It is crucial to test different CTA placements to find the optimal solution for your website.
Optimising the website header
The header is the highest element on the page, and it is usually copied and placed on every page within the site. It contains key elements in the same place, which is easy to find. This positively affects UX.
The header of a page usually includes the brand logo, which contains a link to the homepage. Users can therefore quickly move to this key page. In addition, the header usually also includes the main navigation menu containing links to the main sections of your site.
Many website creators save space by placing the main navigation elements in a “hamburger” menu, especially in mobile versions of the site. However, this means that the user has to click an extra time to access key pages.
Below are several other elements that are worth considering in the site header:
- banner – use a site banner to advertise unique selling points, such as free delivery, for example,
- sign-up links – encourage users to create an account or register. This will make it easier for you to track user behaviour and increase engagement,
- region/language flag – if you have a site for multiple regions or in multiple language versions, allow users to switch between the available options,
- search function – add a search bar or icon. This will help users quickly find what they are looking for,
- shopping cart icon – if you run an online store, make it as easy as possible for customers to start the checkout process and complete their purchase.
Additional elements in the site header can improve its functionality. However, a poorly designed layout can take up a lot of valuable ATF space and make navigation more difficult for users. The site creator therefore needs to strike the right balance.
Include a unique heading
Every page should have a unique, descriptive heading displayed in the Above The Fold section. This will help users quickly understand the purpose of the page and what they can expect. Using a unique heading also has a positive impact on Above The Fold SEO.
When asked about the impact of ATF on SEO, Google representative John Mueller said: “What is important to us is that there is a certain amount of unique content in the ATF section. If you have a banner and a general illustration at the top, that is fine. However, some of the ATF content should be unique on such a page. That thing can be the heading”.
To further improve the site’s SEO optimisation, use an H1 heading tag (this is the largest heading type in HTML). Also make sure that the heading contains the primary keyword (the most important query you want the page to rank for).
Get straight to the point
Users should be able to find what they are looking for quickly and easily. Therefore, get straight to the point as soon as possible. Ideally, do this in the Above The Fold section. Such quick delivery of value has a positive impact on both SEO and user experience.
When creating a website, ask yourself the following questions:
- What does the person who lands on this page want to achieve?
- How can I help that person achieve their goal quickly?
Examples include many online store pages. Shoppers are almost immediately greeted with various product options along with their images, without having to scroll.
Keep a balance between ads and original content
If you monetise your site through Google AdSense or another advertising programme, you may want to display ads in the Above The Fold section. That is where most users can see and click them.
There is nothing wrong with that, but it is important to maintain a balance between ads and your own content. If users are greeted by large blocks of ads (and that is not why they came to the site), they may leave and go to a competitor. In addition, an imbalance has a negative effect on Above The Fold SEO, especially on mobile devices where ads can take up most of the screen.
In 2012, Google released a major page layout algorithm update that downgraded pages using ads in the ATF section “to an excessive degree”.
Here is the text of the announcement: “If you click on a site and the part of the page you see at the beginning does not have much visible content in the ATF section or devotes too much of that section to ads, this is not good from a user experience perspective. Such pages may rank lower”.
Google recommends following the Better Ads Standards, which discourage the use of a number of elements, including:
- pop-up ads,
- large “sticky” ads,
- ad density above 30%.
An example is the ESPN television website, where mobile ads are placed in the ATF section to maximise clicks. It should be noted, however, that the amount of ads is balanced by a large amount of original content.
Improve page loading speed
Content in the Above The Fold section should load quickly. If users have to wait too long, they will probably leave your site. In addition, loading speed has a significant impact on SEO rankings.
The most important website speed metrics are Core Web Vitals:
| Thread | Explanation |
|---|---|
| Largest Contentful Paint – LCP | The time needed to load the largest image or text block. |
| First Input Delay – FID | The time it takes for the page to respond to the first user interaction. |
| Cumulative Layout Shift – CLS | A measure of unexpected movements and shifts that appear during loading. |
You can check Core Web Vitals using Google Search Console.
Here are a few best practices for improving ATF loading time:
- structuring the HTML so that the ATF content loads first,
- simplifying the code and minimising HTML, CSS and JavaScript so that everything is processed faster,
- implementing critical CSS – critical CSS refers to a technique that extracts CSS from the ATF content and places it in the <head> section in HTML. This helps the content in the Above The Fold section load faster,
- optimising images – resizing, changing the format and compressing image files so that they are as small as possible without a negative impact on quality,
- preloading resources – use the link attribute rel=”preload” to load ATF top elements as early as possible in the rendering process.
Make sure it looks good
Your ATF content should function properly, but it also has to look good. If users do not like what they see, there is a high chance they will leave.
Website designs have just 0.05 seconds to make a good first impression, according to research from Behaviour & Information Technology.
Here are a few tips for page design in the ATF section:
- make sure the text is easy to read and has a clear, visible hierarchy,
- add unique visual elements to break up the text and make it easier to understand,
- include relevant videos and animations to attract users’ attention,
- save space by using recognisable icons – check the options available in Google Material Symbols,
- use empty space (often described as negative space or white space) so that your layout does not look cluttered and disorganised,
- make sure the design matches and complements the brand identity elements,
- make sure your website meets accessibility guidelines.
Analyse performance metrics
Performance metrics tell you what works well and what does not in your ATF design. The most important metrics depend on your specific goals. However, the ones below are worth considering. They are available in Google Analytics.
| Metric | Description | Why is it important? |
|---|---|---|
| Bounce rate | The percentage of visitors who left the page without taking any action. | Better ATF content can reduce bounce rates |
| Exit rate | The percentage of visitors who left the site from the current page. | Better ATF content can reduce exit rate. |
| Scroll depth | The amount of the page the average user sees. | Shows whether ATF content encourages users to scroll further down the page. |
| Goal conversion rate | The percentage of visitors who completed the desired action (e.g. made a purchase). | Better ATF content can increase the conversion rate. |
| Organic traffic | The number of unpaid visits to the site coming from search engines such as Google. | Good Above The Fold SEO can increase organic traffic. |
Should calls to action (CTA) be in the ATF section or below it (BTF)?
Every landing page should have at least one call to action (CTA) that encourages visitors to take a specific action (e.g. “Add to basket” or “Sign up now”). Some marketers believe that the CTA should always be in the Above The Fold section. This means users can see it and interact quickly.
However, visitors are not always ready to take action as soon as they land on your website. You may therefore get better results by placing the CTA lower down, somewhere in the BTF section. This gives users a chance to find out more information before making a decision.
To find out what works best on your pages, run A/B tests (or split tests).
Here are brief guidelines explaining how it works:
- Decide which CTA locations you want to test and create a new website design.
- Show the new design (variant) to 50% of visitors and the existing design (control) to the other half.
- Implement the version that generates more conversions in full.
Summary
As you can see, the Above The Fold section plays an important role in SEO activities. It is therefore worth following the guidelines above to generate as many views, sales and profits as possible.
