Référencement de la page d’accueil pour les sites de commerce électronique

Chapitres “Ecommerce SEO”:

1 – L’architecture Du Site De Commerce Électronique
2 – La Recherche De Mots-Clés
3 – Référencement De L’exploration (Crawling)
4 – Référencement Des Liens Internes
5 – Référencement De La Page D’accueil
6 – Référencement Naturel Pour Les Pages De Liste De Produits
7 – Référencement Pour Les Pages Avec Des Détails Sur Les Produits (PDP)

De toutes les pages d’un site web, les pages d’accueil ont, généralement, la plus grande autorité, en raison de la manière dont elle transfère du PageRank et parce que la plupart des liens pointent vers elle. J’ai dit « généralement » parce qu’il y a des cas lorsque d’autres pages peuvent dépasser la page d’accueil en ce qui concerne l’autorité. Par exemple, si l’architecture interne du linking est détériorée ou une autre page reçoit plus de liens externes, alors il est possible que la page d’accueil ne soit pas considérée la plus importante par les moteurs de recherche.

Chaque département, y compris le département de marketing, merchandising, l’architecture de l’information, SEO UX ou même ceux avec des fonctions exécutives souhaitent avoir un morceau de la page d’accueil. Ainsi, les pages d’accueil sont souvent bourrées de contenu et de liens à des dizaines, voire des centaines de catégories, appels à l’action (calls to action), bannières de marketing et ainsi de suite. Cela empêche les pages d’accueil d’être trop faciles à comprendre pour les utilisateurs et les moteurs de recherche.

Le plus grand avantage des pages d’accueil est le fait qu’elles transfèrent beaucoup de l’autorité (PageRank) en bas, dans la taxonomie du site web. Les pages avec un lien direct de la page d’accueil reçoivent plus d’attention de la part des moteurs de recherche.

Est-ce que vous souhaitez promouvoir un produit nouveau ou une catégorie nouvelle ? Faites un lien avec la page d’accueil. C’est un concept simple. Par exemple, si vous souhaitez augmenter l’autorité pour les pages les plus profitables ou qui ont le plus haut taux de conversion, créez un lien vers elles de la page d’accueil.

Si vous souhaitez transférer de l’autorité aux pages de catégories ou produits mais vous ne voulez pas agglomérer la page d’accueil, ajoutez une section Featured Categories sur la page index du sitemap HTML.

C:\Users\Traian\AppData\Local\Temp\SNAGHTML3ddb7eb.PNG

Les liens des sections New Top Products et Top Ink Families créeront des routes plus courtes pour les robots de recherche et enverront plus d’autorité aux pages qui y ont des liens.

Avant d’entrer dans les détails, notez que lorsque vous optimiser les pages d’accueil, il est extrêmement important de trouver un équilibre entre les mesures de SEO, l’utilisabilité pour les utilisateurs et les objectifs de l’affaire. En fait, cela s’applique à toutes les autres pages du site web. Vous ne voudriez pas trop de liens sur la page d’accueil et vous voulez avoir les liens importants dans des endroits visibles. De même, la décision d’ajouter, enlever ou consolider des liens de la page d’accueil devrait prendre d’abord en considération les utilisateurs et seulement après cela les moteurs de recherche.

