DurfMakersWebsite bezoeken →
← Terug naar blog

Hero section best practices: zo bouw je een hero die wél converteert

11 oktober 2026
Hero section best practices: zo bouw je een hero die wél converteert

Een effectieve hero combineert één duidelijke waardepropositie, één oproep tot actie en een geoptimaliseerde hero-afbeelding die snel laadt. Die combinatie bepaalt binnen seconden of een bezoeker blijft of wegklikt. Wie deze drie elementen goed op elkaar afstemt, ziet direct meer betrokkenheid en minder afhakers, zonder dat daar een volledige restyling van de site voor nodig is.

Kort samengevat:

  • Houd de titel op 30 tot 45 tekens en de ondertitel op 16 tot 32; plaats één concrete oproep tot actie direct eronder.
  • Op ongeveer 76% van mobiele pagina’s bepaalt de afbeelding bovenaan de score voor de grootste inhoudsweergave; streef naar maximaal 2,5 seconden bij het 75e percentiel.
  • Gebruik een afbeeldingselement in HTML met passende formaten en afmetingen, geef het hoge laadprioriteit en schakel vertraagd laden voor de hoofdafbeelding uit.
  • Plaats tekst als echte HTML op de pagina, houd minimaal 4,5:1 contrast aan en zorg dat toetsenbordgebruikers de oproep tot actie kunnen bereiken.
  • Test telkens één wijziging, zoals knoptekst of beeldkeuze, en volg klikratio, uitstappercentage, laadtijd en scrolldiepte om het effect te beoordelen.
Sneleenwebsitenodig
sneleenwebsitenodig.nl
Een hero die past bij je website
Durfmakers bouwt websites met ontwerp en teksten op maat, en zorgt dat ze technisch vindbaar zijn in Google en AI-assistenten.
Bekijk hoe het werkt

Inhoudsopgave

1. Zeven praktische best practices: van headline tot microcopy

Een sterke hero staat of valt met een paar concrete keuzes, geen vage gevoelswoorden. We lopen de belangrijkste stappen langs, van tekst tot techniek.

  1. Schrijf een korte headline volgens de formule waarde plus voordeel. Benoem wat je levert en wat de bezoeker daarmee opschiet, in maximaal acht tot tien woorden. "Snel een professionele website, zonder risico" werkt beter dan een abstracte slogan.
  2. Laat de subtekst concreet maken wat de headline belooft. Eén tot twee regels zijn genoeg om uit te leggen hoe het werkt of wat er precies geleverd wordt; geen tweede verkooppraatje, maar een aanvulling.
  3. Kies één duidelijke CTA en herhaal die niet in een andere vorm. Plaats de knop direct onder de subtekst, gebruik een kleur die contrasteert met de rest van de pagina en schrijf actieve microcopy zoals "bekijk je website" in plaats van een generiek "meer info". Voor concrete tekstvoorbeelden en plaatsingstips verwijzen we naar onze checklist voor een sterke oproep tot actie.
  4. Gebruik visuals die relevant zijn voor het aanbod, niet enkel decoratief. Een foto die het product of de dienst toont werkt beter dan een generieke stockfoto, en tekst hoort nooit in de afbeelding zelf te staan.
  5. Geef snelheid voorrang boven esthetiek bij de technische keuzes. Beeldoptimalisatie en laadtijd komen eerst, de fijne visuele afwerking daarna: een trage hero verliest bezoekers voordat ze de boodschap zelfs lezen.
  6. Volg het F- of Z-leespatroon bij de opbouw van elementen. Headline linksboven of gecentreerd, subtekst eronder, CTA op de plek waar het oog van nature naartoe beweegt na het scannen van de pagina.
  7. Zet een kort, geloofwaardig vertrouwenssignaal direct onder de CTA. Een klantenaantal, een sterrenbeoordeling of een garantie in één zin verlaagt de drempel om te klikken, mits het kort en controleerbaar blijft.

