optimiser sa copie numérique - vade-mecum
TRANSCRIPT
![Page 1: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/1.jpg)
- 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
![Page 2: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/2.jpg)
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
![Page 3: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/3.jpg)
> 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]
![Page 4: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/4.jpg)
> CSSCascading 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/
![Page 5: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/5.jpg)
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 .
![Page 6: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/6.jpg)
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 »
![Page 7: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/7.jpg)
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)
![Page 8: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/8.jpg)
Ce qu’ils aiment :
Social media Divertissement Infotainment Accès souvent mobile
Contenu utile Contenu divertissant
![Page 9: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/9.jpg)
Source : http://services.google.com/fh/files/blogs/our_mobile_planet_belgium_en.pdf
![Page 10: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/10.jpg)
![Page 11: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/11.jpg)
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 canauxMultimé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
![Page 12: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/12.jpg)
Attention
Intérêt
Désir
Action
Relation directe 121 Modèle marketing AIDA
![Page 13: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/13.jpg)
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 à lireAccorder lui de l’espace !Interlignes en suffisanceListes à 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.
![Page 14: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/14.jpg)
Exemples de Call To Action [CTA]
![Page 15: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/15.jpg)
RecoUne 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)
![Page 16: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/16.jpg)
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.
![Page 17: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/17.jpg)
« 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/
![Page 18: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/18.jpg)
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
![Page 19: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/19.jpg)
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 NUXENUXE : 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 !
![Page 20: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/20.jpg)
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.
![Page 21: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/21.jpg)
Outils SEOGoogle : outils de planification de mots clés
Informations en français sur l’outil
Accès via votre compte Google > AdWords
![Page 22: Optimiser sa copie numérique - vade-mecum](https://reader034.vdocuments.mx/reader034/viewer/2022052509/55a875bc1a28ab39548b47a7/html5/thumbnails/22.jpg)
Pour vérifier l’indice SEO d’un site
http://www.webrankpage.com/
http://www.woorank.com/