Scrolling sites et référencement

[Holiday31]

Bonjour à tous,

A l'heure où les technologies web nous permettent de rivaliser d'ingéniosité quand à la réalisation des sites, le probleme se pose quand à ces fameux "scrolling sites" (sites sur une page que l'on scrolle) et le comportement de google vis à vis de cela.

Ou pour être plus précis : Si un site est sur une seule page, mais bien structuré grâce à HTML5 et aux microdata, sera t-il pénalisé pour se positionner et être référencé?

Prenons le cas simple et concret de ce site : http://www.plessis-sushi.fr

On est d'accord que ce site est pénalisé car une seule page est référencée, et cela implique qu'un utilisateur trouvant ce site sur google tombera automatiquement sur cette unique page (et pas forcément la partie ciblé ex : Plan d'accès).
On est également d'accord que pour ce site, ce n'est pas trop grave.

Ma question se pose pour un site qui aurait beaucoup plus de contenu (beaucoup plus de parties, beaucoup plus de thèmes et de mot clés à cibler).

L'utilisation des sections HTML5 (et des h1 dans chaque "<section>") permettra-t-il de référencer à part égale chaque "<section>" et ses "mots-clés" dans google?

Si vous avez des indices ou des réponses, merci d'avance =)

[Leonick]

1) quel intérêt de tout mettre sur une page ? surtout que dans le cas présent on pourrait couper la page, d'autant plus que si tu met plusieurs h1, c'est que tu reconnais plusieurs paragraphes
2) si on navigue avec js désactivé, on ne voit que ton logo et aucun contenu !!

donc pour moi mauvaise solution

[spout]

Solution: en chargeant les sections en AJAX et tout en préservant une navigation possible sans JS (= à faire en premier, l'AJAX ensuite).

[Holiday31]

Je ne me préoccupe pas encore des problèmes de compatibilité car c'est pas vraiment le frein de cette histoire (et spout a donné une solution simple mais efficace).

Pourquoi mettre un site sur une seule page? Car c'est une bonne alternative au flash et que ça se fait (ex : http://webdesignerwall.com/trends/mind-blowing-parallax-scrolling-sites ou ici http://css-tricks.com/fancy-scrolling-sites/ ). Je me dois de maitriser ça en tant que développeur. Je suis assez fan des possibilités et du rendu possible grâce au scroll (parallaxe, mouvements de divs etc ...)

La question est surtout au niveau du référencement (cf titre :p ). HTML5 est censé apporter une structure au code HTML et notemment de permettre de rendre cohérent la présence de plusieurs h1 sur une seule page (grace à la balise section). A moins que je me trompe, je ne pense pas non plus avoir tout faux à ce sujet.

Il s'agit de savoir si google intègre déjà l'architecture HTML5 dans l'analyse des pages afin qu'il ne soit pas trop pénalisant d'oser changer l'expérience utilisateur.

En tout cas merci pour ces débuts/tentatives de réponse et merci d'avance pour les suivantes ^^

[Leonick]

1) tes 2 exemples ne représentent pas des sites sur 1 seule page, ce sont juste des pages longues, comme on peut en voir sur pas mal de blogs présentant des exemples en image (voir juste avec beaucoup de commentaires).
2) Maintenant, au niveau référencement, avoir tout le contenu dans une même page, va empêcher ta page de se positionner correctement sur certaines expressions peu utilisées (longue traine), car elles seront noyées dans l'intégralité du contenu.
3) l'utilisateur qui arriverait sur ton site via les moteurs risque de ne pas arriver directement sur le contenu qui l'intéresse et quitter immédiatement ton site
4) html5 fait de très belles choses, le seul problème actuellement, c'est que ça n'est pas cross plateforme, loin de là même. Donc faire de jolis effets mais dire "attention, ça n'est fonctionnel que sur firefox" ou que sur chrome, etc... ça n'est pas top
ne pas oublier que en dehors des sites uniquement orientés design, le but est que tous les utilisateurs voient la même chose et entre ceux qui continuent d'utiliser ie6/7 ou firefox 2/3, voire certains navigateurs de base sur leur smartphone, le site risque d'être inexploitable pour eux.

