Balises meta HTML

Lucas D. - July 19, 2024

Types de balises Meta

Métadonnées

Les balises meta de métadonnées fournissent des informations sur le document HTML. Elles ne sont pas affichées sur la page mais sont lues par les moteurs de recherche et les robots d'indexation. Voici quelques exemples de balises meta de métadonnées :

Balise Meta	Description
`<meta name="author" content="John Doe">`	Spécifie l'auteur de la page web.
`<meta name="keywords" content="HTML, balises meta, SEO">`	Liste les mots-clés liés au contenu de la page web, ce qui peut aider à l'optimisation pour les moteurs de recherche (SEO).
`<meta name="description" content="Apprenez les différents types de balises meta en HTML.">`	Fournit une brève description du contenu de la page web, souvent utilisée par les moteurs de recherche comme extrait dans les résultats de recherche.

En-têtes HTTP

Les balises meta d'en-tête HTTP donnent des instructions aux navigateurs web et aux serveurs sur la manière de gérer la page web. Elles peuvent contrôler la mise en cache, le type de contenu, et plus encore. Voici quelques balises meta d'en-tête HTTP courantes :

Balise Meta	Description
`<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`	Spécifie le type de contenu et l'encodage de caractères de la page web.
`<meta http-equiv="expires" content="Wed, 21 Oct 2015 07:28:00 GMT">`	Définit une date d'expiration pour la page web, après laquelle elle sera actualisée depuis le serveur.
`<meta http-equiv="refresh" content="5; url=https://www.example.com">`	Actualise la page web après un nombre spécifié de secondes et/ou redirige vers une autre URL.

Viewport

La balise meta viewport contrôle l'affichage de la page web sur les appareils mobiles. Elle définit la zone visible (viewport) de la page web, ce qui peut être utilisé pour créer des designs responsifs qui s'adaptent à différentes tailles d'écran. La balise meta viewport ressemble à ceci :

Conseil: Balise Meta Viewport

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

Cela définit la largeur du viewport à la largeur de l'appareil et règle le niveau de zoom initial à 1.0.

Réseaux sociaux

Les balises meta peuvent également être utilisées pour optimiser les pages web pour le partage sur les réseaux sociaux. Ces balises contrôlent l'apparence de la page web lorsqu'elle est partagée sur des plateformes comme Facebook et Twitter.

Les balises Open Graph (OG) sont utilisées par Facebook et d'autres plateformes de médias sociaux pour récupérer des informations sur la page web. Voici quelques exemples de balises OG :

Balise Meta	Description
`<meta property="og:title" content="Titre de ma page web">`	Définit le titre de la page web lors du partage sur les réseaux sociaux.
`<meta property="og:description" content="Une brève description de ma page web.">`	Fournit une description de la page web pour le partage sur les réseaux sociaux.
`<meta property="og:image" content="https://example.com/image.jpg">`	Spécifie une image à utiliser lorsque la page web est partagée sur les réseaux sociaux.

Les balises Twitter Card sont similaires aux balises Open Graph mais sont spécifiques à Twitter. Elles vous permettent de contrôler l'apparence de votre page web dans les aperçus de tweets. Voici quelques exemples de balises Twitter Card :

Balise Meta	Description
`<meta name="twitter:card" content="summary">`	Spécifie le type de Twitter Card à utiliser (summary, summary_large_image, app, ou player).
`<meta name="twitter:title" content="Titre de ma page web">`	Définit le titre pour la Twitter Card.
`<meta name="twitter:description" content="Une brève description de ma page web.">`	Fournit une description pour la Twitter Card.

Robots

La balise meta robots est utilisée pour contrôler la façon dont les robots d'indexation des moteurs de recherche indexent et suivent les liens sur la page web. Elle permet de spécifier si une page web doit être indexée et si ses liens doivent être suivis. Les valeurs pour la balise meta robots peuvent être :

