Apprendre l’intégration de contenus web professionnelle

Durée : 17 minutes

J’ai rédigé ce petit tuto : apprendre l’intégration de contenus web professionnelle pour les chargés de communication que j’ai eu le privilège de former. Cet article est pensé comme un petit aide mémoire. ’espère que vous en ferez bon usage.

Apprendre l’intégration de contenus web professionnelle

On demande de plus en plus aux chargés de communication de rédiger des articles de savoir les intégrer sur le blog. Le fait de travailler sur des solutions clés en main tel que WordPress, Wix, et autres CMS, donne l’illusion que cette tâche est facile. Mais si vous souhaitez avoir de bons résultats dans les moteurs de recherche, vous devez apprendre l’intégration de contenus web professionnelle. Pour en savoir plus sur le rôle du webmaster dans l’édition des articles de blog, consulter cet article.

👍 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.

Vous êtes prêt à apprendre l’intégration de contenus web professionnelle ?

Pour travailler comme un véritable professionnel du web, je vous conseille d’ouvrir deux onglets. Le premier est réservé au « back », c’est l’espace d’édition de votre article. L’autre sera réservé pour le « front », c’est l’espace dédié au résultat. Pour travailler vite et bien vous devez vérifier toutes vos modifications au fur et à mesure de votre évolution.

⭕️ 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 le permalien, (+1 SEO)
✏️ dans votre titre principal, (+1 SEO)
✏️ dans votre premier h2, (+1 SEO)
✏️ en rappel dans les titres de deuxième et troisième niveau, (+1 SEO)
✏️ dans l’introduction, (+1 SEO)
✏️ dans le contenu de votre article, (+1 SEO)
✏️ pour nommer les fichiers images, (+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 public :pour 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 bon titre 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)

Vous n’avez pas d’idées ? Consulter ce tuto « 50 idées de titres irrésistibles pour vos articles de blog » offert par ElleBlogue.fr 😉

👉 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)

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 : wp.wexample.com/faites-le-choix-dune-jolie-url
• URL corrigée : wp.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.
(+1 SEO)

À 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. (+1 SEO)

🔖 Les catégories et étiquettes ou tags

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

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

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

📇 Le 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)

👉 Les caractères spéciaux

Soignez la mise en forme de vos textes utilisant les raccourcis clavier des caractères spéciaux de la combinaison de la touche Alt, comme par exemple :

• Alt + 183 = À
• Alt + 144 = É
• Alt + 128 = Ç
• Alt + 0202 = Ê

(+1 UI)

🏁 La 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 ! (+1 UX)

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. (+1 SEO)

🅰️ 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 hypertextes

👉 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 : « 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.

📂 La 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
200111–wexample-labs-un reseau-de-professionels-du-web–1200x600px.png

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

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

🤔 Pourquoi nommer correctement ses fichiers ?

👉 Pour gagner en productivité.
👉 Pour gagner des points SEO !

👉 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. (+1 SEO)

Supprimer les accents et les caractères spéciaux pour éviter :

• les problèmes de compatibilité sur les systèmes de fichiers,
• les problèmes d’encodages, notamment avec les vieux navigateurs comme IE.

📄 Les PDF

👉 Usages des PDF

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

• le téléchargement de formulaires à remplir,
• le téléchargement de document privé (factures, contrats…),
• le téléchargement de documents destinés à la non-divulgation… (+1 UX)

Si votre contenu ne rentre pas dans ce type d’usage, vous devez faire un article. (+1 SEO)

⚠️ Nommer correctement vos PDF

Pour nommer correctement un PDF, vous devez insister sur la temporalité et l’usage de ce fichier :

AAMMJJ–mon-usage-principal.pdf

🖼 Le 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. (+1 ÉCO) (+1 SEO) (+1 UI)

• 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.

👉 Compresser vos images

Avant d’héberger vos images sur votre site web, vous devez les compresser. (+1 Éco) (+1 SEO)

Un exercice particulièrement technique, car vous devez choisir la bonne résolution pour que l’image soit la plus légère possible, sans pour autant entraver l’expérience utilisateur.

👉 Choisir 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. (+1 Éco) (+1 UX)

