Catégories
RWRN RWRN-cours

Le parapente de la rédaction Web

Dans ce cours nous allons aborder les différents éléments qu’il faut associer pour assurer le référencement naturel d’une page Web rédigée par vos soins.

Un message écrit parvient à son destinataire quand il est porté par une rédaction adaptée au média utilisé. La rédaction Web est une discipline très technique. On ne s’improvise pas rédacteur Web. On n’assemble pas un parapente sans mode d’emploi ni expérience préalable !

Vous n’êtes pas le pilote du parapente, vous êtes le fabriquant du parapente. Quand vous rédigez pour le Web vous construisez un dispositif (le parapente) pour porter un message (le parapentiste). Le dispositif porteur est complexe mais s’il est assemblé convenablement il remplit parfaitement son rôle.

Informer les moteurs de recherche pour informer les lecteurs

Une des fonctions de la rédaction Web est d’informer correctement les moteurs de recherche. Il s’agit de permettre au public visé de recevoir par l’intermédiaire des moteurs de recherche les messages attendus, en réponse aux recherches effectuée préalablement par le public sur les moteurs.

Vous ne rédigez pas prioritairement pour les moteurs de recherche. Vous rédigez pour des humains en composant avec des robots et leur comportement en partie prévisible.

Référencement naturel et rédaction journalistique

Sur le schéma présenté plus bas, plusieurs points sont surlignés en orange pâle. Il s’agit des points que les moteurs de recherche prennent en compte plus particulièrement. Ces points relèvent d’une technique rédactionnelle caractéristique de l’écrit pour le Web.

Les autres points se rapportent à une technique rédactionelle plus générale, relevant de l’écrit journalistique et libérée des contraintes du média Web.

En réalité, les deux aspects techniques de la rédaction (référencement naturel et rédaction journalistique) se complètent parfaitement. L’application de l’une et de l’autre des techniques rendront votre texte plus cohérent et plus facile à interpréter par vos lecteurs.

Les éléments du parapente

Nous allons nous intéresser à la forme et non au fond. Quel que soit le sujet traité (quelle que soit la physionomie du message porté — le parapentiste), la forme d’un écrit pour le Web sera toujours celle d’un parapente.

Référencement, rédaction et structuration sont étroitement liés, comme le sont l’aile du parapente, les suspentes, les élévateurs, la sellette et ses sangles.

L’aile du parapente

Composée de caissons juxtaposés, l’aile est associée à 4 points fondamentaux :

  • La pertinence du sujet
  • La fiabilité du propos
  • Le poids des références externes
  • La qualité du maillage interne

Sont associés sur l’aile deux premiers points relevant de choix de communication d’ordre journalistique et éthique. Les deux autres points sont en lien avec le média Web. Ces deux derniers points méritent quelques précisions.

Le poids des références externes

Les références externes désignent pas les liens que vous insérez dans votre texte pour illustrer ou compléter votre propos. Il s’agit ici de liens qui pointent de l’extérieur vers votre texte. Plus précisément, il s’agit de liens insérés dans les textes de sites à très forte fréquentation pointant vers votre propres site. On les nomment aussi liens entrants ou backlinks.

Si un site connu mentionne votre site en référence et met en place un lien pointant vers lui, c’est un levier puissant de référencement de votre propre site. La position de votre site dans les résultats de recherche est donc en grande partie liée à votre réputation auprès des ténors du secteur.

Ce “parrainage” des petits par les grands ne peut être envisagé qu’avec des contenus de qualité, pertinents et fiables, rédigés selon les règles en usage. Je vous invite à visionner cette vidéo de Jean-Marc Hardy pour évaluer à sa juste mesure le poids des références externes.

La qualité du maillage interne

Le maillage interne désigne le réseau de liens intégrés dans le texte et pointant vers les différentes parties du texte. C’est le cas quand il s’agit d’une seule page Web (site one page). Le maillage interne désigne aussi l’ensemble des liens qui pointent vers les différentes pages d’un même site (quand celui-ci est multipage).

Les liens de page à page peuvent pointer sur telle ou telle partie de la page cible (c’est même recommandé). C’est plus confortable pour le lecteur. De plus, cette précision de pointage est prise en compte par les moteurs de recherche.

La pertinence de ce maillage est aussi un point important pour l’optimisation du référencement naturel. La pertinence du maillage interne repose sur l’adéquation sémantique — les acteurs du SEO parlent d’affinité — entre la page source et la page cible. Il est nécessaire que le sujet de la page cible complète vraiment le sujet de la page source.

Pertinence du sujet et fiabilité du propos

La pertinence et la fiabilité ne sont seulement une question d’éthique journalistique. C’est la meilleure garantie pour être repéré par des lecteurs sérieux puis référencé rapidement par des ténors du Web ayant toute la confiance de leur lectorat.

Prenez le temps de peaufiner votre documentation, vérifiez vos sources, soyez honnête dans votre argumentation, bref, soyez pros !

Il est recommandé d’insérer au minimum trois types de liens dans un article ou une page Web :

  • Un lien vers une autre page du site
  • un lien vers un site partenaire (non concurrentiel), pour compléter vos écrits
  • un lien vers un site d’autorité, pour appuyer votre propos

Les suspentes du parapente

Les suspentes du parapentes représentent ici les ficelles du métier de rédacteur… Pour être plus exact, il s’agit de la grosse ficelle qui consiste à miser sur la proximité du propos avec les besoins du lecteur.

Le rédacteur Web s’adresse à un “persona”. Il écrit pour une personne virtuelle, un lecteur qu’il connaît à travers ses habitudes et besoins supposés. Il s’agit là d’un aspect courant dans une démarche centrée utilisateur. Pour plus de détails à ce sujet je vous renvoie vers quelques sites et articles édifiants :

Ayant identifié votre interlocuteur, vous allez pouvoir “suspendre” votre texte à votre sujet pertinent et à votre documentation fiable (l’aile du dispositif).

La sellette du parapente est relié à l’aile par 2 élévateurs auxquels sont fixées les suspentes. Notre schéma en montre 4 (… sur les 6 traits dessinés, 2 sont les freins). En réalité il y en a bien plus !

Convenons que chaque suspente est une affirmation ayant un rapport de proximité avec votre persona (votre lecteur ou lectrice cible). Nous pourrions classer ces affirmations en plusieurs groupes, chacun faisant respectivement appel à :

  • la proximité temporelle (actualité du sujet traité…)
  • la proximité géographique (proche du domicile ou du lieu d’activité du lecteur…)
  • la proximité socio-professionnelle (concernant le métier et le statut du persona…)
  • la proximité psycho-affective (proche des préoccupations et des désirs du lecteur-cible…)

Les élévateurs du parapente

Les élévateurs servent de liaison entre la sellette et les suspentes. Sur le schéma du parapente, ils sont repérés par 2 points verts se rapportant à l’adaptation du lexique au lectorat (public cible) et au respect des codes de l’écrit.

L’adaptation du lexique au public cible

L’adaptation du lexique au public cible consiste à choisir son vocabulaire en fonction des lecteurs auxquels le texte s’adresse. Faut-il utiliser tel ou tel mot technique appartenant aux jargons professionnels quand on s’adresse au grand public ? Est-il approprié d’utiliser des termes appartenant aux langages familiers dans un article de fond adressé à des scientifiques ?

Considérez le mot “lectorat” et l’expression “public cible”. Lequel de ces 2 termes vous semble le plus adapté au public des apprenants en formation au GRETA ? Ces 2 termes n’appartiennent pas exactement au même niveau de langage (registre de langue).

Les 2 termes ne s’insèrent pas non plus exactement dans le même champ sémantique. Nous reviendrons plus bas sur la question du champ sémantique.

En annexe d’une page Web utilisant des mots nouveaux ou inhabituels pour les lecteurs, il est recommandé d’insérer un glossaire. Proposer un lien vers un glossaire existant est une alternative envisageable. Elle conduit cependant votre lecteur hors de l’espace de communication mis en place.

Le mot “glossaire” est parfois remplacé par les mots “lexique” ou “vocabulaire”. Voici un exemple de lexique en annexe, concernant la formation professionnelle : https://www.helloworkplace.fr/lexique-formation-professionnelle/

