1. A propos des balises meta
Les balises <meta> en HTML sont utilisées pour fournir des métadonnées et des informations supplémentaires concernant une page web. Ces métadonnées sont généralement destinées aux navigateurs, aux moteurs de recherche et à d'autres services pour comprendre, indexer et afficher la page correctement. Bien que ces balises ne soient pas directement affichées sur la page elle-même, elles jouent un rôle crucial dans l'amélioration de l'accessibilité, de la recherche et de la manière dont les utilisateurs interagissent avec le contenu.
2. Liste des balises meta avec leurs descriptions
Les balises <meta> offrent une manière discrète mais puissante d'améliorer l'expérience utilisateur et la visibilité de votre page web. En fournissant des informations pertinentes aux navigateurs et aux moteurs de recherches, vous contribuez à une meilleure accessibilité, à un meilleur référencement et à une présentation plus efficace de votre contenu en ligne. Voici une description détaillée des balises <meta> les plus couramment utilisées :
- Balise <meta> charset : Cette balise spécifie l'encodage des caractères utilisé dans la page. Un encodage approprié est essentiel pour afficher correctement les caractères spéciaux, les accents et les symboles dans différentes langues.
- Balise <meta> viewport : L'élément viewport est essentiel pour les pages web qui sont consultées sur des appareils mobiles. Il permet de contrôler comment la page est affichée sur différents écrans en spécifiant la largeur, l'échelle et d'autres paramètres de mise en page.
- Balise <meta> name="description" : La balise description permet de fournir une brève description du contenu de la page. Cette description est souvent utilisée par les moteurs de recherche pour afficher un aperçu du contenu dans les résultats de recherche.
- Balise <meta> name="keywords" : Cette balise était utilisée autrefois pour spécifier des mots-clés pertinents pour la page. Cependant, elle est devenue moins pertinente pour les moteurs de recherche modernes qui utilisent d'autres méthodes pour déterminer la pertinence d'une page.
- Balise <meta> name="author" : Cette balise permet d'indiquer l'auteur de la page. Elle peut être utilisée pour attribuer la paternité du contenu et des idées.
- Balise <meta> http-equiv="refresh" : L'attribut http-equiv permet de spécifier les instructions HTTP pour rafraîchir automatiquement la page après un certain laps de temps. Cette technique était parfois utilisée pour les redirections automatiques, mais elle est moins courante de nos jours.
- Balise <meta> name="robots" : L'attribut robots indique aux moteurs de recherche comment indexer la page. Par exemple, vous pouvez spécifier si la page doit être indexée ou non, ou si elle doit suivre les liens.
- Balise <meta> name="viewport" : L'attribut viewport permet de contrôler la mise en page sur les appareils mobiles. Vous pouvez spécifier des directives telles que l'échelle, la largeur et le zoom pour une expérience utilisateur optimale.
- Balise <meta> property="og: et name="twitter:" : Ces balises permettent de fournir des métadonnées spécifiques aux réseaux sociaux tels que Facebook et Twitter. Elles définissent des éléments tels que le titre, la description et l'image à afficher lorsqu'une page est partagée sur ces plateformes.
3. Exemples d'usages des balises meta
Dans ce paragraphe, nous allons éclaircir la signification et l'usage des balises <meta> via des exmples simples. Ces exemples illustrent comment chaque balise <meta> est utilisée pour fournir des informations contextuelles et améliorer différents aspects de l'expérience utilisateur et de la visibilité en ligne. En voici des exemples pour chaque balise <meta> avec leurs utilisations :
Exemple. (Balise <meta> charset)
Cette balise définit l'encodage des caractères de la page comme UTF-8, permettant une prise en charge étendue de différents caractères et langues. )
1 |
<meta charset="UTF-8"> |
Exemple. (Balise <meta> viewport)
Cette balise permet de s'adapter à la largeur de l'appareil et l'échelle initiale de 1.0 sur les appareils mobiles.)
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
Exemple. (Balise <meta> name="description")
Cette balise est utilisée pour fournir aux moteurs de recherches une description du contenu de la page, qui peut être affichée dans les résultats de recherche.)
1 |
<meta name="description" content="Découvrez des recettes délicieuses et faciles à réaliser."> |
Exemple. (Balise <meta> name="keywords")
Il s'agit d'une balise qui présente les mots-clés pertinents pour la page qui seront utilisés par les moteurs de recherches)
1 |
<meta name="keywords" content="cuisine, recettes, alimentation, cuisine maison"> |
Exemple. (Balise <meta> name="author" : indique l'auteur de la page.)
1 |
<meta name="author" content="Younes Derfoufi"> |
Exemple. (Balise <meta> http-equiv="refresh")
Balise qui rafraîchit automatiquement la page après quelques secondes et redirige vers une adresse url ")
1 |
<meta http-equiv="refresh" content="5;url=https://www.tresfacile.net"> |
Exemple. (Balise <meta> name="robots")
Balise qui indique aux moteurs de recherche d'indexer la page et de suivre les liens)
1 |
<meta name="robots" content="index, follow"> |
Exemple. (Balise <meta> property="og:" et name="twitter:"
Balise qui permet de fournir des métadonnées spécifiques aux réseaux sociaux, indiquant le titre, la description et l'image à afficher lors du partage de la page sur des réseaux sociaux)
1 2 3 4 5 6 |
<meta property="og:title" content="Recettes délicieuses"> <meta property="og:description" content="Découvrez des recettes délicieuses et faciles à réaliser."> <meta property="og:image" content="https://www.example.com/images/recipe.jpg"> <meta name="twitter:title" content="Recettes délicieuses"> <meta name="twitter:description" content="Découvrez des recettes délicieuses et faciles à réaliser."> <meta name="twitter:image" content="https://www.example.com/images/recipe.jpg"> |
Younes Derfoufi
CRMEF OUJDA