Des balises pour décrire la structure et le contenu de votre site internet
Quand l'invisible devient visible...
Les balises META (ou métaélément ou meta tag en anglais) permettent aux moteurs de recherche - et donc finalement à vos visiteurs - d'analyser votre site en fournissant des éléments essentiels comme le titre d'une page, la description résumée de son contenu, son auteur, la langue utilisée, sa date d'édition, le type de son formatage (ISO, UTF...)... bref, elle sont des indicateurs essentiels à la compréhension de ce que vous mettez en ligne pour vos lecteurs.
Il n'existe pas de normalisation sur l'utilisation des attributs (balises méta)
Concrètement, elles permettent de guider les robots indexeurs pour favoriser leur travail d'analyse des contenus des pages web. On peut dire que c'est un peu le code génétique du site qu'ils auscultent. Et sachez pour pour le voir il suffit de regarder le code source de la page que vous consultez.
Les balises principales
Voici un exemple concret :
<title>Les balises meta : la B.A. - BA</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index,follow">
<meta name="keywords" content="erwan corre, rennes, bretagne, Bretagne, Rennes, webmaster, webdesigner, web design, web, internet, site, web, web site, creation de site, balise, meta, keywords, description, référencement, moteur">
<meta name="description" content="Erwan CORRE - Webmaster Bretagne - Création de site internet - 2006-20">
<meta name="language" content="fr">
<meta name="author" content="Erwan Corre">
<meta name="copyright" content="Erwan Corre - Bretagne 2006 - 20 - http://www.webmaster-bretagne.info">
<meta name="date-revision-yyyymmdd" content="20190712">
<meta name="revisit-after" content="30 days">
<meta name="identifier-url" content="http://www.webmaster-bretagne.info/">
<meta name="language" content="fr">
Autant ces balises avaient-elles un rôle crucial pour le référencement il y a encore peu de temps, autant leur impact pour se constituer un bon "positionnement" semble diminuer avec le temps et notamment auprès de Google. Pourtant, ils faut toujours les utiliser car, pour la balise title par exemple, c'est elle qui apparaît dans les pages des résultats de recherches.
Voici la liste des principale balises <META>, avec le nom de chaque attribut, leur fonction et un exemple pour les illustrer. Ces balises sont nécessaires mais pas suffisantes pour garantir un bon référencement dans les moteurs de recherche.
Les 4 premières balises sont essentielles, les suivantes sont seulement indicatives car influençant faiblement les réponses restituées par les requêtes des internautes :
| Attribut | name="Title" |
| Utilisation | Indique la description du site (maximum 60 caractères). |
| Exemple | <"Title">LE TITRE - LE SITE - UNE DATE</"Title"> |
| INDISPENSABLE car c'est ce titre qui apparaît première ligne dans les résultats de recherche. Ce titre doit bien sûr être en adéquation avec le contenu même de la page. |
A ce propos, lire l'excellent article « La balise TITLE - Premier élément d’optimisation on-site »...
| Attribut | name="Description" |
| Utilisation | Indique la description du site (min 50 et max 200 caractères). |
| Exemple | <META name="Description" content="Webmaster Bretagne, des conseils pour créer votre site internet"> |
| INDISPENSABLE car c'est ce court descriptif qui apparaît seconde position, sous le titre de la page, dans les résultats de recherche. La description ne devrait pas être inférieure à 50 caractères ou dépasser 160 caractères (Google réduit la description après 160 caractères), espaces compris. |
| Attribut | http-equiv="Content-Language" |
| Utilisation | Indique la ou les langues du site. |
| Exemple | <META http-equiv="Content-Language" content="fr"> |
| Utile pour spécifier la (les) langue(s) utilisée(s) sur le site - Par ex : "content="fr, en, it". |
| Attribut | name="Author" |
| Utilisation | Indique le nom de l'auteur |
| Exemple | <META name="author" content="Erwan Corre - Webmaster Rennes"> |
La balise Keyword, même si elle a moins d'impact qu'auparavant reste cependant intéressante ne serait-ce que pour vous-même...
| Attribut | name="Keywords" |
| Utilisation | Informe les moteurs du contenu du site avec des mots-clés (maximum 1000 caractères). |
| Exemple | <META name="Keywords" content="web, conception sites, html, css, internet, html 5, webdesigner, infographiste, graphisme"> |
| Elle aussi n'est pas à oublier : elles doivent être en correspondance avec le contenu même de la page. On peut mentionner un mot simple ou un mot composé. Si la page est en UTF-8, les accents sont recommandés. |
Et ici un exemple de résultats de recherche :
Les pages web comportant des éléments de métadonnées obtiennent
une meilleure performance de visibilité que celles qui n'ont pas d'éléments de métadonnées
Zhang & Dimitroff (2004)
Les balises complémentaires
Ils existent depuis quelques années de nouvelle balises possédant le préfixe og pour opengraph. Elles aussi deviennent incontournables et surtout bien pratiques pour gérer les informations partagées par les grands réseaux sociaux : Facebook, Twitter...
<meta property="og:title" content="Erwan Corre - Site officiel" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.erwan-corre.com/" />
<meta property="og:image" content="https://www.erwan-corre.com/images/erwan-corre-index.png" />
<meta property="og:site_name" content="Erwan Corre" />
<meta property="og:description" content="Mon site personnel" />
Vous pouvez tester ces balises directement en cliquant sur les boutons de partages que vous avez placé sur vos pages et qui sont désormais eux aussi devenus incontournables (via des services comme AddThis ou ShareThis) :
Pour Facebook, qui doit être considéré de très près, des outils permettent d'optimiser ces paramètres de partage très finement via son outil pour développeur...
A savoir : Facebook par exemple recommande de réaliser des images ayant la taille optimale de 1200px sur 600px...
En savoir plus :
L'article « Élément meta » sur Wikipedia
Sur le site d'Abondance : Les balises Meta : fonctionnement et mise en placeDes infos précieuses sur « La balise TITLE - Premier élément d’optimisation » sur le site www.cours-referencement.fr (Avril 2020)
Un générateur automatique de balises meta sur Infowebmaster.fr : Générateur de balises méta
La page de recommandations de Google : https://support.google.com/webmasters/answer/79812?hl=fr« SEORCH », un outil pour auditer vos balises meta : https://seorch.eu/ (en)
erwan-corre.com