Une double obligation : favoriser la lisibilité et la compréhension de vos contenus pour les internautes et faciliter leur indexation par les moteurs de recherche

Qu'il s'agisse de pertinence au niveau de la lisibilité des contenus, ou de leur structuration pour favoriser le référencement, la démarche est la même  : proposer une organisation logique de vos articles afin de faciliter une lecture transversale de vos contenus, tout en indiquant aux moteurs de recherche un plan détaillé de leur structure.

UNE NECESSITE : RESPECTER LES STANDARDS D'INTEGRATION POUR FAVORISER :

  • la capacité de votre site à évoluer : en respectant les bonnes pratiques, votre site sera plus facile à faire évoluer d'un point de vue graphique et ergonomique , vous pourrez ainsi changer de template sans avoir à revoir tout votre contenu
  • la portabilité de vos contenus : respecter les normes vous permettra d'optimiser l'affichage de vos contenus sur un maximum de supports (laptops, tablettes, smartphones...)
  • leur visibilité : en se conformant à ces directives, elles-mêmes encouragées par les moteurs de recherche, vous optimiserez votre référencement.

UTILISER AU MIEUX LES FONCTIONNALITES DE VOTRE EDITEUR POUR VOUS CONCENTRER SUR LA STRUCTURATION DE VOS CONTENUS

L'éditeur de Joomla (ou de K2) va vous permettre d'intégrer en toute simplicité des contenus (éléments) sur votre site internet . Vous n'aurez pas besoin de vous pencher sur les questions de mise en forme, dans la mesure où celle-ci est gérée par un jeu de feuilles de styles qui va permettre d'automatiser le formatage de vos contenus en fonction de leurs attributs : titres, sous-titres, liens, interlignage, etc... tous les éléments de styles constitutifs de la charte graphique du site internet sont préformatés de sorte à ce que vous n'ayez plus qu'à vous concentrer sur la rédaction et le plan de vos contenus.

STYLES PREFORMATES ET BALISES HTML

Depuis l'éditeur de Joomla vous pouvez mettre en forme vos textes, avec différents styles tels que la graisse, l'italique, l'alignement …

Styles préformatés de l'éditeur Joomla

Remarque importante : seuls les styles HTML de base (graisse, italique, soulignage...) sont autorisés de manière à garantir la cohérence graphique de votre site (gérée par les feuilles de style de votre template) ainsi que sa portabilité future (le fait de « forcer » des styles en changeant la police ou la couleur est contraire aux bonnes pratiques et vous obligera à effacer toutes les balises html non valides du type <span style="...">, <font>, etc. lors des prochaines évolutions de votre template Joomla).

Vous pouvez donc commencer à intégrer directement vos contenus dans le champ prévu à cet effet dans l'éditeur ou en effectuant un copier-coller depuis la source de vos contenus (lire attentivement le paragraphe suivant dans ce cas de figure).

ATTENTION AUX COPIER-COLLER !

Lorsque vous copiez du texte depuis un logiciel tiers tel que Word, il se peut que celui-ci colle aussi du code non conforme avec les langages web. Outre les erreurs que peuvent produire ces codes, ils modifieront aussi les styles de l'interface graphique du site (interligne, taille des polices, couleurs … ). Pour éviter d'intégrer ce code, il vous faudra lors d'un copier coller, utiliser la fonction « effacer la mise en forme » disponible dans le menu « format » de l'éditeur. Cela vous obligera également à reformater la mise en page de votre contenu, en rajoutant les sous-titres (H3 préférablement)  ou de la graisse sur les passages que vous voudrez mettre en relief, mais c'est à ce prix que vous obtiendrez un code html valide et donc optimisé pour s'afficher sur tous les supports et facilement indexable par les moteurs de recherche.

Supprimer les styles indésirables à l'aide de l'éditeur de Joomla

TITRES, SOUS-TITRES ET PARAGRAPHES

Différents styles de titres sont à votre disposition pour vos contenus. Pour cela on utilise en web des balises heading (H1, H2, H3, Hn...). La balise H1 est généralement réservée au titre du site et la balise H2 au titre des articles. Pour les sous-titres, vous pouvez utiliser les balises H3, H4, H5… en respectant leur hiérarchie. L'éditeur dispose d'un bouton pour intégrer facilement ces balises sans avoir à vous soucier du code HTML. Sélectionnez votre titre et cliquez sur le menu « Paragraphe » puis choisissez le style à appliquer.

Balise H3 pour les sous-titres de vos articles Joomla

LISTES A PUCES

Une erreur assez communément commise lorsqu'on intègre des contenus depuis un document externe est de garder les listes à puces formatées depuis le logiciel de traitement de texte d'origine. Sous Word notamment, on retrouve fréquemment une mise en forme du type :

- liste à puce 1
- liste à puce 2
- liste à puce 3
- etc.