index : Autorise les moteurs de recherche à indexer la page web (par défaut).
noindex : Indique aux moteurs de recherche de ne pas indexer la page web.
follow : Autorise les moteurs de recherche à suivre les liens sur la page web (par défaut).
nofollow : Indique aux moteurs de recherche de ne pas suivre les liens sur la page web.

Voici un exemple de balise meta robots qui indique aux moteurs de recherche d'indexer la page web mais de ne pas suivre ses liens :

Conseil: Balise Meta Robots

<meta name="robots" content="index, nofollow">

Encodage des caractères

La balise meta charset spécifie l'encodage des caractères pour le document HTML. Il est important de définir le bon encodage des caractères pour s'assurer que le texte s'affiche correctement sur la page web. L'encodage de caractères le plus courant est UTF-8. Pour définir l'encodage des caractères à l'aide de la balise meta charset, utilisez :

Conseil: Balise Meta Charset

<meta charset="UTF-8">

Cela va à l'intérieur de l'élément <head> et doit être spécifié le plus tôt possible dans le document.

Exemples et extraits de code

Conseil: Exemple de balises Meta de base

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="John Doe">
  <meta name="description" content="Une page web d'exemple montrant les balises meta en HTML.">
  <meta name="keywords" content="HTML, balises meta, exemple">
  <title>Exemple de balises Meta</title>
</head>
<body>
  <h1>Bienvenue sur ma page web !</h1>
  <p>Voici un exemple d'utilisation des balises meta dans un document HTML.</p>
</body>
</html>

Ceci montre une structure HTML de base avec les balises meta charset, viewport, author, description, et keywords dans la section <head>.

Conseil: Exemple de balises Meta pour les réseaux sociaux

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple de balises Meta pour les réseaux sociaux</title>

  <!-- Balises Meta Open Graph -->
  <meta property="og:title" content="Titre de ma page web">
  <meta property="og:description" content="Une brève description de ma page web.">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com">

  <!-- Balises Meta Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Titre de ma page web">
  <meta name="twitter:description" content="Une brève description de ma page web.">
  <meta name="twitter:image" content="https://example.com/image.jpg">
</head>
<body>
  <h1>Exemple de balises Meta pour les réseaux sociaux</h1>
  <p>Cette page web est optimisée pour le partage sur les plateformes de réseaux sociaux.</p>
</body>
</html>

Ceci montre comment utiliser les balises meta Open Graph et Twitter Card pour optimiser une page web pour le partage sur les réseaux sociaux. Les balises meta fournissent des informations sur le titre, la description, l'image et l'URL de la page web, qui seront affichées lorsque la page sera partagée sur des plateformes comme Facebook et Twitter.

Conseil: Exemple de balises Meta pour les en-têtes HTTP et les robots

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple de balises Meta pour les en-têtes HTTP et les robots</title>

  <!-- Balises Meta pour les en-têtes HTTP -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="expires" content="Wed, 21 Oct 2025 07:28:00 GMT">

  <!-- Balise Meta pour les robots -->
  <meta name="robots" content="index, follow">
</head>
<body>
  <h1>Exemple de balises Meta pour les en-têtes HTTP et les robots</h1>
  <p>Cette page web utilise des balises meta d'en-tête HTTP pour contrôler le type de contenu et l'expiration, et la balise meta robots pour autoriser l'indexation par les moteurs de recherche et le suivi des liens.</p>
</body>
</html>

Ceci montre comment utiliser les balises meta d'en-tête HTTP pour contrôler le type de contenu, l'encodage des caractères et l'expiration d'une page web. La balise meta Content-Type spécifie le type de contenu et l'encodage des caractères, tandis que la balise meta expires définit une date d'expiration pour la page web. La balise meta robots est également utilisée pour permettre aux moteurs de recherche d'indexer la page web et de suivre ses liens.

Ces extraits de code montrent comment utiliser différents types de balises meta dans un document HTML pour fournir des informations sur la page web, contrôler son comportement et l'optimiser pour les moteurs de recherche et le partage sur les réseaux sociaux.