Formation écriture pour le web

Ecrire pour le webVoyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 1

Structure technique d’une page<html> <head> <title>le titre de votre page</title> <meta name= "description" content="description rapide et efficace devotre contenu" /> </head> <body> <div id="entete"> <img scr="url du logo.jpg" alt="logo" /> <ul id="menu"> <li><a href="url de votre menu 1.html">menu 1</a></li> <li><a href="url de votre menu 2.html">menu 2</a></li> </ul> La structure de votre page se sépare en deux </div> <div id="contenu"> parties : <h1>titre de votre page ou article</h1>  L’entête qui contient le titre affiché dans la <h2>sous titre ou courte description</h2> <h3>titre du premier paragraphe</h3> barre ou l’onglet de votre navigateur, la <p>premier paragraphe</p> description utilisée par les moteurs de <h3>titre du deuxième paragraphe</h3> <p>deuxième paragraphe avec une liste d’éléments : recherche et d’autres éléments « invisibles » ; <ul>  Le « body », le corps de votre page où se trouve <li>élément un ;</li> <li>élément deux ;</li> tout le contenu affiché. </ul> Ce sont ces éléments que vous allez remplir lors de </p> (…) la rédaction. Il est important d’en connaitre la </div> signification et l’impact pour comprendre la (…) </body> spécificité de l’écriture web.</html> Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 2

Structure technique d’une pageLa spécificité de l’écriture web correspond auxdeux destinataires, aux deux « lecteurs » de voscontenus : Les internautes ; Les moteurs de recherche.Un rédacteur web, pour être efficace, se devra deconnaitre, même superficiellement pour lesmoteurs de recherche, quelles sont les attentes deces deux lecteurs.Il arrive souvent que ces attentes soientcontradictoires. Le rédacteur web devra trancher,choisir en fonction des objectifs de sa structure les« lecteurs » qu’il doit privilégier.L’optimisation est l’équilibre entre les attentes desmoteurs de recherche et celles des internautes. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 3

Hiérarchiser les informationsLe début de l’article est important : c’est l’accroche. Vous y développez l‘information la plus visible,une information qui répond à un réel besoin pour l‘internaute.Avant d’écrire votre article, vous devez vous poser les bonnes questions et cibler votre lectoratpotentiel.A qui est destiné votre article, vos contenus intéressent quel type de personnes ?Définissez le profil de votre lecteur et essayez de vous mettre à sa place. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 4

Hiérarchiser les informationsAu fur et à mesure que l’internautepoursuit sa lecture, cette premièreinformation doit être décrite d’unemanière plus large en insérant denouveaux détails.Allez du générique vers le détaillé, desinformations les plus importantes vers desinformations plus spécialisées (doùlexpression pyramide inversée).La fin de votre article est consacrée à unappel à l’action : articles liés, liensextérieurs pour approfondir le sujet ouprise de contact. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 5

Style d’écriture à adopterEn ce qui concerne le style à adopter, tout lemonde doit pouvoir comprendre votre article : EXEMPLE :• Ecrivez votre article avec des mots compris par plutôt que de titrer : tous (cela facilite l’accessibilité) ; "Séance dinformation générale ouverte au• Evitez les effets littéraires ou un style trop public sur le thème des plantes transgéniques et original (n’oubliez pas que vous souhaitez faire de leurs implications diverses pour les trois passer un message) ; régions de Belgique"• Ecrivez concis (n’oubliez pas que les internautes ...vous titrerez : passent très peu de temps sur une page) ; "Plantes transgéniques: les enjeux pour la• Soyez le plus direct possible (ne tournez pas Belgique (conférence)" autour du sujet);• Evitez les phrases longues, les mots de liaisons inutiles. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 6

Style d’écriture à adopterFaites lire votre article à une personne devotre entourage qui ne connaît rien à votreactivité. Analysez aussi votre propre pratiquede la lecture en ligne. Si, dès les dix premièreslignes, vous ne comprenez pas quel sujet esttraité, vous abandonnez. Quelle est la longueur idéale dune pageIl ne s’agit pas forcément de garder tous les web ?internautes mais que ceux qui cherchentl’information que vous développez ne passent On saccorde à dire quune page HTML devraitpas à côté. contenir entre 500 signes (seuil en dessous duquel linformation nest pas assez consistante) et 4000 signes (plafond au-delà duquel la lecture à lécran devient très pénible). Mais ce nest quun ordre de grandeur, à mettre toujours en liaison avec le contexte. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 7

Comment structurer un article ?La structure de votre article est essentielle, plus importante même que son optimisation. Ellerendra sa lecture plus simple, plus agréable, moins fatigante. Le lecteur pourra d’un coup d’œilrepérer les éléments importants du texte, en faire ainsi une lecture diagonale rapide qui ledécideront ou pas à une lecture plus approfondie.Les éléments qui vont structurer votrearticle sont : Le titre ; Le chapeau ; Les paragraphes et les éventuels sous- titres ; Les mots ou passages en gras et autres habillages ; Les images ; Les éléments multimédia ; Les liens hypertextes. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 8

