ASP.NET MVC vs SEO : Part 1 – Les balises META

Mon site internet ASP.NET MVC est enfin prêt à passer en production. Mon objectif est d’augmenter son audience. Entrent alors en jeu les problèmes de référencement. Si vous vous y êtes également confrontés, vous savez qu’être référencé sur les moteurs de recherche et apparaître sur la première page n’est pas chose évidente. L’ensemble des pratiques visant au bon référencement d’un site internet s’appelle le SEO (Search Engine Optimisation).

Dans cette série de billets consacrée au SEO et en particulier pour les sites ASP.NET MVC, nous parlerons de référencement naturel, et notamment des techniques communément utilisées permettant de l’améliorer. Dans ce premier volet, nous allons nous intéresser à ce qui se trouve dans la balise “head”  des pages de notre site internet, et en particulier aux balises “meta”.

Comment référencer “naturellement” mon site internet ASP.NET MVC ?

A moins d’être un spécialiste dans le domaine (et encore) ou de passer par des solutions payantes, notre site n’apparaitra pas en première page de Google/Bing et autres moteurs de recherche du jour au lendemain, et pour cause : le référencement est aujourd’hui de plus en plus difficile pour tout nouveau site arrivant sur la toile, car la quantité phénoménale de sites internet déjà bien référencés nous place d’abord loin derrière dans le classement. Sans trop s’attarder sur le sujet, voyons plutôt ce qui pourrait nous aider à améliorer le référencement de notre site ASP.NET MVC. Nous allons respecter dans un premier temps le minimum de règles indispensables au référencement : éviter d’implémenter et de définir des composants qui empêchent ou limitent le référencement de nos pages.

Les balises META

Les balises META qu’on retrouve généralement dans le “header” de nos pages HTML, sont des balises servant en général au navigateur, ainsi qu’aux moteurs de recherche. On parle communément de metadata (métadonnées), données de description d’un document. Elles apportent des informations sur le site telles que la description de nos pages, l’encodage, etc. Elles peuvent donc faciliter la lecture de nos pages HTML par les robots qui scannent les pages du web, et en particulier ceux qui permettent leur référencement. En règle générale, les meta sont définies de la manière suivante :

Afin d’exploiter l’utilisation des balises meta, créons un projet web ASP.NET MVC par défaut et regardons ce qu’il y a dans l’entête de notre Layout :

La balise META http-equiv

Cette balise renseigne sur l’encodage de nos pages web ainsi que leur type. Cette balise est très utile car les erreurs d’encodage de nos pages entraineront des erreurs d’affichage une fois rendu par notre serveur web, et donc au passage handicapera l’indexation des mots de notre site qui seront “mal formés”. Dans l’exemple ci-dessous, la balise <meta charset=”utf-8″> est l’équivalent de la ligne qui la précède pour le HTML5.

La balise title

Cette balise n’est pas une méta mais elle est obligatoire et importante pour le SEO. Les moteurs de recherche analysent cette balise : il faut donc l’exploiter proprement :

• Mettre si possible dans la balise title des mots clés représentatifs de votre site : cela aidera pour le référencement (cela est valable pour tout votre site).
• Mettre le titre exact de la page courante : c’est ce titre qui sera affiché sur les résultats des moteurs de recherche.
• Eviter de dupliquer le contenu de cette balise à d’autres pages : cela permet de ne pas semer la confusion par les moteurs de recherche.

Ces 3 règles sont valables pour toutes les metas et s’appliquent en général au contenu du site.

En ASP.NET MVC, nous allons exploiter le ViewBag. Regardons par exemple le contenu de la vue Contact.cshtml de notre projet par défaut :  on constate que le titre est renseigné au niveau du ‘ViewBag’, et donc retranscrit dans le rendu de notre page web courante (cf layout). Nous exploiterons cette technique simple et efficace pour renseigner nos balises META de façon générale : chose que beaucoup de développeurs oublient de faire.

La balise META Description

Cette balise, comme son nom l’indique fait une description de la page courante qu’on affiche (à condition qu’on la renseigne proprement pour chaque page). Elle est utile au référencement, et surtout, apparaît dans les résultats des moteurs de recherche. Elle est également exploitée par les réseaux sociaux (nous le verrons dans un prochain billet). Les internautes consultent en général cette information d’un rapide coup d’œil : il faut donc qu’elle soit brève et précise afin de motiver l’utilisateur à cliquer sur votre page.

Pour l’exploiter, nous allons également utiliser le ViewBag, tout comme cela est fait pour la balise “title”, afin de mettre un descriptif spécifique à chaque page de notre site Web.

Dans notre Layout :

Dans nos vues :

@{
ViewBag.Description = "Description de la page de mon super site mvc";
}

Si jamais votre site s’adresse à un publique très large (langues différentes), il faudra également prévoir la traduction du descriptif par langue.

La balise META robots

Par défaut, les robots des moteurs de recherche scannent les pages du web : il n’est donc pas nécessaire de spécifier cette balise pour cette tâche. Cependant, cette balise peut agir autrement : on peut, par exemple, vouloir ne pas indexer une page ou empêcher l’affichage des liens des pages contenus dans le cache du moteur de recherche. Exemple d’utilisation :

cette ligne META empêche l’indexation de la page courante.

La balise META keywords

Cette META a pour objectif d’énumérer les mots clés les plus pertinents de notre site pour le référencement. Exemple :

Cependant, cette balise semble être de moins en moins utilisée par les moteurs de recherche. De plus, les moteurs scannant toutes vos pages, le fait de renseigner cette balise pourrait potentiellement altérer le référencement si jamais les mots clés renseignés ne sont pas pertinents. Dans tous les cas, si vous l’utilisez, évitez de la surcharger, renseignez des mots en rapport avec votre page et idéalement les plus pertinents. N’oubliez pas que vos concurrents peuvent également consulter vos mots clés renseignés…

Conclusion

A travers ce premier billet, on a pu voir quelques balises META qui ont un certain poids dans le référencement de votre site internet ASP.NET MVC. Nous avons également vu comment, au travers de l’utilisation du Viewbag, on pouvait renseigner des informations spécifiques à chaque page pour alimenter les META de notre site web de façon adéquate. Cependant, les informations à renseigner, notamment le choix des mots clés ainsi que des descriptifs que l’on renseigne restent le point essentiel pour un meilleur référencement. En évitant de dupliquer le contenu des balises META à chaque page, en mettant une Meta Description précise et pas trop longue, en spécifiant l’encodage de nos pages, et en renseignant un titre pertinent par page, nous partons déjà sur une bonne base pour améliorer le SEO de notre site.

Bien entendu, cela n’est pas suffisant. Nous verrons dans notre prochain billet un autre élément important pour le SEO : l’utilisation des fichiers Robots.txt et Sitemap.xml sur notre site MVC.