Si vous possédez un site Internet vous avez sûrement entendu parler de la balise meta description.  Comme le terme « balise » ne parlera pas forcément à tout le monde, voici une petite définition issue de Dico du Net :

« Une balise sert à délimiter des ensembles de données contenues dans un document afin de permettre la structuration de ce document à l’aide d’un langage spécialisé (un langage de balisage), selon des normes bien précises. »

Revenons à notre fameuse balise meta description. Positionnée entre les balises <title> et </head> (balise de fin d’en-tête), elle sert à donner une information précise à la fois aux robots des moteurs de recherche et aux internautes sur le contenu de la page référencée. Celle-ci n’entre plus depuis un petit moment dans le positionnement de vos pages dans les principaux moteurs de recherche (PageRank) mais elle est néanmoins très importante et doit être optimisée. Et pourquoi donc du coup ?

Tout simplement car son contenu correspond à ce qui va être affiché dans les résultats des moteurs de recherche juste en dessous du titre de la page. Cette description devra donner envie à l’internaute qui effectue une recherche de visiter votre page et pas celles de vos concurrents affichées en dessous ou au dessus d’elle dans la page de résultats.

La finalité du référencement naturel n’est pas en soi le bon positionnement des pages sur les moteurs de recherche, mais bien de générer le plus de trafic qualifié possible sur votre site. L’enjeu va être de favoriser les clics sur les résultats correspondant à vos pages en rendant votre description attirante. Et, de manière induite, un accroissement du nombre de clics peut entraîner un meilleur PageRank.

Voici quelques conseils pour optimiser la rédaction de cette balise si importante :

• Vérifiez que la description de votre page soit bien en adéquation avec le titre de celle-ci et son contenu. En effet, les moteurs de recherche sanctionnent toute incohérence détectée entre ces éléments qui peut être considérée comme du spam.
• Le contenu doit être court et percutant avec un maximum de 156 caractères espaces inclus, au delà celui-ci sera tronqué. N’hésitez pas à utiliser des chiffres et des diminutifs qui permettront de raccourcir son contenu et le rendre plus impactant.
• Rédigez la balise en ayant en tête de développer le titre et de résumer le contenu de la page.
• Rédigez des phrases avec des verbes et non une liste de mots clés sous peine que la page soit considérée comme du spam.
• Comme dans un e-mailing ou sur une landing page, adressez-vous directement à l’internaute avec un « Call to Action« , message incitatif poussant celui-ci à agir comme par exemple « Découvrez… », « Visitez… », etc.
• Mettez en avant vos avantages concurrentiels.
• Reprenez un ou deux des principaux mots clés de votre page. En effet, Google affiche en gras dans les résultats de recherche les mots clés qui ont été saisis par l’internaute ce qui va favoriser les clics.
• Evitez de copier-coller du contenu qui est présent sur la page en question.
• Rédigez une description pour chaque page du site.

Si le contenu de la balise meta description n’est pas jugé par Google suffisamment descriptif du contenu de la page ou bien de mauvaise qualité, celui-ci affichera à la place un extrait du texte présent sur la page.

Un petit exemple

Pour illustrer ces conseils, je vous propose de prendre un cas concret, celui de la page « Bons Plans Restaurant » de Groupon qui me semble être un bon exemple de balise meta optimisée. La balise meta est : <meta name= »description » content= »Retrouvez les Offres Restaurant et économisez jusqu&#39;à 70%. Testez les meilleurs Restaurants avec les Promos et explorez votre ville autrement sur Groupon.fr« >

Voici donc ce qui s’affiche comme premier résultat en référencement naturel sur Google pour les mots clés « bons plans restaurant » :

Exemple de résultat de recherche Google

En conclusion, si vous ne devez retenir qu’une chose : mettez dans cette balise des informations pertinentes et incitatives qui permettent à l’internaute de voir en un coup d’œil si ce qu’il recherche est présent sur votre page et lui donnent envie d’aller y faire un tour.

