Contenu principal : pubs et barres latérales loin du texte

Contenu principal : sur bien des sites de PME que j'examine dans le Grand Montréal, c'est la partie de la page qui a le moins de place, alors que c'est elle qui répond à la question du visiteur. Je suis Marven Salgado, fondateur de Social Influence à Mascouche. Le texte d'une page devrait répondre clairement à une seule question, mais le gabarit l'encadre de barres latérales et de publicités, puis une fenêtre surgissante le recouvre avant même que le visiteur ait terminé le premier paragraphe. Ce mélange laisse les visiteurs dans le flou sur la raison d'être de la page, et les moteurs de recherche en tirent une image tout aussi floue. Dans la plupart des cas, la correction commence par le gabarit.

Contenu principal : ce que c'est et pourquoi votre gabarit décide du sujet d'une page

Le contenu principal est le texte qui répond à la question du visiteur, et tout ce qui l'entoure (barres latérales, menus, publicités, widgets) est du contenu secondaire censé le soutenir.

Votre gabarit décide de l'ordre des éléments et du poids visuel que chacun reçoit. Le problème que je vois le plus souvent sur les sites WordPress, c'est un thème qui place les widgets avant le vrai contenu, à l'écran comme dans le code de la page. Si un thème empile une large barre latérale et une bannière promotionnelle avant le texte, le visiteur voit d'abord le mobilier du site, et un moteur de recherche a plus de travail à faire avant de comprendre de quoi parle la page. Un bon texte ne peut pas compenser, puisque le problème se trouve dans la mise en page autour de lui.

Les moteurs de recherche se fient à la structure HTML, à la position du texte et à la place qu'il occupe dans la page pour repérer le bloc principal. Placer votre texte dans des balises sémantiques comme <main> et <article>, en gardant le code de la barre latérale à l'extérieur, rend cette séparation plus claire dans le code.

Le texte a aussi son rôle : il doit répondre à la question du visiteur avant que quoi que ce soit d'autre sur la page lui dispute l'attention. C'est par là que je commence chaque fois que je m'occupe de la rédaction SEO d'une page, et ça ne fonctionne que si le gabarit laisse le texte s'afficher en premier.

Barres latérales et widgets : quand le contenu secondaire fait concurrence à votre texte

Les barres latérales et les widgets font concurrence à votre texte dès qu'ils pèsent plus lourd que l'article à l'écran ou qu'ils repoussent le vrai contenu plus bas dans la page.

Les widgets s'accumulent souvent un à la fois, et chacun semble inoffensif pris isolément. Ensemble, ils poussent l'article vers le bas et éparpillent le sujet de la page entre des liens et des étiquettes sans rapport, ce qui rend ce sujet moins net pour un moteur de recherche. Je ne garde un élément dans la barre latérale que s'il aide le lecteur à terminer l'article qu'il a sous les yeux.

Listes d'articles connexes, nuages d'étiquettes et blocs promotionnels

Les listes d'articles connexes, les nuages d'étiquettes et les blocs promotionnels détournent l'attention quand ils côtoient le texte, car le lecteur leur donne alors le même poids qu'à l'article.

Imaginez quelqu'un qui lit le billet d'un paysagiste de Terrebonne sur le nettoyage du printemps. Au troisième paragraphe, la vignette d'un article connexe attire son regard, il clique et ne termine jamais le texte pour lequel il était venu, parce que la vignette était juste à côté. La différence entre contenu principal et contenu secondaire tient à la hiérarchie, et le poids visuel fixe cette hiérarchie avant même qu'on lise un mot.

Déplacez les grilles d'articles connexes, les nuages d'étiquettes et les blocs promotionnels au bas de la page. Laissez les gens lire votre propos jusqu'au bout, puis proposez-leur la suite une fois que vous leur avez donné ce qu'ils étaient venus chercher.

Publicités et fenêtres surgissantes : quand leur emplacement coupe la réponse que le visiteur est venu chercher

Les publicités et les fenêtres surgissantes interrompent la réponse quand elles couvrent le texte ou qu'elles apparaissent avant que le visiteur en ait lu une seule ligne.

