Apprendre l’intégration de contenus web de manière professionnelle

Durée : 17 minutes

Au fil des années, j’ai formé de nombreuses personnes au webmastering et à l’intégration de contenus web. Mon objectif a toujours été de leur fournir les compétences nécessaires pour créer des articles de blog de qualité, bien structurés et optimisés pour le SEO. J’ai constaté que, bien que les nouvelles solutions clés en main rendent l’intégration de contenu plus accessible, une compréhension approfondie du HTML reste essentielle pour éviter les erreurs courantes et améliorer la qualité des articles.

C’est pourquoi j’ai décidé de créer ce tutoriel. Avec ce guide, vous apprendrez à intégrer correctement le contenu, à éviter les erreurs d’intégration, et à garantir que vos articles ne sont pas seulement bien écrits, mais aussi techniquement solides et optimisés pour les moteurs de recherche. Ce savoir-faire est une part essentielle de votre stratégie SEO et est crucial pour obtenir de bons résultats dans les moteurs de recherche.

🎓 Apprendre l’intégration de contenus web de manière professionnelle

De nos jours, il est de plus en plus courant de demander aux chargés de communication non seulement de rédiger des articles, mais aussi de savoir les intégrer sur un blog. Travailler avec des solutions clés en main telles que WordPress, Wix, et autres CMS peut donner l’illusion que cette tâche est facile. Cependant, elle requiert des compétences de webmaster pour éviter les erreurs d’intégration. Si vous souhaitez obtenir de bons résultats dans les moteurs de recherche, il est crucial d’apprendre l’intégration de contenus web de manière professionnelle. Une intégration soignée fait partie intégrante de votre stratégie SEO, garantissant que vos articles sont non seulement bien écrits, mais aussi optimisés pour les moteurs de recherche.

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

😁 Êtes-vous prêt à apprendre l’intégration de contenus web de manière professionnelle ?

Pour travailler comme un véritable professionnel du web, je vous conseille d’ouvrir deux onglets. Le premier onglet sera réservé au « back-end », qui est l’espace d’édition de votre article. Le second onglet doit être dédié au « front-end », l’espace où vous pouvez voir le résultat final. Pour travailler efficacement et correctement, il est essentiel de vérifier toutes vos modifications au fur et à mesure que vous progressez.

⭕️ La requête cible

Connue également sous le nom de mot-clé principal, la requête cible est essentielle pour identifier le sujet de votre article. Lorsque vous cherchez une information sur votre moteur de recherche préféré, vous tapez des mots qui correspondent à votre besoin et cliquez sur « rechercher ». Bien sélectionner votre mot-clé principal et l’utiliser efficacement est crucial pour optimiser votre contenu pour le référencement (SEO) :