Le Titre (1ère accroche)Le titre dun article a une importance capitale : il doit vite capterl’attention du lecteur, piquer sa curiosité. Il doit amorcer lalecture de l’ensemble de l’annonce et pousser le lecteur à allerplus loin.Il est aussi important pour le référencement car les moteurs derecherche y puisent des éléments qui vont permettent à votrecontenu d’apparaître. Si vous parlez d’un sujet qui n’apparaît pasclairement dans le titre, cela risque d’être pénalisant.Lorsque vous rédigez votre titre, rappelez-vous que vous devezêtre clair et direct. C’est une des différences avec la presse écritequi peut parfois jouer avec les mots pour interpeller le lecteur. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 9

Le Titre (1ère accroche)Si votre titre est mauvais, votre article ne sera pas lu même si votrecontenu est très bon.Votre titre doit résumer d’une manière percutante les propos devotre article : Avec des mots courts (4 syllabes maximum) et peu nombreux (10 au maximum) ; Avec des mots simples : plus la formule est simple, plus elle attire l’attention. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 10

Le chapeau (2ème accroche)Le chapeau doit développer brièvement votre titre en donnant envie au lecteur d’en savoir plus.C’est un petit paragraphe d’une à trois phrases qui résume l’information essentielle de l’articlequi annonce les principales informations développées dans l’article.Généralement, il est conseillé de le rédiger comme une conclusion. Si votre conclusion intéressele lecteur, il sera tenté de lire votre exposé.Comme ce chapeau commence votre article, il est aussi le premier contenu lut par les moteurs derecherche après le titre. Il se doit donc d’expliciter au mieux le titre, de nommer le sujet avec lesmots les plus susceptibles d’être demandés.Vous avez la possibilité de mettre certains termes en gras pour accentuer leur importance. Cetteimportance sera lisible autant pour les lecteurs que pour les moteurs de recherche. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 11

Les paragraphesLe corps de votre article ne doit pas être écrit commeun roman.En fonction de votre contenu, vous devrez répondre aumieux aux attentes des lecteurs.Pour diffuser une information, l’article devra être courtet le plus précis possible. Si le sujet nécessite uncontenu plus long, pensez à l’aérer en paragraphe, à yajouter des images quand c’est possible.Pour de l’informatif, plus le contenu de votre articlesera précis et court (maximum 500 mots), plus vousaurez des chances que le lecteur lise tout le contenu devotre article.N’oubliez-pas l’objectif de votre article : séduire lelecteur en un minimum de temps.Dans les 2 premiers paragraphes de votre article, il estprimordial que vous répondiez aux questions les plus Chaque paragraphe doit avoir son propre titre etattendues de vos lecteurs : ne contenir qu’une seule idée.Qui ? Quoi ? Pourquoi ? Où ? Comment ? Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 12

Habiller votre textePour l’habillage de vos textes, tenez-vous en à l’essentiel. N’oubliez pas que votre site répond àune charte graphique, même si vous trouvez que l’ajout de couleur dans le texte le rendrait moinstriste.Les éléments que vous devez par contre utiliser sont : Le gras : ils mettent en valeur visuellement des mots et aussi pour les moteurs de recherche. Ne mettez pas une phrase entière en gras, cela ne sert à rien et ce n’est pas la fonction de cet éléments. En HTML le gras est représenté par la balise <strong>. Le <blockquote> : il encadre une citation. Il arrive que cet élément ait une présentation graphique qui lui permet une mise en valeur appréciable. L’italique : il met en valeur une courte citation. En HTML, il est représenté par l’élément <em>. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 13

Les imagesLes images ont un rôle important pour la présentation de votre contenu.Elles peuvent aussi vous permettre un référencement (avec Googleimage).Il faut cependant bien les préparer. Il s’agit de les recadrer (lorsque vousen avez les droits), de les redimensionner et de les renommer. Uneimage qui se nomme « img2547.jpg » aura beaucoup moins d’impactqu’une image qui s’appelle « fete_ecole_primaire.jpg » par exemple.Il est essentiel pour l’accessibilité de bien leur donner un titre. Dans lecode HTML, une image est appelé ainsi :<img src=‘http://urldusite/nomdevotreimage.jpg’ alt=‘titre ouprésentation sommaire de l’image’ … />Lorsqu’un déficient visuel consulte une page, l’ordinateur lit le contenude l’attribut alt, ce qui lui donnera des informations sur l’image qu’il nepeut pas voir. Pour modifier des images simplement, vous pouvez utiliser le logiciel gratuit en ligne http://www.pixlr.com/editor (Voir un didactitiel ici http://blog.voyelle.me/webtools/pixlr-editor-le-photoshop-en-ligne). Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 14

