HTML
Méta-information
Recherche…
Introduction
Les balises META dans les documents HTML fournissent des informations utiles sur le document, notamment une description, des mots-clés, un auteur, des dates de modification et environ 90 autres champs. Cette rubrique couvre l'utilisation et le but de ces balises.
Syntaxe
-
<meta name="metadata name" content="value"> -
<meta http-equiv="pragma directive" content="value"> -
<meta charset="encoding label">
Remarques
La balise meta est une balise HTML utilisée pour définir les métadonnées du document HTML. Les balises META doivent aller dans l'élément tête. Une page peut avoir un nombre quelconque de balises META.
Les keywords - keywords balise keywords ne sont généralement pas utilisés par les robots. La plupart des moteurs de recherche déterminent quels mots clés correspondent au contenu des pages Web. Cela étant dit, rien ne dit que vous ne devriez plus inclure la balise META de mots-clés.
Les métadonnées d'une page sont principalement utilisées par le navigateur (comme la mise à l'échelle d'un document) et les robots d'exploration utilisés par les moteurs de recherche (Google, Yahoo !, Bing).
La spécification donne un certain nombre de noms de métadonnées normalisés à utiliser avec les directives <meta name> et les directives de métadonnées normalisées pragma à utiliser avec <meta http-equiv> . Cependant, de nombreux services sur Internet (robots d'exploration Web, outils de création, services de partage social, etc.) utilisent le formulaire <meta name> comme point d'extension générique pour les métadonnées. Certains d'entre eux sont listés sur la page wiki de spec .
Encodage de caractère
L'attribut charset spécifie le codage des caractères du document HTML et doit être un codage de caractères valide (par exemple, windows-1252 , ISO-8859-2 , Shift_JIS et UTF-8 ). UTF-8 (Unicode) est le plus utilisé et doit être utilisé pour tout nouveau projet.
<meta charset="UTF-8">
<meta charset="ISO-8859-1">
Tous les navigateurs ont toujours reconnu le formulaire <meta charset> , mais si, pour une raison quelconque, votre page doit être valide au format HTML 4.01, vous pouvez utiliser les options suivantes:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
Reportez-vous également à la norme de codage pour afficher toutes les étiquettes de codage de caractères disponibles reconnues par les navigateurs.
Actualisation automatique
Pour actualiser la page toutes les cinq secondes, ajoutez ce meta élément dans l'élément head :
<meta http-equiv="refresh" content="5">
MISE EN GARDE! Bien qu'il s'agisse d'une commande valide, il est recommandé de ne pas l'utiliser en raison de ses effets négatifs sur l'expérience utilisateur. Si vous actualisez trop souvent la page, celle-ci risque de ne plus répondre et défile souvent vers le haut de la page. Si certaines informations de la page doivent être mises à jour en permanence, il existe de bien meilleures façons de le faire en actualisant uniquement une partie de la page.
Contrôle de disposition mobile
Les sites courants optimisés pour les mobiles utilisent la <meta name="viewport"> comme ceci:
<meta name="viewport" content="width=device-width, initial-scale=1">
L'élément viewport donne au navigateur des instructions sur la façon de contrôler les dimensions et la mise à l'échelle de la page en fonction du périphérique que vous utilisez.
Dans l'exemple ci-dessus, content="width=device-width signifie que le navigateur affichera la largeur de la page à la largeur de son propre écran. Donc, si cet écran est 480px wide , la fenêtre du navigateur aura une 480px wide initial-scale=1 . initial-scale=1 indique que le zoom initial (1 dans ce cas signifie qu'il ne fait pas de zoom).
Voici les attributs que cette balise prend en charge:
| Attribut | La description |
|---|---|
width | La largeur de la fenêtre virtuelle de l'appareil. Valeurs 1 : device-width ou la largeur réelle en pixels, comme 480 |
height | La hauteur de la fenêtre virtuelle de l'appareil. Valeurs 2 : device-height ou largeur réelle en pixels, par exemple 600 |
initial-scale | Le zoom initial lorsque la page est chargée. 1.0 ne fait pas de zoom |
minimum-scale | Le montant minimum que le visiteur peut zoomer sur la page. 1.0 ne fait pas de zoom |
maximum-scale | Le montant maximum que le visiteur peut zoomer sur la page. 1.0 ne fait pas de zoom |
user-scalable | Permet à l'appareil de zoomer et dézoomer. Les valeurs sont yes ou no . Si ce paramètre est défini sur no, l'utilisateur ne peut pas zoomer sur la page Web. La valeur par défaut est yes. Les paramètres du navigateur peuvent ignorer cette règle. |
Remarques:
1 La propriété width peut être spécifiée en pixels ( width=600 ) ou en device-width ( width=device-width ), qui représente la largeur physique de l'écran du périphérique.
2 De même, la propriété height peut être spécifiée en pixels ( height=600 ) ou en device-height de device-height ( height=device-height ) qui représente la hauteur physique de l'écran de l'appareil.
Informations sur la page
application-name
Donner le nom de l'application Web que représente la page.
<meta name="application-name" content="OpenStreetMap">
Si ce n'est pas une application Web, la balise META application-name ne doit pas être utilisée.
author
Définissez l'auteur de la page:
<meta name="author" content="Your Name">
Un seul nom peut être donné.
description
Définissez la description de la page:
<meta name="description" content="Page Description">
La balise META de description peut être utilisée par divers moteurs de recherche lors de l'indexation de votre page Web à des fins de recherche. Habituellement, la description contenue dans la balise META est le bref résumé qui apparaît sous le titre principal de la page / du site Web dans les résultats du moteur de recherche. Google n'utilise généralement que les 20-25 premiers mots de votre description.
generator
<meta name="generator" content="HTML Generator 1.42">
Identifie l'un des progiciels utilisés pour générer le document. A utiliser uniquement pour les pages où le balisage est généré automatiquement.
keywords
Définissez des mots clés pour les moteurs de recherche (séparés par des virgules):
<meta name="keywords" content="Keyword1, Keyword2">
La balise META de keywords est parfois utilisée par les moteurs de recherche pour connaître la requête de recherche qui concerne votre page Web.
En règle générale, il est préférable de ne pas ajouter trop de mots, car la plupart des moteurs de recherche utilisant cette balise META pour l'indexation indexeront uniquement les premiers 20 mots. Assurez-vous de mettre les mots-clés les plus importants en premier.
Des robots
L'attribut robots , pris en charge par plusieurs moteurs de recherche principaux, détermine si les moteurs de recherche sont autorisés à indexer une page ou non et s'ils doivent suivre les liens d'une page ou non.
<meta name="robots" content="noindex">
Cet exemple indique à tous les moteurs de recherche de ne pas afficher la page dans les résultats de recherche. Les autres valeurs autorisées sont les suivantes:
| Valeur / Directive | Sens |
|---|---|
all | Défaut. Équivalent à index, follow . Voir note ci-dessous. |
noindex | Ne pas indexer la page du tout. |
nofollow | Ne suivez pas les liens sur cette page |
follow | Les liens sur la page peuvent être suivis. Voir note ci-dessous. |
none | Équivalent à noindex, nofollow . |
noarchive | Ne mettez pas une version en cache de cette page disponible dans les résultats de recherche. |
nocache | Synonyme de noarchive utilisé par certains robots tels que Bing. |
nosnippet | Ne pas afficher un extrait de cette page dans les résultats de recherche. |
noodp | N'utilisez pas les métadonnées de cette page à partir du projet Open Directory pour les titres ou les extraits dans les résultats de recherche. |
notranslate | Ne pas proposer de traductions de cette page dans les résultats de recherche. |
noimageindex | Ne pas indexer les images sur cette page. |
unavailable_after [RFC-850 date/time] | Ne pas afficher cette page dans les résultats de recherche après la date / heure spécifiée. La date / heure doit être spécifiée au format RFC 850 . |
Remarque: La définition explicite de l' index et / ou du follow , alors que les valeurs valides, n'est pas nécessaire, car pratiquement tous les moteurs de recherche supposent qu'ils sont autorisés à le faire s'ils n'en sont pas explicitement empêchés. À l'instar du fichier robots.txt, les moteurs de recherche ne recherchent généralement que ce qu'ils ne sont pas autorisés à faire. Seules les déclarations auxquelles un moteur de recherche n'est pas autorisé empêchent également de déclarer des oppositions accidentelles (telles que index, ..., noindex ) que tous les moteurs de recherche ne traiteront pas de la même manière.
Reconnaissance du numéro de téléphone
Les plates-formes mobiles comme iOS reconnaissent automatiquement les numéros de téléphone et les transforment en tel: liens. Bien que cette fonctionnalité soit très pratique, le système détecte parfois les codes ISBN et autres numéros comme numéros de téléphone.
Pour que Safari mobile et certains autres navigateurs mobiles basés sur WebKit désactivent la reconnaissance et le formatage automatiques des numéros de téléphone, vous avez besoin de cette balise META:
<meta name="format-detection" content="telephone=no">
Des médias sociaux
Open Graph est une norme pour les métadonnées qui étend les informations normales contenues dans le balisage de tête d'un site. Cela permet aux sites Web tels que Facebook d’afficher des informations plus détaillées et plus riches sur un site Web dans un format structuré. Ces informations sont alors automatiquement affichées lorsque les utilisateurs partagent des liens vers des sites Web contenant des métadonnées OG sur Facebook.
Facebook / Open Graph
<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 / Articles instantanés
<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 utilise son propre balisage pour les métadonnées. Ces métadonnées sont utilisées comme informations pour contrôler la façon dont les tweets sont affichés lorsqu'ils contiennent un lien vers le site.
Gazouillement
<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">
Redirection automatique
Parfois, votre page Web nécessite une redirection automatique.
Par exemple, pour rediriger vers example.com après 5 secondes:
<meta http-equiv="refresh" content="5;url=https://www.example.com/" />
Ceci est la ligne vous enverra sur le site Web désigné (dans ce cas example.com après 5 secondes.
Si vous avez besoin de changer le délai avant une redirection, il vous suffit de changer le numéro juste avant votre ;url= cela modifiera le délai.
Application Web
Vous pouvez configurer votre application Web ou votre site Web pour ajouter une icône de raccourci d'application à l'écran d'accueil d'un appareil et lancer l'application en "mode application" plein écran en utilisant l'élément de menu "Ajouter à l'écran d'accueil" de Chrome for Android.
La balise meta ci-dessous ouvrira l’application Web en mode plein écran (sans barre d’adresse).
Android Chrome
<meta name="mobile-web-app-capable" content="yes">
IOS
<meta name="apple-mobile-web-app-capable" content="yes">
Vous pouvez également définir la couleur de la barre d'état et de la barre d'adresse dans la balise meta.
Android Chrome
<meta name="theme-color" content="black">
IOS
<meta name="apple-mobile-web-app-status-bar-style" content="black">