Apprendre l’intégration de contenus web professionnelle

14 janvier 2020
Carole

/apprendre-l-integration-de-contenus-web-professionnelle

Maintenant que vous avez découvert les contours du métier du webmaster, vous êtes prêt à apprendre l’intégration de contenus web professionnelle. Ce tuto regroupe toutes les bonnes pratiques pour effectuer une belle intégration. Il est pensé comme un petit aide-mémoire. J’espère que vous en ferez bon usage 😉

Les quatre volets de l’édition d’articles

Apprendre les règles de l'intégration de contenus web
2. Apprendre l’intégration de contenus web professionnelle
Créez vos contenus
Intégration de contenus web professionnelle
4. Articles de blog en mode expert
Mode expert : mettre les mains dans le code

Gagnez des points pour chaque optimisation

Chaque optimisation est accompagnée d’une mention :

(+1 SEO) = améliore le résultat dans les moteurs de recherche
(+1 W3C) = respecte les normes du World Wide Web Consortium
(+1 UI) = User Interface, améliore l’aspect visuel de votre article
(+1 UX)User eXperience, améliore l’expérience utilisateur (donc la lecture et la compréhension)
(+1 Éco) = pour éco-conception web > améliore l’efficience des sites web pour réduire l’impact environnemental.

La requête cible

Connue également sous le nom de mot clé principal. Lorsque vous avez besoin d’une information dans votre moteur de recherche préféré, vous tapez quelques mots correspondant à votre besoin et vous cliquez sur « rechercher ». Le mot clé principal aide à identifier le sujet de l’article. Il est important de bien le sélectionner et surtout de l’utiliser :

  • dans votre titre principal, (+1 SEO)
  • dans le permalien(+1 SEO) 
  • dans le contenu de votre article, (+1 SEO)
  • en rappel dans les titres de deuxième niveau, (+1 SEO)
  • dans le premier paragraphe de votre article, (+1 SEO)
  • pour nommer les fichiers, (+1 SEO)
  • pour alimenter les métadonnées des réseaux sociaux. (+1 SEO)

Il est difficile d’identifier un article simplement par un mot aussi, n’hésitez pas à construire cette requête cible par une expression. Par exemple la requête cible de cet article est “Apprendre l’intégration de contenus web”.

Voici quelques outils pour vous aidez :

  • Answer the publicpour vous aidez à construire votre requête.
  • Google Trends : pour connaître la fréquence d’un terme tapé dans le moteur de recherche.

Le titre principal de l’article

Comment faire un titre pour faire un bon score SEO ?

Un titre SEO, est le titre qui va apparaître dans les résultats des moteurs de recherche. C’est la première entrée vers votre article et c’est également la première chose que les utilisateurs vont découvrir. Il doit être percutant (+1 UX) et refléter votre contenu (+1 SEO). C’est une invitation à la lecture qui mérite le plus grand soin. (+1 UX)

Règles d’édition des titres

Ne jamais écrire les titres en uppercase (lettres en capitale) pour respecter la charte graphique du site.
(+1 UI)

La régle d’édition est simple, la majuscule apparaît :

  • au début du titre,
  • pour les noms propres,
  • et les acronymes.

C’est le thème qui décide si  le titre doit apparaître de cette manière, par une ligne de code qui ressemble à ceci :

<h1 style=”text-transform: uppercase;”> Voici un titre qui doit s'afficher en majuscule !</h1>
 Respecter la langue d’origine du site (surtout pour les sites multilingues).
(+1 SEO)

L'écriture des URL

Nommée couramment adresse web ou permalien, l’URL de votre article doit être fidèle à votre titre principal :

  • Titre principal : Mon super article !
  • URL : wexample.com/mon-super-article

La plupart des blogs génèrent automatiquement les permaliens aussi soyez vigilant sur cette écriture car elle peut porter à confusion comme le prouve cet exemple :

  • Titre principal : Faites le choix d’une jolie URL !
  • URL générée automatiquement : wexample.com/faites-le-choix-dune-jolie-url
  • URL corrigée : wexample.com/faites-le-choix-d-une-jolie-url

D’une se transforme en dune, l’une en lune, t’as en tas… Notez que la ponctuation a disparue.
(+1 SEO)

Caractères spéciaux dans les URL

L’URL est un protocole strict mis en place pour accéder aux ressources d’internet. En surfant sur le web et en examinant les URL situées dans la barre d’adresse de votre navigateur web, vous avez dans doute remarqué que certaines pouvaient comporter des _, %, ou des majuscules.

À votre stade, seuls les minuscules et les tirets sont autorisés pour faire de belles URL. Il ne sert à rien d’essayer de mettre des underscores.

Catégorie et étiquette ou tag