Liens pour approfondir le sujet

Le respect des codes de l’écrit

Les codes de l’écrit dont il est question ici ne se cantonnent pas aux seuls codes de l’écrit pour le Web. Il s’agit des codes de l’écrit en général :

  • la syntaxe de la langue (la construction des phrases) ;
  • l’orthographe lexicale et grammaticale (l’écriture usuelle des mots et les changements d’écriture liés à leur fonction grammaticale dans la phrase) ;
  • la ponctuation (la manière de séparer les parties d’une phrase pour en améliorer la compréhension).

L’apprentissage de ces codes s’effectue dès les premières années de la scolarité. En réviser les nombreux aspects au cours de sa vie professionnelle est vivement recommandé. La rédaction est une activité très cadrée !

Lien pour approfondir le sujet

Les sangles (et le casque)

Sangles et casque sont des éléments de sécurité. Il s’agit de veiller à ce que le message soit bien attaché à la structure du texte. Il faut que toutes les conditions SEO soient remplies pour que le message arrive à destination.

Un choix pertinent de mots clés

Le choix des expressions et mots clés est une étape clé du SEO. La pertinence d’une expression ou mot clé repose sur plusieurs facteurs :

  • la fréquence de recherche de ce mot-clé sur Google
  • la cohérence de ce mot clé par rapport au sujet traité
  • l’efficacité du mots clé sur le plan marketing

Il existe plusieurs outils à disposition des rédacteurs et des référenceurs pour déterminer la pertinence d’un mot clé. Vous étudierez cela en web marketing. Un concept doit cependant être bien compris avant de mener cette étude : la courte, moyenne et longue traîne.

Voici une vidéo d’Oliver Andrieu, spécialiste SEO reconnu, qui explique assez clairement de quoi il s’agit.

Des mots clés aux endroits stratégiques

En SEO, il est primordial de prendre en compte les endroits de la page examinés prioritairement par Google. Ce sont dans ces endroits, qualifiés de stratégiques, que doivent être placées les expressions et mots clés. On les nomment les endroits chauds de la page.

Un champ sémantique cohérent

Pour être positionné dans une page de résultats de recherche, il est indispensable de travailler la cohérence du champ sémantique de chaque page Web. Cela consiste à utiliser un lexique parfaitement adapté au sujet traité, enrichi par des expressions en étroit rapport avec la thématique de la page.

L’outil le plus simple à mettre en œuvre pour évaluer la pertinence du champ sémantique utilisé est l’extension du navigateur Chrome nommée Text Optimizer. Cet outil est un produit annexe de l’application en ligne 1.fr, destinée à optimiser le choix lexical en rédaction Web. Limité dans leur version gratuite, ces outils peuvent cependant être testés une dizaine de fois dans une journée.

Lien pour approfondir le sujet

Les meilleurs outils d’analyse sémantique
Pourquoi et comment optimiser le champ sémantique SEO de vos articles

Une quantité suffisante de mots

Pour que Google puisse analyser correctement le contenu d’une page Web, il est nécessaire de lui fournir un maximum d’éléments. Il est recommandé de rédiger des textes d’au moins 1000 mots. Le référencement idéal s’effectue statistiquement sur des textes de 1500 à 3000 mots.

En SEO, il est souvent question d’une limite de 300 mots minimum (voir l’article d’Alain Vanolli, un peu plus bas…). Cela concerne des contenus rédactionnels relativement synthétiques. Se positionner dans le top10 des pages de résultat de Google avec si peu de mots suppose un traitement optimal du sujet. Avec une grande pertinence de propos et une grande qualité de structuration, c’est possible !

En vous documentant sur la question, vous allez voir que le longueur du texte est un paramètre SEO parmi d’autres. La longueur du texte entre en compte parallèlement à la pertinence du propos. Elle est à prendre en considération en fonction votre réputation en ligne et de la concurrence rencontrée sur le sujet traité.

Olivier Andrieu, a publié récemment une capsule vidéo sur le sujet, je vous invite à la visionner.

En apprendre davantage avec Alain Vanolli

La sellette du parapente

Les élévateurs sont fixés à la sellette du parapente. L’adaptation du lexique est “fixée” à l’accessibilité des contenus. Le respect des codes de l’écrit est “fixé” à la concision syntaxique.

L’accessibilité des contenus

Une page Web doit pouvoir s’afficher sur tous les écrans mais surtout pouvoir être lues par des robots lecteurs. En effet, les personnes malvoyantes ou non-voyantes utilisent des outils dédiés qui leur lisent les sites consultés. Il est donc important de rédiger des textes qui présentent aussi des qualités d’audition.

Pour rendre un site accessible, il est important de prévoir des textes alternatifs aux images significatives (photos documentaires, schémas descriptifs, graphiques, etc.). L’attribut alt="", dans la balise HTML <img> est notamment réservée à cet usage.

Les légendes, sous les images, sont des textes dont le contenu doit être différent de celui du texte alternatif. Les légendes sont lues par les robots lecteurs mais pour les voyants, il est inapproprié qu’elles mentionnent ce qui se voit parfaitement dans l’image.

En savoir plus sur l’accessibilité des textes et des images :

La concision syntaxique

La concision syntaxique consiste à privilégier l’usage de phrases courtes. En complément, pour faciliter la lecture du texte, l’utilisation de paragraphes courts est recommandée. Examinons cette question plus en détails.

Une phrase devrait contenir idéalement 15 à 22 mots. À partir de 24 mots, il est absolument nécessaire de couper la phrase en 2. Par ailleurs, un paragraphe de 3 ou 4 phrases d’une quinzaine de mots constitue une unité rédactionnelle idéale.

Le moyen le plus simple de vérifier si votre syntaxe est satisfaisante est d’utiliser des outils de lecture automatique. Vous discernerez à l’oreille la qualité de vos texte. Après avoir optimisé la longueur des phrases et des paragraphes, vous obtiendrez des textes faciles à lire et agréables à écouter.

Voici un site construit avec des phrases et les paragraphes courts :

Une structure hiérarchisée

La structure d’un site Web désigne plusieurs réalités. Suivant le contexte dans lequel il est question de structure, ce mot désigne :

  1. la structure HTML du site (l’ensemble des parties balisées du site, côté code source)
  2. le plan rédactionnel adopté (l’organisation logique des idées présentées sur le site)
  3. l’arborescence du site (un des aspects de l’architecture des l’informations du site et de la catégorisation des contenus)
  4. le maillage interne du site (l’articulation des pages et des parties du site entre elles)
  5. la structure visuelle des pages suivant la largeur de la fenêtre d’affichage (la disposition des éléments de la page dans l’espace disponible)

Tous ces aspects sont en effet structurés et tous doivent être hiérarchisés avec soin. Je les présente ici de manière ordonnée, simplement pour m’y référer plus facilement.

Dans la figure du parapente qui nous sert de fil conducteur, les 2 premières acceptions du terme “structure” (voir plus haut) forment l’assise et le dossier de la sellette du parapente. Le message porté par le dispositif rédactionnel y est installé confortablement.

La structure HTML

La structure HTML est souvent nommée le squelette d’un site Web. Cette structure va soutenir les contenus et soutenir le texte en particulier. C’est elle qui va vous permettre d’informer clairement le navigateur sur vos attentes en matière d’affichage.

Il s’agit de coder (en HTML) le découpage, la hiérarchisation et l’organisation du texte pour qu’il s’affiche correctement à l’écran. Ce codage s’adresse au navigateur d’abord puis au lecteur ensuite.

Codage HTML et plan rédactionnel sont inséparables. Pour faciliter leur mise en œuvre, l’utilisation d’un éditeur Markdown est vivement recommandée. Je conseille StackEdit en ligne et Typora hors ligne.

Le plan rédactionnel

Concernant le plan rédactionnel, vous entendrez beaucoup parler du plan journalistique en pyramide inversée. Isabelle Canivet et jean-Marc Hardy nous en parle dans la vidéo ci-dessous.

Ce plan n’est pas le seul à pouvoir être adopté lors de la rédaction d’un article pour le Web. Les plans chronologiques ou énumératifs sont fréquents et il en existent de nombreux autres.