Voyons les sections qui figurent le plus souvent sur les pages d’accueil d’e-commerce et puis discutons sur les stratégies d’optimisation spécifiques aux plus importantes d’elles :

  • Le logo (c’est la région où vous affichez le logo et possiblement un slogan (tagline).
  • Le compte de l’utilisateur (cette région présente les liens pour l’enregistrement, l’inscription, mon compte, le suivi des commandes et d’autres pages qui nécessitent une authentification).
  • La personnalisation du site (ceux-ci sont les liens vers les sélecteurs de pays ou monnaie, le choix du magasin etc.).
  • Le champ de recherche (c’est la région qui entoure le champ de recherche interne sur le site).
  • La navigation primaire (c’est la région de navigation globale).
  • La région du panier d’achat, où vous présentez les liens vers le panier d’achat, la déconnexion et d’autres liens similaires.
  • Les régions de marketing et merchandising (par ex., des carrousels, bannières internes, produits promus, catégories de top, les meilleures offres/marques et ainsi de suite).
  • La région avec des promotions (par ex., la liste avec les produits désirés, des cadeaux).
  • La région d’aide (par ex., questions et réponses, live chat, contactez-nous, centre de support).
  • Les notes en bas de la page.

La navigation primaire

Théoriquement, chaque lien HTML est un élément de la navigation mais ici nous allons faire référence à navigation dans le contexte des menus de navigation primaire et secondaire utilisés par les utilisateurs pour explorer les produits. La navigation primaire est connue aussi sous le terme de navigation globale, lorsque la navigation secondaire est souvent mentionnée comme navigation locale.

La navigation primaire apparaît, d’habitude, horizontalement dans la partie supérieure d’une page web ou, parfois, verticalement, comme barre latérale en gauche de la page. La navigation primaire est facile à identifier, parce qu’elle figure constamment dans la même position sur le site entier.

Pour les sites d’e-commerce, les étiquettes de la navigation primaire représentent les groupes majeurs d’informations. Les étiquettes peuvent organiser l’information sur des départements, sujets, marché cible, en ordre alphabétique ou d’autre nature, selon la manière dont les architectes de l’information et l’équipe de marketing structurent le site web.

Walmart utilise un design vertical pour la navigation primaire et les étiquettes de cette capture d’écran sont représentées par les départements.

Sur le site web Bed Bath & Beyond, la navigation primaire est horizontale et présente les catégories de top.

Sur le site web Crocs, la navigation primaire est représentée par les principaux segments du marché cible.

Lorsque vous avez plusieurs éléments à lister dans le menu, utilisez la navigation globale verticale. Utilisez l’affichage horizontal si vous pouvez inclure toutes les étiquettes importantes dans la partie supérieure.

Le nombre de liens dans la navigation primaire

L’affichage horizontal de la navigation primaire limite le nombre de liens qui peuvent être placés dans le haut de la page à un nombre entre cinq et douze, en fonction de la longueur des étiquettes. Ne vous inquiétez pas, ces chiffres sont raisonnables, pour les utilisateurs et les moteurs de recherche. Une barre de navigation verticale est plus versatile et permet l’affichage d’un nombre plus grand de catégories.

Sur les sites web d’e-commerce, cependant, la navigation primaire est souvent supplémentée par la sous-navigation, tout comme des menus verticaux (dropdowns), fly-outs ou des mégas-menus. Cette navigation peut augmenter significativement le nombre de liens sur n’importe quelle page donnée.

Voilà une implémentation typique d’un menu vertical. La section Clothing présente plusieurs liens thématiques.

Activés généralement en promenant la souris sur eux, ces menus verticaux (drop-down) et expansibles (fly-out) ont quelques problèmes substantiels d’usabilité.[1] Quand même, les mégas-menus semblent fonctionner bien.[2] Consultez ces deux articles pour plusieurs informations sur l’opérabilité des menus de sous-navigation.

Dans cette capture d’écran, vous pouvez voir un exemple de ce qu’on appelle un « méga menu ». De tels menus peuvent inclure non seulement des liens, mais des images aussi.

Staples gère les menus verticaux (dropdowns) d’une manière plus conviviale pour l’utilisateur.

Staples a renoncé à l’implémentation avec activation par le mouvement de la souris ; le sous-menu s’étend à la suite d’un seul clic. De plus, observez les flèches rouges pointant vers le bas ; ces symboles suggèrent aux utilisateurs qu’il y a plus d’informations présentées sous les étiquettes.

Il n’y a aucune limite technique du nombre de liens qui puissent être présentés dans les sous-menus. Je recommande que vous utiliseriez le nombre approprié, qui est logique pour les utilisateurs ; ne vous inquiétez pas trop pour les moteurs de recherche. Permettez-moi de vous expliquer pourquoi.

Vous entendez souvent des suggestions de limiter le nombre de liens sur une page, pour envoyer autant d’autorité que possible à d’autres pages plus importantes. Quoique cette approche puisse être appropriée pour SEO en ce qui concerne certains types de pages, tout comme les pages affichant les produits (listing pages) avec navigation facettée, cette recommandation ne prend pas souvent en considération l’expérience pour l’utilisateur et l’usabilité. Il y a aussi une pratique SEO largement répandue qui suggère que le menu entier devrait être convivial du point de vue SEO, c’est-à-dire de permettre aux moteurs de recherche d’explorer tous les liens du menu. Ce n’est pas vrai entièrement.

Dans la pratique, certains sites web pourraient profiter plus s’ils ne permettaient pas aux robots d’explorer tous les liens dans les sous-menus. Sans doute, vous devriez offrir aux utilisateurs autant de liens qu’il soit nécessaire, mais vous pouvez faire certains de ces liens indécouvrables pour les moteurs de recherche.

Cette « non-convivialité » des liens envers les moteurs de recherche ne peut pas être cataloguée comme cloaking si l’objectif est différent. Après tout, même Amazon utilise cette technique pour transférer plus d’autorité vers les produits et les catégories listées dans la zone de contenu principal de la page, comme vous pouvez voir dans la figure ci-dessous :

Regardez la version cache de l’image. Elle n’inclut pas les liens Shop by Department.

Leur navigation globale (étiquetée Shop by Department) présent plus de 100 liens aux utilisateurs, ce qui leur permet de naviguer dans le site web, mais pas tous les liens ont un hyperlien pour les moteurs de recherche, comme vous pouvez observer dans la version cache de la page. Une petite note ici : si les liens n’apparaissent pas dans la version cache, cela ne signifie pas que les robots de recherche n’en savent pas, parce que les robots peuvent exécuter JavaScript pour découvrir ces liens. Cela dépend sur la manière dont Amazon a créé ces liens pour les faire inexplorables.

C:\Users\Traian\AppData\Local\Temp\SNAGHTMLed051dc.PNG

D’autres commerçants de top 100 cachent aussi les liens.

De plus, Amazon n’est pas le seul des plus grands commerçants qui fait ça. Voilà un autre commerçant de top 100 qui fait appel à la même technique. Leur approche est un peu différente ; ils ont permis l’accès aux liens de département, mais toutes les catégories de top, tout comme Appliances ou Electronics ne sont pas des liens standard.

Dans cet exemple vous pouvez voir que les liens de navigation primaire sont mis en cache, mais les liens de navigation de sous-menu ne sont pas.

Il peut sembler étrange et contraire au bon sens SEO de ne pas permettre aux liens d’être explorés, mais c’est une manière excellente de mettre en balance l’usabilité et le SEO. Les utilisateurs auront accès aux liens dont ils ont besoin, lorsque les moteurs de recherche auront accès seulement aux liens prioritisés, ce qui empêchera le gaspillage du budget d’exploration.

Le nombre de liens dans la navigation primaire dépend, aussi, du nombre de catégories et sous-catégories de la taxonomie. Si vous n’avez que cinq catégories de top, chacune avec deux – cinq sous-catégories, vous pouvez les lister dans la navigation primaire. Si vous avez vingt catégories, toutes avec dix sous-catégories , vous devez penser mieux la navigation primaire.

Une technique plus radicale de limiter le nombre de liens dans la navigation est de se débarrasser complètement de sous-menus. Il n’y aura plus de dropdowns et méga-menus, mais seulement un menu dropline. Un menu dropline est un sous-menu qui comprend seulement une ligne d’éléments. Vous pouvez le voir en action sur le site web Ann Taylor’s. Lorsque vous utilisez un menu dropline, vous devez choisir les étiquettes attentivement.

Ann Taylor utilise un menu dropline avec des étiquettes très bien choisies.

Aeropostale utilise, aussi, une approche minimaliste, avec seulement quatre liens dans la navigation primaire. Cette approche fonctionne très bien sur les sites web de vêtements.

Si vous choisissez à garder un nombre minimal de liens, assurez-vous que la navigation aide les utilisateurs à trouver le contenu rapidement et qu’elle ne gêne pas la lecture rapide du contenu sur le site.

En revenant aux aspects fondamentaux liés au PageRank, nous savons que plus de liens il y a sur une page, moins autorité sera transférée par chaque lien. En ce qui concerne l’expérience pour les utilisateurs, plus une page est agglomérée, plus complexe est l’identification du contenu (content findability)[3] et plus grande l’anxiété de l’acheteur (shopper anxiety)[4]. Par conséquent, c’est une bonne idée de réduire le nombre d’options et d’améliorer l’expérience pour l’utilisateur en minimalisant le phénomène de paralysie de la décision (decision paralysis).[5]

Ici, la surveillance et l’analyse des clics jouent un rôle important. Identifiez les liens utiles pour les utilisateurs en utilisant des indicateurs comme « les liens avec les plus clics » et éliminez les liens inutiles. Si vous avez plusieurs liens qui indiquent vers la même URL, vous pouvez choisir à laisser un seul lien ou à implémenter des paramètres de surveillance URL créés dans le navigateur, non pas sur le serveur.

Vous avez plusieurs instruments à votre disposition pour surveiller les clics et leurs trajectoires. Par exemple, Google Analytics permet une analyse visuelle attractive par des rapports comme User Flow et Behavior Flow.

Le rapport Visitor Flow de Google Analytics.

Dans Google Analytics vous pouvez utiliser aussi le rapport Navigation Summary, que vous pouvez trouver en Behavior Site Content All Pages pour faire une analyse des trajectoires sur le site. Vous recevez jusqu’à 500 données saisies que vous pouvez exporter et analyser ultérieurement en Excel :

Le rapport Navigation Summary peut vous offrir une perspective intéressante.

D’autres instruments, comme CrazyEgg ou ClickTale, offrent aussi une analyse des clics. Quel que soit l’instrument utilisé, l’objectif est d’identifier les liens qui peuvent être :

  • Eliminés de la navigation ou
  • Consolidés dans des groupes logiques.

Dans de nombreux cas, les pages d’accueil ont un lien vers les meilleures ventes avec la marge la plus élevée, vers les catégories et sous-catégories principales et cela est utile pour les utilisateurs et les moteurs de recherche. Si vous vous inquiétez de nombre de liens sur une page, vous pouvez consolider les liens vers les pages A propos de nous, Contact, Conditions d’utilisation et Confidentialité.

Les étiquettes de navigation

Les catégories et sous-catégories listées dans les menus devraient refléter les objectifs de l’affaire et les tests avec les utilisateurs. Par exemple, si 20% des catégories génèrent 80% du revenu, alors ces catégories-là doivent avoir un lien de la navigation primaire. Vous devriez tester aussi d’autres indicateurs de décision, tout comme les termes les plus recherchés sur le site, les pages les plus visitées et ainsi de suite.

En ce qui concerne les étiquettes présentes dans les liens texte de navigation, il y a deux courants de pensée en termes SEO :

  • Les étiquettes ne devraient pas comprendre les mots-clés cibles.
  • Les étiquettes devraient comprendre les mots-clés cibles.

Ce que je peux vous recommander fortement est :

  • D’éviter le forcement des mots-clés dans les étiquettes de navigation primaire et secondaire.
  • Evitez l’étiquetage « ingénieux »[6]. Les étiquettes de navigation doivent être faciles à comprendre pour les utilisateurs ; les étiquettes doivent permettre aux utilisateurs à trouver rapidement et facilement l’information désirée. Par exemple, que pourrait signifier l’étiquette « un style de vie inspiré » sur un site web avec des produits de bricolage ?
  • Projetez la navigation d’une telle manière qu’elle puisse passer le test trunk[7], ce qui signifie qu’elle doit être très intuitive et utiliser des étiquettes claires.

Lorsque vous faites l’étiquetage pour la navigation primaire et secondaire ne vous concentrez pas sur les moteurs de recherche. Vous devez utiliser les étiquettes pour les utilisateurs, non pas pour les robots. Si les étiquettes n’ont pas besoin des mots-clés pour être utiles pour les utilisateurs, ne forcez pas ces mots-clés seulement pour des raisons de SEO.

Parfois, les mots-clés peuvent apparaitre naturellement dans la navigation. Par exemple, si un site web d’e-commerce vend des instruments musicaux et souhaite se classer bien pour le mot-clé « guitare », une étiquette Guitares dans la navigation est naturelle et sera utile.

Il y a une alternative pour ceux qui souhaitent forcer des mots-clés plus longs dans les menus de navigation primaire. Vous pouvez utiliser des images pour créer le menu d’une manière qui inclut des étiquettes avec un texte court pour les utilisateurs, en ajoutant des étiquettes plus longues comme des mots-clés dans l’alt texte des images, pour les moteurs de recherche. Quand même, ne faites pas du spam avec l’alt texte. En outre, vous pouvez implémenter une technique appelée « le replacement de l’image » (image replacement)[8].

Un exemple d’étiquettes courtes dans une image plus un alt texte plus long est indiqué dans la figure ci-dessous. Les étiquettes du type image courtes sont Shoes, Handbags, Watches, Jewelry, et Dresses.

Les étiquettes courtes permettent aux utilisateurs une lecture facile.

Quand même, l’alt texte de chaque image comprend des mots-clés plus longs, comme vous pouvez voir dans le code source HTML:

Les textes alt sont plus longs que les étiquettes images.

Le but final est de créer des menus de navigation qui répondent aux exigences de l’utilisateur et reflètent leur comportement sur le site web. Parce que les étiquette du type image sont courtes, elles permettront aux utilisateurs une lecture rapide, ce qui est fantastique.

Les étiquettes de menu peuvent représenter une seule catégorie, mais aussi des catégories multiples, groupées sous une seule étiquette. Chaque fois que vous groupez les catégories dans une seule étiquette, il est utile de créer aussi des URLs séparées pour chaque catégorie.

Par exemple, si vous groupez Pharmacy, Beauty, et Health dans une seule étiquette (comme dans l’image ci-dessous), vous devez créer une URL séparée pour la catégorie Pharmacy, une autre pour Beauty et une autre pour la catégorie Health, si vous souhaitez augmenter les chances de vous classer séparément pour des mots-clés comme “pharmacy”, “health”, ou “beauty”.

Si vous souhaitez vous classer pour des recherches comme “pharmacy”, “health” ou “beauty”, vous devez avoir des pages de catégorie séparées pour chaque terme.

Le groupage des catégories donne les meilleurs résultats lorsque vous planifiez un site web nouvel ou si le site web existant est nouvel et vous pouvez faire des modifications sans affecter la taxonomie consacrée.

L’opposé du groupage est le dégroupage, c’est-à-dire la division des catégories groupées sous une seule étiquette pour créer des catégories multiples. Il sera plus difficile de séparer les URLs si le site web a été déjà en ligne pour une certaine période de temps et si vous avez groupé les catégories sous une seule URL. Dans ce dernier cas, une option serait de laisser la catégorie groupée telle quelle et de créer des pages nouvelles pour chaque sous-catégorie du groupe.

De la navigation primaire vous devriez faire un lien vers les catégories canoniques. Par exemple, si Video Games est classifié en Games tout comme en Electronics, et Games est la catégorie implicite pour Video Games, alors le trajet de la navigation primaire devrait être Games Video Games. On crée ainsi des trajets courts, uniques pour aider les robots des moteurs de recherche à parcourir le site.

Le champ de recherche

La recherche interne sur les sites web de commerce électronique est souvent améliorée avec une fonction d’autosuggestion ou autocomplétions qui affiche les produits d’une liste de recherches populaires ou des noms de produits et de catégories. Quoique la fonction d’autocomplétions puisse être fantastique pour les utilisateurs, elle est implémentée par AJAX et les liens suggérés ne sont pas accessibles aux moteurs de recherche.

Quand même, vous pouvez améliorer la recherche pour les utilisateurs et les moteurs de recherche en ajoutant des liens HTML simples aux recherches populaires, directement sous le champ de recherche. Pour identifier les meilleurs liens pour les utilisateurs, vous devez suivre et identifier les recherches internes sur le site à l’aide de votre instrument d’analyse web.

Google Analytics a le rapport Site Search qui offre une liste des recherches internes. Pour l’obtenir, vous pouvez utiliser la page d’accueil comme dimension primaire et Search Term comme dimension secondaire.

De même, vous pouvez ajouter des liens en utilisant des attributs ou filtres des produits, par exemple un lien vers une page qui sorte les chaussures selon la taille ou le type. De plus, vous pouvez faire un lien vers une page de recherches populaires:

L’utilisation de termes associés auprès du champ de recherche est fantastique parce que les liens du type Search By (cherche selon) servent comme points d’entrée pour les moteurs de recherche et comme instrument pour découvrir le contenu pour les utilisateurs.

Si vous souhaitez améliorer l’expérience pour les utilisateurs, ces liens devraient varier de page à page pour correspondre aux:

  • Recherches de top effectuées sur cette page-là.
  • Pages de produits ou catégories suivantes visitées après la visualisation de la page courante. Vous pouvez obtenir ces données en utilisant votre instrument d’analyse web.

Sur une page avec des détails sur un produit, vous pouvez lister les filtres de produits les plus utilisés pour ce produit-là ou pour la catégorie feuille (leaf category) à laquelle ce produit-là appartient. Une catégorie « feuille » est une catégorie située au plus bas niveau dans la taxonomie des catégories, ce qui signifie qu’il n’y a pas d’autres catégories sous elle. Une catégorie feuille n’a pas d’autres catégories enfant.

Si vous utilisez l’élément HTML <label> pour les champs de recherche, notez que ce contenu est indexable :

Envisagez d’améliorer le texte pour les éléments <label> (étiquette).

Même si l’élément <label> n’aura pas un impact direct sur les classements, si vous l’utilisez auprès de l’élément <input>, envisagez d’améliorer la formulation à l’intérieur de l’étiquette.

Dans cet exemple, vous pouvez voir que le texte «find something great » est utilisé dans le tag de l’étiquette. Quand même, ce site web devrait utiliser quelque chose plus relevant et attractif pour les utilisateurs, spécifique pour la page visitée. Par exemple, sur toutes les pages de la catégorie Shoes vous pouvez utiliser « chercher des chaussures » ; sur toutes les pages de la catégorie Bags, vous pouvez utiliser « chercher des sacs » ; sur toutes les pages de la catégorie Toys vous pouvez utiliser « chercher des jouets » etc.

De même, ce n’est pas une bonne idée de créer des liens HTML pour les boutons de recherche, parce que les moteurs de recherche essayeront inutilement explorer tout ce qui ressemble à un lien.

C:\Users\Traian\AppData\Local\Temp\SNAGHTML194c4385.PNG

Cette implémentation crée des liens que les robots essayeront d’explorer.

Dans l’implémentation antérieure, les points href vers le symbole dièse deviendront un lien vers la page d’accueil, avec le texte d’ancre « search ». Ce n’est pas la meilleure idée et vous devriez éviter une telle implémentation.

Les zones avec du texte

Généralement, les pages d’accueil n’offrent pas trop d’espace pour le contenu texte, donc vous pouvez trouver très peu de liens texte contextuels de la majorité des pages d’accueil. Beaucoup de sites web d’e-commerce essaient de dépasser cette inconvenance en ajoutant du texte dans le bas de la page, près de la section de pied de page, comme dans l’exemple ci-dessous :

C:\Users\Traian\Desktop\navigation officemax.png

C’est une approche commune sur beaucoup de sites web.

Certains sites web utilisent CSS pour positionner les sections texte, comme celle ci-dessus, dans la partie supérieure du code source, lorsque visuellement le texte se trouve en bas de la page. Cela aurait pu fonctionner dans le passé pour dépasser la limite d’indexation de 100kb, mais aujourd’hui c’est inutile. Notez que Google arrête le rendu d’une page après 10,000 pixels. Si le soi-disant « contenu SEO » se trouve sous ce niveau, il peut être ignoré ou considéré moins important pour le classement dans le top.

Pour ceux qui croient encore au soi-disant « rapport texte – code », ce rapport peut être modifié en utilisant la navigation tab ou les carrousels adaptés SEO, comme ceux ci-dessous :

Les carrousels vous permettent d’ajouter plus de contenu texte sur les pages d’accueil.

Dans l’exemple ci-dessus, il y a beaucoup de texte pour « nourrir » les moteurs de recherche, mais aussi des liens internes de qualité. Cette approche rend ce type d’implémentation très utile pour les utilisateurs et les moteurs de recherche.

Comme vous pouvez voir dans la version cache de la page, le contenu texte du carrousel est disponible aux moteurs de recherche pour analyse :

La version cache de la page.

Une autre méthode d’inclure plus de texte dans les zones principales de contenu et de créer plusieurs liens texte contextuels d’une page d’accueil est d’utiliser la navigation avec des onglets (tab navigation). Même si le texte affiché dans les onglets n’a pas la même importance dans l’index desktop-first, cela va changer lorsque Google adoptera mobile-first indexing.

En utilisant la navigation par des onglets vous pouvez ajouter plus de contenu texte dans une espace relativement limitée.

Si vous souhaitez ajouter encore plus contenu, utilisez les fonctions d’extension et compression (expand și collapse). Quand même, ne remplissez pas le contenu avec du spam pour éviter les problèmes.

Si vous optez pour la navigation par des onglets dans la zone principale de contenu, il convient de mentionner que les utilisateurs ignorent souvent les onglets, donc vous devez offrir des indices forts de design pour les aider à comprendre qu’il y a plus de contenu derrière ce type de navigation.

La zone de marketing et merchandizing

Les curseurs, les carrousels ou les bannières statiques sont parmi les sections les plus utilisées sur les pages d’accueil. Les sections de merchandizing incluent les produits promus, les catégories de top, les meilleures offres, les marques principales et ainsi de suite. SEO ne s’applique pas dans ces zones, mais il y a souvent de l’espace pour une amélioration organique.

Quoique les carrousels semblent avoir certains problèmes d’usabilité et de conversion,[9],[10] ils sont encore présents sur beaucoup de sites web d’e-commerce, de Dell et Hewlett Packard à d’autres petites et moyennes entreprises:

Les carrousels peuvent poser quelques problèmes d’usabilité et conversion.

D’une perspective SEO, il y a généralement deux problèmes liés aux carrousels :

  • Tout le carrousel est construit par JavaScript « hostile » aux moteurs de recherche.
  • Le contenu texte et les liens dans le carrousel sont incorporés dans des images.

Voyons comment vous pouvez identifier ces carrousels JavaScript hostiles.

JavaScript hostile

Les carrousels personnalisés peuvent utiliser AJAX ou JavaScript pour peupler le carrousel avec du contenu dynamique et cela peut générer des problèmes SEO. Les carrousels peuvent être testés du point de vue SEO, en les plaçant sur un domaine, sous-domaine ou une page publique. Dès que Google fait l’exploration et les cache, analysez la version cache de la page. Si vous voyez quelque chose comme « loading » ou « waiting for content » ou si le contenu du carrousel ne s’affiche pas, cela signifie que l’implémentation de ce carrousel-là n’est pas aussi conviviale d’une perspective SEO.

Le contenu de ce carrousel n’est pas indexé. Au lieu de cela, le texte « loading…loading » est indexé.

En outre, vous pouvez tester l’implémentation en utilisant la fonction Fetch and Render de Google Search Console.

Si vous souhaitez transférer de l’autorité vers des produits spécifiques et indexer des liens des carrousels, vous devez corriger le codage de sorte que leur contenu puisse être exploré par les robots des moteurs de recherche.

Un carrousel de produits chez target.com.

Dans l’exemple ci-dessus, aucune des sections n’est pas incluse en cache par les moteurs de recherche. De plus, les produits vers lesquels il y a un lien de la section 1 sont du type nofollow, ce qui signifie que ce commerçant en ligne ne souhaite pas que les liens soient explorés et indexés.

Quand même, les liens de la section 2 sont du type follow, ce que signifie que ces produits doivent être indexés. Cependant, la section 2 est implémentée par JavaScript, ce qui peut créer des problèmes d’accessibilité aux robots.

Texte et liens incorporés en images

Pour faire le texte et les liens accessibles aux moteurs de recherche, utilisez le positionnement CSS et le remplacement par des images pour superposer du texte sur les images de fond. Une autre option est de créer des carrousels ou bannières HTML et CSS primaire:

Ce carrousel est construit par CSS et HTML.

C:\Users\Traian\AppData\Local\Temp\SNAGHTML1d56e2fc.PNG

Le texte sur cette bannière est superposé par CSS et HTML> Vous pouvez vérifier si le texte est HTML en sélectant le contenu de la page par CTRL+A. Le texte simple devient blanc lorsqu’il est sélecté dans le navigateur.

Lorsque l’imagerie est plus complexe et vous ne pouvez pas implémenter le remplacement de l’image ou des carrousels simples CSS/HTML, utilisez alt texte sur l’image avec des tags <area> et <map> pour créer des liens.

Par exemple, l’image ci-dessous incorpore trois liens d’appel à l’action : Shop Now, Sign Up For Emails, et Like Us On Facebook.

Les trois appels à l’action dans cet exemple sont implémentés par « area maps ».

Le code utilise l’élément HTML <map> avec trois zones pour permettre le clic sur ces liens. Chaque tag de la zone a son alt texte propre :

L’image ci-dessus décrit le code source HTML pour la capture d’écran précédente.

Si vous y réfléchissez, les cartes (maps) à l’intérieur des images sont logiques pour les sites web d’e-commerce. Par exemple, les sites web de vêtements qui présentent des produits sur des modèles pourraient permettre aux utilisateurs de cliquer sur le chapeau, les pantalons ou tout autre article vestimentaire décrit dans les images, pour envoyer les utilisateurs directement aux pages de produits. Le tag de la zone permettra effectivement l’achat sur ces images.

Vous pouvez améliorer un peu les cartes des images avec des stratégies conviviales SEO et des hot spots qui s’étendent à clic. Observez les symboles + et $ dans ces deux carrousels :

Les deux hot spots peuvent être utilisés pour ajouter plus de contenu texte.

Lorsque vous passez avec la souris sur ces deux symboles, les signes + et $ s’étendent pour offrir plus de détails. Le texte dans les cassettes est indexable :

Le texte dans la cassette + est indexable.

Parce que les tags <map> et <area> ne sont pas utilisés généralement par les commerçants, voilà quelques suggestions :

  • Chaque élément de la zone doit avoir un attribut alt, même s’il est vide (alt=““).
  • L’alt texte doit décrire l’image en maximum 150 caractères.
  • Selon Microsoft, l’alt texte ne doit pas commencer par le mot « copyright » ou avec le symbole copyright [© ou (c)][11] ou tout autre caractère ou symbole qui n’a pas de relevance pour les moteurs de recherche. Commencez le texte avec les mots les plus importants.
  • Evitez Flash area maps.
  • Utilisez des fichiers XML ou texte pour le contenu des cassettes. Cela permettra aux copywriters de faire des modifications facilement.
  • Si une certaine réclame Google que vous avez testée a fonctionné bien, elle pourrait aider aussi le CTR pour les liens dans les cassettes, parce que les titres des réclames ont d’habitude moins de 25 caractères.

Les zones de merchandizing

Les produits et les catégories avec des liens des zones de merchandizing de la page d’accueil, comme les meilleures offres, les produits les plus vendus ou les marques de top ont la tendance de recevoir plus d’autorité interne que les produits qui ont des liens structuraux. Par conséquent, vous pouvez utiliser ces zones pour transférer plus d’autorité SEO aux produits et catégories les plus importantes pour votre affaire.

Merchandizing est une pratique très fréquente parmi les commerçants en ligne de produits électroniques.

Parfois, les produits présentés dans ces zones sont implémentés par des carrousels. Assurez-vous que le design des carrousels permet aux utilisateurs d’identifier le fait qu’ils regardent un carrousel et qu’ils ont un contrôle complet sur les fonctions lecture et pause, avance et retour.

Beaucoup d’utilisateurs manqueront probablement les flèches et les points noirs qui contrôlent le carrousel dans l’image ci-dessus.

Si vous souhaitez envoyer du PageRank aux produits du carrousel, implémentez-le d’une manière conviviale SEO, comme indiqué dans les pages précédentes. Lorsque vous devez utiliser AJAX pour charger les produits, je vous recommande de charger un set implicite de produits dans le premier slide du carrousel. Le premier slide est chargé en HTML brut et il est accessible aux moteurs de recherche. Chargez les slides suivants par AJAX lorsque l’utilisateur clique sur les boutons de contrôle.

Voici quelques conseils SEO pour optimiser les produits présentés dans les zones de merchandizing:

  • Il n’est pas obligatoire d’englober le nom de la section de merchandizing dans un entête HTML du type <H>, mais vous pouvez faire cela si vous souhaitez. Parce qu’il n’y aura pas probablement plusieurs zones de merchandizing, je recommande l’utilisation des titres de niveau 2 (H2) ou supérieur. Les entêtes H1 sont utilisés généralement pour des étiquettes plus importantes et pour les modèles (templates) d’e-commerce ce n’est pas une bonne idée d’avoir des entêtes H1 multiples sur la même page.

Un exemple de présentation d’entêtes.

Sur les pages de présentation des produits, les mini-images (image thumbnails ) pour les produits et les noms des produits doivent être optimisés pour envoyer un seul signal consolidé. Cela signifie que l’alt texte et le texte d’ancre du produit devraient être le même ou légèrement différent.

L’alt texte de l’image est le même avec le texte d’ancre.

  • Ajoutez 1-3 liens vers les producteurs, marques ou des attributs pertinents des produits, chaque fois que vous avez l’espace nécessaire :

Vous pouvez voir la manière dont Amazon fait des liens vers de différentes pages de catégories de la section Top Holiday Deals .

  • Evitez le linking avec un texte d’ancre générique :

Le lien “See Details” ci-dessus n’est pas optimum. Au lieu, le nom du produit devrait constituer le lien. Si vous souhaitez garder le lien “see details”, vous pouvez l’incorporer dans une image avec le nom du produit comme alt texte.

  • Est-ce que vous avez besoin vraiment d’un lien « Acheter maintenant » ou « Ajouter au panier » sur les produits présentés dans les zones de merchandizing de la page d’accueil ? Est-ce que les visiteurs ajoutent des produits au panier directement de la page d’accueil ? Sinon, envisagez d’éliminer de tels appels forts à l’action ou de les remplacer avec des appels à l’action plus tempérés, comme « plus de détails » ou « en savoir plus ».

Si vous souhaitez utiliser des boutons « ajouter au panier » dans ces sections, implémentez-les soit par l’élément HTML <button> ou en utilisant JavaScript:

Le lien „More Details” est implémenté comme élément HTML <button>, donc il ne sera pas exploré par les robots des moteurs de recherche.

Le lien “Add to Cart” est implémenté par JavaScript, ce que signifie que les chances de faire l’objet d’une action de surveillance et exploration sont minimalisées.

  • Si vous souhaitez ajouter plus de contenu à l’intérieur des espaces dédiés à la commercialisation, utilisez les fonctions CSS d’extension et compression :

Lorsque vous cliquez sur le lien „more details” dans cet exemple, plusieurs informations sur l’offre “MacBook Pro” sont affichées.

  • Utilisez les espaces „alt text” et „image map” pour les liens toutefois que vous utilisez des images pour la présentation des affiches promotionnelles.

Logo

La plupart des logos sont implémentés comme des images. Parfois, les logos comprennent le slogan de l’entreprise, une description succincte ou une offre commerciale unique.

„Alt texte” ou remplacement par une image?

Il y a beaucoup de discussions liées à l’implémentation correcte des logos, non pas seulement du point de vue SEO, mais du marquage HTML aussi. En ce qui concerne SEO, il y a des spécialistes qui affirment que l’utilisation de l’alt texte sur l’image du logo est suffisante ; d’autres recommandent l’utilisation de la technique de remplacement du texte par une image. En ce qui concerne le marquage HTML, certains sont d’avis que les logos devraient prendre la forme d’un tag H1, d’autres soutiennent qu’ils devraient prendre la forme d’un tag H2 ou qu’on ne devrait utiliser aucun marquage comme entête.

Quelle que soit la manière choisie pour offrir un contexte meilleur pour l’image d’un logo, soit par texte alternatif, soit en remplaçant le texte par une image, ce contenu-là n’assurera pas une augmentation significative dans les classements de Google. Seulement parce que vous utilisez le mot-clé primaire dans le texte alternatif du logo (par exemple, Nom du Site – Appareils Numériques) cela ne signifiera pas que les moteurs de recherche considéreront le site web comme ayant de l’autorité pour ce mot-clé particulier. Il peut aider un peu dans des niches obscures.

Si vous pouvez implémenter facilement et surement la méthode de remplacement par une image pour le logo, il est bien de faire cela. La méthode n’est pas considérée spam si vous n’en abusez pas et n’ajoutez trop de mots-clés et si vous n’utilisez pas d’autres techniques ridicules. W3C utilise le remplacement du texte par une image dans leur logo ; les revues A List Apart et Smashing utilisent aussi la même technique. MOZ l’utilisait aussi avant de reconstruire leur site.

Cependant, notez que l’utilisation d’un texte alternatif sur les logos images fonctionne aussi bien que le remplacement du texte par des images.

Jetons un coup d’œil sur quelques options que vous pouvez envisager pour le texte qui décrit le logo, implémenté soit par texte alternatif, soit par le remplacement par des images :

  1. Vous pouvez utiliser seulement le nom de l’entreprise (ex., “Staples logo”).
  2. Alternativement, vous pouvez utiliser le nom de l’entreprise, plus deux ou trois catégories de top (ex. „laptops, tablettes et ordinateurs Dell”).
  3. Vous pouvez utiliser aussi un texte dynamique, qui inclut le nom de la marque plus un nom de catégorie. Dans ce cas, le texte change d’une page à l’autre. Par exemple, sur la page principale vous allez utiliser le texte alternatif « Microsoft logo », mais sur la page avec des Tablettes vous allez utiliser le texte alternatif « Microsoft logo – Tablettes ».
  4. Une autre option serait d’utiliser le nom de l’entreprise plus une offre unique de vente ou un slogan (par exemple, “KOHL’s – expect great things”). Idéalement, le slogan est court, descriptif et comprend certains mots-clés.

Le slogan de Kohl’s.

  1. Vous pouvez utiliser, aussi, le nom de l’entreprise suivi par le slogan de l’entreprise en texte simple :

Le slogan de HP.

Le slogan HP présente le noyau du site web et inclut d’une manière intelligente le modèle de mots-clés {Printing Solutions}. Ainsi on améliore la relevance pour des mots-clés comme “large format printing solutions”, “commercial printing solutions”, et “industrial printing solutions”.

J’aime implémenter l’option #5 toutefois qu’il est possible, suivie par #4, #3, #2 et #1. Dans chaque cas, le texte doit être représentatif pour le logo qu’il décrit et ne pas être spam.

Vous pouvez offrir un contexte aux moteurs de recherche en utilisant le texte du logo ou le remplacement par une image. Les deux méthodes doivent être conviviales pours les utilisateurs et elles sont OK si vous ne faites pas du spam. Notez que l’alt texte sur les images cliquables est l’équivalent du texte d’ancre sur les liens texte, donc il convient de faire un effort pour optimiser les alt textes.

Pourtant, il y a aussi des implémentations qui ne permettent pas le texte alternatif sur les logos. Une telle implémentation est l’utilisation des fonds CSS ou CSS sprites.

C:\Users\Traian\AppData\Local\Temp\SNAGHTML4e89ea4.PNG

Walmart utilise CSS sprites pour leur logo et d’autres symboles. Dans la version cache de la page, l’alt texte pour le logo manque, parce que le logo a été implémenté comme fond CSS.

Le logo devrait avoir un lien en utilisant l’URL canonique de la page d’accueil pour consolider les signaux de relevance. Ainsi on s’assure que la réputation interne n’est pas divisée aux plusieurs URLs.

Par exemple, ne faites pas un lien vers la page d’accueil en utilisant l’URL standard (default) (respectivement, index.php) et la racine (/). Choisissez une version canonique, généralement la racine, et faites du linking d’une manière constante. Ce n’est pas un problème pour les moteurs de recherche d’aujourd’hui. Quand même, c’est une bonne pratique dans le développement web d’être constant avec les liens internes, tout comme l’utilisation des minuscules pour les valeurs tag UTM est une bonne pratique pour la surveillance et l’analyse web.

Enveloppez (wrap) le logo en utilisant le marquage de l’organisation

Google supporte[12] le marquage Schema pour les logos des organisations[13]. Cela signifie que vous pouvez marquer le code HTML pour spécifier quelle image devrait apparaitre comme logo en Google Knowledge Graph lorsque quelqu’un cherche le nom de votre marque.

Marquez le logo en utilisant l’élément Organization comme dans l’exemple ci-dessous : [14]

<div itemscope itemtype=“http://schema.org/Organization”>
<a itemprop=“url” href=“http://www.example.com/”>Home</a>
<img itemprop=“logo” src=“http://www.example.com/logo.png” />
</div>

De cette manière vous aurez plus d’espace dédi à votre marque dans les résultats des moteurs de recherche.

Une question fréquente est « les logos devraient être marqués avec H1 » ?

Le marquage du logo dans un entête H1 est un problème extrêmement disputé.[15] De plus, l’influence SEO des entêtes H1 n’est pas assez significative.[16],[17]

Mon opinion est que le logo ne devrait pas être marqué avec H1 ou tout autre Hx. Un titre est un élément textuel qui devrait être marqué comme texte, lorsque le logo est une image de marketing et devrait être marqué comme une image.

Les liens utilitaires

Les liens de personnalisation du site web, pour l’enregistrement des utilisateurs, la section aide et pour les paniers d’achats peuvent être catalogués comme ce que les experts appellent « utilités » (utilities) (Steve Krug)[18] ou des liens qui facilitent la navigation (courtesy navigation links) (Jesse James Garret[19]).

La personnalisation du site

Les uns des liens les plus connus de personnalisation du site sont la destination de livraison, la langue et les sélecteurs de monnaie :

Un sélecteur de pays et de livraison (Ship to).

Ce sont des liens utilisés pour personnaliser l’expérience des acheteurs sur la base de la location de l’utilisateur, de la monnaie ou langue utilisée. Par exemple, quelqu’un en vacances en France pourrait visiter un site web du Canada pour envoyer un panier cadeau aux bien-aimés au Canada. Vous identifiez l’IP du visiteur comme français et décidez de modifier (automatiquement ou sur la base d’une fenêtre du type pop-up) le pays de livraison à France, la monnaie à euro et la langue au français. Quand même, vous devez offrir aux utilisateurs la possibilité de modifier ces réglages.

Dans cet exemple, la langue est réglée à « français » et la monnaie en euros.

L’une des erreurs communes en matière de SEO est liée aux liens de personnalisation du site, tout comme les sélecteurs du pays de livraison, de la langue et de la monnaie, c’est le fait qu’ils créent des URLs qui peuvent être explorés, même s’ils sont des redirections temporaires 302. Cela arrive souvent parce que la sélection de l’utilisateur est maintenue dans l’URL, comme dans l’image ci-dessous :

Ces URLs qui peuvent être explorées par les robots créeront des URLs en double pour chaque page qui a des sélecteurs de monnaie, ce qi n’est pas désirable.

La solution est simple : ne créez pas des URLs qui peuvent être explorées pour ces sélecteurs ; gardez les choix des utilisateurs dans des cookies et non pas dans des URLs. De plus, vous pouvez utiliser AJAX pour charger les choix des utilisateurs et pour régler les cookies.

Lorsqu’on clique sur le symbole ship to dans le coin supérieur droit, on ouvre une fenêtre modale pour que les utilisateurs puissent faire la sélection. Lorsqu’on appuie sur le bouton CONTINUE les choix actualisés sont faits par AJAX et les sélections des utilisateurs sont gardées dans des cookies.

La location du magasin

Ces liens sont présents sur des endroits plus ou moins proéminents sur la page, en fonction de l’importance du comportement « du site web au magasin » pour chaque entreprise. Parfois, le lien sera placé dans la barre supérieure, parfois en bas de la page.

Walmart met un accent fort sur la location des magasins parce que les visites web – magasin sont primordiales pour eux.

Les locations des magasins ne semblent pas trop importantes pour Nordstrom.

Le lien Store Locations placé en bas de la page implique, dans une certaine mesure, que le trafic web – magasin n’est pas important pour Nordstrom. Quand même, la version mobile affiche le symbole avec la location du magasin dans la navigation primaire:

La version mobile du site web Nordstrom.

La discrépance entre le design mobile et desktop m’amène à me demander si le design pour desktop a été bien planifié.

Le lien avec la location du magasin ne devrait pas être du type nofollow ou bloqué pour les moteurs de recherche. Le lien devrait envoyer les utilisateurs vers une page qui présente toutes les locations des magasins ou qui permet une recherche facile et rapide de la location. De plus, vous devriez avoir une page dédiée pour chaque location de magasin et créer un XML Sitemap séparé pour les pages avec la location des magasins.

Les liens dédiés au panier d’achat

Ce sont les liens avec le panier d’achat et finalisation de l’achat (checkout buttons).

La plupart du temps, le symbole du panier d’achat est placé dans le coin supérieur droit de la page. Amazon a habitué les acheteurs en ligne à le chercher dans cette zone.

Les paniers perpétuels de mini-shopping (Perpetual mini-shopping carts)[20] sont souvent implémentés avec AJAX et ne peuvent pas être explorés. Cela est OK parce que vous n’avez pas besoin que les pages dédiés au panier d’achat et checkout soient indexées. Comme observation, de tels paniers sont appelés perpétuels parce qu’ils affichent le nombre de produits dans le panier lorsque les utilisateurs naviguent dans d’autres locations du site web. Les paniers permanents (persistent) sont les paniers gardés au cours des sessions multiples, lorsque les utilisateurs choisissent quelque chose dans le panier, quittent le site, reviennent ultérieurement et les produits se trouvent encore dans le panier.

Certains préfèrent l’attribut nofollow pour ces URLs comme manière d’économiser le budget d’exploration. Cela ne fera aucun mal, mais il n’est pas nécessaire pour le SEO. Les pages de paiement peuvent être bloquées en robots.txt ou non-indexées par le tag méta robots au niveau de page.

Les liens d’aide (help links)

Ce sont les liens vers Contact Us, FAQ, Live Chat, Help Center, et d’autres pages similaires. Si le lien actuel Live Chat n’est pas JavaScripted, bloquez-le par robots.txt. Des liens comme Help, FAQ, et Contact Us devraient être accessibles aux robots de recherche comme des liens HTML simples.

Vous pouvez consolider plusieurs liens d’aide dans un seul menu, pour lister plus de liens dans une espace limitée :

La liste du type menu vertical (dropdown) sous l’étiquette Need Help? Elle comprend des liens d’aide importants pour les utilisateurs.

Sur beaucoup de sites web, les liens d’aide se trouvent, aussi, en bas de la page, ce qui signifie que les liens seront en double.

Les liens pour les comptes des utilisateurs

Ce sont des liens qui permettent aux utilisateurs d’effectuer des actions comme la création de comptes ou l’enregistrement, la surveillance des commandes etc.

Best Buy désavoue (disallows) l’entier sous-domaine www-ssl. Ce sous-domaine héberge les comptes des utilisateurs et il a été bloqué. C’est une bonne approche.

Généralement, les liens pour les comptes conduisent vers des sections HTML sécurisées et les moteurs de recherche ne doivent pas explorer ou indexer ces pages.

Vous verrez que beaucoup de sites web d’e-commerce utilisent l’attribut „nofollow” sur les liens de comptes :

Les liens avec les comptes des utilisateurs sont du type nofollow.

La bordure rouge dans l’image ci-dessus (et ci-dessous) signifie que les liens sont nofollow. Target et OfficeMax utilisent l’attribut „nofollow” pour les URLs vers les comptes des utilisateurs, mais cela n’est plus nécessaire aujourd’hui.

La bordure rouge pointillée signifie que ces liens sont du type nofollow.

Google recommande que vous n’utilisiez l’attribut nofollow, non seulement pour les liens des comptes, mais pour tous les liens internes aussi.[21] Cela – ils affirment – permet au PageRank de couler librement sur le site entier.

Notez qu’il est risquant de contrôler l’action d’exploration, indépendamment de la manière (par ex., par nofollow, robots.txt ou JavaScript inexplorable).

Voici pourquoi:

  • Si vous contrôlez l’action d’exploration par robots.txt, PageRank se transfère dans les URLs robotisées,[22],[23] mais ne se transfère pas de ces URLs.
  • Si vous contrôlez l’opération d’exploration par nofollow, PageRank ne se transfère pas vers les URLs nofollow,[24] mais se transfère en dehors de ces URLs.
  • Si vous contrôlez l’opération d’exploration par des liens inexplorables, alors PageRank n’est pas transféré vers ces liens-là, mais PageRank est transféré de ces pages (si la page est découverte d’une autre manière par les moteurs de recherche).

Demandez-vous : les pages dédiées aux comptes aideront les utilisateurs si elles seront indexées par les moteurs de recherche. Est-ce que les utilisateurs cherchent des termes comme “Enregistrement au compte de {nom de votre entreprise”} ? Sinon, est-ce qu’il y a une autre raison pour avoir ces pages indexées ? S’il n’y a aucune raison, considérez bloquer l’accès des robots de recherche à ces pages.

Paradoxalement, si vous souhaitez éliminer complètement les pages des indices des moteurs de recherche, vous devez d’abord permettre aux robots d’explorer ces pages et puis ajouter le méta tag no-index au niveau de page. Cela signifie que vous ne bloqueriez pas l’accès à ces pages par robots.txt jusqu’à ce qu’elles aient été explorées par les robots des moteurs de recherche.

Si le flux d’autorité de la page est inquiétant, robots.txt pourrait constituer une alternative meilleure d’optimiser l’exploration que l’utilisation de l’attribut nofollow. PageRank ne se transfère pas en dehors des pages bloquées par robots.txt parce que Google ne peut pas explorer ces pages-là pour déterminer la manière dont PageRank devrait être transféré par chaque lien. Quand même, si les pages ont été indexées avant d’être bloquées par robots.txt, Google sait où et comment transférer le PageRank. Théoriquement, si vous laissez ces pages-là ouvertes pour être explorées de temps en temps, Google peut les analyser temporairement et transférer le PageRank.

Cependant, si vous ne vous inquiétez pas en ce qui concerne le flux de PageRank, il y a quelques alternatives au blocage des liens vers les pages de compte par robot.txt et „nofollow”:

  • Consolidez les liens dans des groupes :

La section Your Account est un menu drop-down qui consolide plusieurs liens.

Les pages de compte marquées en june sont accessibles avec JavaScript arrêté.

  • Désactivez certains liens de compte jusqu’à ce que l’utilisateur s’enregistre sur le site :

Au clic sur sign in, le menu drop-down affiche les URLs de compte, mais elles ne sont pas actives.

Dans l’exemple ci-dessus, les liens vers Your Profile, Check Order Status, Points Balance, Your Coupons et Your Lists ne sont pas des liens actifs HTML jusqu’à ce que l’utilisateur ne s’enregistre pas sur le site.

De plus, les liens sign in, join for free, et My Location sont implémentés par JavaScript et ne sont pas accessibles aux moteurs de recherche :

C:\Users\Traian\AppData\Local\Temp\SNAGHTMLac249f6.PNG

Les moteurs de recherche ne peuvent pas trouver les liens sign in, join for free, et My Location.

  • Utilisez une fenêtre modale pour faciliter l’enregistrement sur le site :

En cliquant le lien sign in du coin droit supérieur, vous ouvrez une fenêtre modale JavaScript.

Cette fenêtre modale est chargée à demande et son contenu n’est pas accessible aux moteurs de recherche lorsque la page se charge.

Les pieds de page (footers)

Les pieds de page restent l’une des plus abusées sections au niveau du site entier. Et cela parce que les liens en bas de page fonctionnent encore – au moins pour certains sites web – au dépit des affirmations de Google que cette stratégie est inacceptable et qu’elle ne fonctionne pas.

Nous ne devons pas regarder plus loin qu’Amazon pour voir l’utilisation risquée de liens en bas de page, riches en mots-clés.

Le bas de page est souvent la dernière section que les utilisateurs vérifient, s’ils ne peuvent pas trouver les informations dont ils ont besoin dans une autre partie de la page. Souvent, les utilisateurs ne vérifient pas du tout les notes dans le bas de la page. Il est important, ainsi, de ne pas y enfouir des liens importants.

Les notes en bas de page sont, de règle, implémentées comme texte passe-partout (boilerplate) et enverront moins d’autorité aux pages auxquelles on fait un lien d’ici. Yahoo! a affirmé même qu’ils pourraient dévaluer les liens en bas de page :

Les liens non pertinents en bas d’une page, qui n’ont pas de valeur pour les utilisateurs, n’ajoutent rient à la qualité de l’expérience des utilisateurs, donc on ne les prend pas en considération pour notre classement ”.[25]

Google transmet des signaux contradictoires vers les webmasters, en affirmant que les liens en bas de page présents au niveau du site entier (site-wide footer links) dépassent la sphère de leurs recommandations concernant la qualité du contenu mais que, en même temps, ils n’agissent pas contre ceux qui en abusent.

Parce que les pieds de page sont en bas de la page, le taux CTR sur les liens en bas de page est très faible. Quand même, les notes en bas de la page peuvent s’avérer très bonnes pour l’expérience des utilisateurs, particulièrement les notes en bas de page « grasses » (fat footers),[26] et peuvent représenter aussi un instrument très utile de linking interne.

Discutons de quelques idées pour faire certaines améliorations.

Ne répétez pas la navigation primaire en bas de page

Si quelques liens sont listés dans le menu de navigation primaire, vous ne devez pas les répéter en bas de la page. Les plus importants liens pour les utilisateurs devraient se situer dans la barre supérieure. Gardez les notes en bas de page pour les liens pertinents, mais moins importants.

Groupez les liens logiquement

Si vous souhaitez réduire le nombre de liens en bas de page, envisagez la consolidation des URLs multiples sur une seule page. Si l’espace est un problème, vous pouvez implémenter des systèmes JavaScript dropdown, comme dans l’image ci-dessous :

Au lieu de créer des URLs uniques pour chaque sujet de la section Your Orders, créez une seule URL principale pour Your Orders et incluez le contenu de toutes sections sur cette page-là (par exemple, le statut de la commande, livraison & manipulation etc.)

Jetons un coup d’œil sur la manière dont Staples et YouTube ont implémenté cet aspect. Tous les deux sont de très bons exemples de notes en bas de pages utiles :

Le menu pop-up Corporate Info a des liens vers des pages pertinentes, mais occupe moins d’espace visuelle.

Staples laisse les liens disponibles pour l’exploration.

De même, les liens dans le menu pop-up sont disponibles pour l’exploration, comme vous pouvez voir dans la version cache de la page.

Sélecteur de pays sur YouTube.

Sur YouTube, le listage du pays est disponible seulement avec AJAX lorsqu’on clique sur le sélecteur de pays. Imaginez-vous une liste disponible en HTML simple sur chaque page du site web.

Les liens de pays ne sont pas disponibles aux moteurs de recherche.

Walmart utilise des liens [+]expand et [-]collapse pour offrir aux utilisateurs plusieurs options, mais les moteurs de recherche n’ont pas accès aux liens de sous-catégories (affichés au clic sur le signe +) :

Un clic sur le signe [+] ouvre plusieurs sous-catégories.

Quoique les liens des catégories de top, comme Electronics, Bikes, et Toys, soient ouverts pour l’exploration, leurs sous-catégories correspondantes, comme Laptops, Apple iPads, Tablets, et TVs, ne le sont pas:

Cette approche combine l’expérience des utilisateurs et le SEO.

Enlevez tous les liens inutiles

Surveillez l’utilisation des clics sur les liens en bas de page soit par des paramètres URL, soit en utilisant des instruments de cartographie des clics, comme CrazyEgg. Est-ce que vous aidez vraiment les utilisateurs avec ces liens ou est-ce que vous souhaitez avoir un bas de page optimisé seulement pour les moteurs de recherche ? Si vous voyez que les utilisateurs ne cliquent pas sur certains liens « optimisé », alors ne placez pas ce lien dans les notes en bas de page.

D’autre part, si un lien en bas de page reçoit un grand nombre de clics, envisagez le placer dans une location plus visible sur chaque page.

Testez l’élimination des liens de bas de page et mesurez la manière dont elle affecte les taux de conversion, SEO ou usabilité du site.

N’abusez pas des notes en bas de page

Nous savons avec certitude que les moteurs de recherche n’aiment pas les liens retour placés dans le bas de page au niveau du site entier.[27] De même, nous savons que les moteurs de recherche traitent les liens des sections passe-partout (boilerplate) d’une manière différente qu’ils traitent les liens contextuels, où les premiers ne transfèrent pas tant d’autorité.

Les liens en bas de page ne sont pas mauvais en soi ; en fait, il est possible que ce ne soient pas les liens qui créent des problèmes, mais le fait qu’on abuse des notes en bas de page.

Les notes en bas de page semblent être l’une des sections préférées pour suroptimisation. Regardons l’image ci-dessous, par exemple :

L’utilisation étendue des mots “women’s” et “men’s” de ces ancres est inutile.

Si vous agglomérez des mots-clés dans le texte d’ancre en bas de la page seulement parce que cela fonctionne encore, prenez en considération la pénalité Penguin, qui punit cette stratégie. C’est vrai, Penguin n’est pas lié seulement aux liens retour, mais aux liens internes aussi. Pour plus d’informations sur ce sujet, voir pointeur numéro un de cette vidéo,[28] et voir ce commentaire[29] tout comme ce matériel vidéo. [30]

C:\Users\Traian\Desktop\home page footer trulia.png

Les liens site-wide avec texte d’ancre, comme dans cet exemple, créeront des problèmes. Plus le site web e grand, plus les chances d’être filtré par Panda ou Penguin augmentent.

Un autre truc que vous devez éviter est de placer beaucoup de « contenu SEO » sous les notes en bas de page, au-delà de la zone « normale » de visualisation des pages. Même si Google ne peut pas vous pénaliser à l’aide d’un algorithme, cette page ne passera pas certainement une analyse manuelle.

“Le contenu SEO” commence où le vrai pied de page finit, ce qui est une ridicule tentative de tromper les moteurs de recherche. Je me demande si cela est la raison pour laquelle ce site web a eu un gray toolbar PageRank dans le passé.

La navigation par des onglets (Tabbed Navigation)

Si vous devez offrir aux utilisateurs plusieurs liens dans le bas de page, la navigation par des onglets est une autre option qui vous permet d’afficher plusieurs liens. Regardez l’exemple ci-dessous :

La navigation par des onglets permet l’affichage de plusieurs liens.

Vous pouvez optimiser encore la navigation par des onglets en ajoutant plus de texte dans le bas de page. Voici comment 1-800 Contacts fait cela:

Un très bon exemple d’utilisation de la navigation par des onglets dans le bas de page.

Chaque lien de la gauche ouvre un nouvel onglet. Par exemple, lorsque vous cliquez sur “Our Commitment” un nouvel onglet se charge :

C’est un bon contenu pour une note en bas de page. En ajoutant quelques liens texte contextuels vous augmentera davantage la valeur SEO de cette section.

Notes dynamiques en bas de page

Les sites web d’e-commerce peuvent faires les notes en bas de page plus attractives pour les moteurs de recherche par l’actualisation dynamique du contenu et des liens pertinents, pour chaque section du site web et même pour chaque page. Cette approche donne les meilleurs résultats lorsque la navigation par des onglets est implémentée, ce qui permet l’affichage d’un contenu d’au moins 150 mots dans la note en bas de page.

Analysons l’exemple de 1-800 Contacts. Ils pourraient ajouter un nouvel onglet à la page sur laquelle la note en bas de page est affichée, qui représente un fragment suggestif d’un article récent sur le blog. Par exemple, sur la page de la marque Avaira le nom du nouvel onglet pourrait ressembler à Avaira News, et le fragment de blog pourrait comprendre le nom de la marque et, éventuellement, un ou deux liens aux produits Avaira. La note en bas de page sur la page de la marque Biomedics serait liée aux produits Biomedics et ainsi de suite.

Tout comme un linking correct est utile pour les utilisateurs, l’ajoutage des liens spécifiques à la page dans le bas de page est bon pour l’usabilité du site, parce qu’elle personnalise l’expérience des achats, pour satisfaire les attentes des clients.

Vous pouvez même personnaliser les liens dans la navigation par des onglets. Par exemple, sur une page avec des détails sur les produits pour les lentilles Avaira vous pouvez modifier dynamiquement le lien de “Contact Lens Brands” en “Avaira Contact Lenses”, et vous pouvez lister seulement les produits Avaira.

Les notes dynamiques en bas de page sont indiquées si vous pensez à l’intention de l’utilisateur. Ces notes en bas de page aideront les utilisateurs en présentant du contenu pertinent pour la page qu’ils visitent et seront aussi utiles pour varier le texte d’ancre interne. Une note dynamique réduira les cas de correspondance exacte du texte d’ancre et empêchera la génération des liens au niveau du site entier dans le bas de page. Au présent, beaucoup de sites web d’e-commerce n’utilisent pas ce concept.

Dans les dernières 20+ années, les notes en bas de page – en comparaison avec les autres zones d’une page – n’ont pas évolué en quelque chose plus d’utile pour les utilisateurs. Peut-être vous pouvez changer cela et obtenir un avantage organique en même temps.

Débogage et support

Les notes en bas de page peuvent être aussi utilisé comme fonction de débogage, développement ou support clients :

Par exemple, l’étiquetage (tagging) des notes en bas de page par un texte unique, qui comprend l’année et le mois quand la page a été générée ou actualisée (par ex., « page générée en septembre 2017 ») permettra une opération simple de crawl debugging après un ou deux mois avec l’opératoire de recherche ”site:” , par exemple en utilisant site:mysite “page générée en septembre 2017”.

  1. Does User Annoyance Matter? http://www.nngroup.com/articles/does-user-annoyance-matter/
  2. Mega Menus Work Well for Site Navigation, http://www.nngroup.com/articles/mega-menus-work-well/
  3. Findability, http://en.wikipedia.org/wiki/Findability
  4. The Paradox of Choice, http://en.wikipedia.org/wiki/The_Paradox_of_Choice:_Why_More_Is_Less
  5. ‘How We Decide’ And The Paralysis Of Analysis, http://www.npr.org/templates/story/story.php?storyId=122854276
  6. Avoid Category Names That Suck, http://www.nngroup.com/articles/category-names-suck/
  7. Interface Design >Navigation > Trunk Testing, http://jrivoire.com/ED722/trunktest.html
  8. Nine Techniques for CSS Image Replacement, http://css-tricks.com/css-image-replacement/
  9. Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility, http://www.nngroup.com/articles/auto-forwarding/
  10. Are carousels effective? http://ux.stackexchange.com/questions/10312/are-carousels-effective/10314#10314
  11. WEB1009 – The <img> or <area> tag does not have an ‘alt’ attribute with text, http://msdn.microsoft.com/en-us/library/ff724032(Expression.40).aspx
  12. Using schema.org markup for organization logos, http://googlewebmastercentral.blogspot.fr/2013/05/using-schemaorg-markup-for-organization.html
  13. Thing > Property > logo, http://schema.org/logo
  14. Thing > Organization, http://schema.org/Organization
  15. The H1 debate, http://www.h1debate.com/
  16. Survey and Correlation Data, http://moz.com/search-ranking-factors
  17. Whiteboard Friday – The Biggest SEO Mistakes SEOmoz Has Ever Made, http://moz.com/blog/whiteboard-friday-the-biggest-seo-mistakes-seomoz-has-ever-made – Check #4 starting around 5:00
  18. Do not Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition – http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758/ref=la_B001KHCFUU_1_1?s=books&ie=UTF8&qid=1387533022&sr=1-1
  19. The Elements of User Experience: User-Centered Design for the Web and Beyond (2nd Edition) (Voices That Matter), http://www.amazon.com/Elements-User-Experience-User-Centered-Design/dp/0321683684/ref=sr_1_1?s=books&ie=UTF8&qid=1387533087&sr=1-1&keywords=jesse+james+garrett
  20. Persistent Shopping Carts vs. Perpetual Shopping Carts, http://www.getelastic.com/persistent-shopping-carts-vs-perpetual-shopping-carts/
  21. Should I use rel=”nofollow” on internal links to a login page? https://www.youtube.com/watch?v=86GHCVRReJs
  22. PageRank: will links pointing to pages protected by robots.txt still count?, http://webmasters.stackexchange.com/questions/5534/pagerank-will-links-pointing-to-pages-protected-by-robots-txt-still-count/5548#5548
  23. Will a link to a page disallowed in robots txt transfer PageRank, https://www.youtube.com/watch?v=j6H3xBcvkZY
  24. PageRank sculpting, http://www.mattcutts.com/blog/pagerank-sculpting/
  25. Eric Enge Interviews Yahoo’s Priyank Garg, http://www.stonetemple.com/articles/interview-priyank-garg.shtml
  26. SEO and Usability, http://www.nngroup.com/articles/seo-and-usability/
  27. Link schemes, https://support.google.com/webmasters/answer/66356?hl=en
  28. Smarter Internal Linking – Whiteboard Friday, http://moz.com/blog/smarter-internal-linking-whiteboard-friday
  29. Smarter Internal Linking – Whiteboard Friday, http://moz.com/blog/smarter-internal-linking-whiteboard-friday#comment-189218
  30. Webmaster Central 2013-12-16 https://www.youtube.com/watch?v=Snarx2wBlWg @ 27:52