Ce sont des termes de taxonomie qui classent les éléments pour pouvoir les utiliser dans des fonctionnalités :

  • alimenter un menu,
  • générer des vues automatiques (une liste d’actualités, un calendrier…),
  • créer des contenus privés…

En tan qu’éditeur, ce sont des variables essentielles qu’il faut maîtriser pour garantir le bon fonctionnement du site web.
(+1 UX)

Traitement du texte

Astuces de rédaction

Pour bénéficier du référencement naturel (même si j’ai tendance à penser que ce processus arrive à son terme), votre texte doit faire au moins 300 mots. Votre requête cible doit apparaître telle quelle dès l’introduction. Dans l’idéal, elle doit être mentionnée au moins trois fois. (+1 SEO)

N’oubliez pas que vous vous adressez à des utilisateurs. Il convient de choisir le bon ton et la bonne forme. Votre utilisateur est arrivé sur votre article pour une ou plusieurs raisons, veillez à ce qu’il soit parfaitement satisfait de votre service. (+1 UX)

Astuces d’intégration

Pour ceux qui travailleraient leur texte sur un autre logiciel en amont, je vous conseille de coller votre texte dans sa forme brute grâce à ces raccourcis claviers :

  • Ctrl + Maj + v pour Windows,
  • Option + Maj + Commande + V pour Mac.

Les WYSIWYG (What you see is what you get) autrement dit, les petits éditeurs web, ont la fâcheuse tendance à capter les formes de style des textes d’où ils proviennent.  Au-delà de cet inconvénient, il injecte aussi du code HTML. (Consultez l’article dédié aux experts si vous souhaitez approfondir ce point). (+1 W3C)

Un mot sur la mise en forme du texte

Respectez la charte graphique !  Certaines personnes pourront trouver cela frustrant, mais si les concepteurs ont choisi une certaine taille de police et ont imposé des couleurs c’est sans doute pour d’excellentes raisons. En tant que webmaster, vous êtes les garants de la charte graphique(+1 UI)

Gestion des langues

Si vous gérez un site multilingue et que vous n’avez pas le temps de traduire un article, ne faites rien. Mon article existe seulement s’il est traduit !

Ne faites pas la bêtise d’injecter du contenu dans une mauvaise langue, quelles que soient vos raisons car Google va vous backlister. Et croyez-moi, sortir de la liste noire de Google est une tâche incommensurable.

Zone Française

 Titre : Mon super article
URL : wexample.com/fr/mon-super-article 
 Contenu : en français

 Titre : My great Article
URL : wexample.com/fr/my-great-article
 Contenu : en anglais

English zone

Titre : My great article
URL : wexample.com/en/my-great-article
 Contenu : en anglais

Titre : Mon super article
URL : wexample.com/en/mon-super-article
 Contenu : en français

Les titres de second niveau

Hiérarchisez vos titres

Il est important de savoir hiérarchiser les titres dans un article de blog pour éviter des erreurs majeures qui vont à l’encontre des normes du W3C et qui peuvent engendrer des sanctions par les moteurs de recherche. Pour en savoir plus : consultez l’article de l’intégration web en mode expert. (+1 W3C)

Un moyen d’aérer votre contenu

Habituez-vous à agrémenter votre texte avec plein de titres pour faciliter la lecture. N’oubliez pas que votre lecteur n’a que 2 secondes de patience. Sans doutes il consulte votre article juste pour trouver une petite information. Les titres ont l’avantage de donner des aperçus efficaces. (+1 SEO et UX)

Renforcer la puissance de votre requête cible

En théorie, si votre requête cible est en harmonie avec le contenu de votre article, vous n’aurez pas trop de difficulté à créer des titres avec ses mots. (+1 SEO)

Les liens hypertexte

Maillage Interne

Dès que vous avez la possibilité de faire référence à d’autres articles de votre blog, faites-le en ajoutant un lien sur une expression qui reprend la requête cible ou le titre de l’article de référence comme ceci :

Voici un beau placement de liens internes pour le blog de Wexample Labs : « consultez nos articles sur l’éco-conception des sites web pour découvrir l’impact écologique de votre projet ».

Un site web doté d’un bon maillage de liens ajoute de la cohérence, renforce votre propos et votre crédibilité pour les moteurs de recherche. (+1 SEO)

Liens externes

Pourquoi faut-il ajouter des liens externes à votre site web pour avoir un bon score SEO ? Cette pratique remonte à l’origine du web, à l’époque où les moteurs de recherche n’existaient pas. Vous voyagiez de site en site en cliquant sur des liens hypertextes. Depuis, ce critère est resté.

  • C’est aussi une façon ludique de sourcer vos articles, (+1 UX)
  • et de mettre en valeur vos partenaires et les acteurs de votre écosystème. (+1 SEO)

Ouverture des liens hypertextes