Ce n'est pas du code HTML valide. Il vous faudra retraiter votre liste à puce avec l'éditeur de Joomla en sélectionnant tout le texte, au besoin supprimer les tirets inutiles et sélectionner l'outil « liste à puce » de Joomla (et au besoin aussi revoir les sauts de ligne)

Formater vos listes à puces

Cela donnera le résultat suivant :

  • liste à puce 1
  • liste à puce 2
  • liste à puce 3
  • etc.

Quant au style des puces, s'il ne vous convient pas en l'état, il vous suffira de modifier son apparence en css ou de nous demander de le faire. Cela vaut d'ailleurs pour tous les autres styles (quote, cite, etc...), il est toujours préférable de nous demander de les modifier, voire de les créer plutôt que d'essayer de « forcer » l'éditeur à générer un code non valide.

SAUTS DE LIGNE ET SAUTS DE PARAGRAPHE

Attention également aux sauts de paragraphes intempestifs. Ils nuisent à un agencement harmonieux de votre page et l'alourdissent inutilement. Pour mémoire, un saut de ligne se fait, comme sur un traitement de texte, en appuyant simultanément sur MAJ+ENTREE, alors qu'un saut de paragraphe est généré automatiquement en appuyant sur ENTREE uniquement. En langage HTML, un paragraphe « vide » (donc inutile) est matérialisé par le code <p></p>, en cas de besoin, basculez votre éditeur en mode HTML et supprimez ces balises inutiles.

OUVERTURE DES LIENS

Autre erreur communément commise, le mauvais « ciblage des liens ». Il est fréquent de voir des liens qui ouvrent une source externe (un autre site web, un document pdf...) dans la même fenêtre de navigation (code source HTML : target="_self"). Cela est en effet préjudiciable dans la mesure où si l'internaute ne parvient pas à revenir en arrière ou ferme cette fenêtre, vous risquez de l'avoir perdu, parfois irrémédiablement. Pensez donc à ouvrir ce genre de contenus dans une nouvelle fenêtre (target=_"blank") en n'oubliant pas de cocher l'option « open in new window).

GESTION DES IMAGES

Joomla vous permet par défaut d'intégrer les images de vos articles de deux manières différentes :

  1. par le biais du bouton « image » situé en bas de l'éditeur de Joomla
  2. par le biais de l'onglet « Images et liens » situé en haut de l'éditeur de Joomla

Onglet images et liens de l'éditeur de Joomla

Nous vous recommandons d'utiliser la deuxième solution et ce pour diverses raisons :

  • vous avez la possibilité d'uploader deux images différentes, une pour les intros de vos articles, une pour l'article complet, et pouvez donc ainsi optimiser l'affichage de vos blogs de catégories Joomla
  • vous pouvez ainsi optimiser leur dimension et leur poids pour les adapter au format de votre template et ainsi ne pas surcharger votre bande passante
  • le chemin des images étant stockés dans un champ spécifique de la base de données de Joomla, leur traitement sql est ainsi rendu plus facile (migration du site, opérations de maintenance...)
  • pour la même raison, l'export et le partage des données sont également facilités (par exemple pour alimenter une application mobile)
  • le traitement css des images est également plus facile à réaliser puisque deux classes spécifiques leurs sont attribuées
  • il est même possible de prévoir, en créant une surcharge du template, de n'uploader qu'une image dans le champ intro et que celle-ci soit retraitées automatiquement par le template pour afficher les deux images aux dimensions de votre choix
  • vous économisez ainsi de l'espace sur votre disque dur et épargnez du temps en n'ayant à traiter et uploader qu'une image sur le serveur
  • il est aussi intéressant de prévoir les évolutions futures des standards d'affichage en uploadant des images de taille relativement importantes afin d'avoir à éviter de les retraiter et les uploader à nouveau au cours d'une refonte à venir de votre template

Choisissez une image d'intro et une image différente pour vos articles complets

NOMMEZ ET CLASSEZ VOS IMAGES

Pensez toujours à renseigner à minima le champ alt des images car il est exploité par Google pour indexer vos images. Veillez également à toujours éviter d'uploader vos images à la racine du répertoire images, cela aura pour conséquence de ralentir l'ouverture de l'éditeur d'images si un grand nombre de fichiers se retrouvent à cet endroit. Essayez d'organiser vos répertoires d'images en fonction de votre arborescence en essayant de créer un dossier pour chaque grande thématique de votre site.

REMARQUE IMPORTANTE

N'oubliez pas que même si Joomla est doté d'un éditeur WYSIWYG, le rendu final de vos articles en back-office n'est jamais strictement identique à leur apparence finale en front-end. Pensez donc toujours à travailler avec deux onglets ouverts simultanément, un pour l'admin de Joomla, l'autre pour le site en front-office. Et rafraîchissez (F5...) le front après chaque modification apportée à vos articles afin de vous assurer qu'elles sont conformes à vos attentes.