[Holiday31]

1 / En effet il y a aussi quelques pages annexes ^^

2 / D'où ma question concernant la structuration HTML5 des mots (donc mots clés) =) Mais je suis d'accord!J'ose juste espérer que HTML5 permettra à google de mieux lire le contenu important par partie.

3/ Un probleme qui coule de source en effet! =) (Peut être que l'on peut rediriger l'utilisateur vers la partie concernée, notamment avec la récupération des mots clés de sa recherche google :p http://forum.webrankinfo.com/recuperation-recherche-google-t3806.html ^^ #UsineAGaz )

4/ Il est évident que cela a toujours et sera toujours un problème. Cependant on ne se privait pas d'utiliser le png transparent à l'époque de IE6 :p On peut faire avec (cssPie, scripts de compatibilité).

Je crois déjà avoir la réponse à ma question, mais toujours pas la confirmation que avec HTML5 on peut espérer que ces sites soient bien indexés un jour (avec une bonne structure évidemment).

Ceci dit l'utilisation de ces sites devrait se faire uniquement dans ces cas là:

Campagne marketing,
Client qui veut un site qui en jette (pour sa carte de visite par ex.)
Si le site est beau, le trafic peut venir des awardsGaleries.

[Leonick]

3/ Un probleme qui coule de source en effet! =) (Peut être que l'on peut rediriger l'utilisateur vers la partie concernée, notamment avec la récupération des mots clés de sa recherche google :p http://forum.webrankinfo.com/recuperation-recherche-google-t3806.html ^^ #UsineAGaz ).

comme tu le dis : usine à gaz

4/ Il est évident que cela a toujours et sera toujours un problème. Cependant on ne se privait pas d'utiliser le png transparent à l'époque de IE6 :p On peut faire avec (cssPie, scripts de compatibilité).

scripts de compatibilité ça peut aussi vouloir dire scripts d'incompatibilité, avec de nombreux bugs qui risquent de se poser en superposant des scripts, surtout s'ils sont récents et pas adaptés aux navigateurs obsolètes.
En plus, comme on parle beaucoup des réseaux sociaux : as-tu prévu de pouvoir bookmarquer un endroit précis de ta page ? de la même façon que tu fais suivre un lien d'un thread de wri par mail ou sur tes réseaux sociaux !
regarde http://bit.ly/ysUL2W rien que sur un effet tout simple de :hover, les différences d'affichage/animation entre les navigateurs les plus récents : chrome fait une animation sur l'agrandissement du :hover, FF agrandit sans animation, mais tous les 2 ont les images affichées avec des orientations différentes, alors que IE9 et Opera laissent les images droites.
Et ça, c'est juste un effet tout simple

Client qui veut un site qui en jette (pour sa carte de visite par ex.)

et qui a des clients/visiteurs geek, sinon ça risque de faire le contraire

Si le site est beau, le trafic peut venir des awardsGaleries.

ça, le client ça aura du mal à l'intéresser (au niveau ROI j'entends)

[Holiday31]

Pourquoi vous obstinez-vous à casser ma technologie alien?! :p

Je suis d'accord en ce qui concerne la compatibilité (et si l'user a JS de désactivé, bye bye les scripts). Mais je persiste à croire que la mise en place d'une usine à gaz peut résoudre beaucoup de problèmes =) (Oui j'aime le challenge qui fait souffrir, il n'y a que comme ça qu'on s'améliore :p )

En plus, comme on parle beaucoup des réseaux sociaux : as-tu prévu de pouvoir bookmarquer un endroit précis de ta page ? de la même façon que tu fais suivre un lien d'un thread de wri par mail ou sur tes réseaux sociaux !

L'utilisation des ancres pour faire des liens vers des parties spécifiques de la page doit être mise en place. En effet il est possible de modifier l'url au fur et à mesure que l'utilisateur descend dans la page afin de rajouter des # qui servirons d'ancre vers la partie de la page en question si l'utilisateur fait un c/c de son url =)

