Rédaction web et SEO : n°4 - Positionnement des images dans la page

Rédaction web. article 4 : Positionnement des images

Aujourd’hui on ne maitrise plus totalement l'ordonnancement des pages web

Introduction

Cet article est le quatrième d’une série consacrée à la rédaction web : Il est à l’usage des personnes en charge de la production de contenu et qui ne possèdent pas de connaissances SEO particulières.

Positionner une image au millimètreAutrement dit, comment rédiger pour le web quand on n’y connaît rien ?

Nous allons voir aujourd’hui que le positionnement des différents éléments de la page web ne dépendent plus (uniquement) de nous.

Nous parlerons peu d’optimisation SEO et cet article aurait pu porter le numéro 3 bis de ma petite série puisqu’il prolonge le numéro 3 consacré aux images.



Résumé des articles précédents

Dans le premier article, nous sommes restés au niveau du traitement de texte.

Logo MindomoLogo GrammalectePartant de votre idée initiale, autrement dit du thème de votre article, je vous ai invité à construire un plan (avec un logiciel de mind-mapping comme Mindomo). Je vous ai ensuite proposé − si vous utilisez le traitement de texte LibreOffice − d’installer l’extension « Grammalecte » pour mieux gérer la typographie, les espaces insécables et autres erreurs courantes…
Le tout avec des conseils généraux du genre : phrases courtes, pas de jargon, texte compréhensible par des adolescents, structuration du texte avec de vrais titres… ☺

Pour vérifier la bonne structuration du texte, je recommande d’ailleurs d’en extraire la table des matières. La lecture de celle-ci donne-t-elle une idée juste du contenu ?

Dans le deuxième article, nous avons importé le texte dans WordPress.

Nous avons ensuite utilisé l’outil de lisibilité du plugin Yoast pour peaufiner le texte et je vous ai donné quelques indications sur les mots de transition.

Nous avons alors constaté quelques différences dans les éditeurs WordPress et LibreOffice, en particulier pour certains caractères (espaces insécables, accents circonflexes…). Cela oblige, pour obtenir un texte impeccable, à faire quelques allers et retours entre les deux. (Pas très pratique !)

Dans le troisième article, nous avons ajouté des liens et des images.

Une imageNous avons parlé de l’importance d’insérer des liens, externes et internes, avec quelques conseils.

Question images, nous avons vu où les trouver, comment les optimiser’ comment choisir le format JPG ou PNG. Nous avons aussi insisté sur l’importance du texte alternatif, ou balise « alt ».



Positionner les images

« Image Experiment » by Wanhe Huang is licensed under CC BY-SA 4.0

Illustrer une page web est très important (même si l’essentiel du contenu doit être textuel, voir article sur ce sujet : Les images ne suffisent pas). Les images facilitent la lecture en créant des instants de repos, de ponctuation.

Où positionner les images ?

Choisir la position des photos
Photo by Gratisography from Pexels

Placez des images dès le début du texte, un peu comme un moyen d’accueillir le lecteur potentiel. Il convient ensuite d’en disposer régulièrement, mais plus on avance dans le texte moins leur importance est cruciale.

Bien sûr, ces images seront pertinentes, en rapport étroit avec le sujet, mais il est illusoire de vouloir imposer une mise en page particulière. Aujourd’hui on ne maîtrise plus totalement le positionnement des différents éléments d’une page web.

Pourquoi est-il vain de vouloir imposer une mise en page particulière ?

Cela est dû à la multiplicité des tailles d’écran disponibles. Votre site web sera lu sur des ordinateurs avec écrans de tailles variées, mais aussi sur des smartphones.

Malgré cette contrainte, votre site web doit rester lisible. Les développeurs utilisent le mot « Web responsive » ou « Responsive design » (en français « Site web adaptatif« ) pour évoquer cette fluidité de l’affichage des composants de la page.

Un site web adaptatif (anglais […] responsive web design[…]) est un site web dont la conception vise, grâce à différents principes et techniques, à offrir une consultation confortable sur des écrans de tailles très différentes. L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphone, tablettes, télévision…) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles notamment, manipulations qui peuvent parfois dégrader l’expérience utilisateur, tant en lecture qu’en navigation.[…]

Wikipedia

Une expérience pour bien comprendre le mécanisme :

Sur ce présent site, faites varier la largeur de la fenêtre de votre navigateur et observez comment la disposition des textes et des images varie. Les paragraphes changent de mise en page, le nombre de lignes varie, certaines images changent de taille, d’autres non, mais le texte reste toujours lisible et affiché dans son intégralité.

un exemple de site non responsiveRegardez maintenant le site https://dequeuniversity.com/library/responsive/1-non-responsive et faites la même opération de réduction de la largeur du navigateur. Vous allez voir le texte disparaître en partie droite.

Certains regrettent de ne pas pouvoir aligner leurs éléments exactement comme ils le souhaitent.

Postiton exacteJ’ai plusieurs fois entendu des personnes vouloir absolument que la hauteur d’un paragraphe soit exactement égale à la hauteur de l’image adjacente, ou que le paragraphe fasse un nombre de lignes précis. C’est totalement illusoire.

Mais qu’est ce qui est important ? Le message global ou la mise en page ? (Le fond, ou la forme ?)

Comment pallier ce mécanisme ?

La disposition par blocs

Il est des cas cependant ou il est important malgré tout d’avoir un minimum de contrôle sur la mise en page. L’utilisation des blocs − gérés soit par l’outil de rédaction Gutenberg de WordPress soit par l’éditeur spécial fournis par le thème − autorise une grande souplesse dans la disposition des éléments.

<hr> Une autre méthode plus archaïque

Il est possible d’insérer un retour ligne avec la balise html « ligne horizontale » <hr /> que l’on rend invisible. Cette ligne sera paramétrée pour se positionner une fois qu’il n’y a plus rien, ni à droite ni à gauche, et créera donc une rupture dans le déroulement du texte.

Pour placer cette balise, il faut utiliser l’éditeur texte (et non l’éditeur visuel) et copier ce qui suit au bon endroit, c’est à dire avant l’élément (titre, nouvelle ligne…) qui doit revenir complètement à la ligne.