Cependant, tous les plans ne se prêtent pas facilement au jeu des mots clés disposés en premier. Révéler dès l’introduction les principaux éléments de la conclusion n’est pas toujours possible. Ceci explique en partie le succès et les limites du plan en pyramide inversée.

J’ai recensé sur une carte heuristique 14 plans rédactionnels différents. Les uns ont pour vocation de structurer pour informer, les autres de structurer pour convaincre. Vous pouvez en prendre connaissance sur Mind Meister.

À propos de structure(s) :

En savoir plus

Voici quelques adresses utiles pour se faire une idée encore plus précise du sujet :

Vous trouverez de nombreux liens complémentaires sur netboard.me.

Catégories
FCS FCS1-cours RWRN RWRN-exos

Rédiger une page Web en 10 étapes

Dans ce TD nous allons apprendre à structurer et styliser une page Web en tenant compte des contraintes de la rédaction et du référencement des pages Web. Nous utiliserons 3 outils : un éditeur Markdown en ligne (StackEdit), un éditeur de carte heuristique en ligne (TextToMindMap) et un éditeur de code en local (Brackets).

Pour l’utilisation de l’éditeur Markdown, je vous renvoie vers le cours intitulé Utiliser StackEdit. Pour la prise en main et la personnalisation de l’éditeur de code Brackets, je vous renvoie vers les cours Personnaliser Brackets et les activités proposées dans le TD intitulé Manipuler le code source avec Brackets. Concernant TextToMindMap, la prise en main est très intuitive : aucun prérequis n’est exigé.

Pour réaliser ce TD, il est indispensable d’avoir une vision claire de ce qu’est une structure élémentaire HTML. Pour ceux qui découvriraient ce concept, je vous invite à consulter le cours intitulé Identifier la structure d’une page HTML

L’objectif de ce TD est d’afficher dans la fenêtre d’un navigateur une page HTML dont la structure rédactionnelle suit un plan logique simple à percevoir. De plus, dans la perspective d’une publication en ligne, nous souhaitons structurer le texte de manière à en optimiser le référencement c’est à dire l’indexation dans les pages de résultats des moteurs de recherche (= SEO ou Search Engine Optimisation).

Nous allons procéder en suivant les 10 étapes suivantes :

  1. Collecter la documentation
  2. Construire l’arbre des mots-clés
  3. Établir le plan dans un éditeur Markdown
  4. Optimiser la rédaction des titres
  5. Tester la cohérence de la structure en examinant le sommaire
  6. Rédiger l’introduction (chapeau ou chapô)
  7. Rédiger les paragraphes en utilisant les mots-clés disponibles
  8. Tester la syntaxe avec un robot lecteur
  9. Exporter en HTML la version finalisée
  10. Personnaliser la présentation de la page

Il existe bien sûr une étape préparatoire incontournable : le choix du sujet… Pour illustrer ce TD, je me baserai sur un texte proposé lors d’une session précédente par un stagiaire du GRETA.

Étape 1 – Collecter la documentation

Le sujet étant choisi, il est nécessaire de rassembler les informations susceptibles d’être publiées dans notre document.

Rédiger un premier jet (une sorte de brouillon), sans contraintes particulières, est une solution. Collecter des textes libres de droit et les assembler rapidement en est une autre.

Il faut cependant garder à l’esprit que les opérations à mener pour rendre le texte conforme aux exigences du Web vont vous amener à remanier profondément votre brouillon.

Utiliser StackEdit ou un autre éditeur Markdown est un bon choix pour rassembler les textes collectés et rédigés. Utiliser des outils comme Notepad++ sur PC ou TextEdit sur Mac sont aussi de bonnes alternatives.

Il est déconseillé d’utiliser Word, sous peine de devoir nettoyer le texte ultérieurement à cause plusieurs lignes de codes inappropriées, collées souvent en même temps que les textes copiés.

Étape 2 – Construire l’arbre des expressions et mots clés

Le plus simple pour réaliser cette étape est d’utiliser un éditeur de cartes heuristiques (ou cartes mentales, mind map en anglais).

Je vous propose d’utiliser l’application en ligne Text2MindMap. Celle-ci permet de saisir un texte indenté d’un côté et de visualiser une carte heuristique de l’autre côté, c’est d’une simplicité élémentaire !

XMind est aussi un bon outil en local, disponible sur toutes les plateformes (télécharger et installer XMind 2020 — Free download — via xmind.net). Une version d’XMind fonctionne en ligne, à condition d’être connecté à un espace cloud pour y enregistrer les données.

Il s’agit, en partant du sujet principal abordé, de déterminer dans un premier temps l’expression courte ou le mot clé de la page (le tronc de l’arbre). Notez qu’il s’agira des premiers mots de votre titre h1.

Ensuite, en explorant le champ lexical et sémantique du sujet, il s’agit de trouver et noter les expressions et mots clés voisins, en les regroupant par affinité. Vous obtiendrez ainsi un arbre (ou plutôt la ramure d’un arbre) plus ou moins étendu selon le temps que vous y consacrerez.

Le site rimesolides.com permet d’élargir le champ lexical d’un sujet.

En activant les préférences de Text2Mindmap, vous avez le choix entre 2 types de colorations de la carte. La première (Branch) met en évidence les expressions et mots issus d’une même branche. La seconde (Level) met en évidence les expressions et mots clés situés à un même niveau hiérarchique.

Anticiper le référencement naturel

Le référencement naturel se base sur 2 types d’expressions et mots clés :

  • les expressions ou mots clés courts, thématiquement et sémantiquement très proches du sujet et très “grand public”
  • Les expressions ou mots clés plus long, en rapport avec le sujet mais plus spécifiques à tel ou tel groupe de personnes.

Les premiers sont fréquemment utilisés dans le champ de saisie des moteurs de recherche et ils sont aussi très utilisés comme expressions ou mots clés sur les sites concurrents.

Les seconds sont moins souvent saisis sur Google ou Bing mais ils sont peu utilisés comme expressions ou mots clés sur les sites concurrents. On les appelle les mots clés longue traîne (ou mots clés de longue traîne ou long tail, en anglais).

Dans Text2MindMap, placez les premiers à proximité du sujet central (expression ou mot clé principal de la page) et placez les seconds à l’extrémité de vos branches.

Nous aurons l’occasion de revenir sur ce point pendant la formation mais vous pouvez vous documenter à ce sujet en consultant ces articles :

Distinguer l’arbre et le plan

Après avoir réalisé l’arbre des expressions et mots clés, vous aurez une idée plus claire de votre sujet. Vous commencerez aussi à distinguer des plans possibles pour présenter votre sujet.

Faites cependant attention à ne pas transformer inconsciemment l’arbre des expressions et mots clés en plan rédactionnel thématique.

Étape 3 – Établir le plan dans un éditeur Markdown

En vous appuyant sur la documentation collectée et sur l’arbre des mots-clés, établissez le plan de votre texte, en suivant un modèle adapté à votre propos et à votre public.

StackEdit est un outil parfaitement adapté pour commencer à établir la structure rédactionnel de votre contenu principal.

Saisissez votre plan en langage Markdown. Dans la fenêtre de droite (si elle est activée), vous pouvez voir à quoi ressemblera votre texte une fois exporté avec l’option “Styled HTML”.

Dans l’exemple utilisé pour illustrer ce TD, le plan a été choisi en utilisant les expressions clés d’une seule branche, celle des modèles célèbres de motos mythiques.

Le plan thématique n’est pas systématique

Utiliser Text2MindMap pour établir le plan du texte à rédiger est très tentant. Cela est d’autant plus tentant qu’il suffit de sélectionner la liste affichée dans la colonne de gauche de Text2MindMap pour la copier et la coller dans StackEdit. Un peu de balisage et le tour est joué…

Je vous conseille cependant de bien dissocier les 2 étapes, même si les expressions les plus proches de votre sujet central ont toutes les chances de s’insérer dans les sous-titres h2 de votre article.

En effet, Le choix d’un plan autre que le plan thématique doit être envisagé. Un plan chronologique ou par points de vue ne se structure pas comme un plan documentaire. Et le plan en pyramide inversée, recommandé pour la publication en ligne, se structure différemment.

