Le document présente les principes du HTML et son fonctionnement, ainsi que le comportement des utilisateurs en ligne et les meilleures pratiques rédactionnelles pour le contenu web. Il couvre également les techniques de SEO pour optimiser le référencement et l'engagement des utilisateurs. Des recommandations pratiques sont fournies pour l'écriture de contenu attrayant et cohérent qui s'adapte aux différents supports numériques.

1. - Principes HTML et fonctionnement général du contenu web
- Comportements en ligne des utilisateurs
- Modèle, structure et règles rédactionnelles à suivre
- Techniques SEO et outils (mots-clefs, mise en page etc.)
- Adaptation et exercices pratiques sur base de contenu existant
MODULE 1 - COPIE WEB OPTIMISÉE
Publication: décembre 2013

2. 1. Principes HTML et de fonctionnement général du contenu web
> Le web parle l’HTML
HyperText Markup Language
 pas un langage de programmation, mais de marquage, de formatage
 texte à adresser à l’internaute + instructions destinées à formater le texte
 Les instructions sont différenciées du texte par des balises ouvrantes et
fermantes
<p> ici vient du texte <p/>
 langage de balisage simple à comprendre et à utiliser
 Comme dans toute codification, la rigueur est nécessaire

3. > Les balises ou « tags »
 Indique une action au navigateur
 Interprétation différente entre les navigateurs (I.E., Firefox, Chrome etc.)
 Pouvant entraîner un affichage différent !
Reco :
Lors de l’ajout de texte dans le code, toujours éviter de « copier-coller »
directement depuis Word dans le code (ou via un CMS) car du code hérité du
traitement de texte vient souvent polluer l’HTML
Le copier transitoirement dans un éditeur de texte simple de type « bloc-
note » (Notepad)
>bouton Windows>Tous le programmes>accessoires>bloc notes
[démo]

4. > CSS
Cascading Style Sheets  feuilles de style
 Gestion différenciée de la structure HTML et de la présentation de la page
 En raison de la multiplicité de supports et de formats pour afficher le contenu (ex.
: version print, mobile etc.), il a été nécessaire d’abandonner les instructions de
mise en page directement dans le code pour l’extraire dans un fichier séparé : la
feuille de style
 Il est désormais possible d’appliquer différents formatage au même contenu
HTML source en utilisant différentes feuilles de style pour le même contenu.
>CCL : le HTML est le langage de base du web. Il a bien entendu beaucoup évolué
(XML) et de nombreux scripts viennent l’enrichir (javascript).
Nous en sommes à la version HTML 5 qui permet d’intégrer du contenu vidéo
directement dans le code, sans devoir l’héberger sur un serveur.
Le site référence pout toutetes questions HTML : http://www.alsacreations.com/

5. Reco. :
 Il est toujours important de considérer les différents supports
qui présenteront votre contenu et les spécificités d’utilisation de
chaque.
 Penser à suivre les résultats d’étude quantitatives et qualitatives
des comportements en ligne .

6. Un peu de pratique :
Exploration d’un site en utilisant la fonction « inspecter l’élément » du navigateur
Chrome
 Dans Chrome > clic droit > « inspecter l’’élémént »

7. 2. Comportements en ligne des utilisateurs
 Comportement très versatile
 Convaincre en une demi-seconde
 Être conscient que souvent les utilisateurs ne rentrent pas par la grande
porte (page d’accueil sur leur desktop) mais souvent par les fenêtres
(article partagé sur les réseaux sociaux sur mobile)
 Que leur activité est souvent hiératique par rapport aux différents
scénarios
 Souvent perdu à la moindre petite contrariété (mauvais fonctionnement
ou compréhension)

8. Ce qu’ils aiment :
 Social media
 Divertissement
 Infotainment
 Accès souvent mobile
Contenu utile Contenu divertissant

9. Source : http://services.google.com/fh/files/blogs/our_mobile_planet_belgium_en.pdf

11. 3. Modèle, structure et règles rédactionnelles à suivre
Content is KING ♛ But now CONTEXT rules!
 Le contenu web est flexible et quantifiable en temps réel ;
 Adapter l e contenu en fonction des résultats
 Étayer ce qui a plu
 Varier en fonctions des canaux
 Créer un contenu synergique adapté au canal/contexte (ex.
mobile) et éviter la redondance sur l’ensemble des canaux
 Multimédia : variétés de formats
 Texte
 Photo, illustration, infographie, Gif’s animés
 Vidéo
 Diapositive / Diaporama
 3 C : clair cohérent captivant
 Clair : d’un coup d’œil l’internaute doit comprendre que c’est le
contenu qui l’intéresse ou qu’il recherche et dont il a besoin
 Cohérent : le contenu doit être à la hauteur et complètement en
