July 30, 2024
HyperText Markup Language (HTML) is de basistaal van iedere webpagina op het internet. Het is functioneel en zorgt ervoor dat tekst zichtbaar is en contactformulieren ingeladen wordt. Zonder HTML zou het internet zoals we het nu kennen niet bestaan, maar wat houdt HTML precies in? Het bestaat uit HTML-tags en hier heb je er zeer veel van. Elke tag heeft een andere functie. In dit artikel gaan we dieper in op wat HTML is, welke tags van toepassing zijn voor SEO’ers en geven we een concreet stappenplan voor beginnende webbouwers om met HTML te beginnen.
Ga snel naar
Hoe is een HTML opgebouwd?
Een HTML-bestand bestaat uit verschillende elementen die samen de structuur en inhoud van de pagina definiëren. Het element wat het eerste voorkomt ziet er als volgt uit: ‘<html>’ Elk HTML-document begint met <html>. Het totale document bevat twee secties, namelijk de ‘<head>’ en ‘<body>’.
Head-sectie
De head-sectie bevat metadata zoals de paginatitel, koppelingen naar externe bronnen en scripts. Informatie binnen de head-sectie is vooral bestemd voor zoekmachine-crawlers en niet voor mensen. De informatie die hierin staat, wordt niet getoond op de pagina.
Body-sectie
De body-sectie omvat de werkelijke inhoud van de pagina zoals de tekst, afbeeldingen en andere multimediale elementen. Binnen de body-sectie worden HTML-tags gebruikt om de inhoud te structureren zoals ‘<p> (paragraph)’ voor de alinea’s, ‘<img> (image)’, voor afbeeldingen, ‘<a> (anchor)’ voor interne links. Om de hiërarchie van de koppenstructuur duidelijk te maken wordt er gebruik gemaakt van ‘<h1>’ tot ‘<h6>’ heading tags waarbij ‘<h1>’ als belangrijkste wordt gezien is en ‘<h6>’ als minst belangrijk. Deze elementen vormen samen de bouwstenen van een HTML-bestand.
HTML gebruiken voor SEO: de checklist
Een SEO'er hoeft geen code te schrijven. Een SEO'er moet daarentegen wel vaardig en competent zijn in het lezen en begrijpen van tags en attributen binnen HTML. Deze kennis is namelijk nodig voor het beoordelen en verbeteren van de Technische SEO. Daarom hebben we hieronder een checklist ontwikkeld met de belangrijkste HTML-tags voor SEO:
|
Begrip & betekenis van tag |
Tag & voorbeeld |
Extra uitleg |
|
Indexatie van pagina |
<meta name='robots' content='index, follow/> |
Binnen deze code geef je aan of je de pagina wel of niet in de index van de zoekmachine wilt hebben. Wanneer de meta content op ‘noindex, nofollow’ staat, geef je de crawler aan dat de content niet in de zoekmachine resultaten mag verschijnen. |
|
Metatitle & pagetitle |
<meta content="titel met daarin zoekwoord"/> |
Wanneer een zoekwoord wordt toegevoegd aan de pagetitle verhoogt het je zoekpositie in de zoekresultaten. Ook verhoogt een aantrekkelijke, kort en bondige pagetitle de klikfrequentie. |
|
Paginavouw (mobiele versie) |
<meta name="viewport"> |
Het is belangrijk om deze tag binnen je HTML-bestand te hebben, want tag zegt iets over de manier waarop een pagina weergegeven moet worden. |
|
Hoofdkop |
<h1>zoekwoord </h1> |
Het algoritme van Google kijkt naar de h1-tag voor het toekennen van een zoekpositie bij het zoekwoord. Wanneer het zoekwoord waarop je gevonden wil worden in de h1-tag staat, zal dit de rankings positief beïnvloeden. |
|
Subkoppen |
<h2>SEO</h2> <h3>Wat is SEO?</h3> <h3>SEO uitbesteden </h3> |
Met subkoppen geef je de o.a. De hiërarchie van de tekst aan en door het natuurlijk toevoegen van zoekwoorden in deze subkoppen, zal je beter in Google scoren. |
|
Alt-text van afbeelding |
<img alt="beschrijving" |
Met een alt-text geef je met steekwoorden aan wat op de afbeelding weergegeven wordt. Met het juist toevoegen van alt-texts, trek je beter verband tussen teksten en bijbehorende afbeeldingen. |
|
Afmetingen van afbeeldingen |
<img "width" & "height" |
Met width- en height-attribuut binnen de <img>-tag geef je aan welke afmetingen de crawler maximaal mag scannen. Hierdoor kan laadsnelheden geoptimaliseerd worden. |
|
Canonical |
<link rel="canonical" href="https://seeders.com/"/ |
Met een canonical geef je aan welke URL de voorkeur heeft als de originele versie van een pagina om duplicate contentproblemen te voorkomen. |
|
Anchortekst |
<a href="/outsource-link-building/">outsourcing your link building activities</a> |
Een anchor tekst is een klikbaar stukje tekst wat je naar een andere pagina/afbeelding verwijst. Met het oog op interne linking, is het verwerken van een zoekwoord binnen de anchor belangrijk. |
|
Hreflang-attribuut (onderdeel van Multi Language-websites) |
<link rel="alternate" hreflang="nl-nl" href="https://seeders.com/nl/"/> |
Het hreflang-attribuut is bedoeld voor meertalige websites. Met deze tag specificeer je welke content voor welke taal (en land) bedoeld is, waardoor Google de gebruikers de juiste content kan voorschotelen. |
|
Navigatie |
<nav> |
Elke webpagina binnen de website dient deze tag te bevatten. Deze tag maakt het de crawler mogelijk om de navigatie van de website goed uit te lezen |
|
Footer |
<footer> |
Elke webpagina van de website moet het footer-element bevatten. Het footer-element kan men inzetten voor een betere crawling van (nieuwe) pagina’s. |
Opsporen van tags in de HTML
Nu je weet welke HTML-tags voor SEO belangrijk zijn, wil je uiteraard ook weten hoe je deze tags in de broncode (=HTML) opspoort. Dit kan je eenvoudig doen door naar een webpagina op internet te gaan en de volgende snelkoppelingen in te tikken:
- Google Chrome (CTRL + U)
- Safari (Option + Command + U)
Als je dat eenmaal hebt gedaan, tref je de volgende tekst in de URL van de browser: view-source:. Via de volgende link tref je een voorbeeld van een broncode. Binnen de het HTML-document kan je eenvoudig met de zoekfunctie (CTRL + F voor Chrome) naar tags uit de checklist zoeken. Kan je deze tags niet vinden? Controleer dan de spelling of zoek naar een klein deel van het woord (bijv. Footer in plaats van <footer>)
Op zoek naar een partner om SEO aan uit te besteden?
Neem contact op!
HTML voor beginnende webbouwers
Het effectieve schrijven van de code is andere koek. We hebben een klein stappenplan geschreven om beginnende webbouwers op weg te helpen en om basiskennis HTML aan te leren. Binnen dit stappenplan verwijzen we naar relevante bronnen om HTML-kennis in de praktijk te leren.
Stappenplan om HTML-codes te schrijven
Tips wanneer je met HTML gaat werken
Hieronder tref je een aandachtspunt wanneer je HTML-codes schrijft en tref je een tweetal tips die je helpen bij het verder ontwikkelen van praktijkkennis binnen de HTML.
Is HTML nog steeds relevant in de toekomst?
HTML blijft een fundamenteel onderdeel van het web en er kan geconcludeerd worden dat dat voor de toekomst zo blijft. Hoewel nieuwere technologieën zoals Javascript en contentmanagement systemen (CMS) steeds functioneler worden, blijft HTML de basis voor het structureren van webpagina’s. Deze gestandaardiseerde weergave is essentieel voor een consistente gebruikerservaring over verschillende apparaten en browsers.