De eerste seconden bepalen het grootste deel van deze beslissing: het grootste deel van de aandacht van bezoekers gaat naar content boven de vouw en zij beslissen vaak binnen enkele seconden of ze blijven, zo blijkt uit eye-tracking onderzoek dat in een praktijkartikel over hero-opbouw wordt aangehaald. Dat maakt de volgorde van informatie net zo belangrijk als de inhoud ervan. Meer over waarom dat gebied boven de vouw zo bepalend is, lees je in ons artikel over content boven de vouw op je homepage.

Pro-tip: Test je headline hardop voor te lezen; als je ademhaling er niet soepel doorheen loopt, is de zin te lang voor een hero.

Een designsysteem zoals dat van de University of Maryland geeft daarbij concrete richtlijnen: een ondertitel van ongeveer 16 tot 32 tekens en een titel van 30 tot 45 tekens houden de hero leesbaar op elk scherm, zoals te zien in het Overlay Hero-component. Dat soort harde grenzen voorkomt dat een headline die op desktop nog oogt als een korte zin, op mobiel in drie regels uiteenvalt.

2. Drie werkbare hero-patronen met uitvoeringstips

Niet elk type aanbod vraagt om dezelfde hero-opbouw. Drie patronen keren in de praktijk steeds terug, elk met eigen aandachtspunten.

  • Product in beeld: toon het product in gebruik, met een headline die het concrete voordeel noemt in plaats van een kenmerk; houd de crop zo dat het product zelf nooit wordt afgesneden en plaats de CTA direct naast of onder de productfoto.
  • Dienst of specialisme: werk met minimalistische visuals, vaak een rustige achtergrond of een enkel symbolisch beeld, en laat de CTA de absolute blikvanger zijn; minder visuele ruis betekent meer focus op de actie die je wilt.
  • Visueel gedreven merkpresentatie: een sterk beeld of korte video kan werken wanneer het merk al bekend is, maar hou het commercieel door de CTA zichtbaar te houden binnen het eerste scherm en niet te verstoppen achter animatie.

Voor elk patroon geldt dezelfde discipline: een korte kop van maximaal zo'n negen woorden, een beeldcrop die werkt op zowel breed als smal scherm, en een CTA die niet concurreert met andere knoppen in de buurt. Elementhiërarchie hoort de natuurlijke oogbeweging te volgen, bij voorkeur een F- of Z-patroon, en ontwerpbeslissingen horen te steunen op heatmaps en echte gebruikersdata in plaats van onderbuikgevoel, zoals ook naar voren komt in hetzelfde praktijkoverzicht, dat je via deze link vindt: datzelfde praktijkoverzicht.

3. Praktische LCP- en beeldoptimalisatie voor hero-afbeeldingen

De hero-afbeelding is in de meeste gevallen het element dat je laadtijdmeting bepaalt. Op ongeveer 76% van mobiele pagina's is de hero-afbeelding het LCP-element, met een streefwaarde van een 75e-percentiel LCP van 2,5 seconden of minder, aldus Web. Wie dat getal mist, ziet de volledige pagina trager aanvoelen, ook als de rest van de site snel is.

De technische checklist is overzichtelijk:

  • Gebruik een echt <picture>- of <img>-element, geen CSS background-image, zodat de browser de afbeelding direct ontdekt bij het parsen van de HTML in plaats van pas na het laden van de CSS, zoals Web aangeeft.
  • Combineer srcset en sizes met moderne formaten zoals AVIF en WebP, met JPEG als fallback, voor kleinere bestanden zonder kwaliteitsverlies, een aanpak die Webvitals aanbeveelt.
  • Geef de hero-afbeelding altijd expliciete width- en height-attributen mee zodat de browser ruimte reserveert en de pagina niet springt tijdens het laden.
  • Preload de hero-afbeelding met fetchpriority="high" en, waar relevant, imagesrcset/imagesizes, zodat de browser het bestand meteen als prioriteit behandelt in plaats van pas later in de laadvolgorde.
  • Laad de LCP-afbeelding nooit lazy, want dat vertraagt precies het element waarop de meting draait.
  • Werk met een low-quality preview die wordt vervangen door de volledige afbeelding zodra die beschikbaar is, zodat de pagina visueel meteen iets toont.
  • Serveer afbeeldingen via een CDN en comprimeer ze voordat ze live gaan, in plaats van compressie aan toeval over te laten.

