De <head> van een HTML-pagina is onzichtbaar voor gebruikers maar wordt gelezen door al het andere: zoekmachines, scrapers van sociale media, browsers en bots. Het verkeerd doen kost je rankings en lelijke sociale previews. Het goed doen zijn zo'n 30 regels markup die je één keer schrijft en zelden meer aanraakt. Dit is wat die 30 regels zouden moeten bevatten.
De Onmisbare Basis
Twee tags die op elke pagina moeten staan, zonder uitzonderingen:
<!-- Character encoding: always first, always UTF-8 -->
<meta charset="UTF-8">
<!-- Viewport: required for responsive design to work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">De charset-declaratie moet binnen de eerste 1024 bytes van het document staan zodat de browser de codering kan bepalen voordat de rest wordt geparst. UTF-8 verwerkt elke taal en emoji ter wereld — er is geen reden om iets anders te gebruiken. De viewport-metatag vertelt mobiele browsers niet uit te zoomen om een desktopindeling te tonen. Zonder dit zal Google's mobile-first-indexering je pagina bestraffen.
Titel en Meta Description
Deze twee beïnvloeden direct de klikfrequenties vanuit zoekresultaten:
<!-- Title: shown in browser tab and search result headlines -->
<title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>
<!-- Meta description: shown as snippet text in search results -->
<meta
name="description"
content="A complete guide to HTML form input types, constraint validation, label association, and building accessible forms. Real examples with no library dependencies."
>- Titellengte. Houd het onder de 60 tekens zodat het niet afgekapt wordt in SERP's. Zet de belangrijkste zoekwoorden vooraan — zoekmachines wegen het begin zwaarder.
- Titelformaat. Een veelgebruikt patroon: Primair Onderwerp — Secundaire Info | Merk. Het merk achteraan zorgt ervoor dat de nuttige inhoud vooraan staat.
- Lengte meta description. Google kapt af rond de 155–160 tekens. Schrijf het voor een mens die het leest, niet volgestopt met zoekwoorden — het beïnvloedt de ranking niet direct, maar het beïnvloedt wel of mensen klikken.
- Uniciteit. Elke pagina heeft een unieke titel en beschrijving nodig. Dubbele titels op je site verwarren zoekmachines over welke pagina ze moeten rangschikken voor een bepaalde zoekopdracht.
Open Graph — Sociale Deelvoorbeelden
Wanneer iemand je URL deelt op LinkedIn, Slack, Facebook of Discord, scrapen die platformen je Open Graph-tags om de voorbeeldkaart te bouwen. Zonder hen is de preview leeg of lelijk. Met hen ziet het er professioneel uit:
<!-- Open Graph: controls how pages appear when shared on social media -->
<meta property="og:type" content="article">
<meta property="og:title" content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta property="og:description" content="Build forms that work for everyone using HTML's built-in input types, constraint validation, and accessibility features.">
<meta property="og:url" content="https://devtools.example.com/blog/html/html-forms-guide">
<meta property="og:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="DevTools Blog">og:type. Gebruikarticlevoor blogposts. Gebruikwebsitevoor homepagina's en categoriepagina's. Het type beïnvloedt hoe sommige platformen de kaart weergeven.og:image. De belangrijkste OG-tag voor visuele impact. Streef naar 1200×630px (de canonieke Open Graph-afbeeldingsgrootte). PNG of JPEG werken beiden. Facebook en LinkedIn vereisen minstens 200×200px.og:url. Stel dit in op de canonieke URL van de pagina — niet de URL waarop de gebruiker terechtkwam, die mogelijk UTM-parameters bevat.og:titlevs<title>. Deze kunnen verschillen. Je HTML<title>is geoptimaliseerd voor zoekopdrachten; jeog:titlekan wat menselijker en pakkender zijn omdat het voor sociale context is.
Twitter Card-tags
Twitter/X heeft zijn eigen set tags die vergelijkbaar werken als Open Graph. Als OG-tags aanwezig zijn, valt Twitter voor sommige velden terug op hen — maar je zou de Twitter-specifieke tags toch moeten instellen voor de beste resultaten:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@devtoolsblog">
<meta name="twitter:creator" content="@alicechen_dev">
<meta name="twitter:title" content="HTML Forms Guide — Real Examples, No Libraries">
<meta name="twitter:description" content="Everything you need for HTML forms: input types, validation, accessibility. Working code throughout.">
<meta name="twitter:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta name="twitter:image:alt" content="Screenshot showing a styled HTML form with accessible error messages">summary_large_image geeft je de grote bannerachtige kaart. summary geeft je een kleine vierkante miniatuur. De twitter:image:alt-tag wordt vaak vergeten maar is belangrijk — het is de alt-tekst voor de kaartafbeelding, belangrijk voor Twitter-gebruikers die schermlezers gebruiken.
Canonieke URL
Als dezelfde inhoud toegankelijk is via meerdere URL's (met/zonder slash, met UTM-parameters, HTTP vs HTTPS, www vs niet-www), heb je een canonical-tag nodig om zoekmachines te vertellen welke versie de "echte" is:
<!-- Canonical: tells search engines which URL is the authoritative version -->
<link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">De canonieke URL moet altijd de volledige absolute URL zijn, inclusief protocol. Zonder canonical-tag moet Google raden — en het kan een andere versie van je pagina kiezen dan je bedoelde, waardoor je rankingsignalen over meerdere URL's worden verdeeld.
Robots Metatag
De robots-metatag vertelt zoekmachinecrawlers wat ze met een pagina mogen doen. De meeste pagina's hebben hem niet nodig — het standaardgedrag is indexeren en links volgen. Maar je zult hem willen voor specifieke gevallen:
<!-- Default (you don't need to write this, but it's the implicit behaviour) -->
<meta name="robots" content="index, follow">
<!-- Don't index this page (e.g. admin pages, thank-you pages) -->
<meta name="robots" content="noindex, follow">
<!-- Don't follow links on this page (rare) -->
<meta name="robots" content="index, nofollow">
<!-- Don't index, don't follow, don't cache, don't show snippet -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet">Goede kandidaten voor noindex: zoekresultatenpagina's, gefilterde categoriepagina's met dunne inhoud, gebruikersaccountpagina's, bestellingsbevestigingspagina's, stagingomgevingen. Als je blokkeert met robots.txt, let dan op dat noindex in de metatag betrouwbaarder is — Google respecteert het zelfs bij het direct crawlen van de pagina.
hreflang voor Meertalige Sites
Als je site inhoud in meerdere talen heeft, vertelt hreflang zoekmachines welke versie van een pagina ze aan gebruikers in verschillende regio's moeten tonen. Zonder dit kiest Google één versie en ranken je niet-Engelstalige pagina's mogelijk nooit in hun doelmarkten:
<!-- hreflang: tells Google which language version to show per region -->
<link rel="alternate" hreflang="en" href="https://example.com/blog/html-forms">
<link rel="alternate" hreflang="es" href="https://example.com/es/blog/html-forms">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/blog/html-forms">
<link rel="alternate" hreflang="de" href="https://example.com/de/blog/html-forms">
<link rel="alternate" hreflang="x-default" href="https://example.com/blog/html-forms">x-default is de fallback voor gebruikers wiens taal niet overeenkomt met een specifieke regio. Elke pagina in de hreflang-set moet de volledige lijst bevatten, inclusief een zelfverwijzende vermelding. Het is uitgebreid, maar het missen van een vermelding zorgt ervoor dat Google de hele annotatie negeert.
Gestructureerde Gegevens met JSON-LD
Gestructureerde gegevens in JSON-LD-formaat laten Google rijke resultaten weergeven — sterbeoordelingen, artikelmetadata, veelgestelde vragen, how-to-stappen — direct in zoekresultaten. Voor een blogartikel is dit het minimale nuttige schema:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Forms Guide — Input Types, Validation & Accessibility",
"description": "A complete guide to HTML form input types and built-in validation.",
"author": {
"@type": "Person",
"name": "Alice Chen",
"url": "https://devtools.example.com/authors/alice-chen"
},
"publisher": {
"@type": "Organization",
"name": "DevTools Blog",
"logo": {
"@type": "ImageObject",
"url": "https://devtools.example.com/logo.png"
}
},
"datePublished": "2026-04-16",
"dateModified": "2026-04-16",
"image": "https://devtools.example.com/og/html-forms-guide.png",
"url": "https://devtools.example.com/blog/html/html-forms-guide"
}
</script>JSON-LD gaat in een <script type="application/ld+json">-blok overal in de <head> of <body> — de head is conventioneel. Het beïnvloedt de pagina-rendersnelheid niet en staat volledig los van je paginamarkup, waardoor het gemakkelijk server-side te genereren is.
Wat je NIET Moet Gebruiken — De Dode Metatag
Eén metatag die je in oude tutorials en legacy-codebases ziet die echt niets doet:
<!-- This does nothing for modern SEO. Google stopped using it in 2009. -->
<meta name="keywords" content="html, forms, validation, accessibility">Google kondigde officieel in 2009 aan dat het de keywords-metatag negeert vanwege wijdverbreid spammisbruik. Bing en andere grote zoekmachines volgden. Je kunt hem verwijderen zonder enige SEO-impact. De enige plek waar hij nog enig nut heeft, is in interne sitezoekopdrachten — en alleen als je zoeksoftware specifiek geconfigureerd is om hem te lezen.
Een Compleet head-template
Hier is een productieklaar <head> dat je kunt gebruiken als startsjabloon voor elk artikel of elke pagina:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Encoding and viewport: always first -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Core SEO -->
<title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>
<meta name="description" content="A complete guide to HTML form input types, built-in constraint validation, and accessible form patterns. Real examples, no libraries.">
<link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">
<meta name="robots" content="index, follow">
<!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:type" content="article">
<meta property="og:title" content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta property="og:description" content="Build forms that work for everyone using HTML's built-in features.">
<meta property="og:url" content="https://devtools.example.com/blog/html/html-forms-guide">
<meta property="og:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="DevTools Blog">
<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@devtoolsblog">
<meta name="twitter:title" content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta name="twitter:description" content="Real form examples with no library dependencies.">
<meta name="twitter:image" content="https://devtools.example.com/og/html-forms-guide.png">
<meta name="twitter:image:alt" content="An accessible HTML form with inline error validation">
<!-- hreflang (only needed for multilingual sites) -->
<link rel="alternate" hreflang="en" href="https://devtools.example.com/blog/html/html-forms-guide">
<link rel="alternate" hreflang="x-default" href="https://devtools.example.com/blog/html/html-forms-guide">
<!-- Structured data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTML Forms Guide",
"author": { "@type": "Person", "name": "Alice Chen" },
"datePublished": "2026-04-16",
"image": "https://devtools.example.com/og/html-forms-guide.png"
}
</script>
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">
</head>Tools voor HTML-werk
Als je met HTML-markup werkt, houdt HTML Formatter je <head> leesbaar en correct ingesprongen, en vangt HTML Validator structurele fouten op voordat ze in productie terechtkomen. Voor het live bewerken en bekijken van HTML laat HTML Editor je wijzigingen in realtime zien.
Samenvatting
De metatags die het verschil maken zijn: charset en viewport als basis, een goed geschreven <title> en meta description voor zoekklikken, Open Graph- en Twitter Card-tags voor sociale previews, een canonical-link om problemen met dubbele inhoud te voorkomen, en JSON-LD gestructureerde gegevens voor rijke resultaten. Sla de keywords-metatag over — die is al 15 jaar dood. Doe de rest goed en je pagina's zien er overal scherp uit.