Cartographie – On se promène ou on fabrique un site ?

A la question (apparemment tintée d’une pointe d’humour) posée dans ce titre évocateur, je répondrai avec beaucoup plus de sérieux que l’on fait les deux.

Et bien oui l’intérêt de cartographier son site, avant de se lancer plus loin, est double (ainsi que la tâche). Il s’agira bien évidemment, suite à l’étape de réflexion initiale relative aux idées et thématiques que l’on souhaite promouvoir au travers de son site, de classer ces dernières et de les organiser entre elles. Mais au delà de ce travail, il s’agira aussi (et surtout) de mettre en place et de visualiser les « chemins » de navigation à venir entre ces items, et donc d’identifier les liaisons entre vos pages.

Et oui, on va donc bien se promener ! Et il est fort possible que la balade soit longue.

Allez ,on organise…

Normalement, vous avez dû, au tout début de votre projet, identifier vos différentes rubriques. On commencera donc par les hiérarchiser, les regrouper, et les organiser.

A ce niveau pas de secret ni de complexification : un seul outil le papier-crayon ! (oui vous pouvez quand même utiliser votre ordinateur et son éditeur de texte ou de diapo !!!). On commence donc par définir des niveaux de hiérarchie selon l’importance des rubriques, en commençant par la page d’accueil qui représentera automatiquement le niveau 1. Ensuite, mon conseil est de se limiter à 2 niveaux supplémentaires relatifs aux rubriques principales et aux sous-rubriques. A considérer que les rubriques principales présenteront un contenu simple, épuré et immédiatement clair pour l’internaute, le détail étant plutôt réservé aux sous-rubriques.  Une fois faite cette organisation, il n’ y a plus qu’à représenter les rubriques ainsi définies (niveaux 1, 2 et 3) sous la forme d’une arborescence à plat.

Ca peut donner un truc dans le genre :

Cartographie site internet

Et maintenant, on relie…

Ben oui, parce mon cher petit internaute sagement en train de lire ma fiche produit n°5, et à ma grande joie, désireux d’en effectuer l’achat, il ne faudrait pas qu’il doive remonter l’arborescence jusqu’à la page d’accueil pour rejoindre celle des contacts (ou autre formulaire d’achat dans cet exemple). C’est qu’il ne faudrait pas le punir par une balade trop longue, mon cher internaute ! N’oubliez jamais votre objectif de conversion, et donc le tunnel efficace permettant d’atteindre cet objectif. En bref, imaginez vous en train de vous « balader » sur le site, et élaborez de « belles pistes » en accord avec votre objectif de conversion.

Ça donnerait donc un truc dans le genre :

Liaisons entre les rubriques

On vient donc tout simplement de formaliser le menu de notre futur site, et les liaisons entre les pages de ce dernier.

A noter qu’une autre méthodologie peut être appliquée à ce niveau, selon la complexité et le nombre de « chemins » que vous voulez mettre en place. Il s’agira ici de représenter horizontalement sur une ligne dédiée chaque chemin correspondant à un process menant aux objectifs prévus.

Pour exemple, le schéma ci-dessous :

Représentation linéaire process de navigation

Si votre projet s’avère bien imposant et/ou complexe, et que donc notre célèbre feuille de papier ou informatique s’avère limitée, n’hésitez pas à vous tourner vers des applications de « mindmapping » vous permettant d’éditer de jolies cartes heuristiques, que vous trouverez facilement sur le net; pour en citer quelques uns à la volée: FresMind, Mindjet ou Xmind.

Cette étape primordiale enfin validée, il sera temps de réfléchir à la structure interne du site et passer ainsi à l’étape de la représentation des pages ou wireframing.

En espérant en avoir aidé certains dans leurs démarches, n’hésitez pas à laisser vos commentaires et indiquer d’autres méthodologies.

Allez à vos stylos ! Cartographiez et commentez !

Wireframe – Qu’est-ce que c’est et pourquoi ?