<hr style=”clear : both ; visibility : hidden ; line-weight:0px” />

Une façon plus élégante serait d’aller ajouter une classe CSS adaptée.

Par le menu « Personnaliser / CSS additionnel / » on accède à une feuille CSS dans laquelle on copie le code suivant :

/* Retour ligne forcé */
.retourLigne{clear : both ; visibility : hidden ; line-height : 0px ;}

Ceci fait, il suffira dans le texte, toujours avec l’éditeur texte, de placer

<hr class="retourLigne" />

pour imposer le retour à là ligne désiré.

Jongler avec le « responsive design »

Nous avons donc compris le mécanisme, il faut maintenant en tirer parti et choisir d’aligner les images soit à droite, soit à gauche en fonction de l’effet souhaité.

Que ce soit dans un bloc ou un paragraphe, il faut penser à l’ordre logique du flux de lecture. Si votre image est disposée à gauche d’un paragraphe, sur smartphone elle apparaîtra au dessus du paragraphe. Si elle est située à droite, elle apparaîtra sous le paragraphe, à vous d’en tenir compte selon la façon dont vous voulez illustrer votre propos.

  • Disposez les images à gauche pour qu’elles s’affichent en introduction des paragraphes.
  • Disposez les images à droite pour qu’elles s’affichent après les paragraphes.

Ultime vérification

Une fois votre article terminé, vérifiez sur divers affichages, sans oublier votre smartphone. Profitez-en pour vérifier qu’aucune ponctuation ne se trouve orpheline en début de ligne.


Texte ou image ?

Votre site web : Les images ne font pas tout !

De l’importance (relative) des images dans un site web

Des images pour agrémenter son site web

La présence d’images dans un site web est fondamentale mais a des limites.

La lecture sur écran est souvent fatigante et les images apportent des temps de respiration indispensables.

Le choix des images et du décor aident à créer l’ambiance voulue, en fonction de la cible choisie.

Qui de l’image ou du texte apporte le plus ?
Auray Saint-Goustan et extrait d’un poème de Victor Hugo

Les limites de l’image

Google et ses compères ne savent pas (encore) lire les images.

Un site web composé uniquement d’images sera donc totalement transparent pour les moteurs de recherche qui n’y verront que du blanc, du vide… Et seront donc incapables de référencer quoi que ce soit, ce qui n’est ordinairement pas le but recherché.

La solution consiste à accoler à l’image un texte descriptif que l’on nomme « Balise Alt » ou « Texte alternatif ». Ce texte n’est ordinairement pas affiché pour l’internaute mais renseigne efficacement Google sur le contenu du site.

Néanmoins, fournir du contenu alternatif, bien qu’indispensable, n’est pas suffisant.

Construction web : Les images ne sont pas le contenu

Une imageAu début des projets Web, certains clients me disent tout fiers « Et pour le contenu, j’ai tout ce qu’il faut, j’ai plein de photos et d’images. »

Généralement ils font un peu la grimace lorsque je leur annonce que cela ne suffira pas et qu’ils devront écrire, écrire et encore écrire. Qu’il faut viser en moyenne des textes de trois cents mots par page.

Beaucoup de gens pensent que le développeur web pourra « mettre des mots-clés » dans des zones mystérieuses du code. Cela a existé aux débuts du web, mais cette époque est révolue depuis longtemps.

La seule façon de rendre visible un site web est d’offrir du contenu texte intéressant.

Construction web : Le contenu, c’est le texte

Ecrire régulierementIl n’est pas toujours facile d’écrire. Indépendamment de l’orthographe, il faut savoir quoi dire et comment le dire : Il existe quelques techniques particulières mais guère différentes de l’écriture journalistique. Faire simple, phrases pas trop longues, pas trop de mots compliqués ou de plus de quatre syllabes…

Le plus simple est parfois de faire appel à un rédacteur web qui saura vous interviewer et rédiger pour vous dans les règles de l’art. Mais je propose quelques tutoriels sur ce site, ne vous privez pas de les lire…


Ne pas copier les articles de presse

Article presse sur votre site web

Article presse sur votre site web

Article de presseVous désirez placer un article journal en évidence sur votre site internet ? Très mauvaise idée !

Non seulement c’est interdit, mais en plus c’est contre-productif en termes de SEO et d’image véhiculée.

Copier un article de presse est illégal.

Même si vous êtes le sujet principal de l’article, sa reproduction est encadrée par les lois sur les droits d’auteur. Il se trouve que la plupart des organes de presse confient la gestion de ces droits au CFC (centre français d’exploitation du droit de copie), il vous faudra donc passer par leur intermédiaire pour obtenir une autorisation (payante) de reproduction. Vous pouvez trouver sur le site du CFC les principaux textes de loi relatifs au droit d’auteur et au droit de reproduction d’une œuvre protégée.

Scanner un article de journal pour l’afficher sur votre site web nuit à son référencement.

Le texte de l’article est une image et les moteurs de recherche sont incapables d’en comprendre le sens.

Cette image est le plus souvent en pdf et vous ne saurez donc pas toujours l’optimiser correctement. Elle sera trop lourde et le moteur de recherche décernera à la page quelques points négatifs.

Parions enfin que votre balise « Alt » ne sera pas non plus optimisée et voici de nouveau une flopée de points négatifs.

Afficher la photo d’un article de presse nuit à votre image

Honnêtement, lisez-vous en détail les articles présentés sous forme de scan que l’on peut voir sur le net ? La lecture en est toujours difficile, voire impossible sur mobile.

Ces articles renvoient donc l’image d’un site web amateur, ou tenu par une entreprise qui ne prend pas les moyens de sa communication.

Consultation des articles pdf sur mobiles

Les webmestres qui placent ces photos d’articles sur le web n’ont pas encore assimilé la tendance actuelle : La consultation des sites web se fait maintenant essentiellement depuis des appareils mobiles.

Comment va s’afficher cette image sur un smartphone ? Vous connaissez la réponse.

Faites une revue de presse

Vous disposez de nombreux articles dithyrambiques qui traitent de vous ou de votre entreprise ? Faites alors une « Revue de presse » en citant de courts extraits, avec mention des auteurs et de la date, et surtout avec des liens vers les articles originaux.