La règle est simple : ouvrir un lien dans un nouvel onglet, c’est sortir de votre site web.

  • Ne jamais ouvrir un lien interne dans un nouvel onglet. (+1 UX)
  • Toujours ouvrir les liens externes nouvel onglet. (+1 UX)
  • Les PDF peuvent faire exception (en fonction de leur usage).

Les sites web qui ne respectent pas cette règle veulent compenser maladroitement un problème d’UX design. En tant que webmaster, vous pouvez compenser ces problèmes avec votre maillage interne.

Gestion de la bibliothèque de médias

Savoir nommer ses fichiers

En tant que communiquant, vous êtes amenés à traiter un volume d’images ou de PDF très important. Pour retrouver facilement un fichier et les classer rapidement, la meilleure des méthodes est de bien nommer ces fichiers.

Composition du nom des fichiers :

Date (AAMMJJ) + nom du fichier + format + extension
200111wexample-labs-un reseau-de-professionels-du-web1200x600px.png

Date (AAMMJJ) + requête cible + format + extension
 200112creer-votre-site-web-avec-wexample-labs-pour-un resultat-professionel1200x600px.jpeg

Date (AAMMJJ) + explication de l’usage (pour les PDF) + extension
 200112formulaire-d-adhesion-2020.pdf

Bien nommer ses fichiers pour augmenter sa productivité

Trois bonnes raisons de bien nommer ses fichiers :

  • Retrouver facilement les fichiers dans les moteurs de recherche (du PC ou du blog) (+1 UX).
  • Placer votre requête cible (+1 SEO).
  • Indiquer l’usage de votre PDF pour aider votre utilisateur à le retrouver facilement dans ses téléchargements (+1 UX).

La syntaxe du nommage des fichiers

Pour avoir un résultat professionnel, soyez rigoureux sur la syntaxe de vos fichiers. Pour ma part, je ne mets jamais de majuscule et d’underscore.

Supprimer les accents pour éviter :

Les PDF

Les PDF ont un usage précis pour les sites internet :

le téléchargement de formulaires papiers,
le téléchargement de document privé (factures, contrats…),
le téléchargement de documents destinés à la non-divulgation.

Si votre contenu ne rentre pas dans ce type d’usage, vous devez faire un article.

Traitement des images

Connaître la taille de vos images

Dès la conception du site, créer des gabarits de vos pages en indiquant la taille de vos images :

  • image à la une 500 × 500 px ;
  • image d’entête : 1200 × 630 px…
  Intégrer des images trop grandes augmente le temps de chargement de votre page web :

vos images dépenses des ressources inutiles ;
cela ajoute des difficultés d’accessibilité.
En 2018 ⅓ des connexions web était sur un mobile.

Choisir le bon format

Économisez de la ressource en choisissant le bon format (+1 Éco).

GIF > pour les images qui ont peu de couleurs
JPG > format d’image compressée (haute à faible résolution)
PNG > format d’image compressée (faible résolution)
PNG 32 > pour les images à fond transparent

Prendre la bonne résolution

Une trop grosse résolution va ralentir le chargement de votre page web, et le contraire va donner un rendu déplorable.

Image en base résolution

Exemple d'images traitée comme un vrai webmaster

Les outils du webmaster

Les webmasters vont passer beaucoup de temps à traiter leurs images pour avoir un rendu propre et efficient.

Voici quelques outils en ligne indispensables :

  • Google images : meilleur moteur de recherche d’images au monde, idéal pour retrouver une image similaire ou de meilleure qualité.
  • PIXLR : pour traiter des photos
  • Canva : pour créer vos visuels web
  • Who can use : pour faire un choix de couleur harmonieux.

Ajouter un texte alternatif à votre image

À l’origine, le texte alternatif des images a été imaginé par le W3C pour les logiciels de lecture des non-voyants. Parfois les images détiennent une information importante pour la compréhension de l’article. L’attribut Alt de l’image est censé compenser les défaillances visuelles par un petit texte. Cet usage a petit à petit dévié de sa fonction initiale pour devenir un placement de mots clés. Et devinez un peu lesquels sont à privilégier ?

Les images indispensables pour un site web

  • L’image de mise en avant, utilisée pour alimenter les vues du site web.
  • L’image pour les réseaux sociaux, qui s’affichera dans les partages.

Essayer de garder la même iconographie pour préserver une certaine harmonie et faciliter la compréhension de l’utilisateur.

Messages d’alerte

Certains thèmes proposent d’inclure des “Alertes box”. Ce sont des cellules dotées d’un fond coloré, créées pour y inclure des messages.

Voici un message de notification, utilisé pour apporter une information.

Voici un message d’attention, qui met l’accent sur une anomalie.

Voici un message dédié au succès, pour prévenir l’utilisateur d’une action réussie.

