Ben's Hobbyhoekje -- Over meta-tags

Over <META>-tags

<meta>-tags bevatten metadata. De term metadata betekent: informatie over gegevens.

Een <meta>-tag bevat informatie over het HTML-document. Dat verschijnt niet op het scherm, maar kan door computers e.d. worden verwerkt.

De meest gebruikte toepassing is voor het specificeren van de pagina-inhoud, keywords, naam van de auteur, datum laatste wijziging, enz. Andere veel gebruikte toepassingen zijn het automatisch herladen van de pagina na een zekere tijdsduur, toelaten van zoekmachines, toelaten van andere webdiensten, enz.

in de HTML-specificaties zijn <meta>-tags alleen toegestaan in de <head>-sectie van het webdocument.

Een <meta>-tag bevat het attribuut charset, het attribuut http-equiv of het attribuut name, maar niet twee of drie tegelijk.
Als het attribuut name of http-equiv wordt gebruikt, is ook een attribuut content. Dat bevat de data die hoort bij de name of http-equiv. Als er meerdere gegevens zijn, zijn die gescheiden door een komma.
Er kunnen ook globale attributen worden gebruikt zoals id, class en accesskey. De zin daarvan is mij niet duidelijk.
Het attribuut scheme is niet meer beschikbaar in HTML5.

charset: Het attribuut charset is nieuw in HTML5 en definieert de gebruikte karakterset. De HTML 4 code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
is in HTML5:
<meta charset="UTF-8">
De HTML 4-methode om een karakterset te definiëren is in HTML5 nog wel toegestaan. De HTML5-aanpak geeft echter wat minder type-werk.

http-equiv: Dit attribuut maakt een HTTP-header aan, waarmee de browser op het huidige document een zekere actie uitvoert. De gevraagde actie wordt gespecificeerd in het content-attribuut.
Mogelijkheden zijn voor http-equiv zijn:

content-type. Definieert de inhoud van het document, zoals hierboven al is beschreven.
default-style. Definieert het stylesheet dat bij voorkeur moet worden gebruikt. content bevat de naam van het stylesheet. Voorbeeld:
<meta http-equiv="default-style" content="bbstyles.css">
N.B.: De file bbstyles.css moet bestaan en worden gekoppeld met een <link>-tag:
<link rel="stylesheet" href="bbstyles.css">
language. Hier geef je aan in welke taal het document is geschreven. content bevat de taal in de lettercode van RFC1766. Dat is een internationale norm die aanduidingen geeft voor talen. Voor de landen waar die talen worden gesproken worden de twee-letter aanduidingen van ISO 3166 gebruikt.
Voorbeeld voor een Nederlandstalige pagina:
<meta http-equiv="language" content="NL">
Als een taal meerdere varianten kent, kunnen er ook twee codes staan. Voor een Brits-Engelse pagina:
<meta http-equiv="language" content="EN-GB">.
refresh. De pagina wordt automatisch ververst, na een zekere tijd. content bevat de lengte van het tijdsinterval, in seconden. Voorbeeld (de pagina wordt na 5 minuten [= 300 seconden] ververst:
<meta http-equiv="refresh" content="300">

name: De HTML5-specificatie noemt een beperkt aantal mogelijk waarden die je in name kunt zetten. Die namen zijn:

application-name. Browsers kunnen dit gebruiken om een applicatie te vinden, die in deze webpagina wordt gestart. Deze name gebruik je niet voor een "gewone" website. Alleen in speciale gevallen, als de browser een programma moet starten zou je application-name kunnen gebruiken.
author. Hiermee geeft je naam op van de persoon die het webdocument heeft gemaakt. Wordt (ook) gebruikt door zoekmachines als steekwoord om op te zoeken.
description. Dit is een beschrijving, in een enkele zin, van de inhoud van de bladzijde. Wordt gebruikt door zoekmachines als omschrijving van een pagina in een list met zoekresultaten.
generator. Hiermee geef je aan met welk programma de HTML is gemaakt. Op het moment dat dit wordt geschreven, wordt deze site onderhouden met RJ TextEd versie 14.51. Voor deze website zou de tag kunnen zijn:
<meta name="generator" content="RJ TextEd 14.51">
Er bestaat ook een name="formatter". Die wordt nauwelijks gebruikt, maar is verder identiek aan generator.
keywords. Dit is een lijst met steekwoorden, gescheiden door komma's, die door zoekmachines worden gebruikt bij het indexeren. Deze <meta>-tag wordt vaak gebruikt om crawlers te misleiden, om zo hoger in de zoekresultaten te komen. Goede webcrawlrs hebben dat in de gaten en sluiten zo'n pagina uit van de indexering.
viewport. Dit is nieuw in HTML5. Het geeft ontwikkelaars controle over het zichtbare deel van het webdocument. Deze tag is onmisbaar als je een responsive website maakt. De syntax is:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Behalve de hierboven genoemde kun je ook namen gebruiken die niet in de HTML-specificatie staan. De meest bekende is wel:
<meta name="robots" content="index,follow">
Hiermee geeft je aan wat een webcrawler op deze pagina mag/moet doen. Er zijn er ook die speciaal op een bepaalde zoekmachine zijn gericht zoals GoogleBot, BingBot en Slurp (Yahoo).

Andere waarden van name die je regelmatig tegenkomt, maar die niet in de HTML5-specificatie staan, zijn:

revisit-after. Opdracht aan een webcrawler om de pagina na een zekere tijd weer te bezoeken. Crawlers reageren hier niet echt actief op, omdat ze zelf wel 'weten' wanneer het zinvol is een pagina opnieuw te indexeren. Het beste pas je deze tag toe in combinatie met expires.
abstract. Geeft een korte beschrijving in een korte zin. Dit is dus korter dan description.
webauthor. Gelijk aan author, maar uitgebreider. Dit kan de naam van een ontwikkelteam zijn. Ook bekend als web_author.
contact. Hiermee geeft je een e-mail adres op, bijvoorbeeld van de auteur van de pagina. Het mailadres is gewoon leesbaar in de code die door de server naar de browser wordt gestuurd. Daardoor wordt dit vaak misbruikt door spambots, die het gebruiken voor het sturen van spam. Gebruik hiervan raad ik daarom af.
copyright. Hier zet je de naam van eigenaar van het auteursrecht in.
distribution. Hiermee geeft je aan wie het document te zien krijgt. content bevat één van deze drie keywords:
- Global - geeft aan dat de webpagina door iedereen kan worden gezien. Dit is de default-waarde.
- Local - geeft aan dat het document alleen lokaal kan worden bekeken, bijvoorbeeld in een intranet.
- IU - Staat voor Internal Use. Dit document is niet bedoeld om openbaar te worden gemaakt.
Niet elke browser gehoorzaamt dit. Zaken die vertrouwelijk zijn moet je niet op internet zetten (ook niet op een intranet).
expires. Hiermee geef je de datum aan wanneer de inhoud van de pagina verloopt. Zoekmachines zouden na die dag de opagina niet meer moeten indexeren en/of verwijderen uit hun zoekdatabases.
Dit attribuut wordt vaak gebruikt in combinatie met revisit-after.
format detection. Moderne browsers geven telefoonnummers weer als automatische bel-link. Dat kun je omzeilen met
<meta name="format-detection" content="telephone=no">
Telefoonnummers worden nu als normale tekst weergegeven.
OP het moment dat dit wordt geschreven is content="telephone=no" de enig mogelijke optie.
Hier aan verwant is het gedrag van telefoonnummers in browsers die de Skype-toolbar gebruiken. Het telefoonnummer wordt een link om een Skype-gesprek te starten. Dat hou je tegen met:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
Telefoonnummers zijn dan alleen aanklikbaar als je ze in de HTML omringt met sphoneid tags:
 (033) 1234 456 
fragment. Dit wordt gebruikt door sites die gebruik maken van AJAX-technologie. Je kunt dan delen van je site verversen zonder de hele pagina opnieuw te laden. Voor zoekmachines is het moeilijk om dit soort sites te indexeren, omdat de content voor een groot deel is 'verborgen'. Het content-attribuut is altijd een uitroepteken.
language. Hiermee geef je aan in welke taal je website is geschreven. content bevat de naam van een taal, bijvoorbeeld "English" of "Dutch".
De http-equiv versie (zie hierboven) wordt in de praktijk veel vaker gebruikt.
rating. Hiermee geef je aan voor welke leeftijdsgroep de pagina is bedoeld. content bevat een van deze vijf keywords, die min-of-meer voor zichzelf spreken:
- general. Dit is default. De pagina is 'algemeen'.
- mature. In Nederland heet dit: 18+.
- restricted. Beperkt. Er staat niet bij wat de beperkingen zijn.
- 14 years. 14 jaar en ouder
- safe for kids. Alle leeftijden.
reply-to. Door hier het mail-adres van de webmaster in te zetten, kan een bezoeker van de site uitvinden hoe hij op de website zelf kan reageren. Net is bij contact kan dit misbruikt worden voor het versturen van spam.

Soms worden meta-tags ingezet voor speciale doeleinden. Zo was er ooit in Internet Explorer 6 een toolbar die getoond werd op figuren. Dat kon in de browser zelf worden uitgezet, maar webmasters konden het ook met deze code:
<meta http-equiv="imagetoolbar" content="no">

Opmerking:

De overzichten van http-equiv en name zijn niet uitputtend. De mogelijkheden, zeker bij name, zijn legio.