Wordpress croissance

WordPress en pleine croissance… Oui mais… Danger !

Le 28 mai 2019, mise à jour de cet article du 23 novembre 2015.

WordPress est toujours de plus en plus utilisé, et cela n’étonne plus personne.

Wordpress-20%
2013

Wordpress-25%
2015

Wordpress-30%
Avril 2018

Wordpress croissance
2019 (33 %)

D’ailleurs, pour illustrer cet article et ses futures mises à jour, plutôt que de barrer le logo WP de pourcentages toujours plus élevés, je vais simplement afficher une flèche croissante (une fois pour toute).

WordPress et les autres

Pour se faire une idée des évolutions des logiciels, il est commode de consulter Google Trends. Voici un graphique concernant les quatre logiciels les plus utilisés (ou ceux qui présentent la plus forte croissance). Dans cette copie d’écran, WordPress est en vert, Joomla en jaune et Wix en bleu et Squarespace en rouge.

Comparatif CMSJe précise qu’il s’agit de l’intérêt des internautes et non des réelles parts de marché. En ne se fiant qu’au graphique, on pourrait penser qu’en mai 2019 Wix arrive au tiers de WordPress ? Or, à cette date, son utilisation n’en représente que 3 %.

Je recommande la lecture de l’article de w3techs.com qui présente un comparatif complet en chiffres et en tableaux éloquents, par mois, trimestres ou années.

Le revers de la médaille (vous êtes la cible idéale)

Observez le graphique ci-dessous, tiré de l’étude de w3techs.com citée ci-dessus

w3techs.com - graphique comparaison CMS.

Mettez-vous maintenant dans la peau d’un développeur pirate en train de développer un robot malfaisant. À quel système va-t-il s’attaquer en priorité ? (pour ne pas dire exclusivement).

Oui mais mon site ne va intéresser personne !

La sécurité de votre site, c'est votre affaire Grave erreur

Le robot de notre méchant pirate parcoure tout le web. Il recherche en priorité les sites WordPress basés sur des versions un peu anciennes. Il recherche aussi les plugins dépassés, dont les failles de sécurité ont été publiées. Le petit site web du menuisier du coin de la rue ou le blog du collectionneur de papillons sont des cibles de choix car faciles d’accès.

De plus, si un site web n’est pas à jour, c’est probablement parce qu’il est tenu par quelqu’un d’un peu trop confiant, possédant un anti-virus gratuit et utilisant le même mot de passe un peu partout. Le rêve !

Si vous êtes dans ce cas, merci de me mettre votre numéro de carte bancaire…

Le virus déposé par le robot ne va pas forcément casser votre base de données, il va essayer de se cacher là où il pourra. Dans votre machine, dans votre compte d’hébergement, dans les ordinateurs de vos visiteurs, sans faire de bruit, sans rien abîmer. Ainsi, le pirate pourra-t-il se constituer un gros parc de machines équipées de son virus diabolique et discret.

Et le jour J (fatidique), notre pirate pourra lancer son attaque de partout à la fois, bloquant des millions de machines, des industries entières, voire des pays…


La surveillance doit être quotidienne.

Chaque matin, même le dimanche, même en vacances, je vérifie que tous les sites que je gère soient bien à jour. Et ceci autant pour les versions de WordPress que pour les plugins utilisés. Bien sûr, je ne pourrais pas faire cela à la main, ce serait trop long, je mets donc en route un outil spécial qui fait le job à ma place.

Ensuite, je consulte les alertes qui arrivent dans une boite mail spécifique (sauvegardes, tentatives de connexion pirates, gestion des divers renouvellements…)

Oui, même le dimanche, non que je sois un forcené du boulot, mais en cas d’attaque il faut faire vite.

Une fois ceci fait, j’ouvre les outils habituels de l’homo informaticus, agenda, courrier électronique, et tout le reste… − sauf le dimanche cette fois ☺.

Mon seul conseil :

La sécurité, cela vous concerne !

Ne prenez pas cela à la légère.

Si vous n’en êtes pas convaincu, alors vous êtes la cible idéale.

Cherchez l’expression « Sécurité Wordpress » dans un moteur de recherche et suivez les conseils.


Insertion images et liens

Rédaction web et SEO : n°3 - Insertion images et liens

Rédaction web. article 3 : Insérer des liens et des images

Écrire améliore (vraiment) votre positionnement

Introduction

Cet article est le troisième d’une série consacrée à la rédaction web : Il est à l’usage des personnes en charge de la production de contenu et qui ne possèdent pas de connaissances SEO particulières.

Autrement dit, comment rédiger pour le web quand on n’y connaît rien ?

Un petit clin d’œil au passage à mes clients à qui je livre des sites internet et à qui je dis qu’il leur faut maintenant écrire, écrire, et encore écrire…

Nous allons donc voir aujourd’hui l’insertion des liens et des images, et le tout, sans avec très peu de notions techniques.

Résumé des articles précédents

Dans le premier article, nous sommes restés au niveau du traitement de texte.

Logo MindomoLogo GrammalectePartant de votre idée initiale, autrement dit du thème de votre article, je vous ai invité à construire un plan (avec un logiciel de mind-mapping comme Mindomo). Je vous ai ensuite proposé − si vous utilisez le traitement de texte LibreOffice − d’installer l’extension « Grammalecte » pour mieux gérer la typographie, les espaces insécables et autres erreurs courantes…

Le tout avec des conseils généraux du genre : phrases courtes, pas de jargon, texte compréhensible par des adolescents, structuration du texte avec de vrais titres… ☺

Pour vérifier la bonne structuration du texte, je recommande d’ailleurs d’en extraire la table des matières. La lecture de celle-ci donne-t-elle une idée juste du contenu ?

Note au sujet de Mindomo :

Mindomo n’est pas un logiciel libre. Malheureusement, je n’ai pas trouvé de logiciel libre de mind-mapping permettant une synchronisation Android − PC.

Dans le deuxième article, nous avons importé le texte dans WordPress.

Logo YoastNous avons ensuite utilisé l’outil de lisibilité du plugin Yoast pour peaufiner le texte et je vous ai donné quelques indications sur les mots de transition.

