The hero section is the first, usually largest, block at the top of a web page: typically a headline, a sentence or two of supporting text, a main button and often an image or video. It is what visitors see before they scroll, and it decides whether they stay long enough to read the rest.
How a hero section works
A visitor arriving from Google, an ad or a social post makes a quick judgement: am I in the right place, is this for someone like me, and is it worth my time? The hero’s job is to answer all three. A strong one usually contains:
- A headline that says what you offer in the customer’s words, not a slogan.
- A supporting line naming who it is for and the main benefit or difference.
- One primary call to action, with an optional quieter secondary one.
- A relevant image: the product, the work in progress, the finished result. Stock photos of handshakes add nothing.
- Where it helps, a short trust cue such as a review rating, an accreditation the business genuinely holds, or the area you cover.
Because it sits above the fold, the hero also carries technical weight. Its image is often the largest element on screen, which makes it the element Google measures for Largest Contentful Paint (LCP), one of the Core Web Vitals. A heavy, uncompressed image or an autoplaying background video can make the page feel slow before the visitor has read a word.
Why it matters
Most visitors decide within moments whether to stay. If your hero says “Welcome to our website” or “Excellence in every project”, the visitor has to scroll and work out what you do, and many will not bother. A clear hero means fewer people bounce straight back to the search results, which matters even more when each of those visits costs you money through Google Ads or Meta ads.
On a landing page, the hero also has to deliver message match. If the ad promised “Same-day boiler repair in Croydon”, the headline should repeat that promise rather than open with the company’s history.
Common mistakes
- Clever or abstract headlines that make sense only to the business owner.
- Image sliders and carousels. Visitors rarely wait for the second slide, and each slide adds weight to the page.
- Several buttons of equal prominence competing for the same click.
- A tall image pushing the headline and button below the visible screen on phones.
- Text laid over a busy photo with weak colour contrast, which is hard to read and fails accessibility checks.
- Hero images set to lazy-load, or added as CSS backgrounds without preloading, which slows LCP.
How to act on it
Open your key pages on a phone and look only at what appears before you scroll. Ask someone who does not know your business to tell you, after ten seconds, what you do, who it is for and what they would do next. If they cannot, rewrite the headline and supporting line before touching the design.
Then tidy the build: one primary button with a specific label (“Get a quote”, “Book a free call”), an image that is compressed, sized properly for mobile and not lazy-loaded, and text that stays readable on a screen 375 pixels wide. If the page receives paid traffic, write a hero for each main ad theme rather than sending every campaign to one generic page. Writing and testing heroes that match their ads is a large part of my work on landing pages for Google and Facebook ads.