Multimédia / Rich MediaVous avez aussi la possibilité de rajouter des contenusdifférents : Des vidéos (via des plates-formes dédiés qui viennent renforcer le référencement) ; Des sons (via des plates-formes dédiés – pour des entretiens, vous pouvez mettre une version sonore et une version textuelle) ; Des présentations (via des plates-formes dédiés).Encore une fois, un article sur un site web n’est pas unarticle de presse écrite. Vous disposez d’outils qui vous Voir aussi :permettent d’associer textes, images, sons,  Vidéo et rich media sur Internet :présentations, vidéos. Vos documents multimédia opportunités, technologies… http://www.artmail-intéresseront un public qui ne sera pas forcément conseil.com/blog/2008/03/video-et-rich-sensible à l’écrit ou qui a besoin d’animation (les media-sur-internet-opportunites- technologies/présentations permettent de donner un contenu très  Le rich média: une nouvelle technique desimplifié associé à des images). narration http://lecercle.lesechos.fr/entreprises- marches/medibullition/221133520/rich- media-nouvelle-technique-narration Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 15

Les liensAutre élément parfois oublié, les liens sont l’essence même du web. Souvent, lors de la lectured’un texte sur un sujet proche de ce que nous cherchons, nous allons trouver un lien qui varépondre à nos attentes. C’est ce que nous appelons la sérendipité.De nombreux sites refusent de mettre des liens qui feraient « sortir » le lecteur du site. Hélas,c’est une mauvaise réponse à la problématique. Un lecteur trouvera votre contenu pertinent s’ilpeut aussi y trouver des liens qui approfondiront le sujet – il n’attend pas forcément que voscontenus répondent à toutes ses questions. Il reviendra s’il sait que vos contenus sont riches etque vos sources sont citées.Pour aller plus loin, les liens sont nécessaires au référencement. Ils donnent de la valeur auxcontenus nommés. Si vous ne faites pas de liens, pourquoi d’autres en feraient vers votre site.Pour optimiser les liens, il faut les faire sur des mots, ou des titres de page, et non sur l’url. Eneffet, les moteurs de recherche vont prendre en compte ces mots pour les associer au lien etrenforcer ainsi le référencement.Ne mettez pas trop de liens dans le contenu textuel, ils risqueraient de ralentir la lecture : ajoutezen fin d’article une liste de liens pour ceux qui voudraient en savoir plus. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 16

RécapitulatifFace à sa feuille blanche, la première question à 1) J’affirmese poser est la suivante : De manière presque péremptoire, on pose « lequel message souhaite-t-on faire passer ? cœur de notre message » en avançant « unePour cela il faut se poser les bonnes questions : idée force ». Qu’est-ce qui fait de ce sujet quelque chose 2) J’argumente d’exceptionnel ? Il s’agit de prouver ce que l’on affirme, avec des Pourquoi c’est incontournable ? éléments factuels, des informations Qu’est-ce qui fait la différence ? quantifiables, vérifiables... Quelles sont les particularités de ce sujet ? 3) J’illustre etc. Il faut trouver des exemples, des témoignagesUne fois le message clairement défini, il s’agit de de ce que l’on a avancé. C’est aussi le momentconstruire le message, d’organiser l’article. de penser à ouvrir son sujet, de le décliner, deComment va-t-on articuler sa présentation ? l’étendre à d’autres sphères...Dans un premier temps, on peut se référer à un Attention il ne s’agit pas pour le moment deschéma en trois parties, qui nous permet de rédiger l’article, seulement de le structurer. Car,clarifier l’information que l’on veut faire passer. les réponses à ces trois temps peuvent faire office de « guide logique », de trame, avec des1) J’affirme phrases ou expressions déjà trouvées, qui2) J’argumente faciliteront la rédaction de l’article.3) J’illustre Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 17

RécapitulatifPar rapport au référencement Vous pouvez générer un rapport rapide page Le title devra idéalement contenir entre 10 par page sur le site http://seo.voyelle.fr/ que et 70 caractères. Au-delà les termes perdront nous avons mis en place. Il vous permettra en valeur aux yeux des moteurs de d’évaluer rapidement l’efficacité de votre page. recherche et risqueront de ne pas être affichés ; Il existe d’autres outils pour analyser vos pages : La meta description devra quant à elle  http://grader.rezoactif.com/ contenir entre 70 et 160 caractères (espaces  http://www.woorank.com/ compris) ;  http://www.seoh.fr/audit-seo Le h1 est le titre principal de votre page et doit être unique mais dans le html5 il est possible d’en créer plusieurs en fonctions des blocs. Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 18

LiensVoici quelques liens pour approfondir le sujet : La rédaction Web http://ditwww.epfl.ch/SIC/SA/SPIP/Publications/spip.php?article1220 Ecrire pour le Web http://www.ecrirepourleweb.com/ Rédaction Web : les fondamentaux http://blog-web-marketing.fr/2008/04/28/redaction-web- ecrire-pour-le-web/ Ecrire concis http://www.redaction.be/instructions/concision.htm Autour de la typographie http://typographisme.net/post/De-la-cesure-et-du-Web Voyelle – 40 rue du Bignon, forum de la rocade, bâtiment Oméga à Chantepie - contact@voyelle.fr 19

http://www.voyelle.fr	223
http://blog.voyelle.me	150
http://localhost	5
http://manuura.net	1
http://wave.webaim.org	1

Formation écriture pour le web

by Voyelle on Nov 28, 2011

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 380

Statistics

Formation écriture pour le web Presentation Transcript