Cette semaine, on s’attaque aux balises métas et cette question quasi existentielle : lesquelles sont réellement utiles ?
Les balises métas servent à positionner des métadonnées dans une page HTML, pour permettre aux moteurs de recherche ou aux outils d’indexation de pouvoir les exploiter.
Les balises métas title et description
Le titre et la description de votre site sont important à la fois pour le moteur de recherche mais aussi pour le visiteur potentiel, il est donc IMPERATIF de choisir ses mots avec soin.
Les balises métas pour le moteur de recherche
Pour référencer les pages de votre site internet, les robots d’indexation commencent par lire les balises métas title et description. Il est donc impératif que votre mot clé principal soit présent dans ces deux balises.
Les balises métas pour l’internaute
Ces deux balises sont celles utilisées par le moteur de recherche pour afficher le titre du site et sa description dans ses résultats de recherche. Il est donc primordial de proposer un texte clair et rapidement compréhensible pour l’internaute.
Lorsque vous rédigez le contenu de ces balises, vous devez garder à l’esprit que leur lecture doit provoquer l’envie de cliquer à la personne qui va les lire. Vous devez donc susciter sa curiosité et répondre à la question qu’il se pose lorsqu’il saisit sa recherche dans un moteur.
Voici ce qu’il faut faire
Dans le résultat de recherche ci-dessous, nous plaçons notre mot clé principal hébergement, sur lequel nous souhaitons gagner du trafic. Ensuite, nous précisions que notre plus produit est la qualité de notre service, car c’est sur ce point que nous souhaitons recruter nos futurs clients. Ainsi, les visiteurs seront qualifiés et susceptibles d’être transformés en clients.
Voici ce qu’il NE faut PAS faire
L’exemple ci-dessous est la page d’accueil du site INRI’S auto école et moto école au 22 janvier 2015. Si nous vous montrons cet exemple, c’est parce que nous travaillons aujourd’hui même sur le référencement de ce site. Vous pouvez voir dans le titre des mots répétés qui prennent inutilement de la place. Le titre en lui-même est tronqué, d’une part l’information n’est pas compréhensible, de l’autre cela ne donne pas une impression de sérieux.
Du côté de la description, une suite de mots, sans suite logique, sans cohérence avec le sujet du site internet. Tout était réuni pour éviter que l’internaute qui a cette auto-école dans ses résultats de recherche ne clique pas sur le lien.
Comment se renseignent ces balises ?
La description doit se placer après le titre, le tout dans la balise <head>, comme ceci :
<html> <head> <title>TITRE DE LA PAGE</title> <meta name="description content="DESCRIPTION DE LA PAGE" /> </head> </html>
Côté pratique, le titre tout comme la description ne doivent pas être trop long, l’idéal étant de ne pas dépasser les 60 caractères, espaces compris, pour le titre, et 160 caractères pour la partie description, et d’y intégrer votre mot ou expression clef.
Si vous souhaitez vérifier la bonne utilisation des balises métas sur votre site internet, n’hésitez pas à utiliser l’outil proposé par Yakaferci.
L’authorship et author rank
L’authorship est un programme mis en place par Google permettant de signer un contenu et de l’associer à son compte Google+. Ainsi, en identifiant l’auteur des contenus Google créé un indice de réputation : l’Author Rank que Google attribut en fonction de la notoriété de l’auteur.
Dans la pratique, l’autorship associe le contenu que vous publiez à votre compte Google+, grâce à la balise rel= »author ». Cette dernière doit se positionner dans les premières lignes de code :
<rel="author">
Mais depuis quelques mois, Google a déclaré abandonner la prise en compte et l’affichage de l’authorship dans ses résultats. Selon un post de John Mueller :
L’authorship « n’était pas aussi utile pour les internautes qu’escompté » et pouvait même « les distraire des résultats. D’après les tests réalisés, arrêter l’authorship ne va pas réduire le trafic des sites, pas plus qu’augmenter le clic sur les publicités » générées par Google sur ses pages de résultats.
Malgré cet arrêt, nous sommes d’avis qu’il ne faut pas négliger l’utilisation de ces balises et continuer de les utiliser. D’une part elles contribuent à la mise en place d’un web sémantique, et, qui sait, peut être ces critères seront bientôt à nouveau pris en compte, soit directement dans le moteur de recherche soit dans d’autres outils.
L’importance capitale des balises métas pour les réseaux sociaux
On ne va pas vous le répéter 1000 fois (ndlr : hein vous voulez nous énerver Solène ou bien ?), vous le savez : les réseaux sociaux sont désormais l’une des clés d’un bon référencement. Inutile d’essayer de vous faire connaitre si vous n’êtes pas présent sur ces réseaux.
Lorsque vous partagez vos pages sur les réseaux sociaux, leurs moteurs de rendu utilisent des balises spécifiques présentent dans vos pages pour en catégoriser le contenu et y récupérer des informations.
Facebook et l’Open Graph
Si vous souhaitez donner des informations au réseau social, il vous faut utiliser le balisage Open Graph. Ces balises initialement créées par Facebook sont aujourd’hui gérées par l’Open Web Foundation qui en garantit le développement et le caractère ouvert.
Ce balisage se présente sous la forme suivante :
<html xmlns:og="http://ogp.me/ns#"> <head> <title>Article sur l'Open Graph</title> <meta property="og:title" content="Article sur l'Open Graph Keole.net" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://www.keole.net/referencement-3-les-balises-metas/" /> <meta property="og:image" content="http://www.keole.net/wp-content/uploads/2014/12/article3.png" /> <meta property="og:description" content="Cette semaine, on s'intéresse aux balises métas, à l'authorship et l'author rank, ainsi qu'aux réseaux sociaux, le tout pour un référencement optimal." /> </head> </html>
Voici les balises Open Graph obligatoires :
- og:title : c’est le titre qui sera affiché dans le réseau social,
- og:type : le type de votre page ou de votre article (actualité, vidéo, musique…), il est utilisé pour catégoriser les contenus et les affichés de préférence aux personnes aimant ce type de publication,
- og:image : c’est l’URL (adresse internet) de l’image qui sera affichée dans les réseaux sociaux pour présenter votre page,
- og:url : c’est l’URL « canonique » de votre page. Dans la plupart des cas, c’est celle affichée dans la barre d’adresse de votre navigateur,
- og:description : c’est tout simplement la description de votre page telle qu’elle sera affichée dans les réseaux sociaux
Pour avoir la liste complète des propriétés reconnues par Open Graph, cliquez ICI.
Pour tester les balises Open Graph d’une page, facebook met cet outil à votre disposition.
Twitter et les Twitter Cards
Les cartes Twitter permettent d’intégrer à votre tweet un « call-to-action ». Cependant, ces cartes ne sont pas limitées aux professionnels ou utilisateurs du programme de publicité Twitter. Chaque utilisateur peut intégrer une carte à ses tweets pour augmenter le nombre de retweets et augmenter les taux de clics vers son blog ou son site internet, augmenter les téléchargements, etc.
Il existe 7 types de twitter cards :
- Summary card : il s’agit du format par défaut qui va reprendre des éléments de votre page web comme le titre, la description, l’aperçu et la mention twitter.
- Summary card with Large image : ce format permet d’accompagner le texte d’une grande image en reprenant les caractéristiques de la “Summary card”.
- Photo card : il s’agit ici uniquement d’un tweet illustré d’une image.
- Gallery card : ce type de format propose une galerie de 4 photos.
- App card : ce gabarit ne concerne cette fois-ci que les applications mobile. Les metas-données qui remontent concernent le nom de l’application, le prix, la description, les avis et la possibilité de télécharger directement l’application en question.
- Player card : cette carte permet de fourni un contenu audio, vidéo ou multimédia.
- Product card : Ce format vise les sites e-commerce. En effet, cette carte présentera un produit donné avec une image, le prix, la liste des tailles, la disponibilité…
Voici l’exemple d’une app card vu sur le site classique, et sur l’application Twitter. L’utilisateur peut télécharger l’application en question directement via le tweet :
Pour tout savoir sur l’installation des twitters cards, rendez-vous sur le site officiel de l’oiseau bleu !
Au niveau de son site internet, ça marche comment ?
Les balises se présentent sous la forme suivante :
<meta name="twitter:card" contente="keole_referencement_image"/> <meta name="twitter:domain" content="www.keole.net"/> <meta name="twitter:creator" content="@solene"/> <meta name="twitter:site" content="@keolepointnet"/> <meta name="twitter:image:src" content="http://www.keole.net/wp-content/uploads/2014/12/article3.png/>
A noter que vous pouvez préciser le compte Twitter du site et le compte Twitter de l’auteur de l’article qui seront mis en avant dans la “card”.
Dernière chose à faire : Valider votre card. Pour que les extraits enrichis s’affichent dans le flux de vos followers, il vous faut donc remplir le formulaire “card validator” . Et en principe, tout est bon pour votre tweeter card !
Le prochain article sera consacré à un autre aspect du référencement, et en attendant bonne semaine à tous !
Un article rédigé pour vous par Alex
Gérant & Directeur technique. "Spécialisé dans les métiers du web depuis plus de seize ans, il a créé l'agence web Keole en 2012. Architecte, Il analyse, synthétise et conceptualise les différents projets de l'agence depuis sa tour de contre-ordre." Spécialités : Touche à tout écervelé. Il aime : voir le verre à moitié plein | les cataclysmes, les volcans et les dinosaures | l'absurde | l'abîme. Il n'aime pas : ceux qui voient le verre à moitié vide | le repli sur soi | Dieu, s'il existait. Son idole : Laszlo Carreidas
