Deezer le site d’écoute de musique gratuit est bâti sur une plateforme adobe flex très réussie. L’utilisation de flex permet de fournir une expérience utilisateur agréable pour le visiteur qui peut naviguer sur le site tout en écoutant la musique qu’il a sélectionnée. Malheureusement pour les moteurs de recherche, cette interface n’est pas du tout adaptée car les robots des moteurs de recherche ne voient pratiquement rien dans ce code peut différenciant. Alors comment Deezer fait il pour tout de même se positionner très bien dans Google?
La stratégie SEO du site est a priori très intelligente puisque plutôt que d’essayer de référencer le site en flex, Deezer référence des pages très dépouillée et riche en contenu relatif aux artistes et leurs musiques. Ces pages statiques (générées dynamiquement en php) que l’on trouve sous des urls très explicites comme celle de Coldplay par exemple : http://www.deezer.com/fr/coldplay.html sont des pages au format HTML on ne peut plus classique, en témoigne d’ailleurs le nom des balides CSS utilisées pour ces dernières : < div id="header_seo" > et la localisation des images dans un répertoire lui même aussi intitulé SEO : /images/seo/artist_75.jpg.
La page HTML de Coldplay, simple et épurée
A gauche à la page flex de l’artiste Coldplay avec aucune occurrence « coldplay », à droite la page HTML avec 55 occurrences « coldplay »…
Et le résultat est là, un très bon référencement pour Deezer même si l’expérience utilisateur est réduite ou déplacée à un clic (lors de l’écoute d’un titre on revient sur l’interface flex). Pour illustrer mes propos quelques exemples concrets :
Coldplay : La recherche google avec une 5ième place avec la page html suivante : http://www.deezer.com/fr/coldplay.html alors que la page flex (ici : http://www.deezer.com/fr#music/artist/892) est absente de la première page du moteur de recherche.
Amy Macdonald : la recherche google ici avec une première place pour la page HTML : http://www.deezer.com/fr/amy-macdonald.html, la page flex absente des premières pages google est là.
Cette technique SEO est très maligne et performante, les équipes de Deezer ont trouvé une parade efficace au problème de base de l’interface sans trop dégrader l’expérience utilisateur, well done!
Accueil
37 Commentaires
Très bien joué effectivement. Merci Henri pour ce décorticage très intéressant
C’est malin mais c’est aussi une technique très courante pour les sites Full Flash…
Et le contenu du site en flex se crée-t-il automatiquement par rapport au contenu des pages correspondantes en HTML ?
Très bonne analyse.
Une petite coquille : « (…)les robots des moteurs de recherche ne voientt »
Je pense que les données sont stockées dans une base de données et qu’elle alimente aussi bien la page flex que la page html.
excellente analyse.
Il est vrai que le referencement qu’un site en flash reste un gros point noir.
Salut à tous,
@jali : Oui évidemment, les pages sont générés avec PHP (ou consœur). Henri, d’ailleurs,du coup, ce ne sont pas des « pages statiques », l’extension « html » n’indique pas obligatoirement une page statique :)
Je confirme Hyst, cette technique est utilisé depuis des années (mais rarement) pour les sites en full flash.
@Alex c’est un abus de langage de ma part en effet, je parlais de pages non inclues dans le flash ;)
Bien tenté… sauf que Deezer n’est pas du tout fait en Flex…
C’est quoi alors comme techno?
a quand un article sur les problème de Deezer pour les possesseurs d’Avast et bitdefender ? sur les forum, deezer s’en fout complètement et renvoi la balle a BD et inversement d’ailleurs.
Digne d’une communication des années 2000 : tant que y a pas trop de bruit, continuons comme ca.
Très bon article !
Excellent décorticage de la technique SEO, très instructif pour un novice comme moi !
Merci !
Intéressant, je ne m’étais déjà posé la question sur la méthode SEO de Deezer, sans me pencher sur le site en lui-même, et voilà que tu le fais pour nous =).
Bel article, et belle stratégie de référencement de la part de Deezer!
J’attend toujours le commentaire de Mr Peer pour dire en quelle technologie est réalisé Deezer!
Bye =)
Plutôt que d’appeler leurs images artist_75.jpg, ils devraient p-e donner le nom des artistes. On sait jamais ça pourrait servir :D
Merci, c’est vraiment très instructif!
@Christophe, en effet cela aurait été pertinent pour un référencement dans google image…
@Brice merci!
Joli coup, fallait le voir.
Si je ne m’abuse, Deezer est en Flash et n’utilise pas le framework Flex, mais je ne suis pas sur :x
Ce qui, au final, revient à peu près au même, du moins côté utilisateur puisque Flex produit des fichiers Flash.
Note tout de même que Google et Yahoo! référencent désormais les applications Flash intégrées aux pages grâce à une technologie fournie par Adobe. Cependant, on peut s’en douter, parcourir des sites interactifs est difficile et demande de la puissance de calcul là où les fichiers HTML sont limpides et rapides à traiter pour un robot d’indexation.
Quoi qu’il en soit, j’aime bien ton article, car il permet d’aller à l’essentiel et en se sentant tout d’un coup plus malin. Valoriser le lecteur, en voici une bonne stratégie de fidélisation ! ;)
super blog, j’adore vos articles et reportages
bonne continuation
Jean Paternin
Désolé, mais Deezer est en AS2 – Flash8 :)
Deezer est codé en flash 8 / AS2. Rien a voir avec du flex !!
Comment je le sais ? –>
- Regardez le code de la page html : var so = new SWFObject(« /deezer_carl.swf », « dzflash », « 690″, « 100% », « 8″, « #444444″, true); –> le « 8″ est la version du player minimum a utilisé.
- Désinstallez votre player flash, installez un player 8 trouvable sur le site de adobe.com. Le site deezer fonctionne :)
- FLEX ne fonctionne qu’avec le player 9 :p
Eh bien moi qui croyais que c’était du flex…
L’AS3 est aussi possible en Flash 8, ça n’est donc pas forcément du AS2..
@netsuo : seulement avec le player 8.5 en béta…
Bref, à l’avenir, Henri, à moins que tu cherches à provoquer un débat d’experts, préfère plutôt l’utilisation générique Adobe Flash (voire même évite d’utiliser Adobe, car certains pourraient prétendre que c’est Macromedia selon la version de Flash utilisée). Ceci étant, cela ne change strictement rien au fond, ni à la pertinence de l’article.
C’est une technique que j’utilise moi-même professionnellement lorsque l’on monte des sites full Flash. Elle est d’ailleurs à mon avis de loin la plus efficace, et est en effet loin d’être nouvelle.
Vraisemblablement, le contenu tant HTML que Flash est extrait de la même BDD, oui.
Content de voir cet article, les gens pensant qu’un site Flash ou Flex ou Silverlight etc n’est pas référençable sont encore trop nombreux. Une majorité écrasante, même ^^
Il faut utiliser les bons outils et aller plus loin que le site lui même, deezer est un bon exemple!
Merci beaucoup pour cette analyse, nous avons exactement le même problème sur notre plateforme de vente http://www.wisibility.com/WE/ qui est sympa dans l’interface (tout en Flex) mais comme tu l’expliques, on est obligé de trouver des techniques de renard pour que ça se passe bien… par contre, pour nous le plus chiant, est de ne pas pouvoir Linké sur un produit en particulier (ceci dit je pense qu’on aurait pu le faire techniquement … )
Apparemment, Adobe bossait dur cet été avec Google, je ne sais pas trop ou ça en est si quelqu’un a de l’info ça m’intéresse : http://www.clubic.com/actualit.....flash.html