Attribut name du <meta> HTML
Définition et utilisation
name L'attribut réglemente le nom des métadonnées.
name L'attribut réglemente Attribut content le nom de la valeur.
par le biais de name et content l'attribut, peut utiliser des paires nom/valeur pour définir des métadonnées de document. Parmi eux,name L'attribut représente le type de métadonnées, tandis que content L'attribut est utilisé pour fournir des valeurs.
Le tableau suivant liste plusieurs types de métadonnées prédéfinies.
Attention :Si l'attribut http-equiv est définiSi name Attribut.
Astuce :HTML5 introduit une méthode permettant aux concepteurs de sites Web de contrôler la viewport (la zone visible de la page Web) via l'attribut <meta> (voir l'exemple ci-dessous « Définir la viewport »).
Exemple
Utiliser l'attribut name pour définir une description, des mots-clés et l'auteur du document HTML. De plus, définir la viewport pour contrôler la taille de la page et le rapport de mise à l'échelle pour différents appareils :
<head> <meta name="description" content="Tutoriel Web gratuit"> <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>
Grammaire
<meta name="value">
Valeur de l'attribut
| Valeur | Description |
|---|---|
| application-name | Définir le nom de l'application Web représentée par la page. |
| author |
Définir le nom de l'auteur du document. Par exemple : <meta name="author" content="YK Investment"> |
| description |
Définir la description de la page. Les moteurs de recherche peuvent choisir cette description pour afficher les résultats de recherche. Par exemple : <meta name="description" content="Tutoriel Web gratuit"> |
| generator |
Définir un paquet de logiciels utilisé pour générer des documents (non utilisé pour les pages manuscrites). Par exemple : <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Définir une liste de mots-clés associés à la page, séparés par des virgules. Informer les moteurs de recherche sur le contenu de la page. Astuce :Définissez toujours les mots-clés (les moteurs de recherche ont besoin de les classer). Par exemple : <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Contrôler le viewport (la zone visible de l'utilisateur sur une page web). |
Explication
En plus des six types de métadonnées prédéfinis dans le tableau, il est possible d'utiliser des extensions de métadonnées. Visitez cette page pour obtenir une liste mise à jour régulièrement :
http://wiki.whatwg.org/wiki/MetaExtensions
Certaines extensions sont utilisées plus fréquemment, tandis que d'autres ont des utilisations très spécifiques et sont pratiquement inutilisées. Les métadonnées robots appartient à la première catégorie. Les auteurs de documents HTML peuvent l'utiliser pour indiquer aux moteurs de recherche comment traiter le document. Par exemple :
<meta name="robots" content="noindex">
Ce type de métadonnées a trois valeurs reconnues par la plupart des navigateurs :
- noindex - indique de ne pas indexer cette page
- noarchive - indique de ne pas archiver ou de ne pas mettre en cache cette page
- nofollow - indique de ne pas suivre les liens de cette page pour la recherche
Le nombre d'extensions de métadonnées disponibles est limité, les développeurs sont donc mieux de lire la liste en ligne pour voir ce qui peut être utilisé dans leurs projets.
Astuce
Pour indiquer aux moteurs de recherche comment classer et hiérarchiser le contenu, le moyen le plus important par le passé était d'utiliser les métadonnées keywords. Actuellement, l'importance accordée aux métadonnées keywords par les moteurs de recherche est beaucoup moins importante, car elles peuvent être utilisées de manière abusive pour créer une illusion de pertinence entre le contenu de la page et les mots-clés. Pour que les créateurs souhaitent que le contenu soit perçu différemment par les moteurs de recherche, le meilleur moyen est d'utiliser les conseils qu'ils fournissent eux-mêmes. La plupart des moteurs de recherche fournissent des guides pour optimiser les pages web ou tout le site.
Google : Guide de démarrage pour l'optimisation pour les moteurs de recherche (SEO)
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu : Guide de l'optimisation pour les moteurs de recherche Baidu
Configurer le viewport
Le viewport est la zone visible de l'utilisateur sur une page web. Il varie d'un appareil à l'autre - il sera plus petit sur un téléphone que sur un écran d'ordinateur.
Vous devriez inclure les éléments <meta> suivants dans toutes les pages web :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Il fournit des instructions au navigateur sur la manière de contrôler la taille et le niveau de zoom de la page.
width=device-width Certaines configurations définissent la largeur de la page pour suivre la largeur de l'écran de l'appareil (différente selon l'appareil).
initial-scale=1.0 Certaines configurations définissent le niveau de zoom initial lors du chargement initial de la page par le navigateur.
Voici un exemple de page web sans balise meta de fenêtre d'affichage, ainsi qu'un même exemple de page web avec balise meta de fenêtre d'affichage :
Astuce :Si vous utilisez un téléphone portable ou une tablette pour naviguer sur cette page, vous pouvez cliquer sur les deux liens ci-dessous pour voir les différences.
Vous pouvez dans notreTutoriel de conception de site web responsive - Fenêtre d'affichageApprenez plus sur la fenêtre d'affichage.
Support du navigateur
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