Vous trouverez une liste de plans rédactionnels selon les besoins sur Mind Meister.

Poser une question pour trouver un plan

Un des moyens utilisés pour trouver le plan d’un article consiste à poser une question en rapport avec avec le sujet traité puis à choisir le plan en fonction du mot utilisé en début de question.

  • Si la question commence par “Comment” (Comment faire ceci ? Comment choisir cela ? etc.), le plan à adopter sera probablement un plan par étapes avec des explications techniques.
  • Si la question commence par “Quoi” ou “Que” (Quoi faire pour … ? Que choisir pour … ? etc.), le plan à adopter sera probablement un plan guide avec une ou plusieurs propositions.
  • Si la question commence par “Quel” ou “Quelle” (Quel est le … de ceci ? Quelle … choisir ?, etc.), le plan à adopter sera probablement une réponse précise plus où moins détaillée.
  • Si la question commence par “Quand” ou “Où” (Quand faire ceci ? Où choisir cela ? etc.), le plan à adopter sera probablement une réponse précise avec date(s) ou localisation(s) explicite(s).
  • Si la question commence par “Pourquoi” (Pourquoi faire ceci ? Pourquoi choisir cela ? etc.), le plan à adopter sera probablement un plan argumenté avec preuves à l’appui.

Il existe un outil en ligne conçu pour lister les questions les plus posées par les internautes sur telle ou telle thématique. Testez la version gratuite de l’application 1.fr

Étape 4 – Optimiser la rédaction des titres

Il s’agit maintenant d’optimiser la rédaction des titres pour permettre à vos lecteurs de percevoir d’un seul coup d’œil la logique de votre plan. La seule lecture des titres doit permettre de savoir précisément de quoi vous parlez dans votre article.

Règle incontournable de référencement naturel

L’expression ou mot clé principal de la page doit impérativement être placé dans les premiers mots du titre h1. Les expressions ou mots clés les plus pertinents seront ensuite placés dans les premiers mots des titres h2. Les autres expressions et mots clés seront plus tard répartis dans le texte des paragraphes.

De nombreux conseils sont publiés en ligne au sujet de la rédaction des titres. Je vous recommande la lecture (et la prise en compte…) du contenu des articles suivants :

La loi de proximité

J’attire votre attention sur un principe journalistique incontournable : plus ce que vous dites concerne le lecteur de près, plus celui-ci s’y intéressera.

Vous pouvez tenir compte de ce principe dans la rédaction des titres de votre article. Pensez-y également quand vous rédigerez l’introduction et les paragraphes de vos différentes parties.

Consultez le glossaire d’infowebmaster.fr pour en savoir plus sur la loi de proximité. Une recherche sur le Web à ce sujet (loi de proximité et rédaction) vous conduira vers de nombreux articles traitant de la rédaction Web en général.

Étape 5 – Tester la cohérence de la structure

Avec StackEdit, nous pouvons à ce stade de notre travail exporter notre plan en HTML, en choisissant l’option “Stylised HTML with TOC”. Je vous rappelle que TOC est l’acronyme de l’expression anglaise Table Of Content (… autrement dit sommaire ou table des matières).

Une fois l’exportation du plan effectuée (en ayant pris soin de nommer convenablement le fichier exporter), vous devriez pouvoir visualiser le sommaire de votre texte et en apprécier la cohérence.

Ouvrez le fichier exporté avec votre navigateur. Le sommaire est placé en colonne latérale… et les liens vers les ancres fonctionnent ! Si la lecture du sommaire ne vous semble pas offrir une vision claire de votre sujet, reprenez votre travail à l’étape précédente jusqu’à ce que vous soyez satisfaits.

Quand tout est au point, vous avez parcouru la moitié du chemin et vous allez pouvoir attaquer la rédaction proprement dite. Comme pour le plan, il faudra suivre les règles du référencement naturel (SEO).

Vous veillerez à ne pas oublier que vous vous adressez à un public précis, clairement identifié. Vous allez donc choisir un ton particulier, l’angle qui sous paraîtra le mieux convenir pour aborder le sujet et vous opterez pour un vocabulaire adapté à votre lectorat.

Étape 6 – Rédiger l’introduction

L’introduction, nommée aussi chapeau ou chapô, annonce clairement la couleur. Il s’agit de présenter clairement tout ce que vous allez développer dans la suite du texte.

Soyons clairs, la règle est incontournable : l’expression ou mot clé placé en tête du titre h1 doit être placée au tout début de l’introduction.

Ce n’est pas une option, c’est une obligation. Nous pourrons nuancer cette règle en utilisant des synonymes ou des expressions très voisines mais pour le moment, appliquons-la à la lettre.

Dans le même ordre d’idée, inutile de se creuser la cervelle pour savoir ce que vous allez mettre dans l’introduction. Vous allez rédiger des phrases courtes qui reprennent tous les mots clés placés dans les sous-titres. Plus tard, nous verrons comment nuancer cela mais, pour l’instant, suivez mes directives et vous y verrez tout de suite plus clair !

Inutile de créer un nouveau fichier, complétez le plan rédigé avec StackEdit.

Pour approfondir le sujet, je vous invite à lire l’article de Sophie Leclerc intitulé Rédiger un chapeau pour ses articles web : la méthode

Baliser ou ne pas baliser l’introduction-chapeau en h2