Nous avons alors constaté quelques différences dans les éditeurs WordPress et LibreOffice, en particulier pour certains caractères (espaces insécables, accents circonflexes…). Cela oblige, pour obtenir un texte impeccable, à faire quelques allers et retours entre les deux. (Pas très pratique !)

Enfin, nous avons conclu ce deuxième article en annonçant qu’avant d’utiliser l’outil « Requête cible » du plugin Yoast, il nous faudrait insérer des liens et des images. Nous y voici !

Sujet du jour : liens et images

Insertion de liens

Les moteurs de recherche lisent toutes les pages web, je dirais même qu’ils les épluchent et leur attribuent une note selon de multiples critères. Un de ces critères concerne la présence de deux types de liens.

Liens internes

Les liens internes redirigent le lecteur vers des pages ou des articles de votre site. Leur intérêt est de faciliter la navigation de l’internaute et des robots analyseurs de sites (crawlers). Lorsqu’il lit le texte et voit un lien, l’internaute sait qu’il peut trouver un complément d’information facilement. C’est commode et donc très apprécié par les moteurs de recherche.

Placez donc plusieurs liens internes dans tous vos textes.

Attention, les titres et les destinations des liens ont leur importance, j’y reviens ci-dessous.

Liens externes

Les liens externes sont tout aussi importants. Les moteurs de recherche attribuent une meilleure note aux contenus qui proposent des références externes de qualité. Par exemple, au début de cet article, je cite « Mindomo » et je place un lien vers sa page officielle. On peut aussi renvoyer sur un site explicitant un terme un peu compliqué (mindmapping.com par exemple pour illustrer le mind-mapping).

Notes importantes sur l’insertion des liens.


AttentionNe pas faire ouvrir les liens dans de nouvelles fenêtres.

Certains clients me rétorquent qu’ils craignent que les internautes ne quittent leur site. Mais tout le monde sait faire marche arrière et si le site est intéressant les visiteurs reviendront. Prenons les internautes pour des adultes !

Placez les liens sur des termes explicites.

Le texte du lien doit renseigner sur ce qu’on va trouver en le suivant.

Ne pas mettre : « Vous trouverez mon blog photo ici », ou « Pour en savoir plus : Cliquez ici»: Mettez plutôt « Vous pouvez consulter mon blog photo. »

Seul le dernier de ces trois liens indique clairement que l’on se dirige vers un blog photo !

De plus, il est important que le texte environnant le lien d’une part et que le texte de destination du lien d’autre part soient en rapport l’un avec l’autre. Autrement dit, le texte du lien doit être en conformité avec le thème du paragraphe dans lequel il se trouve.

Images

Une imageLa lecture sur écran est moins confortable que sur papier. Aussi, mis à part quelques cas particuliers, nous avons tous le besoin de trouver du contenu aéré et illustré.

Une image bien choisie va renseigner immédiatement sur le contenu texte environnant, aider à la mémorisation et à la compréhension.

Un texte bien illustré sera donc souvent mieux noté par les moteurs de recherche.

Trouver des images

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Ne jamais voler d’images sur le net. J’emploie à dessein le verbe « voler ».

Logo CC CommonsIl existe des banques d’images libres, voire d’images libres et gratuites (nuance). J’utilise souvent Pexels et depuis peu la nouvelle banque CC Search. Par respect pour les auteurs, merci de les citer lorsqu’ils le demandent.

En outre, vous constaterez très vite qu’il vaut mieux payer dix ou quinze euros pour une image de qualité que de perdre deux heures de votre temps précieux en recherches vaines.

Résolution et définition

La définition d’une image :

On nomme « définition d’une image » sa dimension en nombre de pixels. Par exemple : 3000 x 2000.

En revanche, oubliez la résolution qui ne concerne que l’impression papier.

On trouve sur le net des quantités de débats sur le sujet de la résolution, le méli-mélo vient tout simplement des anglais, qui désignent par « resolution » (sans accent) ce que nous appelons « définition ».

Je conseille à ceux qui désirent approfondir le sujet de la résolution, de lire un article d’Arnaud Frich, spécialiste de l’image (couleurs, impression…)

Choisissez une définition adaptée

Faites des tests pour trouver les définitions qui vous conviennent. Je vous propose par exemple 1200 px de large pour les plus grandes images (occupant toute la largeur de l’écran). Pour les grandes images à l’intérieur d’une page je propose 600 ou 800 px, et de 150 à 300 pour les petites images.

Voici ce que cela donne :

O

Optimisation des images

Vous avez une image à la bonne définition, il vous faut maintenant l’optimiser.

Le poids des images est maintenant devenu problématique en ce sens qu’il alourdit les pages web et ralentit leur affichage. Les moteurs de recherche détestent cela et les pénalisent de plus et plus.

Logo RiotJe vous conseille donc de télécharger le logiciel RIOT qui va vous permettre de compresser grandement les images sans perte visible de qualité.

Je propose un exemple ci-dessous (avec l’aimable autorisation de la librairie « La nef des Fous à Rennes »). En premier lieu, la définition de l’image originale a été réduite à 800 x 530. Son poids est donc passé d’une quinzaine de Mo à 520 Ko, ce qui est encore trop.

Dans un deuxième temps, j’ai appliqué une optimisation avec RIOT et le poids est passé à 100 Ko.

Avant à gauche, après à droite, on distingue une légère différence de coloration mais c’est peu de chose en comparaison des variations que l’on observe d’un écran à l’autre.

Et sur Mac ?

