Weet jij wat er in het tabblad staat als je jouw eigen website opent? In het tabblad staat je paginatitel. Veel websites tonen daar alleen de naam van de website, of nog erger: “Nieuwe pagina”. Dat helpt helemaal niemand.
In dit artikel leg ik uit wat een goede paginatitel is, hoe je die instelt in je CMS en welke fouten je moet vermijden. Goede paginatitels zijn een vereiste van succescriterium 2.4.2 Paginatitel (niveau A).
Wat is een paginatitel?
De paginatitel is de tekst in het <title>-element van een webpagina. Je ziet hem in het tabblad van je browser. Zoekmachines tonen het als klikbare kop in de zoekresultaten. Een schermlezer leest de paginatitel voor zodra een pagina wordt geladen.
De paginatitel is niet hetzelfde als de <h1> van een pagina. De <h1> staat zichtbaar op de pagina zelf. De paginatitel staat in de code van de pagina, maar zie je niet op de pagina.
Wat maakt een paginatitel goed?
Een goede paginatitel voldoet aan drie eisen:
- Beschrijvend: De titel beschrijft het onderwerp of doel van de pagina. Iemand die alleen de titel leest, begrijpt meteen waar de pagina over gaat.
- Uniek: Elke pagina heeft een andere titel. Zo kan een bezoeker pagina’s van elkaar onderscheiden, ook als er meerdere tabbladen open staan.
- Beknopt: Een titel van 50 tot 60 tekens is ideaal. Langere titels worden afgekapt in tabbladen en zoekresultaten.
Zet de unieke informatie altijd vooraan. Als de naam van je organisatie eerst staat, zien alle tabbladen er hetzelfde uit. Schrijf dus niet “Gemeente Utrecht – Contactformulier”, maar “Contactformulier – Gemeente Utrecht”.
Hoe stel je een paginatitel in?
In de meeste CMS-systemen vul je de paginatitel in via het titelveld van een pagina. Dat titelveld vult automatisch zowel de <h1> als het <title>-element.
In WordPress ziet dat er zo uit:
Gebruik je de Yoast SEO-plugin? Dan kun je in het Yoast SEO-tabblad onderaan de pagina (Meta vakken) een aparte SEO-titel instellen. Die overschrijft de automatische paginatitel. Yoast laat je ook direct zien hoe lang de titel is en hoe het eruitziet in Google.
Hoe bouw je een goede titelstructuur op?
Een veelgebruikt patroon is: “Paginanaam – Sitenaam”. Dit werkt voor de meeste pagina’s.
Voor een pagina met duidelijke hiërarchie, zoals een pagina met verschillende secties of categorieën, kun je ook een sectienaam toevoegen: “Paginanaam | Sectienaam | Sitenaam”.
Als scheidingsteken gebruik je een vorm van koppelteken (-) of een pipe (|). Kies er één en gebruik dat overal. Een schermlezer leest deze tekens als een korte pauze. (Het gedrag verschilt wel wat per schermlezer en per instelling.) Vermijd typografische versieringen zoals sterretjes (*), tildes (~), gelijktekens (=), enz. Deze worden wél aangekondigd.
Voorbeelden van goede en slechte paginatitels:
| Situatie | Goed | Slecht |
|---|---|---|
| Contactpagina | Contactformulier – Gemeente Utrecht | Gemeente Utrecht |
| FAQ | Veelgestelde vragen over rijbewijzen | RDW | FAQ |
| Meerstappenformulier | Stap 2 van 4: Verzendadres – Webshop XYZ | Stap 2 |
| Zoekresultaten | Zoekresultaten voor "WCAG titels" – Kennisbank | Zoekresultaten |
| Pagina niet gevonden | Pagina niet gevonden – Belastingdienst | 404 |
Meerstappenformulieren
Heeft je website een formulier met meerdere stappen? Dan heeft elke stap een eigen, beschrijvende paginatitel nodig. Zet de voortgangsinformatie vooraan in de titel, vóór de naam van de stap.
Schrijf dus niet “Verzendadres – Webshop XYZ”, maar “Stap 2 van 4: Verzendadres – Webshop XYZ”.
Een schermlezer leest de titel voor zodra een nieuwe stap wordt geladen. Als de titel beschrijft waar iemand is in het proces, horen ze direct waar ze zijn. Dat geeft houvast.
Zorg er ook voor dat de <h1> van elke stap overeenkomt met de paginatitel. Zo is de informatie consistent op zowel tabbladniveau als op paginaniveau.
De paginatitel en de eerste kop op de pagina
De paginatitel en de <h1> van een pagina zijn niet hetzelfde, maar ze horen wél grotendeels overeen te komen. De <h1> is de eerste zichtbare kop op de pagina. De paginatitel is wat je ziet in het tabblad en de zoekresultaten.
Iemand die via Google op je pagina terechtkomt, ziet eerst de paginatitel in de Google zoekresultaten. Daarna ziet diezelfde persoon de <h1> bovenaan de pagina. Als die twee sterk van elkaar afwijken, dan kan verwarrend zijn.
Let op: de paginatitel mag iets langer of anders geformuleerd zijn dan de <h1>. Zo kun je in de paginatitel de sitenaam toevoegen, terwijl de <h1> alleen de paginanaam bevat. Maar de kern moet dezelfde zijn. Schrijf dus niet als paginatitel “Contact opnemen met onze klantenservice – Bedrijf X” en als <h1> “Stuur ons een bericht”. Dat is eigenlijk te ver uit elkaar.
In de meeste CMS-systemen vullen titelveld en <h1> automatisch vanuit dezelfde bron. Je hoeft daar dan niks extra’s voor te doen. Gebruik je een aparte SEO-titel? Zorg dan dat die wél enigszins aansluit bij de <h1>.
Paginatitels in single page applications
Bij een gewone website laadt de browser een nieuwe pagina als je op een link klikt. De paginatitel wordt dan automatisch bijgewerkt. Bij een single page application (SPA) werkt dat anders. De pagina laadt maar één keer. De content verandert daarna via JavaScript, zonder een echte herlaadactie.
Het gevolg: de paginatitel blijft staan. Een schermlezer kondigt bij elke “pagina” dezelfde titel aan, of helemaal niks. Dat is een veelgemaakte fout bij applicaties gebouwd met React, Vue of Angular.
De oplossing is dat de ontwikkelaar de paginatitel via JavaScript bijwerkt bij elke routewijziging. Dat doe je met document.title:
document.title = 'Mijn bestellingen – Webshop XYZ';Veelgemaakte fouten
- Dezelfde titel op elke pagina: Als elke pagina alleen de naam van de organisatie als titel heeft, kunnen bezoekers pagina’s niet van elkaar onderscheiden. Een schermlezer leest dan op elke pagina dezelfde titel voor.
- Standaardtitels van het CMS: Sommige CMS-systemen vullen automatisch een generieke titel in, zoals “Nieuwe pagina” of “Untitled“. Vergeet niet dit aan te passen voordat je een pagina publiceert.
Vereisten en aanbevelingen voor toegankelijke paginatitels
Dit zijn de vereisten en aanbevelingen voor toegankelijke paginatitels:
WCAG-vereisten
- Elke pagina heeft een paginatitel.
- De titel beschrijft het onderwerp of doel van de pagina.
- De paginanaam is uniek.
Aanbevolen
- Zet de paginanaam vooraan, de sitenaam achteraan.
- Houd de titel tussen de 50 en 60 tekens.
- Laat de paginatitel overeenkomen met de
<h1>van de pagina. - Bij een formulier met meerdere stappen bevat de titel voortgangsinformatie en de naam van de stap.
- Vermijd typografische versieringen zoals sterretjes (
*), tildes (~), gelijktekens (=), enz.
Om te onthouden
De paginatitel is het eerste wat mensen horen bij het openen van een pagina, en het enige wat zichtbaar is buiten de pagina zelf. Geef elke pagina een unieke, beschrijvende titel. Zet de specifieke informatie vooraan en controleer of je CMS de titels goed genereert.
Gerelateerd succescriterium
Dit artikel behandelt het WCAG-succescriterium 2.4.2 Paginatitel (niveau A).