👉 Choisir le bon format d’image

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

GIF > pour les images qui ont peu de couleurs et les images animées.
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.
WEBP / WEBP2 > nouveau format ultra léger dédié au web.

👉 Les outils du webmaster

Si vous n’avez pas les compétences techniques pour optimiser vous-même vos images avec votre logiciel de design habituel, vous avez le choix d’utiliser une solution en ligne. Coupler ses propres optimisations avec une solution en ligne est aussi un bon réflexe d’intégrateur web.

🧰 Les outils de compression d’image

• Squoosh : Cette application simple d’utilisation propose une multitude de fonctionnalités pour compresser vos images et faire le meilleur choix de format de fichier (jpg, png, webp, webp2…).
• SVGOMG : le meilleur outil de compression des SVG selon Lionel, notre expert en écoconception.
• Yoga image optimizer : une solution à télécharger sur son PC.
• Image Compressor : Un outil très efficace pour compresser rapidement les PNG et les JPEG. Le petit bémol pour l’équipe wex, c’est que cet outil n’a pas ouvert le code de son algorithme et nous sommes donc dans l’incapacité de le comparer avec un autre outil. (😉 merci à Alejandra pour le partage).
• Short Pixel.

🧰 Les outils de traitement d’image

• Retoucher la lumière d’un portrait avec clipdrop.co 😍😍
• Retoucher des images avec Pixlr, qui propose une interface similaire à Photoshop.
• Agrandir une bipmap avec Imgonline.
• Agrandir une bipmap avec Image upscaler.
• Améliorer la qualité d’une image avec Letsenhance.
• Remove : supprimer le font d’une image.
• Be funky : retravailler les images.

🧰 Les outils pour changer le format de vos images

• Convert.tel
• Img2Go

🧰 Les outils pour améliorer les images

• Retoucher la lumière d’un portrait avec clipdrop.co 😍😍
• Retoucher des images avec Pixlr, qui propose une interface similaire à Photoshop.
• Agrandir une bipmap avec Imgonline.
• Agrandir une bipmap avec Image upscaler.
• Améliorer la qualité d’une image avec Letsenhance.
• Remove Supprimer le font d’une image.
• Be funky : retravailler les images.

👉 Ajouter un texte alternatif à votre image

À l’origine, le texte alternatif des images répondait à un vrai besoin accessibilité destinée aux non-voyants. Au commencement du web, tout le matériel design que nous connaissons aujourd’hui n’existait pas encore, et souvent les développeurs devaient créer des images pour élaborer leur interface. C’était le cas des boutons par exemple. C’est alors que le W3C a imposé la règle du texte alternatif. Si, dans une image, la fonction principale était d’envoyer un formulaire au serveur, alors vous deviez le préciser en ajoutant un attribut texte alternatif dans la balise. Par la suite, le webmarketing a perverti cette fonctionnalité pour faire du placement de mots clés. Aujourd’hui, un nombre conséquent d’applications SEO encourage à continuer, malgré les résultats néfastes qu’elle engendre en rendant les sites web illisibles pour une grande partie des utilisateurs.

Selon moi, apprendre l’intégration de contenus web professionnelle, c’est trouver la juste mesure entre nos appétences SEO et les normes accessibilités définies par le W3C.

👉 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.

🛎 Le CTA

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

📄 Les métadonnées

Une métadonnée, c’est la donnée de la donnée. Ces données vont servir à donner des renseignement pour améliorer votre référencement et le rendu dans les moteurs de recherche. Elles ont un petit nom rigolo : les snippets.

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

♻️ Les 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. (+1 SEO)(+1 UX)

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 pour les 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. (+1 UX)

📱 Le 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. (+1 SEO)(+1 UX)

🧭 Le 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ésidait dans son incapacité à traiter le langage JavaScript. C’est le code qui permet tous les petits effets dynamiques des thèmes des 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, Windows a fait le choix d’abandonner ce projet 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. (+1 UX)

⚙️ Tester, tester et retester

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 au fur et à mesure et d’avancer petit à petit.

☕️ Conclusion

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 ! 😉

Tutos wex : Intégration de contenus