Dans le paysage complexe et en constante évolution du référencement et de l’optimisation des sites Web, chaque détail compte. Voici les 30 balises meta qui jouent un rôle crucial dans la manière dont les moteurs de recherche indexent et affichent votre site, ainsi que dans la façon dont il est perçu par les utilisateurs sur les médias sociaux et les appareils mobiles.
Nous allons explorer en profondeur les 30 meilleures balises <meta> que vous devriez connaître et utiliser pour optimiser votre site web. Que vous soyez un débutant cherchant à comprendre les bases du référencement ou un expert désireux d’optimiser davantage votre présence en ligne, cette liste exhaustive vous guidera à travers les balises meta essentielles pour améliorer la visibilité, l’accessibilité et l’expérience utilisateur de votre site.
Pour rappel, les balises meta se placent entre les balises <head> dans votre page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<!-- C'est ici que sont placées la balises meta -->
</head>
<body>
<!-- Contenu de la page -->
</body>
</html>Liste des 30 balises meta les plus utilisées
| Balise meta | Exemple | Description |
|---|---|---|
| <meta charset> | <meta charset=’UTF-8’> | Spécifie l’encodage de caractères du document |
| <meta viewport> | <meta name=’viewport’ content=’width=device-width, initial-scale=1.0’> | Le viewport contrôle le comportement de l’affichage sur les appareils mobiles |
| <meta description> | <meta name=’description’ content=’Description de mon contenu’> | Fournit une description du contenu du document |
| <meta author> | <meta name=’author’ content=’Nom de l’auteur’> | Indique l’auteur du contenu |
| <meta http-equiv=’X-UA-Compatible’> | <meta http-equiv=’X-UA-Compatible’ content=’IE=edge’> | Indique aux navigateurs Internet Explorer d’utiliser le dernier moteur de rendu disponible. |
| <meta robots> | <meta name=’robots’ content=’index, follow’> | Contrôle le comportement d’indexation des robots de recherche |
| <meta og:title> | <meta property=’og:title’ content=’Mon Titre Open Graph’> | Titre pour Open Graph |
| <meta og:description> | <meta property=’og:description’ content=’Description pour Open Graph’> | Description pour Open Graph |
| <meta og:image> | <meta property=’og:image’ content=’https://example.com/image.jpg’> | Image pour Open Graph |
| <meta og:url> | <meta property=’og:url’ content=’https://example.com’> | URL pour Open Graph |
| <meta og:type> | <meta property=’og:type’ content=’website’> | Type de contenu pour Open Graph |
| <meta og:locale> | <meta property=’og:locale’ content=’fr_FR’> | Locale pour Open Graph |
| <meta og:site_name> | <meta property=’og:site_name’ content=’Nom de mon site’> | Nom du site pour Open Graph |
| <meta twitter:title> | <meta name=’twitter:title’ content=’Mon Titre Twitter’> | Titre pour Twitter Cards |
| <meta twitter:description> | <meta name=’twitter:description’ content=’Description pour Twitter Cards’> | Description pour Twitter Cards |
| <meta twitter:image> | <meta name=’twitter:image’ content=’https://example.com/image.jpg’> | Image pour Twitter Cards |
| <meta twitter:site> | <meta name=’twitter:site’ content=’@exemple’> | Nom d’utilisateur Twitter associé au contenu |
| <meta twitter:creator> | <meta name=’twitter:creator’ content=’@créateur’> | Nom d’utilisateur Twitter du créateur du contenu |
| <meta apple-mobile-web-app-capable> | <meta name=’apple-mobile-web-app-capable’ content=’yes’> | Indique si l’application peut être exécutée en mode autonome sur iOS |
| <meta apple-mobile-web-app-status-bar-style> | <meta name=’apple-mobile-web-app-status-bar-style’ content=’black’> | Couleur de la barre d’état sur iOS en mode autonome |
| <meta apple-mobile-web-app-title> | <meta name=’apple-mobile-web-app-title’ content=’Titre de mon application’> | Titre de l’application Web sur iOS en mode autonome |
| <meta theme-color> | <meta name=’theme-color’ content=’#4285f4’> | Couleur du thème de la barre d’adresse sur Android |
| <meta msapplication-TileColor> | <meta name=’msapplication-TileColor’ content=’#ffffff’> | Couleur de l’icône de tuile de l’application sur Windows |
| <meta msapplication-TileImage> | <meta name=’msapplication-TileImage’ content=’icon.png’> | Image de l’icône de tuile de l’application sur Windows |
| <meta application-name> | <meta name=’application-name’ content=’Nom de mon application’> | Nom de l’application pour les plates-formes Microsoft |
| <meta format-detection> | <meta name=’format-detection’ content=’telephone=no’> | Contrôle la détection automatique de formats de données pour les navigateurs mobiles |
| <meta apple-itunes-app> | <meta name=’apple-itunes-app’ content=’app-id=123456’> | Lien vers une application iOS dans l’App Store |
| <meta google-play-app> | <meta name=’google-play-app’ content=’app-id=com.example.app’> | Lien vers une application Android sur Google Play |
| <meta google-site-verification> | <meta name=’google-site-verification’ content=’Clé de vérification’> | Vérification de la propriété du site Web avec Google |
| <meta google-signin-client_id> | <meta name=’google-signin-client_id’ content=’CLIENT_ID.apps.googleusercontent.com’> | Identifiant client Google Sign-In |
| <meta pinterest-rich-pin> | <meta name=’pinterest-rich-pin’ content=’true’> | Activation des épingles riches Pinterest |
Que vous cherchiez à contrôler la manière dont votre site est indexé par les moteurs de recherche, à améliorer l’apparence de vos liens partagés sur les réseaux sociaux, à personnaliser l’expérience utilisateur sur différentes plateformes ou à vérifier la propriété de votre site avec des services tiers, ces balises meta vous offrent un contrôle précieux sur la manière dont votre site est perçu et interprété en ligne.
N’oubliez pas que l’utilisation judicieuse de ces balises meta nécessite une compréhension approfondie de votre public cible, de vos objectifs marketing et des meilleures pratiques en matière de référencement et d’optimisation web. En intégrant ces balises meta de manière stratégique dans votre site web, vous pouvez maximiser son impact et sa pertinence dans l’écosystème numérique en constante évolution.