regarde http://bit.ly/ysUL2W rien que sur un effet tout simple de :hover, les différences d'affichage/animation entre les navigateurs les plus récents : chrome fait une animation sur l'agrandissement du :hover, FF agrandit sans animation, mais tous les 2 ont les images affichées avec des orientations différentes, alors que IE9 et Opera laissent les images droites.
Et ça, c'est juste un effet tout simple

Je ne compte pas encore utiliser css3 (compatibilité des kits de chancun des navigateurs), je suis plutôt partisan jquery et il faut avouer que si l'utilisateur a JS d'activé, ça sauve des vies Il faut évidemment penser à une version light, sans JS :\ (point faible en effet)

et qui a des clients/visiteurs geek, sinon ça risque de faire le contraire

Ou alors, être cohérant niveau ergonomie, faire que l'animation et la navigation soit transparent (dans les exemples que j'ai donné, tous les sites ne sont pas top niveau ergonomie, c'est le grand piège! =) )

ça, le client ça aura du mal à l'intéresser (au niveau ROI j'entends)

En effet ^^' Je n'ai rien à redire

Beaucoup d'arguments ici et peu en faveur des scrolling sites.

Cependant je persiste à croire que l'on peut utiliser les scrolling site pour les sites vitrines (histoire d'apporter du renouveau/changement) et pour les sites qui n'ont qu'un seul thème de mots clés (et si possible peu concurrentiel ^^ ).

Encore merci pour les réponses =)

[Leonick]

et une dernière chose : charge tout le contenu en 1 seule page veut dire un gros volume de données à envoyer, quand bien même on n'en aurait besoin que d'une infime partie. Ca veut dire que sur un smartphone ça peut ramer et que ton serveur va avoir une charge énorme à tout envoyer au navigateur.

[Holiday31]

Ouaip j'avais pas pensé à ce point là! Il est évident qu'il faudra songer à tout optimiser.

A savoir qu'il existe le "infiniteScrolling" que facebook (et google je crois) utilisent, qui permet de charger du contenu en ajax lorsqu'il y a une grosse quantité de données (et que l'utilisateur se trouve sur la partie en question). Ca permet de ne pas charger le tout pour rien (du moins immédiatement) :\

Pour ce qui est des smartphones ... Il faudra proposer au client la version smartphone et puis voila

Bon je pense avoir fini mon audit en ce qui concerne les scrolling sites. Je garde mon topic aux favoris, afin de vous donner le résultat du cas pratique lorsque nous réaliserons un site de ce style =)

[Leonick]

A savoir qu'il existe le "infiniteScrolling" que facebook (et google je crois) utilisent, qui permet de charger du contenu en ajax lorsqu'il y a une grosse quantité de données (et que l'utilisateur se trouve sur la partie en question). Ca permet de ne pas charger le tout pour rien (du moins immédiatement) :\

justement, au niveau FB ça me freeze le navigateur, ça n'est donc pas une bonne chose
et, pour en revenir à la partie seo, gg a indiqué qu'il tenait compte de la durée de chargement pour ses serp, donc durée de chargement plus longue veut dire possible descente de son site dans le tréfond des serp

[Holiday31]

Haha, c'est clair qu'à l'heure actuelle les scrolling site partent avec un handicap (limitant ainsi leur chance de survie), mais ils ont malgré tout l'air de plaire et de s'accrocher à la vie ^^ Espérons qu'à l'avenir ils soient mieux considérés.

Il est clair que beaucoup de technologies veut dire beaucoup plus de chances de bugs/incompatibilités (sans parler des navigateurs différents, connexions, configurations etc). Mais il y a 10ans, qu'est ce qu'on aurai pas donné pour pouvoir avoir ces outils là (et sans avoir à dépendre d'une plateforme de type flash =) )

Laissons faire le temps (et une mise à niveau des navigateurs :p ) et je pense que ces sites auront leur chance =)