HTMLhulp.nl logo
Meta tags en Open Graph in HTML

Meta tags en Open Graph in HTML

Meta tags en Open Graph in HTML

Meta tags zijn onzichtbare stukjes informatie die je toevoegt aan het <head>-gedeelte van je HTML-document. Hoewel bezoekers ze niet direct zien, spelen ze een cruciale rol in hoe zoekmachines, sociale media en browsers je website begrijpen en weergeven. Wie goede meta tags gebruikt, kan rekenen op betere zichtbaarheid in zoekresultaten en aantrekkelijkere previews wanneer de site gedeeld wordt op platforms zoals Facebook, LinkedIn of Twitter. In dit artikel duiken we diep in de wereld van meta tags en Open Graph. Je leert niet alleen wat ze zijn, maar ook hoe je ze slim inzet voor SEO, toegankelijkheid en gebruiksvriendelijkheid.

Wat zijn meta tags?

Meta tags zijn instructies voor browsers en zoekmachines. Ze staan altijd in het <head>-gedeelte van een HTML-pagina en bestaan uit attributen die informatie geven over de inhoud. Het woord “meta” betekent “informatie over informatie”. In plaats van zichtbare content te tonen, beschrijven meta tags de pagina.

Een simpel voorbeeld:

<meta name="description" content="Dit is een voorbeeld van een meta description.">

Dit stukje code vertelt zoekmachines hoe ze de pagina kort kunnen beschrijven.

Belangrijke meta tags voor SEO en gebruik

Er zijn tientallen meta tags, maar in de praktijk zijn er een paar onmisbaar.

1. Charset

De charset bepaalt welke tekenset de browser moet gebruiken. Tegenwoordig is UTF-8 de standaard, omdat dit vrijwel alle tekens ondersteunt, inclusief emoji.

<meta charset="utf-8">

2. Viewport

Voor mobiele apparaten is de viewport essentieel. Hiermee vertel je de browser hoe de pagina zich moet aanpassen aan verschillende schermgroottes.

<meta name="viewport" content="width=device-width, initial-scale=1">

3. Description

De description is een korte samenvatting van je pagina en wordt vaak gebruikt als snippet in zoekmachines. Houd hem tussen 120 en 160 tekens.

<meta name="description" content="Leer alles over meta tags en Open Graph in HTML. Verbeter je SEO en deelbare previews.">

4. Robots

Met de robots-tag kun je zoekmachines vertellen wat ze wel of niet mogen indexeren.

<meta name="robots" content="index, follow">

Je kunt opties combineren, zoals noindex, nofollow, of noarchive.

5. Author

Hiermee vermeld je de auteur van de pagina. Dit is optioneel, maar kan handig zijn in bepaalde contexten.

<meta name="author" content="Dave Gerrits">

6. Keywords (verouderd)

Vroeger werden keywords gebruikt om zoekmachines trefwoorden te geven. Tegenwoordig negeren zoekmachines deze tag, maar soms wordt hij nog toegepast voor interne doeleinden.

Voorbeeld van een basis-set meta tags

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Ontdek hoe je meta tags en Open Graph slim gebruikt voor SEO en sociale media.">
<meta name="robots" content="index, follow">
<meta name="author" content="HTMLhulp.nl">
<title>Meta tags en Open Graph in HTML</title>
</head>

Wat is Open Graph?

Open Graph is een protocol dat ontwikkeld is door Facebook, maar tegenwoordig ook door andere sociale media wordt gebruikt, zoals LinkedIn en Twitter. Het doel van Open Graph is dat een gedeelde link er netjes uitziet met een titel, beschrijving en afbeelding.

Zonder Open Graph bepaalt een sociaal platform vaak zelf welke tekst of afbeelding wordt gebruikt, en dat pakt lang niet altijd goed uit. Met Open Graph heb je de controle.

Belangrijke Open Graph-tags

Een Open Graph-set bestaat meestal uit de volgende onderdelen:

<meta property="og:title" content="Meta tags en Open Graph in HTML">
<meta property="og:description" content="Leer hoe je meta tags en Open Graph inzet om betere SEO en sociale previews te krijgen.">
<meta property="og:image" content="https://htmlhulp.nl/images/meta-open-graph.jpg">
<meta property="og:url" content="https://htmlhulp.nl/meta-tags-open-graph">
<meta property="og:type" content="article">

  • og:title – de titel van je pagina zoals deze verschijnt in de preview

  • og:description – de korte beschrijving die getoond wordt

  • og:image – de afbeelding die wordt weergegeven bij de link

  • og:url – de canonieke URL van de pagina

  • og:type – het type content, bijvoorbeeld article, website, video, of product

Twitter Cards

Twitter gebruikt een vergelijkbaar systeem, genaamd Twitter Cards. Hiermee kun je bepalen hoe een link er op Twitter uitziet.

Voorbeeld:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta tags en Open Graph in HTML">
<meta name="twitter:description" content="Slimme uitleg over meta tags en Open Graph voor SEO en sociale media.">
<meta name="twitter:image" content="https://htmlhulp.nl/images/meta-open-graph.jpg">

Met summary_large_image geef je aan dat er een grote afbeelding moet worden getoond.

Voorbeeld: complete meta en Open Graph set

Hier zie je hoe een complete combinatie eruitziet voor een blogartikel:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Leer hoe je meta tags en Open Graph inzet om betere SEO en sociale media previews te krijgen.">
<meta name="robots" content="index, follow">
<meta name="author" content="HTMLhulp.nl">
<title>Meta tags en Open Graph in HTML</title><meta property=“og:title” content=“Meta tags en Open Graph in HTML”>
<meta property=“og:description” content=“Slimme uitleg over meta tags en Open Graph voor SEO en sociale media.”>
<meta property=“og:image” content=“https://htmlhulp.nl/images/meta-open-graph.jpg”>
<meta property=“og:url” content=“https://htmlhulp.nl/meta-tags-open-graph”>
<meta property=“og:type” content=“article”>

<meta name=“twitter:card” content=“summary_large_image”>
<meta name=“twitter:title” content=“Meta tags en Open Graph in HTML”>
<meta name=“twitter:description” content=“Meta tags en Open Graph uitgelegd in duidelijke voorbeelden.”>
<meta name=“twitter:image” content=“https://htmlhulp.nl/images/meta-open-graph.jpg”>
</head>

Best practices voor meta tags en Open Graph

  1. Unieke titels en descriptions: elke pagina moet eigen meta-informatie hebben.

  2. Lengte: houd de description onder de 160 tekens zodat deze niet wordt afgebroken.

  3. Afbeeldingen optimaliseren: gebruik een formaat van minimaal 1200×630 pixels voor Open Graph.

  4. Testen: gebruik tools zoals de Facebook Sharing Debugger en de Twitter Card Validator om te checken of je tags goed werken.

  5. SEO en CTR: schrijf meta descriptions alsof het kleine advertenties zijn. Ze moeten verleiden om te klikken.

Veelgemaakte fouten

  • Geen meta description instellen, waardoor zoekmachines zelf een stuk tekst kiezen.

  • Te veel of irrelevante informatie in descriptions.

  • Geen Open Graph-tags, waardoor sociale previews er rommelig uitzien.

  • Geen fallback-afbeelding instellen, waardoor er een willekeurige afbeelding wordt gekozen.

Het effect op SEO en sociale media

Hoewel meta tags geen directe rankingfactor meer zijn voor zoekmachines, hebben ze indirect wél veel invloed. Een goede description kan je doorklikratio verhogen. En hoe vaker mensen doorklikken, hoe relevanter Google je pagina vindt.

Open Graph en Twitter Cards vergroten je zichtbaarheid op sociale media. Een link met een pakkende titel, een aantrekkelijke beschrijving en een duidelijke afbeelding wordt veel vaker aangeklikt dan een kale link. Daarmee zorg je voor meer verkeer naar je site.