Voici un message d’erreur, pour indiquer à l’utilisateur que l’action n’a pas aboutie.

Ils sont très souvent utilisés dans les tunnels d’action et dans les formulaires. Leur usage dans l’édition d’article est très limité. Dans toute ma carrière, j’ai dû en utiliser un, une seule fois, pour informer mon utilisateur que l’article n’était pas optimisé pour le mobile.

CTA

CTA pour Call To Action. Ce sont des boutons qui invitent l’utilisateur à passer à l’action :

Besoin d’un conseil ?

Vous avez adoré mes conseils et vous souhaitez en savoir plus ! Réservez un atelier de co-construction pour booster vos pages web.

Trop de travail et si peu de temps ?

Faites-vous aider par un webmaster professionnel pour rattraper les erreurs UX, UI et SEO en un temps record !

Comme vous pouvez le constater, il fonctionne parfaitement bien pour les appels commerciaux. Mais vous pouvez les utiliser pour plein de choses :

  • un appel aux dons
  • une invitation à signer une pétition
  • une demande d’inscription à un événement…

Métadonnées

Une métadonnée, c’est la donnée de la donnée. Pour vos articles web, elles ont un petit nom rigolo : les snippets. Ce sont des données qui vont servir à créer le rendu des moteurs de recherche :

Snippets de l'article Apprendre l’intégration de contenus web

C’est à ce niveau que vous identifiez votre requête cible, la description de l’article et le titre SEO.

Métadonnées des réseaux sociaux

C’est Facebook, le premier réseau qui a utilisé des métadonnées pour optimiser le partage des pages web sur sa plate-forme.

Faites le test, partager cet article sur Facebook et sur Twitter, vous verrez que mon titre, mon image et ma description sont différents.

Quels sont les avantages de bien renseigner les métadonnées des réseaux sociaux ?

 Les articles accompagnés d’une image sont plus “cliquables
 Ma communauté est sans doute différente d’un réseau à l’autre.

  • Twitter : pour sensibiliser des communautés et des journalistes,
  • Facebook : pour une communication B2C (Business to Consumer),
  • Linkedin : pour une communication B2B (Business to Business)…
 Je vais pouvoir adapter mon message pour chaque média.

Contrôle responsive

Lorsque vous avez fini votre bouillon, vérifier le comportement de votre article sur mobile.
Rassurez-vous, cette vérification peut se faire depuis votre navigateur grâce à l’inspecteur d’éléments.

  • Taper Ctrl + Maj + I ou F12 pour Windows
  • Option + Commande + I pour Mac

Libre à vous de jouer avec, de tester des marques de smartphones et de tablettes et de réajuster les petites pétouilles.

Contrôle navigateur

La bête noire des développeurs web était le navigateur Windows : Internet explorer (IE). C’était le favori des Français et en même temps celui qui fonctionnait le plus mal. Son principal problème réside dans son incapacité à traiter le langage JavaScript. C’est le code qui permet tous les petits effets dynamiques des templates de sites web.

Nous avions donc des porteurs de projets qui voulaient plein petits d’effets wahou sur leur site web et une majorité d’utilisateurs qui ne pouvaient pas les voir 😑.

Par chance IE n’est plus supporté 😅🍾. En d’autres termes, il ne bénéficie plus de mises à jour. Windows a fait le choix de l’abandonner et de repartir sur de nouvelles bases avec Edge.

Néanmoins, nous ne sommes pas à l’abri d’un problème de compatibilité. Votre rôle sera de garantir l’affichage des informations importantes.

Conclusion

Pour un résultat parfait, il n’y a pas de secrets : tester, tester et retester !!!

Je vous conseille de travailler avec deux onglets ouverts :

  • un pour le back office et à l’édition de l’article,
  • l’autre pour le front office pour examiner les résultats.

Prenez l’habitude de tester toutes vos modifications et d’avancer petit à petit.

Beaucoup de solutions (Wix, WordPress…) promettent “un site internet professionnel”, en quelques clics. Après la lecture de ce tuto, vous vous rendez compte de l’ampleur de la supercherie. Si je devais faire des concessions, par manque de temps sur une ou deux bonnes pratiques, je laisserai de côté le SEO pour me concentrer sur mes utilisateurs. Après tout, ce n’est pas pour Google que j’ai écrit cet article ! 😉
Carole Lavocat Cheffe de projet web et blogueuse passionnée

 

2 Comments. Leave new

Cet article est un aide-mémoire très utile concernant les aspects les plus importants de la rédaction d’articles.
Merci Carole pour cet article très clair, facile à lire, et instructif !

Répondre

Excellent article, très bien fait et instructif.
Et en effet si WordPress était si simple ça se saurait ^^ mais se serait moins drôle.
Merci Carole.

Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *