22
- 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

Optimiser sa copie numérique - vade-mecum

Embed Size (px)

Citation preview

Page 1: Optimiser sa copie numérique - vade-mecum

- 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

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

> 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

> 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

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

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

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

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

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

Page 10: Optimiser sa copie numérique - vade-mecum
Page 11: Optimiser sa copie numérique - vade-mecum

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

Attention

Intérêt

Désir

Action

Relation directe 121 Modèle marketing AIDA

Page 13: Optimiser sa copie numérique - vade-mecum

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

Exemples de Call To Action [CTA]

Page 15: Optimiser sa copie numérique - vade-mecum

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

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

« 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

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

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

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

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

Pour vérifier l’indice SEO d’un site

http://www.webrankpage.com/

http://www.woorank.com/