HTML => Meta informatie

Invoering

Metatags in HTML-documenten bieden nuttige informatie over het document, waaronder een beschrijving, trefwoorden, auteur, datums van wijzigingen en ongeveer 90 andere velden. Dit onderwerp behandelt het gebruik en het doel van deze tags.

Syntaxis

<meta name="metadata name" content="value">
<meta http-equiv="pragma directive" content="value">
<meta charset="encoding label">

Opmerkingen

De metatag is een HTML-tag die wordt gebruikt om de metagegevens van het HTML-document in te stellen. Metatags moeten het hoofdelement ingaan. Een pagina kan een willekeurig aantal metatags bevatten.

De metatag- keywords worden meestal niet gebruikt door robots. De meeste zoekmachines bepalen welke zoekwoorden passen bij de inhoud op de webpagina's. Dat gezegd hebbende, niets zegt dat je niet langer de metatag voor zoekwoorden moet opnemen.

De metagegevens van een pagina worden meestal gebruikt door de browser (zoals het schalen van een document) en webcrawlende spiders die worden gebruikt door zoekmachines (Google, Yahoo! Bing).

De specificatie geeft een aantal gestandaardiseerde metadatanamen voor gebruik met <meta name> en gestandaardiseerde metadata pragma-richtlijnen voor gebruik met <meta http-equiv> . Veel services op internet (webcrawlers, authoringtools, services voor sociaal delen, enz.) Gebruiken echter het formulier <meta name> als generiek uitbreidingspunt voor metagegevens. Sommige hiervan staan vermeld op de wikipagina van de spec .

Tekencodering

Het kenmerk charset geeft de tekencodering voor het HTML-document aan en moet een geldige tekencodering zijn (voorbeelden zijn windows-1252 , ISO-8859-2 , Shift_JIS en UTF-8 ). UTF-8 (Unicode) is het meest gebruikt en zou voor elk nieuw project moeten worden gebruikt.

<meta charset="UTF-8">

<meta charset="ISO-8859-1">

Alle browsers hebben altijd het <meta charset> herkend, maar als u om een of andere reden uw pagina als geldige HTML 4.01 wilt gebruiken, kunt u in plaats daarvan het volgende gebruiken:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Zie ook de coderingsstandaard om alle beschikbare tekencoderingslabels te bekijken die browsers herkennen.

Automatisch vernieuwen

Als u de pagina om de vijf seconden wilt vernieuwen, voegt u dit meta element toe aan het head element:

<meta http-equiv="refresh" content="5">

VOORZICHTIGHEID! Hoewel dit een geldige opdracht is, wordt het aanbevolen deze niet te gebruiken vanwege de negatieve effecten op de gebruikerservaring. Als de pagina te vaak wordt vernieuwd, kan deze niet meer reageren en wordt vaak naar de bovenkant van de pagina geschoven. Als bepaalde informatie op de pagina continu moet worden bijgewerkt, zijn er veel betere manieren om dat te doen door slechts een deel van een pagina te vernieuwen.

Mobiele lay-outcontrole

Voor mobiel geoptimaliseerde sites gebruiken de tag <meta name="viewport"> als volgt:

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

Het viewport element geeft de browser instructies voor het regelen van de afmetingen en schaal van de pagina op basis van het apparaat dat u gebruikt.

In het bovenstaande voorbeeld content="width=device-width betekent dat de browser de breedte van de pagina zal maken aan de breedte van zijn eigen scherm. Als dat scherm is 480px wide , het browservenster wordt 480px wide . initial-scale=1 geeft aan dat de initiële zoomlens (wat in dit geval 1 is, betekent dat deze niet zoomt).

Hieronder staan de kenmerken die deze tag ondersteunt:

Attribuut	Beschrijving
`width`	De breedte van de virtuele viewport van het apparaat. Waarden ¹ : `device-width` of de werkelijke breedte in pixels, zoals `480`
`height`	De hoogte van het virtuele kijkvenster van het apparaat. Waarden ² : `device-height` of de werkelijke breedte in pixels, zoals `600`
`initial-scale`	De initiële zoom wanneer de pagina is geladen. 1.0 zoomt niet.
`minimum-scale`	Het minimale aantal dat de bezoeker op de pagina kan inzoomen. `1.0` zoomt niet.
`maximum-scale`	Het maximale aantal dat de bezoeker op de pagina kan inzoomen. `1.0` zoomt niet.
`user-scalable`	Hiermee kan het apparaat in- en uitzoomen. Waarden zijn `yes` of `no` . Indien ingesteld op nee, kan de gebruiker niet inzoomen op de webpagina. De standaardwaarde is ja. Browserinstellingen kunnen deze regel negeren.

Opmerkingen:

¹ De eigenschap width kan worden opgegeven in pixels ( width=600 ) of op apparaatbreedte ( width=device-width ) die de fysieke breedte van het scherm van het apparaat aangeeft.

² Op dezelfde manier kan de eigenschap height worden opgegeven in pixels ( height=600 ) of op device-height ( height=device-height ) die de fysieke hoogte van het scherm van het apparaat weergeeft.

Pagina-informatie

`application-name`

De naam van de webtoepassing die de pagina vertegenwoordigt.

<meta name="application-name" content="OpenStreetMap">

Als het geen webapplicatie is, mag de metatag voor de application-name niet worden gebruikt.

`author`

Stel de auteur van de pagina in:

<meta name="author" content="Your Name">

Er kan slechts één naam worden gegeven.

`description`

Stel de beschrijving van de pagina in:

<meta name="description" content="Page Description">

De metatag voor de description kan door verschillende zoekmachines worden gebruikt bij het indexeren van uw webpagina voor zoekdoeleinden. Gewoonlijk is de beschrijving in de metatag de korte samenvatting die wordt weergegeven onder de hoofdtitel van de pagina / website in de resultaten van de zoekmachine. Google gebruikt meestal alleen de eerste 20-25 woorden van uw beschrijving.

`generator`

<meta name="generator" content="HTML Generator 1.42">

Identificeert een van de softwarepakketten die worden gebruikt om het document te genereren. Alleen te gebruiken voor pagina's waar de opmaak automatisch wordt gegenereerd.

`keywords`

Stel trefwoorden in voor zoekmachines (gescheiden door komma's):

<meta name="keywords" content="Keyword1, Keyword2">

De metatag voor keywords wordt soms door zoekmachines gebruikt om de zoekopdracht te kennen die relevant is voor uw webpagina.
Als vuistregel is het waarschijnlijk een goed idee om niet te veel woorden toe te voegen, omdat de meeste zoekmachines die deze metatag gebruiken voor indexering alleen de eerste ~ 20 woorden indexeren. Zorg ervoor dat u de belangrijkste zoekwoorden eerst plaatst.

robots

Het robots , ondersteund door verschillende grote zoekmachines, bepaalt of spiders van zoekmachines een pagina mogen indexeren of niet en of ze links vanaf een pagina moeten volgen of niet.

<meta name="robots" content="noindex">

Dit voorbeeld instrueert alle zoekmachines om de pagina niet in zoekresultaten weer te geven. Andere toegestane waarden zijn:

Waarde / richtlijn	Betekenis
`all`	Standaard. Gelijk aan `index, follow` . Zie aantekening onderaan.
`noindex`	Indexeer de pagina helemaal niet.
`nofollow`	Volg niet de links op deze pagina
`follow`	De links op de pagina kunnen worden gevolgd. Zie aantekening onderaan.
`none`	Gelijk aan `noindex, nofollow` .
`noarchive`	Maak geen gecachte versie van deze pagina beschikbaar in zoekresultaten.
`nocache`	Synoniem van `noarchive` gebruikt door sommige bots zoals Bing.
`nosnippet`	Laat geen fragment van deze pagina zien in zoekresultaten.
`noodp`	Gebruik geen metagegevens van deze pagina uit het Open Directory-project voor titels of fragmenten in zoekresultaten.
`notranslate`	Bied geen vertalingen van deze pagina aan in zoekresultaten.
`noimageindex`	Indexeer geen afbeeldingen op deze pagina.
`unavailable_after [RFC-850 date/time]`	Toon deze pagina niet in zoekresultaten na de opgegeven datum / tijd. De datum / tijd moet worden gespecificeerd in het RFC 850-formaat .

Opmerking: het expliciet definiëren van index en / of follow , hoewel geldige waarden, is niet nodig, omdat vrijwel alle zoekmachines ervan uitgaan dat ze dit mogen doen als ze niet expliciet worden verhinderd. Net zoals het robots.txt-bestand, zoeken zoekmachines meestal alleen naar dingen die ze niet mogen doen. Alleen het vermelden van dingen die een zoekmachine niet mag doen, voorkomt ook dat per ongeluk tegengestelden worden vermeld (zoals index, ..., noindex ) die niet alle zoekmachines op dezelfde manier behandelen.

Telefoonnummerherkenning

Mobiele platforms zoals iOS herkennen telefoonnummers automatisch en zetten deze om in tel: links. Hoewel de functie erg praktisch is, detecteert het systeem soms ISBN-codes en andere nummers als telefoonnummers.

Voor mobiele Safari en sommige andere WebKit-gebaseerde mobiele browsers om automatische nummerherkenning en opmaak uit te schakelen, hebt u deze metatag nodig:

<meta name="format-detection" content="telephone=no">

Sociale media

Open Graph is een standaard voor metadata die de normale informatie in de head-markup van een site uitbreidt. Hierdoor kunnen websites zoals Facebook diepere en rijkere informatie over een website in een gestructureerd formaat weergeven. Deze informatie wordt vervolgens automatisch weergegeven wanneer gebruikers links naar websites met OG-metadata delen op Facebook.

Facebook / Grafiek openen

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->

Facebook / Instant artikelen

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

Twitter gebruikt zijn eigen markup voor metadata. Deze metagegevens worden gebruikt als informatie om te bepalen hoe tweets worden weergegeven wanneer ze een link naar de site bevatten.

tjilpen

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">

Automatische omleiding

Soms heeft uw webpagina een automatische omleiding nodig.

Om bijvoorbeeld na 5 seconden door te verwijzen naar example.com :

<meta http-equiv="refresh" content="5;url=https://www.example.com/" />

Met deze regel wordt u na 5 seconden naar de aangewezen website gestuurd (in dit geval example.com .

Als u de vertraging voor een omleiding moet wijzigen, wijzigt u eenvoudig het nummer vlak voor uw ;url= wijzigt de vertraging.

web applicatie

U kunt uw web-app of website zo instellen dat een toepassingssnelkoppeling wordt toegevoegd aan het startscherm van een apparaat en dat de app in volledig scherm "app-modus" wordt gestart met behulp van het menu-item "Toevoegen aan startscherm" van Chrome voor Android.

Onder de metatag (en) wordt de web-app geopend op volledig scherm (zonder adresbalk).

Android Chrome

<meta name="mobile-web-app-capable" content="yes">

IOS

<meta name="apple-mobile-web-app-capable" content="yes">

U kunt ook een kleur instellen voor de statusbalk en adresbalk in de metatag.