Meta-tags staan in het <head>-gedeelte van je HTML-document en geven informatie over de pagina aan browsers, zoekmachines en sociale media. Hieronder vind je de belangrijkste meta-tags overzichtelijk bij elkaar.
Basis meta-tags
| Tag | Beschrijving | Voorbeeld |
|---|
<title> | Titel van de pagina (verschijnt in zoekresultaten en browser-tab) | <title>HTMLhulp - Leer HTML stap voor stap</title> |
<meta charset> | Karaktercodering instellen (UTF-8 is standaard) | <meta charset="UTF-8"> |
<meta name="viewport"> | Responsief gedrag op mobiel instellen | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
<meta name="description"> | Beschrijving voor zoekmachines | <meta name="description" content="Alles wat je moet weten over HTML."> |
<meta name="keywords"> | Oude manier voor zoekwoorden (meestal genegeerd door Google) | <meta name="keywords" content="HTML, CSS, webdesign"> |
<meta name="author"> | Auteur van de pagina | <meta name="author" content="Dave Gerrits"> |
SEO-gerelateerde meta-tags
| Tag | Beschrijving | Voorbeeld |
|---|
<meta name="robots"> | Instructies voor zoekmachines (indexeren of niet) | <meta name="robots" content="index, follow"> |
<meta name="googlebot"> | Specifiek voor Googlebot | <meta name="googlebot" content="noindex, nofollow"> |
<link rel="canonical"> | Geeft de voorkeurs-URL aan bij duplicate content | <link rel="canonical" href="https://www.htmlhulp.nl/artikel"> |
Sociale media (Open Graph)
| Tag | Beschrijving | Voorbeeld |
|---|
<meta property="og:title"> | Titel voor social media | <meta property="og:title" content="Leer HTML met onze complete handleiding"> |
<meta property="og:description"> | Beschrijving voor social media | <meta property="og:description" content="De ultieme gids voor HTML-tags, formulieren en meer."> |
<meta property="og:image"> | Afbeelding voor social previews | <meta property="og:image" content="https://www.htmlhulp.nl/images/og-image.jpg"> |
<meta property="og:url"> | Canonieke URL van de pagina | <meta property="og:url" content="https://www.htmlhulp.nl/artikel"> |
<meta property="og:type"> | Type content (website, article, product, etc.) | <meta property="og:type" content="article"> |
Twitter Cards
| Tag | Beschrijving | Voorbeeld |
|---|
<meta name="twitter:card"> | Type kaart (summary, summary_large_image) | <meta name="twitter:card" content="summary_large_image"> |
<meta name="twitter:title"> | Titel voor Twitter | <meta name="twitter:title" content="HTML Tags Uitleg"> |
<meta name="twitter:description"> | Beschrijving voor Twitter | <meta name="twitter:description" content="Leer HTML stap voor stap met duidelijke voorbeelden."> |
<meta name="twitter:image"> | Afbeelding voor Twitter | <meta name="twitter:image" content="https://www.htmlhulp.nl/images/twitter.jpg"> |
<meta name="twitter:site"> | Twitter-gebruikersnaam van de site | <meta name="twitter:site" content="@htmlhulp"> |
Overige handige meta-tags
| Tag | Beschrijving | Voorbeeld |
|---|
<meta http-equiv="refresh"> | Automatisch herladen of doorsturen | <meta http-equiv="refresh" content="5; url=https://www.htmlhulp.nl"> |
<meta name="theme-color"> | Bepaalt kleur van browser op mobiel | <meta name="theme-color" content="#00bf63"> |
<meta name="format-detection"> | Mobiele telefoonnummer-detectie uitschakelen | <meta name="format-detection" content="telephone=no"> |
<base> | Stelt basis-URL in voor relatieve links | <base href="https://www.htmlhulp.nl/"> |