Sous ce magnifique anglicisme barbare qui déplaira fortement à Mr TOUBON (quelqu’un dans la salle se souvient-il de Mr TOUBON ?) se cache l’appellation d’une étape fondamentale de la création d’un site. Cette étape initiale du projet suit directement celle de la cartographie (exposée dans l’article correspondant ici). Pour rester « frenchy touch », on parlera donc de la « maquette fil de fer ». Alors non, il ne s’agit pas ici de fabriquer via vos petites « mimines » et quelques trombones un personnage décoratif pour votre bureau, mais bien de réaliser une première maquette simpliste représentant l’organisation fonctionnelle des pages (nature et liaisons) qui constitueront votre site.

Think Simply !

A ce niveau, et parce que vous êtes un lecteur assidu de ce blog, vous disposez donc d’une cartographie finalisée de votre site. C’est à partir de cette dernière que vous allez représenter l’organisation de chacune des pages. Ici, il s’agira donc tout simplement de positionner sur votre support (représentant une page) des « blocs » ou autres boites de textes, représentatifs des principaux éléments et fonctionnalités que vous souhaitez voir apparaître sur vos différentes pages, et d’ainsi toutes les décliner (page d’accueil, formulaire, page de contenus, etc…). Vous allez ici, page après page, définir schématiquement le contenu prioritaire de votre site.

Lors de cette phase de travail, il s’avère primordial de garder en tête l’objectif premier de votre site. En effet, la nature, l’organisation, le placement et le déroulé des pages doit assurer le maximum de conversion. Ainsi, élaborez votre maquette en gardant cet objectif constamment à l’esprit, afin d’éviter de lourds correctifs sur la partie Webdesign qui suivra plus tard.

Un avis très personnel mais que je pense néanmoins essentiel : « Think and do simply« ; oups ! (pardon Mr TOUBON), je voulais dire « Pensez et faites simple ». En effet, cette étape de réalisation de son « wireframe » (oh flûte alors ! Mr TOUBON ? En fait, ça serait plus simple pour tout le monde si vous sortiez, merci !), permet justement de réfléchir à l’ergonomie finale de son site pour atteindre au plus vite et au mieux son objectif. Autant il sera évident de consolider et compléter son site à posteriori, autant simplifier un site une fois une multitude de pages, liens et autres modules mis en place, s’avérera plus que délicat et chronophage (donc coûteux).

Une fois ces éléments en tête, vous pouvez donc vous lancer dans la conception de votre wireframe, euh pardon…, zoning, …ah, non mince, votre maquette fil de fer ! (Vous êtes parti, Mr TOUBON ?).

Wireframe – Comment faire ?

Bien à ce niveau le débat peut-être un peu plus long ; pas vraiment au niveau du travail à effectuer mais plutôt des outils à utiliser. Mais bon, ici c’est un article de blog Mesdames et Messieurs, et donc, non, il ne sera pas possible pour moi de rédiger un paragraphe descriptif de toutes les possibilités avec mon avis éclairé sur chacune. Ainsi, je me contenterai donc de lister les possibilités, et de vous laisser vous en remettre à vous-même pour le choix. Du simple au plus élaboré (n’oubliez pas « Think and do simply, vous inquiétez pas TOUBON est parti) :

– le bon vieux papier-crayon, c’est tout bête mais ça marche depuis des millénaires !

Le plus simple

– les trombones et les « mimines » ! Non là je déconne, c’est pour voir si vous suiviez encore…

– le niveau supérieur reste un bon outil de diaporama d’un certain leader mondial de système d’exploitation arborant le doux et sympathique nom de « Fenêtre » (dommage qu’il soit parti du coup le père TOUBON, il aurait été content). La difficulté (ou non) ici, sera pour vous de vous créer votre propre bibliothèque d’éléments représentatifs.

– les applications dédiées en ligne : Mocknow, et Wireframe.cc ;

– les applications dédiées en installation locale : Balsamiq et Lumzi.

Il existe bien d’autres applications, alors n’hésitez pas à en proposer dans les commentaires.