Voyez par exemple  imageoptim  (Je n’ai pas essayé mais j’ai lu que c’était un bon choix. Confirmez-le moi en commentaire 🙂

Les images png

Il vous faudra parfois choisir le format PNG qui respecte les transparences, pour éviter le défaut ci-dessous. (Afin de mieux voir le défaut, j’ai foncé un peu l’arrière plan.)

À gauche une image en JPEG, avec son arrière plan blanc disgracieux, à droite la même en PNG qui autorise la transparence du fond.

Balises des images

Attention aux balises AltLors de l’insertion d’une image, il est fondamental de remplir au minimum la balise « Alt » (texte alternatif). En théorie, cette balise sert à fournir un texte de remplacement au cas où le navigateur ne pourrait pas afficher l’image. Cependant, comme les moteurs de recherche ne savent pas encore analyser les images, c’est leur seul moyen de savoir de quoi il retourne. Autant dire qu’une balise « Alt » non renseignée est très mal vue, et donc très mal notée.

En plus de la balise « Alt », on peut renseigner un titre ou une légende, mais c’est de moindre importance.

Remplir les balises Alt

Prochain article

Dans un prochain article, je reviendrai sur les images, en particulier sur leur positionnement dans la page.

Je terminerai cette série par l’utilisation de l’outil « Requête cible » fourni par le plugin Yoast, qui nous servira à juger de l’optimisation de notre page.


Ecrire pour le web

Rédaction web et SEO : n°2 - Peaufiner le texte

Rédaction web. article 2 : Peaufiner le texte

Écrire améliore (vraiment) votre positionnement

Introduction – Rédaction web (suite)

Texte mélangé(Utilisation de l’outil d’analyse de lisibilité du plugin Yoast.)

Cet article fait suite à Rédaction web et SEO : n°1 – Rédiger le texte publié précédemment.

Comme je le disais en introduction de ce dernier, je m’adresse aux personnes en charge de la rédaction du contenu d’un site web sans entrer dans la technique.

Nous disposons donc d’un texte élaboré dans un logiciel de traitement de texte, que nous allons peaufiner à l’aide des outils d’analyse de lisibilité du plugin Yoast pour WordPress.

Nous allons mettre à profit les indications de cet outil pour adapter notre texte à la lecture web. En particulier, cet outil recommande l’usage des mots de transition au sujet desquels je donnerai quelques indications.

Nous n’aborderons ni l’insertion des images, ni celle des liens.

Peaufiner le texte avec l’outil d’analyse de lisibilité de Yoast

État actuel :

Le menu des stylesPour l’instant, vous disposez donc d’un texte dans un logiciel de traitement de texte. Vous avez structuré ce texte en paragraphes introduits par des titres et sous-titres. À ce propos, je rappelle que ces derniers s’obtiennent par réglage dans l’outil des styles et non par de simples enrichissements (caractères gras, soulignements, variation de taille…)

Pour s’assurer de la qualité de ces titres, il suffit d’insérer une table des matières, en tête ou en fin de document. On se pose alors la question : cette table des matières contient-elle tous les titres ? Et sa lecture reflète-t-elle parfaitement le contenu de notre article ?

(Menu insertion − Insérer une table des matières)

Les espaces insécables

Avant d’insérer le texte dans le site, nous allons devoir gérer les espaces insécables.

Espaces insécables et caractères orphelinsLorsque le texte sera intégré dans le site, et sachant que les largeurs d’écrans sont diverses et variées, le risque sera grand de voir un signe de ponctuation filer à la ligne et se retrouver seul (orphelin). Pour éviter cela, il faudra placer des espaces insécables avant ces caractères de ponctuation. D’ailleurs, il faudra aussi protéger d’autres groupes de mots ou lettres des retours à la ligne, comme les particules, les horaires, et beaucoup d’autres…

Grammalecte

Logo GrammalecteSi vous travaillez avec LibreOffice, il vous faudra installer l’extension « Grammalecte » qui placera toutes les espaces insécables en un seul clic.

Une fois l’extension téléchargée, installez le plugin (un simple double-clic sur le fichier) et redémarrez LibreOffice. Vous trouverez le nouveau menu « Grammalecte » entre « Outils » et « Fenêtre ». Faîtes « Grammalecte / Formateur de texte… » puis « Appliquer » dans la fenêtre qui est apparue et le tour est joué.

Les erreurs de grammaire

Ensuite, épluchez votre document à la recherche de tous les soulignements bleus et par clic-droit résolvez toutes les imprécisions. Bien sûr, je sous-entends que vous aurez aussi corrigé les fautes d’orthographe soulignées en rouge.

Insertion du texte dans l’éditeur WordPress

L’interface d’édition de WordPress peut varier, vous pouvez utiliser soit Gutenberg, soit l’éditeur classique soit encore l’éditeur spécifique de votre thème. Je n’entrerai donc pas dans les détails de chacun, mais nous allons plutôt regarder les possibilités offertes par le plugin SEO Yoast pour l’analyse du texte.

À ce stade, insérez par copier-coller votre texte dans votre éditeur WordPress puis observez le rendu tant dans l’éditeur qu’en visualisation finale (aperçu). Les résultats sont bien différents.

Dans l’aperçu avant publication, faites varier la largeur de la fenêtre pour essayer de provoquer le retour à la ligne d’un point d’interrogation, d’un point-virgule ou de tout autre caractère précédé d’une espace insécable. Normalement ce devrait être impossible de se trouver avec un caractère orphelin, le mot précédant le caractère ira à la ligne en même temps.

Le plugin Yoast

Logo YoastOn trouve de nombreux plugins d’assistance SEO mais celui-ci est sans doute le plus répandu. Il est très complet et efficace mais a un défaut agaçant. En effet, la version gratuite est truffée de publicités incitant à migrer vers la version Premium. De plus, son utilisation peut facilement se transformer pour l’utilisateur non averti en une « chasse à la pastille verte » trompeuse. Nous y reviendrons dans le prochain article.

En dessous du texte, on trouve les réglages Yoast SEO.

Ce présent article n’est pas un tutoriel Yoast, je vous propose donc de passer rapidement sur les réglages de base. Ceux-ci ont normalement étés configurés en amont.

Analyse de la lisibilité

Tout d’abord, concentrons-nous sur l’analyse de la lisibilité que l’on trouve sous notre texte et sous le panneau « Édition des métadonnées » des réglages Yoast SEO. Un clic ouvre l’onglet.

Prêtez attention à toutes les suggestions et corrigez votre texte en fonction de celles-ci. Bien sûr, votre style personnel risque d’en prendre un coup. Mais vous êtes en train d’écrire pour le web, pour des internautes pressés, pas pour un prix littéraire.

Vous aurez probablement à réduire la longueur de vos phrases, à passer de la forme passive à la forme active et autres préconisations. Le plus difficile sans doute sera la gestion des mots de transition.

Pour chaque avertissement du plugin, vous avez la possibilité de surligner en rose les zones concernées (œil cliquable). Attention toutefois, le surlignement indique les phrases trop longues ou passives, c’est-à-dire les phrases fautives. Mais pour les mots de transition, il montre au contraire les phrases correctes, qui en sont pourvues.

Les mots de transition

Sans doute, le plus difficile sera la partie « Mots de transition ». Il s’agit de glisser dans vos phrases des mots particuliers qui en facilitent la lecture. À cet effet, vous lirez avec profit la page d’explication accessible depuis le plugin Yoast : Yoast SEO assessment : Transition words.

Les anglophobes pourront utiliser le traducteur DeepLLogo DeepL

Voici un court extrait :

Les mots de transition sont des mots comme « le plus important », « parce que », « donc » « ou » « d’ailleurs ». L’utilisation de mots de transition rend votre texte beaucoup plus lisible, car ces mots donnent une direction à vos lecteurs. Les utiliser, c’est comme verser du ciment entre vos phrases : la relation entre deux phrases devient évidente par l’utilisation de mots de transition. Ils envoient un signal à vos lecteurs que quelque chose arrive et les préparent pour la phrase suivante.

Extrait de « Yoast SEO assessment : Transition words » et traduit avec www. DeepL.com/Translator

Vous pouvez aussi télécharger un document universitaire tchèque sur ce sujet. Le document n’est pas signé, je suppose qu’il s’agit de Miroslava Novotná qui doit être professeur de français.

En effectuant quelques recherches pour vous, je suis aussi tombé sur un article intéressant de Bernard Lamailloux.

Alterner entre traitement de texte et éditeur WordPress

Pour finir, vous serez attentif à une petite incohérence de l’éditeur WordPress :

Quand vous copiez un texte de LibreOffice vers WordPress, les espaces insécables sont préservées. En revanche, une fois dans l’éditeur WordPress, il n’est plus possible de mettre des espaces insécables autrement qu’en utilisant le caractère HTML « &nbsp; ». (Sauf erreur de ma part que vous ne manquerez pas de me signaler en commentaire.)

En conséquence, si vous apportez beaucoup de modifications à votre texte par l’éditeur WordPress, en y ajoutant des caractères nécessitant des espaces insécables, il ne serait pas idiot de faire un dernier aller et retour WordPressLibreOffice → Grammalecte → WordPress.

Requête cible : Article à venir…

Je laisse de côté pour l’instant l’aspect « Requête cible » du plugin Yoast, car cela n’aura de sens de s’y intéresser qu’après insertion des images et des liens. À cette occasion, je vous expliquerai pourquoi j’y regarde à deux fois avant d’installer Yoast sur les sites de mes clients.

Quoi qu’il en soit, l’utilisation de l’outil « Requête cible » n’a de sens qu’après avoir inséré les images et les liens, ce que nous verrons bientôt.


Capitales accentuées

Il faut accentuer les capitales et les majuscules.

Il faut accentuer capitales et majuscules

Article publié en novembre 2011 et réactualisé en avril 2019

GISCARD CHAHUTE A L’ASSEMBLEE

Qui chahute ? Giscard ou les députés ?

Et le PALAIS DES CONGRES est-il un aquarium ?

Les exemples sont nombreux de textes en capitales qui deviennent ambigus lorsqu’on omet les accents. Pourtant, la règle académique est très claire à ce sujet et une rapide recherche Internet achèvera de vous convaincre.
Usage_des_majuscules_en_français (Wikipédia)

Majuscules accentuéesLa qualité de rédaction d’un texte sur un site Web est importante et les fautes d’accents sont des fautes d’orthographe !

Certes, nos claviers ne sont pas commodes pour cela et si le À et le È s’obtiennent facilement en faisant Alt Gr + ` (touche 7) puis A majuscule ou E majuscule, le É s’obtient plus difficilement, en maintenant enfoncée la touche Alt tout en composant le nombre 144. J’avoue utiliser assez souvent la correction d’orthographe des logiciels de traitement de texte.

Vous pouvez vous référer à mon article sur les caractères spéciaux pour vous imprimer un petit pense-bête assez pratique.

À propos, connaissez-vous la différence entre capitales et majuscules ?

Les capitales sont une variété typographique alors que les majuscules ont la fonction de mise en évidence des premières lettres des phrases ou des noms propres.

En savoir plus sur Wikipédia.

À propos encore : n’utilisez les capitales qu’à bon escient

Pas de noms propres entièrement en capitales, pas de majuscules à chaque mot d’une phrase…


Clavier bépo

Je suis passé au clavier Bépo !

Je suis passé au clavier Bépo

Je suis passé au clavier Bépo depuis trois mois et cet article relate mon expérience personnelle.

Si vous cherchez des informations sur le Bépo, le mieux est de vous rendre directement sur le site officiel très complet : https://bepo.fr/wiki/Accueil

Lire aussi https://ploum.net/216-le-bepo-sur-le-bout-des-doigts/

Présentation du Clavier Bépo

Logo BépoLien vers la plaquette Bépo à télécharger.

En quelques mots, le Bépo est une disposition différente du clavier qui concentre les touches les plus fréquentes du français sur des emplacements facile d’accès, au centre de ce clavier. De plus, tous les caractères typiquement français sont accessibles directement sans qu’il soit nécessaire d’utiliser de combinaisons de touches. Par exemple, À et É s’obtiennent sans passer par les combinaisons Alt + 183 ou Alt + 144.

Pour les développeurs, les parenthèses, crochets, accolades et autres « commentaires » sont regroupés dans une position beaucoup plus confortable.

En outre, une personne qui maîtrise bien le Bépo voit sa vitesse de frappe augmenter, la fatigue des doigts diminuer, avec réduction des tendinites et autres troubles musculo-squelettiques.

Pourquoi me suis-je lancé dans l’apprentissage du Clavier Bépo ?

Ancienne machine à écrire
Photo by rawpixel.com from Pexels

J’utilise le clavier Azerty depuis une trentaine d’années, mais je n’ai pas une bonne vitesse de frappe. J’ai toujours les yeux rivés au clavier et je ne constate mes nombreuses fautes de frappe que lorsque mes yeux se portent sur l’écran. Depuis des années, ma vitesse de frappe stagne à environ trente ou quarante mots / minute. Voir les gens frapper sans regarder le clavier, avec une vitesse bien supérieure m’a toujours impressionné.

Et puis un petit côté nouveauté, originalité, technicité…

Mon expérience

Mise en place

  1. Installation du clavier dans le système d’exploitation (voir la page dédiée sur le site Bépo)
  2. Installation du logiciel Amphetype.
    D’autres logiciels sont cités en bas de la page https://bepo.fr/wiki/Apprentissage
  3. Installation d’étiquettes sur mes touches clavier.
    Il semblerait que ce soit une erreur, mais en tant que développeur, et ne voulant pas passer sans arrêt d’un clavier à l’autre, il me faut nécessairement visualiser les touches de la rangée supérieure (parenthèses, crochets, accolades…) dont l’assimilation ne se fait que vers la fin de l’apprentissage.
  4. Impression papier des cartes du clavier:
    Carte de base
    Carte complète
  5. Et pour finir, un engagement avec moi-même de commencer toutes mes journées par un quart d’heure d’exercice.

Mes débuts

Lors des premiers exercices, j’étais obnubilé par la vitesse mais à force de lire et relire le site Bépo avec ses précieux conseils, j’ai totalement changé de façon de faire et me suis concentré sur la précision. Ma vitesse de frappe s’est effondrée, passant de vingt-cinq mots par minute à moins de quinze. Impression déroutante, mais il semblerait que ce soit pour la bonne cause…

Peu à peu, des séquences de touches apparaissent. Au milieu d’un mot à problème − ce mot est d’ailleurs assez difficile à écrire en Bépo − les doigts semblent parfois se libérer pour frapper d’instinct et plus vite que leur ombre certaines séquences. (ion, tent, est et beaucoup d’autres…)

Très vite je m’aperçois que je ne me sers quasiment plus de la touche « Alt gr » (sauf pour le deux points et le point virgule).

Conclusion

Ceci est mon premier article écrit en Bépo, je constate qu’écrire un texte libre est plus difficile que de faire un exercice et je découvre avec horreur, grâce à mon gestionnaire de temps, que ma vitesse de frappe tourne autour de six ou sept mots par minute (réflexions inévitables comprises, mais quand même, après plus de quarante heures d’exercices !).

Souhaitez-moi bon courage !

Je retourne sur Amphetype.


Testez le calibrage de votre écran

Photo by Tim Mossholder from Pexels

Article publié le 3 février 2013, actualisé en avril 2019

Calibrage : Votre écran affiche-t-il correctement les couleurs ?

Bon à savoir : Étalonnage et calibrage sont des mots français, calibration est un mot anglais.

Certains clients me confient des objets à photographier afin de les afficher sur leur site. Cependant, il arrive que ces clients ne retrouvent pas sur leur écran la couleur réelle de l’objet, c’est le plus souvent un problème de calibrage d’écran.

Quelques vérifications de couleurs

Calibration écran - Carte Vitale Exemple
En premier lieu, pour juger rapidement de la reproduction des couleurs de votre moniteur, je vous propose de comparer votre carte vitale avec celle-ci.

Attention, il faut vraiment placer votre carte vitale (bien éclairée) à côté de l’image car l’œil ne peut juger qu’en comparaison !


Calibration écran - Timbres poste
Vous pouvez aussi comparer la couleur de vos timbres.

Comme pour la carte vitale ci-dessus, les couleurs en ont été vérifiées sur nuancier papier Pantone puis converties en codes couleurs HTML grâce au logiciel spécifique Pantone.

Vous pouvez vérifier l’affichage des nuances de gris.

Nous avons ci-dessous trois lignes :
Dans la ligne noire, on doit percevoir quelques carrés légèrement plus clairs (ceux des colonnes paires).
Pour la ligne centrale, il s’agit de percevoir les délimitations de toutes les cases, mêmes les plus claires ou les plus sombres.
Et enfin, dans la ligne blanche, on doit percevoir quelques carrés légèrement plus foncés (ceux des colonnes paires).

12345678910111213141516

Ce tableau est inspiré des sites « Pourpre.com » et « Ventoux-photos.com »

Variations de couleurs sur les sites Web

Malgré le soin que je porte au respect des couleurs lors des photographies d’objets pour les sites web de mes clients, il arrive que ces derniers soient déçus du résultat affiché sur leur propre ordinateur.

Cela vient-il de la prise de vue ?

De mon côté, je porte soin au respect des couleurs lors de la prise de vue. Je travaille avec des éclairages « lumière du jour », je contrôle les couleurs sur des écrans régulièrement étalonnés grâce à une sonde de calibrage et je vérifie le rendu depuis de véritables nuanciers papier Pantone.
Malgré ces précautions, il reste des nuances visibles, c’est inévitable, mais je les qualifierais de très acceptables.

Cela vient-il de mon ordinateur ?

Effectivement, sans aucun doute.

Il existe des variations entre les navigateurs.

Ci-dessous l’image des timbres du début de cet article, affichée avec de gauche à droite : Firefox, Internet Explorer et Google Chrome.

Variation des couleurs selon les navigateurs


Le rouge affiché par Chrome est plus sombre, tirant légèrement vers le bordeaux.

Côté moniteur

Avez-vous remarqué combien sont différentes les couleurs affichées d’un écran à l’autre dans un magasin de téléviseurs ? Cela choque lorsque ces écrans sont disposés les uns à côté des autres, mais une fois seul devant notre écran, le cerveau compense tout, transformant les blancs teintés en blancs purs et décalant les perceptions pour annuler les légères dominantes de teintes.
Maintenant, si vous placez l’objet que j’ai photographié pour vous en regard de son image sur votre site web, dans 90 % des cas, la couleur sera différente. Elle virera en effet vers une dominante rouge, verte, jaune, bleue, violette… et sera plus ou moins pâle ou sur-saturée.

Variations de couleurs sur les écrans

Que faire ?

Du côté de la prise de vue, il ne faut surtout pas intervenir.
Prenons par exemple le cas d’une image qui serait un peu trop rouge sur votre écran. Pour près de la moitié des internautes, cette image ne serait au contraire pas assez rouge. Modifier en amont la couleur de l’objet pour qu’il s’affiche bien sur votre écran serait pire que tout car si statistiquement pour la moitié des visiteurs, la couleur serait meilleure, celle-ci serait vraiment catastrophique pour l’autre moitié.

Calibrer manuellement votre écran

Windows propose un utilitaire d’étalonnage. Pour l’utiliser, cherchez « étalonnage » dans le champ de recherche du menu « Démarrer ». Son fonctionnement est très simple, l’utilisateur est bien guidé tout au long de la procédure.
En revanche, pour Mac, je ne sais pas, dites-le moi en commentaire…

Logiciels de calibrage

En ce qui concerne les logiciels de calibrage disponibles sur le net, le moins que je puisse dire est que je ne suis pas convaincu. L’un d’eux a mis un réel bazar dans mes fichiers systèmes et j’ai eu beaucoup de mal à en effacer les bêtises. Grrr

Utiliser une sonde de calibrage :

Si les réglages de couleurs sont importants pour votre site, il est cependant incontournable de passer par l’utilisation d’une sonde extérieure. Croyez-moi, malgré un nombre d’heures conséquent passé à me documenter, à tester ou « bidouiller », je n’ai été pleinement satisfait du résultat que le jour ou j’ai acheté ma première sonde de calibrage.

En conclusion :

Selon votre besoin, si la couleur de vos objets ou produits à mettre en ligne est fondamentale, si vous vendez de la peinture, des photographies, des bijoux, il faudra impérativement vous procurer un système de calibrage. Les prix sont abordables, on trouve du matériel correct aux alentours de 200 €.
Il sera logique aussi de vous équiper d’un bon écran.

En revanche, la plupart du temps, la présentation des couleurs est moins importante et je déconseille alors de passer trop de temps à étalonner manuellement son moniteur. Les réglages proposés par l’utilitaire d’étalonnage du système d’exploitation sont suffisants.

Pour en savoir plus :

Le site de référence (Arnaud Frich) : https://guide-gestion-des-couleurs.com/calibrage-ecran.html


Les caractères spéciaux sur un clavier AZERTY

Article de mars 2011 actualisé en mars 2019

Dans cet article sur les caractères spéciaux, je propose un pense bête à imprimer et à afficher à côté de l’écran. En fin d’article, j’évoquerai la disposition de clavier BÉPO.

Quelques caractères spéciaux utiles et leur code clavier

Vous êtes convaincu·e de la nécessité de respecter l’orthographe et la typographie dans vos documents, pages Web ou autres. Malheureusement. français·e comme moi, votre clavier est un peu pauvre en touches.

Comment donc utiliser les codes ASCII pour combler les lacunes des claviers AZERTY ?

Le clavier AZERTY ne propose pas de touches clavier pour les majuscules accentuées, les diacritiques, les ligatures (œ, æ…) et autres bizarreries originalités de la langue française.

LÆTITIA

Pour écrire le prénom « LAETITIA », vous pouvez passer par l’insertion de caractères spéciaux (option disponible dans votre traitement de texte) ou laisser agir le correcteur d’orthographe intégré pour obtenir « LÆTITIA ».

Ne trouvant pas cela très pratique, vous vous décidez à afficher devant vous la page des codes ASCII. Vous y verrez que taper « 146 » tout en maintenant la touche “Alt” va vous donner le fameux caractère spécial “Æ”.

Oui mais voilà, pour le “Œ” ?

Il se trouve qu’il y a deux tables ASCII accessibles avec la touche “Alt” : Une table correspondant à “Alt” + 3 caractères, et une autre beaucoup plus complète, correspondant à “Alt” + 4 caractères dans laquelle on va trouver le “Œ”. On peut trouver ces tables ASCII en plusieurs endroits, par exemple sur symbole-clavier.com. Merci à lui.

Note : Certains claviers n’ont pas de clavier numérique. Or les insertions de chiffres associés à la touche "Alt"  ne fonctionnent pas avec les touches clavier de la rangée supérieure (ce sont des majuscules). Il faudra alors passer par les touches de fonction (souvent bleues). Voir mon article "codes ASCII sans pavé numérique".

Petit tableau des codes clavier utiles

Comme je n’utilise finalement qu’un tout petit nombre de ces caractères spéciaux, je me suis fabriqué un petit pense bête.  Une fois imprimé, j'affiche celui-ci à côté de l’écran.

Dans cette version actualisée, j’ai ajouté le point médian de l’écriture inclusive et un smiley bien pratique ☺.

Je pense que vous n’aurez bientôt plus besoin de consulter ce tableau pour écrire correctement le À ou le É tellement ces caractères sont fréquents. Mnémotechnique : 183 dessine une espèce de A majuscule sur le clavier numérique.

Tableau des caractères utiles
Clic droit / enregistrer sous… pour récupérer l’image

Le clavier BÉPO

Depuis peu, je me suis mis au clavier BÉPO et je n’ai quasiment plus besoin de ce petit tableau. En effet, en BÉPO, tous les caractères typiquement français sont directement accessibles. En plus des majuscules accentuées citées plus haut, les différentes tailles de tirets (— cadratin, – demi-cadratin, - quart de cadratin) ont leur touche particulière. Idem pour le "ê" très fréquent.

Ceci est d’ailleurs aussi valable pour les développeurs informatiques. Ceux-ci trouveront "<" et ">" sur deux touches séparées mais voisines, de même pour les parenthèses, crochets et autres accolades.

Autre avantage du clavier BÉPO… un grand confort de frappe, les doigts restant principalement sur la rangée du milieu.

Quand je retourne sur un clavier AZERTY, j’éprouve la sensation que mes doigts se tordent dans tous les sens.

En revanche, l’apprentissage n’est pas évident. Je conseille de surfer un peu sur le sujet (voir l’expérience BÉPO de Mathieu, et beaucoup d’autres…)

Le site de référence :  http://bepo.fr/wiki/Accueil dans lequel on trouvera toutes les informations nécessaires.