{"id":54142,"date":"2015-06-10T12:45:33","date_gmt":"2015-06-10T10:45:33","guid":{"rendered":"http:\/\/www.laurentbourrelly.com\/blog\/?p=54142"},"modified":"2015-06-10T17:26:22","modified_gmt":"2015-06-10T15:26:22","slug":"parallaxe-vs-seo-ce-que-vous-devez-savoir","status":"publish","type":"post","link":"https:\/\/www.laurentbourrelly.com\/blog\/54142.php","title":{"rendered":"Parallaxe vs. SEO : ce que vous devez savoir"},"content":{"rendered":"<p><a href=\"https:\/\/www.laurentbourrelly.com\/blog\/wp-content\/uploads\/2015\/06\/parallax-referencement.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-54144\" src=\"https:\/\/www.laurentbourrelly.com\/blog\/wp-content\/uploads\/2015\/06\/parallax-referencement.png\" alt=\"parallax-referencement\" width=\"200\" height=\"111\" \/><\/a>Je suis parfois confront\u00e9 et j&rsquo;observe nettement la tendance d&rsquo;utilisation du parallaxe pour le design d&rsquo;un site Web.<\/p>\n<p>Ayant vu le succ\u00e8s de mon tweet de la source originale en anglais et pour r\u00e9pondre \u00e0 la demande de ceux qui voudraient que je recommence \u00e0 traduire des articles de fond issus de ma veille, voici une traduction autoris\u00e9e sur le sujet du Parallaxe vs. SEO.<\/p>\n<p>Je laisse donc la parole \u00e0 <a href=\"http:\/\/seono.co.uk\/\">Steve Morgan<\/a>\u00a0(Twitter\u00a0<a href=\"https:\/\/twitter.com\/steviephil\" target=\"_blank\">@steviephil<\/a>\u00a0&#8211; Site Pro\u00a0<a href=\"http:\/\/morganonlinemarketing.co.uk\/\">MorganOnlineMarketing<\/a>), qui nous fait une d\u00e9monstration limpide via <a href=\"http:\/\/www.semrush.com\/blog\/parallax-vs-seo-web-design\/\">le blog SEMrush<\/a> (article source en anglais).<!--more--><\/p>\n<p>En tant que webmarketeurs, nous savons tous que le meilleur moment pour optimiser le SEO sur un nouveau site ou lors d\u2019une refonte est en amont, afin d\u2019int\u00e9grer directement les bases. Cependant, il arrive que le SEO soit la derni\u00e8re consid\u00e9ration du webmaster (habituellement lorsqu\u2019il s\u2019aper\u00e7oit que le site ne se positionne pas).<br \/>\nR\u00e9cemment, plusieurs personnes utilisant l\u2019effet de parallaxe sur leur site sont venues me voir en me demandant si je pouvais faire quelque chose pour eux en terme de r\u00e9f\u00e9rencement. C\u2019est un vrai probl\u00e8me parce que m\u00eame si les sites qui utilisent l\u2019effet parallaxe sont jolis et agr\u00e9able \u00e0 consulter, ils ont de grosses d\u00e9ficiences techniques niveau SEO.<br \/>\nDans ce billet, je vais vous parler des dangers de la conception de sites utilisant le parallaxe : leur effet sur le SEO, les raisons pour lesquelles il ne sont pas SEO-friendly et quelles sont les solutions pour contourner le probl\u00e8me et avoir votre part du g\u00e2teau.<\/p>\n<h1>L\u2019effet parallaxe, c\u2019est quoi ?<\/h1>\n<p>Avant tout, une explication : il est probable que vous soyez d\u00e9j\u00e0 familier avec le style de sites utilisant l\u2019effet parallaxe sans le savoir, parce que vous ne connaissiez pas le nom.<\/p>\n<p><a href=\"http:\/\/L\u2019effet parallax\">L\u2019effet parallaxe<\/a>\u00a0se concentre sur le d\u00e9filement de la page (scroll) plut\u00f4t que sur les pages d\u00e9di\u00e9es. Ainsi, sur la page d\u2019accueil d\u2019un site utilisant l\u2019effet parallaxe, si vous cliquez sur \u00ab A propos \u00bb dans le Top Menu par exemple, au lieu d\u2019\u00eatre redirig\u00e9 vers \u00ab monsite.com\/a-propos \u00bb vous serez automatiquement redirig\u00e9 vers la section \u00ab \u00e0 propos \u00bb sur la m\u00eame page (monsite.com#a-propos).<\/p>\n<p>Exemple \u00a0:<\/p>\n<p><a href=\"https:\/\/www.laurentbourrelly.com\/blog\/wp-content\/uploads\/2015\/06\/parallax-web-design.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-54143 size-full\" src=\"https:\/\/www.laurentbourrelly.com\/blog\/wp-content\/uploads\/2015\/06\/parallax-web-design.gif\" alt=\"parallax-web-design\" width=\"800\" height=\"346\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Exemple \u2013 <a title=\"\" href=\"http:\/\/scytale.pt\/\" target=\"_blank\" rel=\"nofollow\">scytale.pt<\/a>, GIF cr\u00e9\u00e9 avec\u00a0<a class=\"broken_link\" title=\"\" href=\"https:\/\/gyazo.com\/\" target=\"_blank\" rel=\"nofollow\">Gyazo<\/a><\/p>\n<p>\u2026Mais les sites sont-ils vraiment \u00ab Parallaxe \u00bb ?<br \/>\nEt bien\u2026 Certaines personnes soutiennent que le nom de \u00ab Parallaxe \u00bb n\u2019est pas ad\u00e9quat. <a href=\"https:\/\/medium.com\/@branded07\/the-troublesome-misconception-of-parallax-in-web-design-2a55ad1459f7\" target=\"_blank\">Ce billet de Rob Palmer<\/a> explique pourquoi, mais les sites qu\u2019il donne pour exemple ne sont pas vraiment con\u00e7us avec cet effet. Sachant que beaucoup de personnes se r\u00e9f\u00e8rent d\u00e9j\u00e0 \u00e0 ces sites-l\u00e0, je vais continuer avec eux pour une question de constance et de coh\u00e9rence, m\u00eame si ce n\u2019est pas exactement juste.<\/p>\n<p>Pourquoi l\u2019effet parallaxe est mauvais pour le SEO ?<\/p>\n<p>Alors que les sites utilisant l\u2019effet parallaxe sont tops visuellement, ils peuvent \u00eatre un obstacle majeur au positionnement de votre site sur les moteurs de recherches, tant et si bien que je recommande souvent \u00e0 mes clients de ne carr\u00e9ment pas utiliser cette m\u00e9thode.<\/p>\n<p>Les sites utilisant l\u2019effet parallaxe sont hostiles au SEO parce que le scroll infini \u00e9vince la n\u00e9cessit\u00e9 des pages suppl\u00e9mentaires au profit de pages plus longues, dans l\u2019optique de ranker sur plus de mots-cl\u00e9s et de requ\u00eates.<\/p>\n<p>Pour vous donner un exemple, voici une structure d\u2019URL pour un site imaginaire. Ce serait un site de vente et de mise \u00e0 jour de machin.<\/p>\n<p>Avec site utilisant l\u2019effet parallaxe :<\/p>\n<ul>\n<li>com<\/li>\n<li>com#acheter-machins<\/li>\n<li>com#reparation-machin<\/li>\n<li>com#contact<\/li>\n<\/ul>\n<p>Mais voici ce \u00e0 quoi la structure d&rsquo;URL devrait ressembler si elle \u00e9tait divis\u00e9e en pages individuelles:<\/p>\n<ul>\n<li>com<\/li>\n<li>com\/acheter-machins<\/li>\n<li>com\/reparation-machin<\/li>\n<li>com\/contact<\/li>\n<\/ul>\n<p>Dans le premier exemple, les moteurs de recherche vont indexer la homepage mais pas les trois autres URL, parce que les moteurs de recherche indexent des pages individuelles et pas les pages fragment\u00e9es (le di\u00e8se dans l\u2019URL sert de raccourci pour acc\u00e9der \u00e0 un autre \u00e9l\u00e9ment sur la m\u00eame page).<\/p>\n<p>Dans le second exemple, les moteurs de recherche seront en mesure d\u2019indexer les quatre pages s\u00e9par\u00e9ment. Cela ajoutera de la visibilit\u00e9 dans les moteurs et le contenu pr\u00e9sent sur chaque page pourra mieux se positionner dans les moteurs de recherche.<\/p>\n<p>C\u2019est important parce que si le site voulait se positionner sur \u00ab R\u00e9paration machin \u00bb par exemple, il y a plus de chance qu\u2019il soit bien r\u00e9f\u00e9renc\u00e9 si l\u2019URL est monsite.com\/reparation-machin plut\u00f4t que monsite.com#reparation-machin (et donc une partie de la page d\u2019accueil de monsite.com)<\/p>\n<p>Une page d\u00e9di\u00e9e \u00e0 la R\u00e9paration de Machins sera capable de se concentrer sur un mot-cl\u00e9 choisi, par exemple, l\u2019expression-cl\u00e9 \u00ab r\u00e9paration de machin\u00bb peut appara\u00eetre sur le titre de la page, les metadonn\u00e9es, la balise H2 et autres balises de titre, etc\u2026<\/p>\n<p>En version parallaxe, la page de r\u00e9paration de machin aura plus de mal \u00e0 se positionner sur cette expression-cl\u00e9 car le titre et le contenu de la page sont g\u00e9n\u00e9raux. Il est donc possible que l\u2019expression \u00ab r\u00e9paration de machin \u00bb n\u2019apparaissent que sur une toute petite section de la page enti\u00e8re.<\/p>\n<p>Et si le SEO n\u2019\u00e9tait pas non plus la cl\u00e9 de la r\u00e9ussite ?<br \/>\nQuoi qu\u2019il en soit, la conception de site avec l\u2019effet parallaxe ne peut qu\u2019\u00eatre faite au cas par cas. Il est facile pour nous, SEOs, de penser que les sites qui utilisent l\u2019effet parallaxe sont l\u2019\u0153uvre du Diable simplement parce qu\u2019ils ne sont pas SEO-friendly.<br \/>\nMais apr\u00e8s tout, il y a plus important dans la vie (et dans le marketing en ligne) que le SEO.<br \/>\nPar exemple, dans une bo\u00eete o\u00f9 le SEO n\u2019est pas vital (un produit ou service pas sp\u00e9cialement recherch\u00e9 et qui trouve ses acheteurs via d\u2019autres canaux, par exemple les r\u00e9seaux sociaux) mais o\u00f9 le client serait susceptible d\u2019\u00eatre int\u00e9ress\u00e9 voire impressionn\u00e9 par le design d\u2019un site utilisant l\u2019effet parallaxe, et bien, il ne faut pas chercher plus loin et lui faire son site avec l\u2019effet parallaxe.<br \/>\nIroniquement, dans ce cas, il est possible que m\u00eame si le site n\u2019est pas positionn\u00e9 dans les moteurs, il retourne un taux de conversion plus \u00e9lev\u00e9 gr\u00e2ce au design attractif du site et des clients redirig\u00e9s via les r\u00e9seaux sociaux.<br \/>\nLe r\u00e9f\u00e9rencement sur les moteurs de recherche d\u2019un site utilisant l\u2019effet parallaxe d\u00e9pend \u00e9galement de la comp\u00e9titivit\u00e9 de votre secteur d\u2019activit\u00e9. Par exemple, si vous \u00eates dans une niche avec tr\u00e8s peu de concurrents, il se peut tr\u00e8s bien que votre site soit parfaitement positionn\u00e9 malgr\u00e9 que votre vous l\u2019ayez con\u00e7u avec l\u2019effet parallaxe.<br \/>\nPar contre, si votre secteur d\u2019activit\u00e9 est concurrentiel, les moteurs de recherche sont automatiquement concern\u00e9s et l\u2019effet parallaxe peut emp\u00eacher votre site de bien se positionner sur le long terme. Il est donc pr\u00e9f\u00e9rable de choisir une autre fa\u00e7on de monter votre site.<br \/>\nMais peu importe, \u00e9tant du c\u00f4t\u00e9 \u00ab s\u00e9curit\u00e9 \u00bb et connaissant l\u2019importance du SEO dans n\u2019importe quel secteur, je suis s\u00fbr que dans 99% des cas, il est pr\u00e9f\u00e9rable de ne pas utiliser l\u2019effet parallaxe.<br \/>\nVous pourriez avoir les deux, le design et le r\u00e9f\u00e9rencement, mais\u2026<\/p>\n<h3>Pouvons-nous profiter des b\u00e9n\u00e9fices du SEO et de l\u2019effet parallaxe ?<\/h3>\n<p>Il y a bien une solution \u00ab d\u00e9tourn\u00e9e \u00bb pour construire un site \u00ab Parallaxe SEO-friendly \u00bb, en utilisant efficacement les deux \u00e9l\u00e9ments, mais l\u00e0 encore, il faut en prendre et en laisser.<\/p>\n<p>La page d\u2019accueil peut \u00eatre conserv\u00e9e comme \u00ab index \u00bb pour chaque section en gardant l\u2019effet parallaxe pendant que chaque section poss\u00e8de sa page d\u00e9di\u00e9e (\u00e0 des fins de SEO).<br \/>\nPar exemple, cliquer sur \u00ab R\u00e9paration machin \u00bb depuis la page d\u2019accueil vous enverra vers la section \u00ab R\u00e9paration machin\u00bb de la page d\u2019accueil (monsite.com#reparation- machin). Cette section pourrait simplement \u00eatre une zone d\u2019introduction du service propos\u00e9 avec une courte description et un simple bouton \u00ab en savoir plus \u00bb qui renverrai sur la page d\u00e9di\u00e9e \u00e0 la R\u00e9paration de machin s(monsite.com\/reparation- machin).<br \/>\nCette proc\u00e9dure peut \u00eatre appliqu\u00e9e pour chaque section du site.<\/p>\n<p>Toutefois, si vous optez pour cette solution, il y a quelques petites choses \u00e0 prendre en consid\u00e9ration :<\/p>\n<ul>\n<li>Le site n\u2019aurait l\u2019effet parallaxe que sur certaines parties, les pages d\u00e9di\u00e9es n\u2019utiliseraient donc pas ce design. Cela pourrait porter \u00e0 confusion pour les utilisateurs navigants entre les diff\u00e9rentes sections et surtout s\u2019ils passent d\u2019une section parallaxe \u00e0 une page d\u00e9di\u00e9e. Cette formule peut rebuter les visiteurs et donc affecter n\u00e9gativement le taux de conversion,<\/li>\n<li>Cette formule est \u00e9galement susceptible d\u2019affecter la fa\u00e7on de fonctionner du Top Menu. En cliquant sur l\u2019une des sections, l\u2019utilisateur sera t-il redirig\u00e9 sur une section de la page d\u2019accueil (monsite.com#reparation- machin) ou directement sur sa page d\u00e9di\u00e9e (monsite.com\/reparation- machin) ?<\/li>\n<li>Je vous recommande \u00e9galement de prendre tout le temps n\u00e9cessaire afin de vous assurer que le contenu d\u2019introduction sur la page d\u2019accueil n\u2019est pas copi\u00e9 sur la page d\u00e9di\u00e9e. Si non vous pouvez vous faire avoir par la patrouille Google pour \u00ab contenu dupliqu\u00e9 \u00bb. Par exemple pour \u00ab R\u00e9paration machin \u00bb, je pr\u00e9conise que le paragraphe d\u2019introduction sur la page d\u2019accueil soit compl\u00e8tement diff\u00e9rent de celui sur la page d\u00e9di\u00e9e. Ne vous contentez pas d\u2019un copier\/coller du m\u00eame texte sur les deux pages. En fait, le texte d\u2019intro devrait \u00eatre un court r\u00e9sum\u00e9 de la page d\u00e9di\u00e9e. Je suis s\u00fbr que c\u2019est que ce que vous alliez faire mais il est toujours bon de le rappeler.<\/li>\n<\/ul>\n<p>Quel est votre avis sur la conception de sites utilisant l\u2019effet parallaxe ? Pensez-vous que d\u2019autres domaines devraient \u00eatre pris en consid\u00e9ration en plus du SEO ou du ROI ?<\/p>\n<p>J\u2019attends vos r\u00e9actions sur twitter : #ParallaxVsSeo<\/p>\n<h4>[NDLR]<\/h4>\n<p><em>Comme il nous manque un peu finalement, je rajoute la vid\u00e9o de Matt Cutts propos\u00e9e dans un commentaire du\u00a0billet original.<\/em><\/p>\n<div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"What does Google think of single-page websites?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Mibrj2bOFCU?start=73&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<h4>EDIT<\/h4>\n<p>Suite \u00e0 certaines remarques, je tiens \u00e0 pr\u00e9ciser un point particulier.<\/p>\n<p>C&rsquo;est vrai que le parallaxe n&rsquo;est pas obligatoirement du one page, mais nous sommes bien oblig\u00e9s d&rsquo;admettre que tous les sites utilisant parallaxe sont en one page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Je suis parfois confront\u00e9 et j&rsquo;observe nettement la tendance d&rsquo;utilisation du parallaxe pour le design d&rsquo;un site Web. Ayant vu le succ\u00e8s de mon tweet de la source originale en anglais et pour r\u00e9pondre \u00e0 la demande de ceux qui voudraient que je recommence \u00e0 traduire des articles de fond issus de ma veille, voici [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[4],"tags":[],"class_list":["post-54142","post","type-post","status-publish","format-standard","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/posts\/54142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/comments?post=54142"}],"version-history":[{"count":6,"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/posts\/54142\/revisions"}],"predecessor-version":[{"id":54150,"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/posts\/54142\/revisions\/54150"}],"wp:attachment":[{"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/media?parent=54142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/categories?post=54142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.laurentbourrelly.com\/blog\/wp-json\/wp\/v2\/tags?post=54142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}