Le problème du webdesign Parallax pour le SEO

Dans cet article je vais parler d'une tendance en webdesign nommée "Parallax". Ce nom designe un effet de style qui permet, sur une même page web, de superposer plusieurs éléments (dessins, photos, vidéos, textes, etc.) pour donner un effet de profondeur. Le problème c'est que la mise en place de cet effet peut mener à quelques soucis SEO.

Tout d'abord, voici quelques exemples actuels de sites au design dit "parallax" :

• Le Mac Pro d'Apple
• La page de Kit Kat
• Quelques autres exemples

Comme vous pouvez le constater, en utilisant la mollette de votre souris, vous faites défiler la page et les images / textes qu'elle contient. Il ne faut pas tourner autour du pot : ce style de présentation donne un effet "wahou" à la page.

Mais il n'y a pas que des avantages...

Une page pour les gouverner toutes

D'une part, tous les textes et les images se trouvent sur une même page. Si votre page regroupe plusieurs produits de votre site (ou services), alors vous ne pourrez pas aider Google en les différenciants à l'aide d'un titre et d'une description (ou de mots clés) uniques. Si vous utilisez plusieurs pages vous pourrez le faire.

Le problème de la balise H1 est aussi présent au même niveau : une seule de ces balise est possible sur une page pour sa prise en compte dans les moteurs de recherche.

Oui, une page unique de type parallax pose problème pour le référencement et le SEO. Mais il y a une solution.

Solution : séparer votre contenu en plusieures pages

La solution est évidente même si sa mise en place peut être plus difficile : il faut séparer votre contenu en différentes pages. Chacune des pages va contenir uniquement les informations d'un produit avec les bonnes balises H1, TITLE et les bonnes informations "meta".

Google va donc lire les pages une par une pour les indexer. Mais comment les réunir dans une seule page pour construire l'effet Parallax tant aimé ? Il vous faudra utiliser un framework JQuery capable de charger des pages externes pour les ajouter dans la page parallax.

En jQuery, c'est l'instruction load() qui vous sera utile pour réaliser cette opération. Notez bien que vous pouvez utiliser n'importe quel autre framework de ce type Javascript (comme Mootools) pour arriver au même résultat.

Eviter le duplicate content

Maintenant que vous avez séparé vos textes et images en plusieurs pages (indexables par Google), vous avez du contenu dupliqué ! Et oui, car chaque information est contenue deux fois : une première fois sur sa page qui lui est propre et une deuxième fois sur la page parallax toute jolie.

Il existe toujours un doute pour savoir si la page parallax sera lue et correctement interprêtée par Google. Mais pour éviter tout problème, vous pouvez simplement demander à Google de ne pas l'indexer. Ainsi, vous éviterez tout problème de duplicate content.

Et le linking ?

Le linking est un élément important du SEO, même si Google tant à limiter son impact de plus en plus à mesure de ses mises à jour (Penguin et Panda).

Le problème (et l'avantage) des pages parallax c'est que les visiteurs et autres sites peuvent faire un lien vers cette page. Rassurez-vous cela signifie qu'elle est réussie ! Mais, forcément, le "jus" SEO n'est pas transmit à la bonne page, ce qui peut être problématique dans l'optique d'une campagne de linking.

Il n'existe pas vraiment de solution à ce problème. De toute façon, si on souhaite réaliser une page du type one-page avec parallax c'est aussi un peu pour que les gens la partage et fasse un lien vers celle-ci non ?

Pour d'autres articles sur le référencement et le SEO, cliquez ICI.