Deze combinatie van moderne formaten, responsive varianten, prioriteringshints en expliciete afmetingen vermindert zowel LCP als onverwachte layoutverschuivingen (CLS), en de effecten zijn stapelbaar volgens MDN. Achterstallig onderhoud op dit vlak kost volgens Core Web Vitals-analyses al snel 300 tot 800 milliseconden vertraging, puur door het gebruik van background-image in plaats van een native afbeeldingstag.

Test de resultaten met Lighthouse voor een labmeting, vul dat aan met echte gebruikersdata (field data of RUM) en bekijk de netwerk-waterfall in de browserconsole om te zien welk bestand de vertraging veroorzaakt. Voor een stapsgewijze aanpak van compressie en CDN-keuzes verwijzen we naar ons stappenplan voor het optimaliseren van afbeeldingen.

4. Toegankelijkheidsregels voor hero secties

Een hero die goed leesbaar en bedienbaar is, converteert ook beter, omdat drempels voor een deel van de bezoekers wegvallen. De belangrijkste regels:

  • Zet alle tekst als echte HTML-tekst, nooit als onderdeel van een afbeelding, zodat schermlezers en zoekmachines de boodschap kunnen lezen.
  • Geef elke hero-afbeelding een beschrijvend alt-attribuut dat de functie of inhoud van het beeld weergeeft, niet enkel een bestandsnaam.
  • Houd een contrastratio aan van minimaal 4,5:1 tussen tekst en achtergrond, zoals de WCAG-richtlijnen rond contrast voorschrijven, zie de WCAG-toelichting op contrast.
  • Zorg dat de CTA bereikbaar is via het toetsenbord en in een logische volgorde in de focusvolgorde staat.
  • Maak animaties of video's pauzeerbaar en start ze niet automatisch met geluid.
  • Houd tekstlengtes beperkt zodat de hero bij grotere lettergroottes of vertaalde content niet uit elkaar valt.

Meer achtergrond over wat wettelijk precies verwacht wordt, staat in onze checklist website toegankelijkheid.

5. Mobile-first regels en art-direction per breakpoint

Op een smal scherm is er simpelweg minder ruimte, dus moet de hero scherpere keuzes maken. Houd de headline korter dan de desktopversie en plaats de CTA zo dat hij zonder scrollen zichtbaar is: op mobiel bepaalt die eerste blik nog sterker of iemand blijft.

Gebruik het <picture>-element om per breakpoint een andere crop te tonen in plaats van simpelweg dezelfde afbeelding te verkleinen. Een portretgerichte crop op mobiel toont vaak meer detail dan een brede desktopvariant die wordt platgedrukt.

Houd knoppen groot genoeg om met een duim te raken en laat voldoende witruimte eromheen staan, zodat de CTA niet per ongeluk samen met een ander element wordt aangetikt.

Vier regels voor een mobiele hero

6. Meetplan: KPI's en testideeën om de hero te verbeteren

Beslissingen over de hero horen op data te steunen, niet op smaak. Een kort, herhaalbaar meetplan houdt dat behapbaar.

  1. Volg de kern-KPI's structureel: klikratio op de hero-CTA, bouncepercentage, LCP, CLS en scrolldiepte geven samen een goed beeld van zowel snelheid als gedrag.
  2. Gebruik heatmaps en sessieopnames om blikpatronen te bevestigen, zodat je ziet of bezoekers de CTA daadwerkelijk zien of eroverheen scrollen.
  3. Draai eenvoudige A/B-testen op één variabele per keer: CTA-tekst, knopkleur of een foto versus een illustratie, zodat het resultaat eenduidig aan die wijziging toe te schrijven is.

