Websites worden onder andere opgebouwd uit HTML. Om de opmaak van een website overzichtelijk te maken, worden headers gebruikt. Je kunt de headers vergelijken met de titel, hoofdstukken en paragrafen uit een boek. De HTML <h1> is code voor de eerste header. In totaal kent HTML er 6. De Header H1 wordt meegegeven aan de hoofdkop van de tekst. daarom kun je ook de term “H1 titel” tegen komen. De H1 is de titel van je webpagina. Dat is ook de reden dat de H1 maar één keer voor mag komen op je website. Vooral voor de SEO (Search Engine Optimization) van een pagina is het belangrijk dat de H1 tag (of H1 titel) de lading van de pagina goed dekt. Bezoekers kunnen zo de website goed vinden als ze een zoekmachine gebruiken. Wil je dat een pagina goed scoort is het dus belangrijk om een unieke SEO H1 header te schrijven. Deze bevat de zoekterm waar mensen waarschijnlijk op zullen zoeken. Wanneer het bijvoorbeeld om een productpagina van een fietsenmaker gaat, wil je het merk en het feit dat het een fiets betreft dus absoluut in je H1 tag hebben staan.
Een H1 tag herkennen
Stel dat je een pagina aan het optimaliseren bent, dan moet je er eerst achterkomen wat de H1 op die pagina op dat moment is. Dan is het handig om een tool (bijvoorbeeld ons platform) te hebben. Hier wordt aangegeven of er een H1 op de pagina is en andere optimalisatie suggesties geeft. Om dat te achterhalen, bezoek je de website in een browser. Vaak wordt hier Google Chrome voor gebruikt, omdat dit een handige browser is voor het inspecteren en ontwikkelen van een website. Als je liever een andere browser gebruikt, kan dat natuurlijk ook.
Wanneer je de pagina in je browser geopend hebt, klik je met je rechtermuisknop op de kop van de pagina. Het zou namelijk het meest logisch zijn dat dat de eerste header is. Je kunt dan kiezen voor de functie ‘inspecteren’. Als je dat doet opent zich een vrij technisch uitziend scherm, waarin je de HTML van de pagina kunt zien. De HTML is de broncode van elke website, en hierin staat dus ook de eerste header, of H1.
Je ziet in de HTML ook meteen alle elementen staan waar de pagina uit is opgebouwd. Wanneer je je muis over de elementen beweegt, zie je die meteen oplichten op de pagina, waardoor je als het goed is snel het element H1 kunt vinden.
De span van je H1 vinden
De H1 is niet alleen opgebouwd uit de tekst. Een gedeelte van de code is de zogenaamde span. Die zorgt voor de opmaak van de tekst die op een pagina te zien is. Hierin wordt bijvoorbeeld het lettertype, de tekstgrootte en de kleur van je tekst bepaald. Wanneer de opmaak van een H2 kop beter in de pagina past, kan het zijn dat die gebruikt is, voor het element dat je eigenlijk tot je belangrijkste kop zou willen maken.
Het lijkt heel lastig om er vervolgens voor te zorgen dat je kernboodschap, waarvan je wil dat die in de H1 staat, vormgegeven wordt met de opmaak van een H2. Dat valt in de praktijk heel erg mee. Om de opmaak van een header aan te passen, kijk je in het scherm rechts van je html. Dit scherm noemen we de C6, hierin kun je zien hoe de header is opgemaakt. C6 gaat dus eigenlijk over de styling van je tekst.
Het uiterlijk van je H1 aanpassen
Wanneer je wil zorgen dat de H1 hetzelfde uiterlijk krijgt als de H2, moet je zorgen dat je de elementen van alle koppen gelijk zet. Je kopieert dus eigenlijk heel simpel de elementen die in H2 gebruikt zijn om de tekst op te maken. Denk hierbij aan kleur, lettertype en tekstgrootte in de C6 van je belangrijkste kop.
Zo zorg je ervoor dat het uiterlijk van alle koppen op een pagina hetzelfde is. Dit leest een stuk rustiger voor je bezoekers, terwijl je ook de vindbaarheid van je pagina garandeert. Dit omdat je belangrijkste kop het beste gevonden kan worden in zoekmachines!