✏️ Dans le permalien, (+1 SEO)
✏️ Dans votre titre principal pour une visibilité accrue (+1 SEO)
✏️ Dans votre premier h2 pour renforcer la structure,, (+1 SEO)
✏️ Dans les titres de deuxième et troisième niveaux pour cohérence,(+1 SEO)
✏️ Dans l’introduction pour capter l’attention, (+1 SEO)
✏️ À travers le contenu de votre article pour pertinence,, (+1 SEO)
✏️ Pour nommer les fichiers images pour l’indexation, (+1 SEO)
✏️ Pour enrichir les métadonnées des réseaux sociaux pour l’engagement. (+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 analyser la fréquence d’utilisation d’un terme dans le moteur de recherche.

🅰️ Le titre principal de l’article

👉 Comment créer un bon titre SEO ?

Le titre SEO est celui qui apparaîtra dans les résultats des moteurs de recherche. Il représente la première interaction des utilisateurs avec votre article et doit donc être percutant (+1 UX) et refléter votre contenu (+1 SEO). Un bon titre SEO est une invitation à la lecture qui mérite une attention particulière. (+1 UX)

En manque d’inspiration ? 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

Les titres ne doivent jamais être entièrement en majuscules pour respecter la charte graphique du site.
(+1 UI)

C’est le thème du site, et non le webmaster, qui dicte comment les titres doivent être affichés. Cette règle peut être mise en œuvre à travers une ligne de code dans le thème, comme le montre l’exemple suivant :

<h1 style=”text-transform: uppercase;”> Voici un titre qui doit s'afficher en majuscule </h1> 

👉 Traduction des titres

Il est essentiel de respecter la langue d’origine du site, surtout pour les sites multilingues, ce qui contribue à optimiser le référencement(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. Par exemple, pour un article intitulé « Mon super article ! », une URL appropriée serait :

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

Dans cet exemple, l’omission des apostrophes dans l’URL générée automatiquement peut transformer des mots comme « d’une » en « dune » et « l’une » en « lune ». De plus, la ponctuation disparaît complètement dans l’URL, ce qui peut modifier le sens initial. Une attention particulière à ces détails peut améliorer le référencement (SEO) de votre page. (+1 SEO)

👉 Caractères spéciaux dans les URL

L’URL suit un protocole strict pour accéder aux ressources d’Internet. En naviguant sur le web, vous avez peut-être remarqué que certaines URL dans la barre d’adresse de votre navigateur web contiennent des caractères comme des underscores (_), des pourcentages (%), ou des majuscules.

Pour optimiser votre SEO, il est recommandé d’utiliser uniquement des minuscules et des tirets dans vos URL. Les underscores, par exemple, ne devraient pas être utilisés car ils peuvent être interprétés différemment par les moteurs de recherche et affecter négativement le référencement de votre page.

Respecter ces conventions simples mais importantes peut améliorer significativement le positionnement de vos pages dans les résultats de recherche. (+1 SEO)

🔖 Les catégories et étiquettes ou tags

Les catégories et les étiquettes sont des éléments de taxonomie utilisés pour classifier et organiser les contenus sur un site web. Ces termes ne se contentent pas de structurer l’information ; ils jouent aussi un rôle clé dans plusieurs fonctionnalités pratiques :

✏️ Alimenter un menu, facilitant la navigation sur le site, (+1 UX)
✏️ Générer des vues automatiques, comme une liste d’actualités ou un calendrier d’événements, rendant le contenu plus accessible (+1 UX)
✏️ Créer des contenus privés, offrant une gestion sécurisée et ciblée des informations(+1 UX)

En tant qu’éditeur, maîtriser l’utilisation de ces termes taxonomiques est essentiel pour assurer le bon fonctionnement du site web et améliorer l’expérience utilisateur.
(+1 UX)

📇 Le traitement du texte

👉 Astuces de rédaction

Pour bénéficier du référencement naturel de votre contenu (bien que certains pensent que cette pratique touche à sa fin), assurez-vous que votre texte contienne au moins 1000 mots. La requête cible doit être présente dès l’introduction et être mentionnée dans votre article autour de 1% à 2%, ce qui représente 10 à 20 fois. (+1 SEO)

Rappelez-vous que vous vous adressez à des utilisateurs réels. Il est donc crucial de choisir le ton et la forme appropriés pour répondre à leurs attentes et s’assurer qu’ils trouvent satisfaction à travers votre contenu. (+1 UX)

👉 Astuces d’intégration

Pour ceux qui préparent leur texte sur un autre logiciel, il est recommandé de coller le texte dans sa forme brute en utilisant les raccourcis suivants :

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

Les éditeurs WYSIWYG (What you see is what you get) ont la fâcheuse tendance à conserver les styles des textes copiés, et peuvent également insérer du code HTML indésirable. (Pour en savoir plus, Consultez l’article dédié aux experts). (+1 W3C)

👉 Un mot sur la mise en forme du texte

Respectez toujours la charte graphique ! Bien que certaines restrictions puissent sembler frustrantes, les choix de conception comme la taille de police et les couleurs ont été faits pour de bonnes 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

Lorsque vous gérez un site multilingue, il est crucial de ne pas publier un article non traduit si vous manquez de temps. Un contenu doit être disponible dans toutes les langues proposées par votre site pour garantir une expérience utilisateur optimale. (+1 UX)

Évitez absolument d’injecter du contenu dans une langue incorrecte, quelles que soient vos motivations. Cette pratique peut conduire Google à placer votre site sur sa liste noire (backlister), ce qui peut gravement nuire à votre visibilité. Se remettre d’une telle sanction par Google est une tâche ardue et peut prendre beaucoup de temps. (+1 SEO)

👉 Les bonnes pratiques de traduction :

🅰️ Les titres de second niveau

👉 Hiérarchisez vos titres

Savoir hiérarchiser les titres dans un article de blog est crucial pour éviter des erreurs qui vont à l’encontre des normes du W3C et qui pourraient entraîner des sanctions de la part des moteurs de recherche. Pour approfondir vos connaissances sur l’intégration web, consultez l’article de l’intégration web en mode expert. (+1 W3C)

👉 Un moyen d’aérer votre contenu

Facilitez la lecture de vos articles en les structurant avec de nombreux titres de second niveau. Rappelez-vous que vos lecteurs peuvent avoir peu de patience et consulter votre article juste pour y trouver une information spécifique. Les titres secondaires offrent des points d’entrée rapides et efficaces pour capter leur attention.(+1 SEO et UX)

👉 Renforcer la puissance de votre requête cible

Si votre requête cible est en adéquation avec le contenu de votre article, intégrer ces mots-clés dans vos titres de second niveau devrait se faire naturellement et renforcera votre SEO. (+1 SEO)

🔗 Les liens hypertextes

👉 Maillage Interne

Lorsque vous avez l’opportunité de référencer d’autres articles de votre blog, profitez-en pour ajouter un lien sur une expression pertinente qui reprend la requête cible ou le titre de l’article de référence. Par exemple :

« Pour approfondir, consultez nos articles sur l’éco-conception des sites web et découvrez 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 tradition remonte aux débuts d’Internet, une époque où naviguer de lien en lien était la principale méthode de découverte de contenu. Cette pratique continue d’être un critère important pour les moteurs de recherche.

• C’est également une manière efficace de sourcer vos articles (+1 UX)
• et de valoriser vos partenaires et autres acteurs de votre écosystème. (+1 SEO)

👉 Ouverture des liens hypertextes

La gestion de l’ouverture des liens doit suivre des règles précises :

• Ne jamais ouvrir un lien interne dans un nouvel onglet. Cela pourrait nuire à l’expérience utilisateur en désorientant vos visiteurs. (+1 UX)
• Toujours ouvrir les liens externes dans un nouvel onglet pour garder vos visiteurs sur votre site tout en leur permettant d’explorer d’autres ressources. (+1 UX)
• Les fichiers PDF peuvent faire exception, selon leur usage spécifique.

Les sites qui ne respectent pas ces directives cherchent souvent à compenser une lacune en matière de conception d’UX design.

📂 La gestion de la bibliothèque de médias

👉 Savoir nommer ses fichiers

Pour les professionnels de la communication, gérer un volume important d’images ou de PDF est courant. Pour faciliter la recherche et le classement de ces fichiers, adoptez une méthode de nommage efficace.

Composition du nom des fichiers :

1. Pour les dossiers :
   Date (AAMMJJ)  : assure un suivi chronologique.
   Nom du fichier : décrit le contenu ou le sujet.
   Exemple : 200111–wexample-labs-un reseau-de-professionels-du-web
   
2. Pour les images :
   Date (AAMMJJ)  : pour l’organisation chronologique.
   Requête cible : pour référencer le sujet ou l’objectif.
   Format : indique la dimension de l’image.
   Extension : type de fichier.
   Exemple : 200112–creer-votre-site-web-avec-wexample-labs-pour-un resultat-professionel–1200x600px.jpeg
   
3. Pour les PDF ou documents spécifiques :
   Date (AA-MM-JJ) : permet de situer le document dans le temps.
   Explication de l’usage : précise l’objet du document.
   Extension : identifie le type de fichier.
   Exemple : AAMMJJ–mon-usage-principal.pdf

👉 La syntaxe du nommage des fichiers

Pour maintenir un niveau professionnel dans la gestion de vos fichiers, il est crucial d’adopter une syntaxe rigoureuse. Voici quelques règles que j’applique personnellement pour optimiser le référencement et assurer une compatibilité universelle :

• Évitez les majuscules : Utilisez uniquement des lettres minuscules pour éviter les confusions et les erreurs de lien dues à la sensibilité à la casse sur certains systèmes.
• Ne pas utiliser d’underscores (_) : Préférez les tirets (-) pour séparer les mots dans les noms de fichiers, car ils sont mieux interprétés par les moteurs de recherche. (+1 SEO)

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

• Les problèmes de compatibilité avec différents systèmes de fichiers, qui peuvent ne pas reconnaître ou mal interpréter ces caractères.
• Les problèmes d’encodage, en particulier avec les navigateurs plus anciens comme Internet Explorer, qui peuvent mal afficher les noms de fichiers contenant des caractères spéciaux.

🖼 Le traitement des images

👉 Connaître la taille de vos images

Dès la conception du site, créer de vos pages en indiquant la taille de vos images. (+1 ÉCO) (+1 SEO) (+1 UI)

Dès la conception de votre site, il est crucial de créer des gabarits pour chaque type de page, précisant la taille requise pour les images. Ceci améliore l’efficacité énergétique (+1 ÉCO), optimise le référencement (+1 SEO), et améliore l’interface utilisateur (+1 UI).

Intégrer des images trop grandes augmente le temps de chargement de votre page web :

❌ Vos images dépensent des ressources inutiles ;
❌ Cela ajoute des difficultés d’accessibilité.
❌ En 2018 ⅓ des connexions web était sur un mobile.

👉 Compresser vos images

Compressez vos images avant de les héberger sur votre site pour réduire leur taille sans sacrifier la qualité (+1 Éco). Ceci est essentiel pour maintenir une bonne résolution tout en conservant une taille de fichier minimale.

👉 Choisir la bonne résolution

Optez pour une résolution qui ne ralentit pas le chargement de votre page sans pour autant dégrader la qualité visuelle. Une résolution trop élevée peut nuire à la performance, tandis qu’une résolution trop basse peut affecter négativement l’expérience utilisateur. (+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 animées ou avec peu de couleurs.
• JPG : pour les images de haute à faible résolution.
• PNG : pour les images de qualité supérieure avec transparence.
• WEBP / WEBP2 : nouveaux formats ultra-légers, optimisés pour le web.

👉 Les outils du webmaster

Pour ceux qui n’ont pas les compétences techniques pour optimiser les images eux-mêmes, voici une sélection d’outils recommandés ::

🧰 Les outils de compression d’image

• Squoosh et Short Pixel : Des solutions en ligne faciles à utiliser. Elles offrent de nombreuses fonctionnalités pour compresser vos images et choisir le meilleur format de fichier (jpg, png, webp, webp2…).
• SVGOMG : Selon Lionel, notre expert en écoconception, c’est le meilleur outil pour compresser les fichiers SVG.
• Yoga image optimizer : Une solution logicielle à télécharger pour votre PC.
• Image Compressor : Très efficace pour compresser rapidement les PNG et les JPEG, bien que nous ne puissions pas comparer son algorithme faute de code source ouvert (😘 merci à Alejandra pour le partage).

🧰 Les outils de traitement d’image

👍 Les solutions rapides :

• Retoucher la lumière d’un portrait avec clipdrop.co 😍😍
• Agrandir une bipmap avec Imgonline et upscaler.
• Améliorer la qualité d’une image avec Letsenhance.
• Remove : supprimer le font d’une image.

👍 Les solutions complètes

• Pixlr : qui propose une interface similaire à Photoshop.
• Be funky : logiciel en ligne qui permet de travailler les photos.
• Canva : un outil d’édition d’image extrêmement simple, dont la version Pro permet d’enlever facilement le fond d’une image.

🧰 Les outils pour convertir le format de vos images

• Convert.tel
• Img2Go

👉 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

Le CTA, ou Call To Action, est un élément crucial sur tout site web. Il s’agit de boutons ou de liens conçus pour inciter l’utilisateur à passer à l’action. Voici un exemple illustratif :

📄 Les métadonnées

Les métadonnées, ou « données de la donnée », jouent un rôle essentiel dans l’amélioration de votre référencement et la présentation de vos contenus dans les moteurs de recherche. Communément appelées « les snippets« , elles permettent d’identifier votre requête cible, de formuler une description pertinente de l’article et de définir un titre SEO adapté. (+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 plateforme. (+1 SEO)(+1 UX)

Faites le test : partagez cet article sur Facebook et X, et observez comment le titre, l’image, et la description peuvent varier d’une plateforme à l’autre.

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

• Facebook et Instagram : pour une communication B2C (Business to Consumer),
• Linkedin : pour une communication B2B (Business to Business)…

 Cette adaptation vous permet d’optimiser votre communication pour chaque média, améliorant ainsi l’expérience utilisateur et l’efficacité de votre message sur diverses plateformes.. (+1 UX)

📱 Le contrôle responsive

Après avoir fini de rédiger votre article, il est essentiel de vérifier son comportement sur les appareils mobiles. Heureusement, cette vérification peut facilement être effectuée 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

Historiquement, le navigateur Windows Internet Explorer (IE) a été la bête noire des développeurs web. Malgré sa popularité en France, il avait du mal avec le traitement du JavaScript, le langage responsable des effets dynamiques sur les sites web. Cela a souvent résulté en une expérience utilisateur réduite, avec des utilisateurs incapables de voir les effets « wahou » que les porteurs de projets désiraient. Heureusement, Microsoft a depuis abandonné Internet Explorer au profit de son navigateur plus moderne, Edge.

Cependant, les problèmes de compatibilité peuvent toujours survenir, et il est crucial de s’assurer que les informations importantes sont correctement affichées sur tous les navigateurs. (+1 UX)

⚙️ Tester, tester et retester

Pour garantir la qualité, il n’y a pas de secret : il faut tester, tester et encore tester. Je vous conseille de travailler avec deux onglets ouverts simultanément :

• Un pour le back office, où vous éditez l’article,
• Et l’autre pour le front office, pour examiner les résultats.

Prenez l’habitude de tester toutes vos modifications au fur et à mesure. Avancez petit à petit pour garantir que chaque détail soit parfait.

☕️ Conclusion

De nombreuses plateformes comme Wix ou WordPress promettent un « site internet professionnel » en quelques clics. Toutefois, ce tutoriel vous montre l’ampleur de ce qui est réellement impliqué pour créer un site de qualité. Si des concessions doivent être faites par manque de temps, je choisirais de laisser de côté certains aspects du SEO pour me concentrer sur l’expérience utilisateur. Après tout, c’est pour les utilisateurs que j’écris, pas pour Google ! 😉

Tutos wex : Intégration de contenus