Quelques auteurs proposent de baliser l’introduction en h2 (https://www.g1site.com/rediger_chapeau_article/). Vous trouverez cette recommandation dans plusieurs articles en ligne. Ne suivez pas ce conseil. La balise h2 est une balise de titrage, c’est donc un moyen de structuration. Utilisé pour l’introduction la balise h2 contraint l’utilisation de balises h3 pour les sous-titres suivants ou l’utilisation d’une première balise h2 sans paragraphe.

L’introduction est le premier paragraphe de votre article, en tant que tel il focalise déjà l’attention des robots. Balisez plutôt le paragraphe d’introduction entre <strong> et </strong>. Si vous souhaitez donner à l’introduction une taille proche des titres h2, identifiez l’introduction (via un id ou une class) et stylisez-la de la manière voulue vis une instruction CSS.

Étape 7 – Rédiger les paragraphes

Rédiger les paragraphes de votre texte suit les mêmes règles de référencement que celles concernant la rédaction de l’introduction.

Pensez SEO

Il convient de placer en tête du premier paragraphe le mot clé du sous-titre qui précède (ou une expression équivalente, un synonyme, une expression connexe…).

Utiliser un synonyme ou une expression connexe évite les lourdeurs. Placez des expressions longue traîne au début des seconds ou troisièmes paragraphes puis au début des intertitres h3 et suivants (https://editoile.fr/optimiser-le-placement-des-mots-cles-dans-une-page-web/).

Soyez concis et précis

Ce conseil est à prendre en compte autant que possible : traitez une seule idée par paragraphe. Dans un paragraphe vous affirmez votre idée en la contextualisant puis vous prouvez votre affirmation. Vous développez ensuite l’idée, en articulant votre propos avec le paragraphe suivant.

Vous rédigerez vos paragraphe en veillant à la concision de vos phrases. Vous rédigerez des phases courtes (15 mots environ) et vous couperez systématiquement toute phrase de plus de 24 mots. Vous gagnerez ainsi en clarté et faciliterez la lecture de votre texte.

Restez simples, utilisez des mots concrets adaptés à votre lectorat et au média Web. Gardez vos envolées lyriques pour les médias imprimés, pour vos podcasts ou vos émissions radios. Quand vous avez terminé de rédiger vos paragraphes, il est nécessaire d’en tester la qualité.

Étape 8 – Tester la syntaxe avec un robot lecteur

Il existe un moyen simple et efficace pour évaluer la qualité de la rédaction d’un texte. Faites-le lire par un robot lecteur !

Vous trouverez sur MindMeister une liste de sites proposant des services de synthèse vocale. Il est parfois nécessaire de scinder le texte à faire lire pour pouvoir bénéficier du service offert.

Sur MacOs, un service intégré de lecture du texte est à la disposition des utilisateurs. Allez dans le menu Modifier > Voix > Commencer à parler. Ce service est notamment utilisable directement dans WordPress, depuis le navigateur.

Cette technique permet de repérer à l’oreille les phrases trop longues. Vous saurez également si la ponctuation de votre texte est à améliorer. Les étourderie de saisie et les répétitions gênantes seront vite repérées.

Faites également relire votre texte par de véritables lecteurs humains, ayant si possible une bonne orthographe.

Étape 9 – Exporter en HTML la version finalisée

Dans StackEdit, une fois effectuées les corrections à apporter au texte, exportez-le au format HTML. Choisissez l’option “Styled HTML” pour faciliter le travail qui va suivre.

Vous obtiendrez une simple page Web, stylisée avec clarté par la feuille de style mise au point pour StackEdit. Son code source est propre. Seules 2 classes identifient le <body> et la <div> servant de conteneur principal.

La seconde classe peut s’avérer utile pour utiliser des feuilles de style utilisant les identifiants “wrapper” ou “content”. Il faudra alors en modifier l’identification (voir plus bas).

Étape 10 – Personnaliser la présentation de la page

Utilisez des feuilles de style simples pour tester différentes présentations, selon la technique vue en début de formation.

Vous trouverez plusieurs feuilles de style à personnaliser à cette adresse : graphizm.fr/rwrn/css-simples.zip

Vous pouvez les tester en l’état en utilisant le code HTML suivant, à insérer dans le <head> à la place du lien existant puis à personnaliser…

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/nomdelafeuilledestyle.css">

➜ Remplacez nomdelafeuilledestyle.css par l’un des noms suivants :

  • abricotine-serif.css
  • ash.css
  • awsm.css
  • brackets.css
  • cursus.css
  • dark-three.css
  • dyslex.css
  • light-one.css
  • pyxill.css
  • simple.css
  • solarized-dark.css
  • solarized-light.css
  • swiss-fw.css
  • typeanything-lato.css

Annexe

On trouve souvent sur le Web des feuilles de style utilisant systématiquement une division identifiée avec id="wrapper". Ce nom signifie “enveloppe” et il identifie la plupart du temps une division englobant tous les éléments contenus dans le body.

Si vous avez à styliser rapidement une page HTML ainsi structurée, voici 2 feuilles de styles qui vous permettront de le faire. Dans ces feuilles de style, tous les sélecteurs sont de la forme #wrapper element {propriété: valeur}.

➜ En utilisant les liens ci-dessous, vous pouvez tester 2 feuilles de styles utilisant l’identifiant id=“wrapper” pour sélectionner les élément de la page HTML.

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/css-avec-wrapper/swiss-bt.css">

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/css-avec-wrapper/working.css">

Ces feuilles de style s’appliqueront correctement si et seulement si le contenu à styliser est placé dans une division identifiée avec id="wrapper".

Bonus

Des variantes de la feuille de style awsm.css sont disponibles dans le dossier “awsm-themes” placé dans le dossier “css-simples”.

Voici un lien vers l’une de ces variantes :

<link rel="stylesheet" href="http://graphizm.fr/rwrn/css-simples/awsm-themes/awsm_theme_black.css">

Vous en découvrirez encore davantage en vous rendant sur le site du développeur d’awsm.

Approfondir le sujet

Le cours intitulé Le parapente de la rédaction Web vous apportera des informations complémentaires sur le référencement naturel d’une page Web. Plusieurs liens ont été insérés dans le cours, pour vous permettre d’aller encore plus loin. Ce cours concerne davantage les apprenants se préparant à valider le Titre Professionnel Designer Web.

Catégories
FCS FCS1-cours RWRN RWRN-cours

Utiliser StackEdit

Dans ce cours nous allons apprendre à utiliser le langage Markdown pour structurer un article destiné à la publication Web, en nous appuyant sur les fonctionnalité d’une application en ligne : StackEdit. Nous verrons aussi comment exporter au format HTML les contenus structurés avec StackEdit.

StackEdit est un éditeur Markdown en ligne ergonomique, facile à prendre en main et parfaitement adapté à la structuration de contenus textuels.

Ses fonctionnalités permettent (entre autres choses…) de publier des contenus directement sur les principales plateformes de blogging. Elles permettent aussi d’éditer les contenus des sites construits avec des CMS basés sur Markdown (Pico, Grav, etc)

Présentation de StackEdit

Le fichier immédiatement visible au lancement de l’application est un texte d’accueil en anglais (intitulé “Welcome”). Dans Chrome, un clic droit dans la zone des boutons de formatage du texte (bandeau noir) permet d’accéder à la traduction en français. Tout est expliqué… ou presque, et cela devient un peu compliqué vers la fin du document !

Nous disposons d’une fenêtre (ou zone) d’édition — à gauche — et d’une fenêtre (ou zone) de prévisualisation — à droite .

Les boutons placés entre les 2 zones verticales permettent de gérer l’affichage des différentes zones.

Les boutons situés en haut à gauche et en haut à droite permettent d’ouvrir des menus complémentaires. Le menu de gauche répertorie vos documents et celui de droite permet d’accéder à de nombreux sous-menus.

Test de codage Markdown

Je vous propose de coder en Markdown un texte très simple, dans un document que vous intitulerez “test”. Voici la première partie du texte à coder :

Rien de compliqué ! Il est vrai que le code Markdown en gris clair ne se voit pas très bien… Si vous ne parvenez pas à coder en Markdown en saisissant le bon code, vous pouvez toujours utiliser les boutons de la barre d’outils noire (ou barre de formatage, au dessus de la zone d’édition).

Si vous souhaitez voir une liste de toutes les balises Markdown pour mieux vous y retrouver (ou tester l’utilisation d’autres balises), cliquez sur le bouton avec le signe # (en haut à droite), puis cliquez sur l’onglet “Markdown cheat sheet”.

Pour ceux qui souhaitent aller un petit peu plus loin, voici la deuxième partie du texte à coder :

Saut de ligne et saut de paragraphe

Les éditeurs Markdown gèrent de manière très simple les sauts de ligne et les sauts de paragraphe. Cependant nos habitudes de traitement de texte nous amènent à répéter la même erreur.

En effet, avec StackEdit (et tout éditeur Markdown) il faut saisir 2 retours à la lignes (taper 2 fois sur la touche “entrée”) pour coder un saut de paragraphe. Un simple retour à la ligne code un saut de ligne (un <br> en HTML).

➜ Ce point est très important en matière de structuration rédactionnelle du texte pour le Web. En effet, pour ce type de publication, il convient de rédiger des paragraphes concis, traitant d’une seule idée à la fois. Évitez dans la mesure du possible les sauts de ligne au sein d’un même long paragraphe.

➜ Jetez un œil sur cet article du site audreytips.com et interrogez-vous sur ce qu’apporte le découpage en paragraphes courts (3 ou 4 phrases maximum).

Exporter le fichier test en .md

Vous savez baliser en Markdown des titres, des paragraphes, des listes à puces ou ordonnées, des citations… C’est super ! Il est grand temps maintenant de sauvegarder votre travail.

Le document saisi dans StackEdit est automatiquement sauvegardé dans notre navigateur. C’est cool mais pour plus de sûreté vous allez exporter sur votre bureau le fichier “test”, en utilisant le format markdown (extension .md).

➜ Un clic sur l’icône de StackEdit pour ouvrir les onglets supplémentaires… Ouvrez l’onglet “Import/export”. Choisissez “Export as Markdown” et nommez votre fichier selon les règles de nommage apprises 😉

Exporter le fichier en HTML

Le plus intéressant, avec StackEdit, c’est la qualité de l’export au format HTML. En effet, la plateforme propose plusieurs modalités d’exportation et le code généré par StackEdit est particulièrement propre.

L’exportation en HTML débute comme l’exportation en Markdown (icône de StackEdit et onglet “Import/export”). Cliquez ensuite sur l’onglet “Export as HTML”. Les recommandations concernant le nommage des fichiers exportés restent valables !

Parmi les options proposées à l’exportation, 2 d’entre elles nous intéressent plus particulièrement : l’option “Styled HTML” et l’option “Styled HTML with TOC”. TOC est l’acronyme de “Table Of Content” (table des matières ou sommaire…). En effet, ces deux options génèrent des pages HTML prêtes à la publication en ligne.

L’option par défaut “Plain HTML” génère une page HTML dans laquelle figure seulement le contenu du <body> (la structure à partir du <h1>). Une telle page est lisible en local par un navigateur mais elle ne contient aucune instruction CSS et n’est pas publiable en l’état. Cette option est cependant utilisable quand il s’agit de copier une partie du code pour le coller dans un gabarit de site, par exemple.

➜ Faites des tests d’exportation en HTML en utilisant les différents formats proposés. Examinez le rendu dans le navigateur des fichiers HTML et jetez un œil sur le code source.

Vous constaterez qu’avec les 2 options “Styled HTML” et Styled HTML with TOC”, la feuille de style utilisée n’est pas incorporée dans le fichier HTML mais appelée depuis le serveur de StackEdit.

Cela nous ouvre des perspectives de personnalisation de la page exportée. En effet, en modifiant le lien d’appel de la feuille de style, nous pourrons faire pointer ce lien vers un dossier “css” placé à la racine du fichier HTML (dans le même dossier que le fichier HTML) puis vers une feuille de style de notre choix (placée au préalable dans le dossier “css”).

L’export avec l’option “TOC” génère un fichier HTML incorporant une colonne latérale dans laquelle s’affiche un sommaire reprenant le titre de niveau 1 et les sous-titres de niveau h2 du texte structuré dans Stackedit.

StackEdit est donc aussi un éditeur de pages Web, très simple d’utilisation, permettant de générer des documents agréables à lire et diffusables sur toutes les plateformes (le format HTML est universel…).

Utiliser du HTML directement dans StackEdit

Importer un fichier HTML

StackEdit permet d’importer des fichiers HTML via l’onglet “Import/export ». Vous accédez à 2 boutons d’importation :

  • Import Markdown
  • Import HTML

Le second bouton permet de transformer automatiquement une page HTML en page Markdown.

Saisir du code HTML dans la fenêtre d’édition

Il est possible d’insérer des balises HTML dans le code Markdown. On peut ainsi compléter la structuration du texte en introduisant des commentaires dans le code ou intégrer des signes conventionnels augmentant l’accessibilité de la page Web.

On peut aussi anticiper la stylisation en insérant des espaces insécables entre les mots et les signes de ponctuation. On peut encore anticiper l’adaptativité aux écrans mobiles (ou entre les mots d’une expression qu’on voudrait voir toujours sur la même ligne).

Dans StackEdit, il n’est cependant pas possible d’utiliser l’élément <span> pour intégrer une instruction CSS en ligne (… inline style, en anglais), comme dans l’exemple ci-dessous.
<span style="color: red;">Texte en rouge</span>

D’autres éditeurs Markdown permettent l’utilisation des instructions css en ligne.

Lectures complémentaires

Un équipe de 3 rédacteurs en ligne présentent StackEdit sur leur blog : bibliotech.fr. La présentation des premières choses à savoir pour utiliser l’éditeur en ligne est abondamment illustrée (➜  cliquez sur les photos pour les voir en entier).

Une traduction en français du texte de bienvenue sur StackEdit (version 4) a été réalisée par Bruno Lesieur. Elle est disponible à cette adresse : https://blog.lesieur.name/stackeditio-l-editeur-markdown-en-ligne-par-excellence/ (suivez la flèche… et soyez indulgents si vous repérez des fautes d’orthographe).

Catégories
FCS FCS1-cours RWRN RWRN-cours

Identifier la structure HTML d’une page Web

Nous allons voir dans ce cours comment se structure simplement une page HTML. Nous collecterons des informations sur le sujet. Nous verrons ensuite comment créer une page Web en récupérant un code simple et en l’intégrant dans un fichier avec l’éditeur de code Brackets. Je vous inviterai alors à personnaliser le contenu rédactionnel du code source.

La structure élémentaire d’une page Web

Voici deux schémas présentant la structure élémentaire d’une page HTML (on dit aussi page Web…). Le premier est un schéma en arbre, le second un schéma en cadres imbriqués. Dans la « vraie vie », il s’agit de lignes de code positionnées les unes sous les autres.

Dans le second schéma, les textes sont en anglais. Le premier texte (Page title) est placé entre <title> et </title>, deux balises HTML indiquant au navigateur où commence et où se termine le titre de la page. Ce titre de page s’affiche dans l’onglet de la fenêtre active. Attention à ne pas confondre le titre de la page avec le titre des contenus de la page (entre balise <h1> et </h1>.

Le titre de la page est placé dans la tête du code source (à ne pas confondre avec la têtière qui se trouve généralement en tête de page affichée dans le navigateur…). La tête de code source est délimitée par les balises <head> et </head>.

Le titre des contenus de la page (le GRAND titre devant sauter aux yeux du lecteur…) se trouve positionné entre les balises <h1> et </h1>, au tout début de la boîte délimitée par <body> et </body>. Dans le schéma en boîte présenté plus haut ce titre est en anglais (This is a heading), autrement dit “Ceci est un titre”.

Sous le grand titre, nommé aussi “titre de niveau 1” (header one), se trouvent deux paragraphes. Je vous montre maintenant ce que cela donnerait sous la forme « code source »… après traduction des textes en français (pour les balises elles-même : défense absolue de les traduire, les navigateurs ne comprennent pas le français…). Les lignes roses montrent les boîtes ou cadres imbriqués.

Je vous montre un gabarit de ce type, disponible sur le site w3schools.com. N’hésitez pas à demander la traduction automatique de ce site. Il y a dans le menu du site de w3schools (un site norvégien) une icône en forme de planète qui permet d’activer la traduction automatique du site dans la langue de son choix.

Capture d'écran d'une structure HTML assez simple collectée sur le site w3schools.com

Les flèches bleues montrent les éléments HTML déjà rencontrés dans la structure élémentaire étudiée plus haut.

En complément de ce cours, j’ai mis en ligne un autre cours dans lequel j’aborde de manière un peu différente le même sujet (la structure HTML élémentaire). Le cours s’intitule Manipuler le code source avec Brackets et propose d’examiner le code source d’une page Web consacrée aux pangrammes pour se familiariser avec le langage HTML.


J’ai réalisé une courte BD en ligne pour insister sur les fonctions du “head” et du “body”, de façon plus “cool”…

Présentation de la BD en ligne consacrée à la section "head" et la la section "body" dans le code source d'une page HTML.

➜ Vous pouvez aussi visionner la courte vidéo du cours consacré à la structure HTML sur apprendre-a-coder.com

En savoir plus à ce sujet (en bonus…)

Référence incontournable en matière de documentation sur les langage de codage pour le Web, le site de la fondation Mozilla, MDN web docs, est LE site où tout est dit. On y trouve un tutoriel intitulé Écrire une simple page HTML. Plus dans le sujet tu meurs… mais vous verrez que les choses se compliquent assez vite.

Le site w3schools.com, que nous venons de mentionner plus haut, permet d’apprendre seul le HTML et de nombreux autres langages de codage. Un des points fort de ce site est son outil de test du code ou bac à sable (bouton « Try it Yourself » ou « Essayez vous-même« ).

Pour les plus intéressés, je recommande vivement de s’inscrire aux cours gratuits de codecademy.com. Le cours de HTML est très bien conçu.

Pour les inconditionnels de la vidéo, il existe de bonnes chaînes YouTube consacrées au sujet. Ma préférence va vers le site apprendre-a-coder.com, même si on n’est pas sur YouTube… et que la rigueur n’est pas toujours au rendez-vous.

Vous ne serez pas perdu, car l’auteur utilise Brackets (mais sans les extensions qui vont bien, nous y reviendrons). Il y existe aussi une série de vidéos payantes sur le site udemy.com (mais avec des échantillons gratuits qui traitent des bonnes raisons d’apprendre à coder). Pour les plus exigeants, allez plutôt voir du côté de grafikart.frc’est gratuit mais c’est plus professionnel… et donc un peu plus difficile !

Test de connaissance (facultatif)

Un petit test de connaissance est disponible sur ce site. Vérifiez vos connaissances fraîchement acquises en allant sur Identifier les éléments de la structure HTML

Activités

Plusieurs activités vous sont proposées pour consolider vos acquis sur la page intitulée Activités sur la structure HTML d’une page Web

Catégories
RWRN-cours

Rédaction Web – 2

Dans cette seconde partie du cours nous allons aborder 3 points :

  • Les outils de la rédaction Web
  • Les principes et les méthodes de la rédaction Web
  • Le référencement des images

Les outils de la rédaction Web

Pour commencer, je vous invite à télécharger une carte XMind à partir de la plateforme Biggerplate. Vous aurez besoin de disposer du logiciel XMind sur vos postes de travail. Installez de préférence XMind 8 (free download) plutôt que XMind Zen. Vous aurez davantage de possibilités éditoriales avec la version 8 de cet éditeur de cartes heuristiques.

Parmi les outils disponibles sur le Web pour faciliter la rédaction Web, Marcel Goutte (formateur au GRETA) nous recommande l’utilisation d’un outil permettant d’élargir le champ sémantique ou lexical d’un mot : rimessolides.com . Il s’agit d’un dictionnaire de mots-clés, très facile à utiliser !

Exploration facultative

Pendant que vous êtes sur Biggerplate, je vous propose (si vous avez le temps) d’explorer les ressources que j’ai mises en ligne sur cette plateforme. En priorité, utilisez les cartes qui concernent directement la rédaction Web. Les autres cartes portent sur des sujets susceptibles de vous intéresser (le CMS WordPress, les combinaisons typographiques, le langage Markdown, etc.) . 😊

S’il fallait choisir un seul outil…

Pour ma part, si je devais choisir un seul outil parmi tous ceux qui sont présentés sur la cartes XMind que je vous ai demandé de consulter, ce serait un outil de synthèse vocale !

J’utilise la synthèse vocale proposée par MacOs (réglages dans Préférences Système > Dictée et parole). Windows 10 propose un outil nommé « lecteur immersif » (que je n’ai jamais utilisé 😱). Pour des textes courts vous avez la possibilité d’utiliser les outils de démonstrations cités dans la carte XMind mentionné plus haut.

La lecture automatique d’un texte par un robot permet de repérer à l’oreille (de manière infaillible) tous les points suivants :

  • les phrases trop longues
  • les erreurs de ponctuation
  • les fautes de syntaxe
  • les oublis dans une phrase
  • etc.

Inutile d’apprendre des règles compliquées. Écoutez les textes que vous avez rédigés et corrigez les pour faire en sorte que leur lecture automatique soit fluide et agréable à entendre. Vous serez étonnés par l’efficacité du procédé !

Rédigez un texte de 450 mots

Je vous invite à rédiger, dans Brackets, un texte à publier sur le Web, sur le sujet de votre choix. Utilisez la même structure rédactionnelle que pour les exos 2 et 3 de première partie du cours (h1-p-h2-p-p-h2-p-p).

Je vous demande bien-sûr de mettre en pratique ce qui a été vu dans la première partie du cours. Choisissez une série d’expressions ou mots clés que vous devrez placer aux endroits stratégiques de la structure HTML et rédactionnelle de la page Web.

Faites lire votre page Web par un robot et améliorez sa fluidité. Raccourcissez les phrases trop longues (en les divisant par 2 si nécessaire). N’hésitez pas à insérer des virgules pour mieux cadencer le rythme de lecture du robot.

Impératif pratique : rédigez un article de 450 mots. Ainsi, vous serez sûrs d’avoir au moins 300 mots utiles prêts à être référencés par les moteurs de recherche (lisez les articles consacrés à ce sujet dans la sitographie).

Vous pouvez travailler en binôme, retravailler le texte de l’autre, lui proposer des améliorations et réciproquement.

Vous me ferez parvenir vos textes finalisés sur Slack, après avoir pris connaissance des principes et méthodes présentées plus bas (que vous essayerez d’appliquer à vos productions).

Principes et méthodes de la rédaction Web

Disposant désormais d’outils pour explorer le champ sémantiques des mots clés sélectionnés, sachant où insérer ces mots clés et leurs synonymes, ayant expérimenté à quel point la rédaction Web est un travail de longue haleine… voyons rapidement quels sont les grands principes à suivre pour développer nos idées dans un article plaisant à lire pour notre lecteur cible.

L’essentiel en premier

Rédigez de manière à présenter au lecteur l’essentiel des informations dans les premières parties du texte. Vous avez certainement lu des choses sur le plan en pyramide inversée. C’est un plan rédactionnel parmi d’autres qui présente l’avantage de mettre l’accent sur ce point : l’essentiel en premier !

Vous avez noté que j’insistais beaucoup sur le fait de placer les expressions ou mots clés en début de titre ou de paragraphe. Cela va dans le même sens et permet au lecteur de saisir d’emblée votre propos.

Ce principe ou méthode est vivement conseillé pour toute publication en ligne. Il n’est pas toujours possible de l’appliquer, mais en suivant ce principe chaque fois que vous le pouvez, vous optimisez vos contenus.

Mentionner l’essentiel en premier permet de répondre très vite aux questions que se posent les lecteurs : qui ? quoi ? où ? quand ? … Je vous renvoie à la formule CQQCOQP (c’est cucul, c’est occupé !) ou hexagramme de Quintilien. Cette petite séquence mnémotechnique est très utilisée en communication écrite.

Toujours être simple et concis

« Entre deux solutions, toujours choisir la plus simple.” Il ne s’agit pas d’appauvrir le sens de votre propos mais de supprimer tout ce qui n’est pas indispensable. “La perfection est atteinte quand il n’y a plus rien à supprimer” écrivait Antoine de Saint-Exupéry. Pas de généralités, pas de tournures de phrases alambiquées, pas d’adjectifs ou d’adverbes superflus : écrivez, éliminez !

Écrire sans en rajouter prend plus de temps que d’écrire avec concision. Un texte se travaille, non pas seulement pour se développer mais aussi pour se simplifier, sans perdre de sa substance. Il s’agit d’élaguer, non de déraciner !

Faire des phrases courtes et écrire plus simplement

Une quinzaine de mots par phrase est l’idéal. Dès qu’une phrase approche les trente mots il faut impérativement faire 2 phrases (qui feront une quinzaine de mots chacune).

L’utilisation de la synthèse vocale, comme nous l’avons vu plus haut, permet de repérer à l’oreille les phrases trop longues. Il est parfois nécessaire de mettre en œuvre d’autres moyens pour améliorer notre rédaction (… et la lecture de nos textes).

La chasse aux ”qui-que” est un sport très pratiqué par les rédacteurs Web. Pour en savoir plus sur cette activité, je vous recommande de lire Comment rédiger des phrases plus courtes ?, sur web-creatif.net

J’ai mentionné dans la première partie de ce cours la nécessité de traiter une seule idée par paragraphe. On peut élargir ce principe. Un sujet par article, une idée par chapitre (sous un titre h2), une idée par paragraphe (entre balises <p> et </p>) et une idée par phrase !

📌 Editoile est une agence de visibilité Web, spécialisée en rédaction SEO. Leur blog est une mine de renseignements fiables. Vous trouverez dans un des articles de leur blog d’excellents conseils pour écrire plus simplement.

Le référencement des images

Le référencement des images devient primordial dans un contexte où les utilisateurs effectuent de plus en plus de recherches par ce biais. Google Images permet d’accéder rapidement à ce que nous cherchons, sans avoir à lire des lignes de texte sur les SERP. Pourtant Google ne reconnaît pas le contenu des images, il se fie au titre des images et au texte alternatif associé aux images.

Repérer et compléter le texte alternatif

Dans le code source d’une page Web, le texte alternatif se trouve entre guillemets, après l’attribut alt inséré dans la balise autofermante <img>. Rien de tel qu’un exemple visuel :

<img src="img/nom-image.jpg" alt="description de l'image">

Le texte en lien avec l’attribut alt de l’élément <img> a plusieurs fonctions :

  • il décrit l’image pour les moteurs de recherche qui ne savent pas encore interpréter correctement les images mais qui se servent de ce texte pour référencer les images
  • il s’affiche dans le navigateur, à la place de l’image, quand l’image ne peut être affichée correctement (pour diverses raisons)
  • il est lu par les lecteurs de site utilisés par les personnes malvoyantes quand elles naviguent sur le Web

Sitographie

Voici une liste de liens vers des sites de rédacteurs Web traitant des sujets abordés dans ce cours.

Catégories
RWRN RWRN-exos

Nuancer la triplette du bourrin

L’exercice qui suit concerne une pratique courante de SEO (Search Engine Optimization ou Optimisation pour les Moteurs de Recherche). L’expression « triplette du bourrin » est signée Laurent Bourrelly.

Catégories
RWRN-cours

Rédaction Web – 1

Les fondamentaux de la rédaction Web et du référencement naturel vous sont présentés sur un tableau Lino. Vous y trouverez des textes, des images, des liens et des exercices à faire 😉

Tableau de synthèse du cours sur les fondamentaux de la rédaction Web et du référencement naturel (formation RWRN au Greta de Clermont-Ferrand).

http://linoit.com/users/Yves-Goguely/canvases/Redaction-Web

Des informations complémentaires vous seront apportées progressivement sur divers supports en ligne. Bon apprentissage !

Dans les chapitres suivants, je vous apporte quelques précisions concernant la manière d’exploiter le tableau Lino « Rédaction Web ».

1- La structure d’une page HTML

Le premier sujet abordé sur le tableau Lino concerne la structure d’une page HTML. Il s’agit pour moi, formateur, de me faire une idée précise de la manière dont vous, stagiaires, vous vous représentez cette structure.

Je vous demande donc de réaliser un schéma simple avec l’éditeur d’image de votre choix et de le partager avec le reste du groupe des participants (tableau Lino, tableau Jamboard ou messagerie Slack, suivant les consignes données).

Il ne s’agit pas de réaliser une mise en « écran » d’une page Web. Il n’est pas question ici de faire figurer dans votre schéma toutes les balises HTML5 que vous connaissez !

Pour ceux qui ont besoin d’être guidés, je suggère la représentation d’une structure simple du type html-head-body-h1-p-h2-p-p-h2-p-p (qui sera utilisée pour le deuxième exercice). Pour les autres, vous pouvez insérer davantage d’éléments, à condition d’avoir une vision précise de la manière dont ils s’articulent les uns avec les autres. Restez simple et pensez à la structuration d’un texte plus qu’à la structuration d’un site dans sa globalité.

Exemples d’infographies sur le sujet :

2- Écrire de manière structurée

Le second sujet concerne la rédaction d’un premier jet, sur tel ou tel sujet. Une structure simple est proposée. Il est impératif de la suivre pour que les corrections portent sur des textes courts. Essayez de suivre ce principe : une seule idée par paragraphe ! Respectez le plan que je vous propose, cela nous facilitera le travail qui doit suivre.

La structure proposée est la suivante :

  • Titre h1
  • Chapô p
  • Premier titre h2
  • Premier paragraphe p
  • Second paragraphe p
  • Second titre h2
  • Premier paragraphe p
  • Second paragraphe p

Je vous invite à rédiger et intégrer votre texte dans l’éditeur de code Brackets. Exportez ensuite votre code au format .html (enregistrer-sous -> ajouter l’extension .html ). Publiez votre travail sur le canal Slack de la formation RWRN ou en message direct (en plaçant le fichier .html en pièce jointe).

Cela fonctionne très bien. Tout le monde peut accéder à votre code en cliquant dessus. Celui-ci est colorisé et je peux donc repérer facilement la structure utilisée et les éventuelles erreurs commises. De plus, lors de la correction, je peux vous indiquer le numéro des lignes sur lesquelles apporter d’éventuelles modifications 😊.


Pour ceux qui hésitent à montrer leur travail à l’ensemble du groupe, utilisez les messages directs de Slack. Nous discuterons de votre production en privé et quand le travail sera suffisamment avancé (ou si les remarques à apporter sont susceptibles d’intéresser l’ensemble du groupe), je vous inviterai à publier votre travail sur le canal principal de la formation.

3- Utiliser des mots clés

Le troisième sujet affiché sur le tableau Lino concerne l’utilisation des mots ou expressions clés et leur placement dans la structure HTML. Cette étape oblige chacun à revoir sa copie… Eh oui, le référencement naturel est un travail d’incessantes reprises ! En effet, il s’agit ici de reprendre la rédaction produite à l’étape 2 et d’y insérer un mot ou expression clé principal et plusieurs mots clés secondaires.

Les rédacteurs Web chevronnés commencent par choisir leurs mots clés. Cela leur permet d’établir un riche lexique avant de rédiger leur article. De plus, en choisissant la manière de les répartir dans le texte, ils matérialisent un plan facile à percevoir, à la seule lecture des titres.

Dans le cadre des exercices proposés dans ce cours, voici quels seraient les attendus à un niveau débutant (ne pas utiliser les synonymes simplifie le travail à produire quand on débute) :

  • Titre h1 ➜ Expression ou mot clé principal en début de h1
  • Chapô ➜ Expression ou mot clé principal en début de chapô
  • Premier titre h2 ➜ Mot clé secondaire #1 en début de h2
  • Premier p ➜Mot clé secondaire #1 en début de p
  • Second p ➜ Rédaction libre
  • Premier titre h2 ➜ Mot clé secondaire #2 en début de h2
  • Premier p ➜Mot clé secondaire #2 en début de p
  • Second p ➜ Rédaction libre

Voici quels seraient les attendus à un niveau plus avancé (utilisation des synonymes et expressions connexes) :

  • Titre h1 ➜ Expression ou mot clé principal en début de h1
  • Chapô ➜ Synonyme du mot clé principal en début de chapô
  • Premier titre h2 ➜ Expression ou mot clé secondaire #1 en début de h2
  • Premier p ➜ Synonyme du mot clé secondaire #1 en début de p
  • Second p ➜ Synonymes du mot clé secondaire #1 dans le p
  • Second titre h2 ➜ Expression ou mot clé secondaire #2 en début de h2
  • Premier p ➜ Synonyme du mot clé secondaire #2 en début de p
  • Second p ➜ Synonymes du mot clé secondaire #2 dans le p

Capture d'écran d'une partie du tableau lino intitulé "Rédaction-Web".

La technique d’optimisation que je mentionne dans la note bleue de la partie 3 du tableau Lino est très rudimentaire. Il s’agit de commencer par conceptualiser quelque chose de simple (placer les mots clés à tel et tel endroit) puis d’apprendre ensuite quelque chose de plus complexe (placer des variantes ou synonymes des mots clés aux endroits appropriés).

Notes sur l’élargissement du champ sémantique des mots clés

L’utilisation des synonymes ou d’expressions connexes appartenant au même champ sémantique que le mot clé permet d’éviter des pénalités pour suroptimisation du point de vue des algorithmes de Google (ou plutôt de ceux qui les ont programmés…). L’usage des synonymes contribue aussi à l’amélioration de la qualité rédactionnelle des articles… mais cela demande, il est vrai, énormément de travail !

Faites l’exercice intitulé Nuancer la triplette du bourrin et jetez un œil sur cette correction intitulée Motos mythiques (en affichant le code source dans votre navigateur pour lire les commentaires qui y sont insérés).

4 – Deux points de vue à concilier

Le dernier point abordé concerne la manière dont le rédacteur Web aborde le texte à publier, par opposition à celle dont l’internaute aborde le même texte en tant que lecteur.

Schéma de la publication en ligne du point de vue du rédacteur et du point de vue du lecteur.

Les lecteurs parcourent les pages Web d’un rapide coup d’œil pour repérer ce qui les intéresse. C’est pour cette raison que le rédacteur tente de retenir leur attention en leur permettant de lire très vite l’essentiel du message rédigé. C’est principalement à cela que servent les mots clés positionnés en début de titres et de paragraphes (l’optimisation du référencement, … c’est en prime !).

Sitographie

Voici une liste de liens vers des sites sur lesquels sont traités les sujet abordés dans ce cours.

N’hésitez pas à explorer les autres articles publiés sur les sites de cette liste.

Catégories
FCS FCS1-exos RWRN RWRN-exos

Identifier les éléments d’une structure HTML

Catégories
FCS FCS1-exos RWRN RWRN-exos

Titre de page Web

Cliquez sur le signe (+) pour agrandir l’image.
Analysez attentivement le code présenté ci-dessous.
L’affirmation qui suit est-elle exacte ?