SEO et CSS
Le site Asos utilise quelques propriétés CSS afin de « remonter » le contenu pertinent.
SEO et float
Les pages catégorie du site Asos ont une structure en 2 colonnes :
- la colonne de droite pour la navigation à facettes
- la colonne de gauche pour la liste des produits
Le contenu important de cette page est bien entendu la colonne avec la liste des produit et une description de la catégorie.
Google accorde plus d’importance au contenu situé en haut de page et sur la page catégorie Asos, on pourrait croire que les robots de Google traiteront le contenu situé dans la colonne de gauche (navigation à facette) puis celui de la colonne centrale (liste des produit).
Oui mais Asos utilise une technique CSS très simple à mettre en oeuvre pour placer le contenu important plus haut : float right et float left.
La propriété css float permet de spécifier si l’affichage des éléments suivant sont adjacents
Prenons l’exemple suivant sans utiliser cette technique :
Voici ce que Google voit :
[code lang= »html »]
<div id= »container »>
<div id= »sidebar »>Colonne gauche avec navigation à facettes</div>
<div id= »content »>Colonne droite avec liste des produits</div>
</div>
[/code]
Maintenant, utilisons cette technique pour placer le contenu important en haut de la page mais tout en gardant le même affichage pour l’internaute. Ci-dessous, la colonne centrale est bien placée avant la sidebar dans le code source.
[code lang= »html »]
<div id= »container »>
<div id= »content »>Colonne droite avec liste des produits</div>
<div id= »sidebar »>Colonne gauche avec navigation à facettes</div>
</div>
[/code]
Un peu de CSS :
[code lang= »css »]
#content{
float:right
}
#sidebar{
float:left
}
[/code]
On obtient le même affichage que ci-dessus :
Ce n’est pas difficile à mettre en oeuvre mais Asos s’est donné la peine d’appliquer cette technique uniquement si cela est pertinent, par exemple sur la page d’accueil cette technique n’est pas aplliquée.
SEO et position: absolute
La propriété CSS position absolue permet de positionner un élément n’importe où dans la page. Le positionnement se fera par rapport au coin haut gauche de la page html ou par rapport au parent si ce dernier est relative ou absolute.
Asos utilise cette technique pour placer le header en bas de la page dans le code source (et donc pour Google) et remonte le header avec la position absolute pour l’internaute.
Dans le header, on retrouve des éléments non pertinent comme le bloc login ou le bloc de changement de devise ou encore le panier. Asos va même plus loin en plaçant la navigation horizontale après le contenu principal et avant la partie du header contenant le bloc login et le bloc changement de devise :
Cette technique permet donc de placer en bas de la page le contenu non pertinent (peut être que pour la navigation cela n’est pas nécessaire). D’autre part, avec cette technique on ne risque pas d’avoir ce type de description dans les résultats de recherche :
Panier : 0 produit produits 0,00 € (vide); Votre compte · en; fr.
SEO et Nofollow
nofollow est une valeur non standard de l’attribut rel (relation) de la balise <a>, qui sert en HTML à produire un lien hypertexte. L’attribut nofollow (de l’anglais no follow, ne pas suivre) sert à spécifier que le lien en question ne doit pas être pris en compte par un programme lisant la page, ceci afin de ne pas augmenter le rang dans les moteurs de recherche du site internet vers lequel pointe le lien.
source : Wikipedia
Son utilisation indique aux moteurs que le lien ne doit pas être pris en compte.
Pour un site e-commerce, les liens à ne pas prendre en compte sont les suivants :
- login
- mon compte / créer un compte
- panier
- wishlist
Asos applique très bien le nofollow sur ces liens. (Dans un prochain tuto, je vous expliquerai comment intégrer le nofollow dans Prestashop).
Matt Cutts recommende l’utilisation du nofollow pour ces pages :
There may be a miniscule number of pages (such as links to a shopping cart or to a login page) that I might add nofollow on, just because those pages are different for every user and they aren’t that helpful to show up in search engines. But in general, I wouldn’t recommend PageRank sculpting.
source : http://www.mattcutts.com/blog/pagerank-sculpting/
Toutes ces optimisations SEO ne vont pas radicalement améliorer votre référencement mais le SEO est un travail de fourmi et c’est la somme des optimisations qui vous feront gagner en référencement.
Les thèmes Prestashop produit par Prestarocket intégreront ces optimisations SEO.
Pour optimiser votre thème Prestashop, c’est par ici : Optimisations SEO Prestashop