Voor de bredere basis van conversie-optimalisatie en hoe je met meten begint, verwijzen we naar ons artikel over conversie-optimalisatie basics.

7. Praktische noot over prioriteiten in hero-ontwerp

In de praktijk zien we bij Durfmakers steeds hetzelfde patroon: ondernemers die eerst willen weten of een website werkt, voordat ze erin investeren. Daarom bouwen we een site altijd eerst volledig af en tonen we die op een testadres; pas als de klant tevreden is, volgt de betaling.

Onze aanpak voor een hero komt op drie dingen neer: meer over het digitaliseren van je administratie als voorbeeld van heldere value propositions en procesoptimalisatie.

  • begin met snelheid en helderheid, niet met versieringen;
  • test snel met échte bezoekers in plaats van eindeloos te polijsten op gevoel;
  • verbeter stapsgewijs op basis van wat de data laat zien, niet in één grote operatie.

Durf zelf eens kritisch naar je huidige hero te kijken: laadt hij snel, is de boodschap in drie seconden duidelijk, en weet een bezoeker meteen waar hij moet klikken? Die korte check levert vaak al meer op dan een volledige redesign.

— Patrick

Hoe Durfmakers een technisch geoptimaliseerde hero oplevert

We bouwen complete websites voor ondernemers, inclusief een hero die al deze punten direct goed heeft staan, en je betaalt pas als je de site wilt houden. Dat geldt voor zowel Start als Compleet, de twee vaste pakketten die we aanbieden op Sneleenwebsitenodig.

Sneleenwebsitenodig

Wat je concreet krijgt in een opdracht:

  • een technische LCP-check van de hero-afbeelding en de rest van de pagina;
  • copyadvies voor een heldere headline, subtekst en CTA;
  • de volledige implementatie, inclusief responsive afbeeldingen en toegankelijkheidschecks.

Wil je zien hoe dat eruitziet voor jouw onderneming? Bekijk de pakketten Start en Compleet op Sneleenwebsitenodig en laat ons de site eerst bouwen voordat je ook maar iets betaalt.

Veelgestelde vragen

Wat is een hero sectie precies?

Een hero sectie is het eerste, meestal grootste blok bovenaan een webpagina, met een headline, korte subtekst en een call-to-action. Het is het onderdeel dat bezoekers als eerste zien en dat grotendeels bepaalt of ze doorscrollen of vertrekken.

Hoe lang moet mijn hero-headline zijn?

Een werkbare richtlijn is ongeveer 30 tot 45 tekens voor de titel en 16 tot 32 tekens voor een eventuele ondertitel, zoals het Overlay Hero-designsysteem aanhoudt. Kort houden voorkomt dat de tekst op mobiel in meerdere regels breekt.

Welk LCP-doel moet mijn hero-afbeelding halen?

Streef naar een 75e-percentiel LCP van 2,5 seconden of minder, aangezien de hero-afbeelding op ongeveer 76% van mobiele pagina's het bepalende LCP-element is volgens Web. Preload de afbeelding, gebruik moderne formaten en vermijd lazy loading om dat doel te halen.

Mag ik tekst in mijn hero-afbeelding verwerken?

Nee, tekst hoort als echte HTML-tekst op de pagina te staan en niet in een afbeelding, zodat schermlezers en zoekmachines de boodschap kunnen lezen. Dit sluit ook aan bij de contrasteisen uit de WCAG-richtlijnen voor leesbare tekstoverlays.

Wat kost het om een hero sectie professioneel te laten bouwen?

We hanteren vaste, eenmalige tarieven voor onze websites, zonder abonnement, en je betaalt pas nadat de site volledig is gebouwd en je tevreden bent. Bekijk de details op Sneleenwebsitenodig.

Bronnen

Geselecteerde technische en toegankelijkheidsbronnen

Deze aanbevelingen steunen op richtlijnen van web.dev over Core Web Vitals, een MDN-artikel over LCP en responsive images, en het UMD-designsysteem voor toegankelijke hero-componenten.

Aanbevelingen