HTML <meta> name-eigenschap
Definitie en gebruik
name Eigenschap die de naam van de metadata regelt.
name Eigenschap die geregeld is content-eigenschap de naam van de waarde.
door gebruik te maken van name en content Eigenschap, kan gebruik maken van naam/waarde-paren om metadata voor het document te definiëren. Waarbijname Eigenschap die het type metadata aangeeft, terwijl content Eigenschappen worden gebruikt om waarden te leveren.
De tabel hieronder lijst verschillende vooraf gedefinieerde types metadata op.
Opmerking:Als deze ingesteld is http-equiv-eigenschapals deze ingesteld is name Eigenschappen.
Tip:HTML5 introduceerde een methode die webontwerpers in staat stelt om de viewport (het zichtbare gebied van de pagina) te controleren via de <meta>-tag (zie het voorbeeld van 'Viewport instellen' hieronder).
Voorbeeld
Gebruik de name-eigenschap om beschrijvingen, trefwoorden en auteurs van HTML-documenten te definiëren. Definieer ook het viewport, om de grootte van de pagina en de schaal voor verschillende apparaten te controleren:
<head> <meta name="description" content="Gratis Web-tutorial"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Syntaxis
<meta name="value">
Waarde van het attribuut
| Waarde | Beschrijving |
|---|---|
| application-name | Regel de naam van de Web-applicatie die de pagina vertegenwoordigt. |
| author |
Regel de naam van de auteur van het document. Bijvoorbeeld: <meta name="author" content="YK Investment"> |
| description |
Regel de beschrijving van de pagina. De zoekmachine kan deze beschrijving kiezen om te weergeven in de zoekresultaten. Bijvoorbeeld: <meta name="description" content="Gratis Web-tutorial"> |
| generator |
Regel een van de softwarepakketten die wordt gebruikt om documenten te genereren (niet voor handmatig maken van pagina's). Bijvoorbeeld: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Regel de lijst van gerelateerde trefwoorden voor de pagina, gescheiden door komma's. Informeer de zoekmachines over de inhoud van de pagina. Tip:Gebruik altijd zoekwoorden (zoekmachines moeten de pagina kunnen categoriseren). Bijvoorbeeld: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Beheer het viewport (het zichtbare gebied van de webpagina). |
Beschrijving
Naast de zes vooraf gedefinieerde metadatatypen kunnen ook metadata-uitbreidingen worden gebruikt. Bezoek deze pagina voor een lijst met vaak bijgewerkte uitbreidingen:
http://wiki.whatwg.org/wiki/MetaExtensions
Sommige uitbreidingen worden vaak gebruikt, terwijl anderen een zeer beperkte toepassing hebben en bijna niemand ze gebruikt. Robots-metadata behoort tot de eerste groep. Auteurs van HTML-documenten kunnen het gebruiken om zoekmachines te vertellen hoe ze het document moeten behandelen. Bijvoorbeeld:
<meta name="robots" content="noindex">
Deze metadatatype heeft drie waarden die door de meeste browsers worden herkend:
- noindex - betekent dat deze pagina niet geïndexeerd moet worden
- noarchive - betekent dat deze pagina niet opgeslagen of gecached moet worden
- nofollow - betekent dat je niet door de links op deze pagina moet zoeken
Er zijn maar weinig beschikbare metadata-uitbreidingen, ontwikkelaars zouden beter de online lijst lezen om te zien welke beschikbaar zijn voor hun project.
Tip
Om zoekmachines te laten weten hoe inhoud gecategoriseerd en gewaardeerd moet worden, was het belangrijkste middel in het verleden om keywords-metadata te gebruiken. Tegenwoordig wordt de waarde van keywords-metadata door zoekmachines minder gewaardeerd, omdat deze misbruikt kunnen worden om een valse indruk van relevantie van pagina-inhoud te creëren. Als makers willen dat hun inhoud beter wordt gezien door zoekmachines, is de beste manier om hun eigen aanbevelingen te gebruiken. De meeste zoekmachines bieden gidsen voor het optimaliseren van webpagina's of hele websites aan.
Google: Search Engine Optimization (SEO) Beginner's Guide
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Baidu Search Engine Optimization Guide
Stel het viewport in
Het viewport is het zichtbare gebied van de webpagina. Het verschilt per apparaat - het is kleiner op een telefoon dan op een computerscherm.
U moet de volgende <meta>-elementen op alle webpagina's opnemen:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It provides instructions to the browser on how to control the page size and zoom ratio.
width=device-width Partly sets the width of the page to follow the screen width of the device (varies by device).
initial-scale=1.0 Partly sets the initial zoom level of the browser when loading the page for the first time.
This is an example of a webpage without viewport meta tags, and the same webpage with viewport meta tags:
Tip:If you are browsing this page on a mobile phone or tablet, you can click on the following two links to view the differences.
You can find more information on ourResponsive Web Design - Viewport TutorialLearn more about viewport.
Browser Support
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