ligne avec ses attentes et la teneur qu’il en a perçu
 Captivant : l’attention est tenue de bout en bout

12. Attention
Intérêt
Désir
Action
Relation directe 121  Modèle marketing AIDA

13. Le modèle AIDA appliqué aux contenus web de type édito
Attention Titre accrocheur qui attire l’attention
Intérêt Chapeau ou intro qui indique clairement la teneur du sujet et
qui incite à poursuivre la découverte
Désir Un corps de texte attrayant et facile à lire
Accorder lui de l’espace !
Interlignes en suffisance
Listes à puce
Attention à la longueur de phrase.
Action Toujours inviter l’internaute à une action
(s’inscrire, inviter, s’abonner, participer, consulter, “Liker” etc.)
Reco : souvent inviter l’internaute à découvrir un autre
article ou partie du site fonctionne très bien. Cela augmente la
durée de visite sur le site.

14. Exemples de Call To Action
[CTA]

15. Reco
Une bonne structure va permettre un meilleur partage de votre contenu
sur les réseaux sociaux :
-Titre pas trop longs (Pour Google :max 60-65 caractères espaces compris)
-Chapeau max. (Pour Google : 160-165 caractères espaces compris)

16. Pour l’écriture
 Une écriture active et vivante, directe et simple, mais non simpliste
 Toujours établir un « tone of voice » pour l’unité de ton
 Différencier le contenu de « consommation » rapide ou lente, varier la
longueur (brèves vs articles)
 Varier les formats : texte, image et vidéo, de qualité et cohérents
 Faire des listes, structurer le contenu pour faciliter la lecture
 Les listes dans le titre fonctionnent toujours très bien
 « 5 silhouettes pour la rentrée »
 « Beauté : 3 rituels pour rajeunir »
 Privilégiez les liens internes
 Comme toujours, soyez « catchy » mais surtout ne survendez pas.
N’induisez pas l’internaute en erreur sur la teneur de votre contenu. Ce qui
déçoit le plus, c’est quand le résultat ne correspond pas aux attentes.

17. « Les internautes se comportent toujours un peu
comme des enfants dans un magasin de bonbon »
De belles images colorées et une présentation
soignée fonctionnent toujours.
MAIS il faut soutenir l’expérience de bout en
bout, les sucreries se doivent d’être délicieuses.
 Et si le gâteau et trop gros, découpez le en
tranches, n’oubliez pas de donner de petits bouts
à savourer pour les plus pressés (cake pops) et
leur donner l’envie de revenir.
Image source : http://www.fitnessgurusam.com/foods-that-turn-to-fat/

18. 4. Techniques SEO et outils (mots-clefs, mise en page etc.)
Search Engine Optimisation
 Optimisation du référencement de votre contenu
L’essentiel est invisible : la balise <head> et les méta-données
 Titre, description du site le caractérisant uniquement destinés au robots

19. Techniques SEO
 Utilisation de mots-clefs
 les définir avant la rédaction
 Utilisation stratégique des mots-clefs
les placer judicieusement dans le texte. Au plus haut au plus important
 Plus les phrases sont long, plus le résultat SEO sur le mot-clef est dilué
 Le mot-clef référent en premier dans le titre
 Ex :
Lisez notre newsletter pour découvrir toutes les nouveautés NUXE
NUXE : 10 nouveautés en 5 minutes max!
 Les zones à privilégier
 Titre (balise <h1>)
 URL (l’adresse)
 Chapeau (introduction, accroche d’un article),
 les sous-titres (balises <h2>, <h3>, etc.)
 Le nom des images et la balise « ALT »
 Mise en page
Les appuyer grâce au formatage du texte
 Mise en gras des mots-clefs dans le corps du texte.
NON !

20.  Reco
 Mettez-vous à la place de l’internaute ; quels mots-clefs utiliseriez-vous
pour trouver le contenu ? Restez simple et direct.
 Ne destinez pas votre contenu aux robots !!
 Assurez-vous que la description de votre page est en adéquation avec le
titre mais également le contenu de votre page. Si les moteurs de recherche
détectent une incompatibilité entre ces éléments, ils peuvent vous considérer
comme des spammeurs.
 Faites en sorte d'utiliser des phrases avec des verbes afin que la description
ait un sens et pour éviter de passer pour du spam.
 Afin d’éviter le « spamming » ou « keyword stuffing » qui peut être
sanctionné par Google, penser à vos lecteurs en variant les mots. Utilisez
des synonymes, cela rendra la lecture bien plus agréable.

21. Outils SEO
Google : outils de planification de mots clés
Informations en français sur l’outil
Accès via votre compte Google > AdWords

22. Pour vérifier l’indice SEO d’un site
http://www.webrankpage.com/
http://www.woorank.com/