Disons que quelqu'un cherche les heures d'ouverture de fin de semaine d'une clinique dentaire de Laval et clique sur le résultat. Avant qu'il arrive à la première phrase, un formulaire d'inscription à l'infolettre glisse par-dessus la page. Le fermer demande un geste qu'il n'avait pas prévu, et certaines personnes retourneront plutôt aux résultats de recherche. La mise en page vient alors de nuire à l'expérience utilisateur.

Laissez les visiteurs lire le premier écran de vrai contenu avant qu'une fenêtre surgissante apparaisse. Si vous affichez des bannières publicitaires ou des publicités d'affiliation, gardez-les à côté du texte ou en dessous, jamais par-dessus, et jamais au milieu d'un paragraphe ou entre un titre et le texte qui le suit. Chaque fenêtre surgissante doit avoir un bouton de fermeture bien visible et facile à toucher sur un cellulaire.

Affichage mobile : où se retrouve la barre latérale quand l'écran rétrécit

En affichage mobile, la plupart des thèmes déplacent la barre latérale après l'article entier dès que l'écran rétrécit à la taille d'un cellulaire, et tous les widgets s'empilent sous votre texte.

Les publicités et les widgets placés au-dessus de l'article ou entre ses paragraphes posent un autre problème : s'ils chargent pendant que le texte s'affiche, celui-ci saute vers le bas à leur apparition. Les widgets lourds et les scripts publicitaires ralentissent aussi le chargement de la page, ce qu'un visiteur sur une connexion cellulaire remarque vite.

Quand je vérifie un gabarit sur mon cellulaire, je regarde trois choses :

• La barre latérale disparaît-elle complètement, ou est-ce qu'elle se déplace simplement en bas de la page ?
• Les publicités se chargent-elles avant ou après le texte principal ?
• La page saute-t-elle quand les images ou les widgets finissent de charger ?

Appels à l'action et liens internes qui soutiennent le texte au lieu de l'encombrer

Les appels à l'action et les liens internes soutiennent le texte quand chacun se trouve à l'endroit où le lecteur en a besoin pour la suite. Trop nombreux, ils encombrent une page autant qu'une barre latérale surchargée.

Un seul appel à l'action clair à la fin d'une section fonctionne mieux que trois boutons qui se disputent l'attention, et il doit découler de ce que la section vient de dire. Les liens internes ont leur place dans la phrase, vers une page qui aide le lecteur à passer à l'étape suivante. Un lien ajouté dans la barre latérale juste pour le SEO détourne l'attention de votre message principal, et une page bourrée de liens éparpille cette attention.

Quand je fais l'audit SEO d'une page, je vérifie si chaque lien mérite sa place. Si le retirer ne nuit pas au lecteur, je l'enlève. Des liens moins nombreux et mieux placés gardent le texte lisible et donnent quand même aux moteurs de recherche des signaux clairs sur la façon dont vos pages sont reliées.

Liste de vérification du gabarit de page pour le site d'une PME

Une liste de vérification du gabarit repère les erreurs de mise en page qui détournent le lecteur du texte, et je l'applique à chaque page refaite avant de la montrer au client.

• La barre latérale est-elle bien séparée du texte principal, avec assez d'espace blanc pour qu'on ne confonde pas les deux ?
• Les blocs publicitaires sont-ils à côté du contenu ou sous la ligne de flottaison, jamais au milieu d'un paragraphe ni entre deux titres ?
• Les grilles d'articles connexes, les nuages d'étiquettes et les blocs promotionnels sont-ils au bas de la page, sous l'article ?
• Un visiteur peut-il lire le premier écran de contenu avant qu'une fenêtre surgissante apparaisse, et le bouton de fermeture est-il facile à trouver ?
• Le gabarit WordPress garde-t-il la colonne de contenu assez large pour une lecture confortable sur cellulaire comme sur ordinateur ?
• Sur un cellulaire, la barre latérale passe-t-elle sous l'article sans retarder l'affichage du texte ?
• Le texte est-il placé dans des balises <main> ou <article>, à l'écart du code de la barre latérale ?

Une fois la liste passée, je fais défiler la page au complet comme le ferait un visiteur. Si mon regard s'éloigne du texte, le gabarit a besoin d'autres retouches. Vous pouvez aussi passer la page dans l'outil d'analyse de site web avant de parcourir la liste à la main. Refaites la vérification chaque fois que vous ajoutez une extension ou que vous changez de thème, puisque l'un comme l'autre peut ramener du fouillis dans le contenu principal.