HTML - Balises Meta
HTML vous permet de spécifier des métadonnées - des informations supplémentaires importantes sur un document de diverses manières. Les éléments META peuvent être utilisés pour inclure des paires nom / valeur décrivant les propriétés du document HTML, telles que l'auteur, la date d'expiration, une liste de mots-clés, l'auteur du document, etc.
le <meta>tag est utilisé pour fournir ces informations supplémentaires. Cette balise est un élément vide et n'a donc pas de balise de fermeture mais elle contient des informations dans ses attributs.
Vous pouvez inclure une ou plusieurs balises méta dans votre document en fonction des informations que vous souhaitez conserver dans votre document, mais en général, les balises méta n'ont pas d'impact sur l'apparence physique du document, donc du point de vue de l'apparence, peu importe si vous incluez eux ou pas.
Ajout de balises Meta à vos documents
Vous pouvez ajouter des métadonnées à vos pages Web en plaçant des balises <meta> à l'intérieur de l'en-tête du document qui est représenté par <head> et </head>Mots clés. Une balise meta peut avoir les attributs suivants en plus des attributs de base -
| Sr.Non | Attribut et description |
|---|---|
| 1 |
Name Nom de la propriété. Peut être n'importe quoi. Les exemples incluent, mots-clés, description, auteur, révisé, générateur, etc. |
| 2 |
content Spécifie la valeur de la propriété. |
| 3 |
scheme Spécifie un schéma pour interpréter la valeur de la propriété (telle que déclarée dans l'attribut content). |
| 4 |
http-equiv Utilisé pour les en-têtes de message de réponse http. Par exemple, http-equiv peut être utilisé pour actualiser la page ou pour définir un cookie. Les valeurs incluent le type de contenu, expire, actualiser et set-cookie. |
Spécification des mots-clés
Vous pouvez utiliser la balise <meta> pour spécifier des mots-clés importants liés au document et plus tard, ces mots-clés sont utilisés par les moteurs de recherche lors de l'indexation de votre page Web à des fins de recherche.
Exemple
Voici un exemple où nous ajoutons du HTML, des balises Meta, des métadonnées en tant que mots clés importants sur le document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Cela produira le résultat suivant -
Description du document
Vous pouvez utiliser la balise <meta> pour donner une brève description du document. Cela peut à nouveau être utilisé par divers moteurs de recherche lors de l'indexation de votre page Web à des fins de recherche.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Date de révision du document
Vous pouvez utiliser la balise <meta> pour donner des informations sur la dernière fois que le document a été mis à jour. Ces informations peuvent être utilisées par divers navigateurs Web tout en actualisant votre page Web.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Actualisation du document
Une balise <meta> peut être utilisée pour spécifier une durée après laquelle votre page Web continuera à s'actualiser automatiquement.
Exemple
Si vous souhaitez que votre page se rafraîchisse toutes les 5 secondes, utilisez la syntaxe suivante.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Redirection de page
Vous pouvez utiliser la balise <meta> pour rediriger votre page vers n'importe quelle autre page Web. Vous pouvez également spécifier une durée si vous souhaitez rediriger la page après un certain nombre de secondes.
Exemple
Voici un exemple de redirection de la page actuelle vers une autre page après 5 secondes. Si vous souhaitez rediriger la page immédiatement, ne spécifiez pas d' attribut de contenu .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Configuration des cookies
Les cookies sont des données, stockées dans de petits fichiers texte sur votre ordinateur et échangées entre le navigateur Web et le serveur Web pour garder une trace de diverses informations en fonction des besoins de votre application Web.
Vous pouvez utiliser la balise <meta> pour stocker des cookies côté client et plus tard, ces informations peuvent être utilisées par le serveur Web pour suivre un visiteur du site.
Exemple
Voici un exemple de redirection de la page actuelle vers une autre page après 5 secondes. Si vous souhaitez rediriger la page immédiatement, ne spécifiez pas d' attribut de contenu .
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Si vous n'incluez pas la date et l'heure d'expiration, le cookie est considéré comme un cookie de session et sera supprimé lorsque l'utilisateur quittera le navigateur.
Note- Vous pouvez consulter le didacticiel PHP et cookies pour un détail complet sur les cookies.
Définition du nom de l'auteur
Vous pouvez définir un nom d'auteur dans une page Web à l'aide d'une balise Meta. Voir un exemple ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Spécifier le jeu de caractères
Vous pouvez utiliser la balise <meta> pour spécifier le jeu de caractères utilisé dans la page Web.
Exemple
Par défaut, les serveurs Web et les navigateurs Web utilisent le codage ISO-8859-1 (Latin1) pour traiter les pages Web. Voici un exemple pour définir l'encodage UTF-8 -
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Pour diffuser la page statique avec des caractères chinois traditionnels, la page Web doit contenir une balise <meta> pour définir l'encodage Big5 -
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>