retour
Pourquoi faut-il des compétences pour mettre à jour son site internet ? Lorsque vous ajoutez des éléments à votre site via le thème installé, il peut arriver que l’affichage ne vous convienne pas, que des écarts injustifiés soient présents à certains endroits et pas à d’autres, ou encore que l’arborescence des titres H1, H2, H3, etc., soit incorrecte.
Problèmes de site web, l’arborescence des titres
Saviez-vous qu’il existe plusieurs types de titres ? Les titres ont un ordre d’importance et sont analysés par Google pour le SEO. Il est donc essentiel de ne pas placer n’importe quel titre à n’importe quel endroit. Voici les titres par ordre d’importance. À noter que l’on utilise souvent les titres H1 jusqu’à H3. Au-delà, il faut revoir la structure de votre page, car il y a peut-être des aspects à améliorer.
- H1
- H2
- H3
- H4
- H5
- H6
La principale règle concernant les titres est qu’il doit y avoir obligatoirement un seul H1 par page. Ce titre représente le contenu global de votre page. Les autres titres peuvent être utilisés plusieurs fois tout au long de la page. Après le H1, on utilise des H2 pour les sections, puis éventuellement des H3 si votre section comprend des articles avec des sous-titres.
Saviez-vous qu’il existait autant de choses à considérer pour un simple titre ?
Problèmes de site web, les listes ordonnées et non ordonnées.
Il existe deux types de listes lorsque vous rédigez du contenu sur votre site.
- Les listes non ordonnées, qui sont dans le désordre et identifiables par leur puce noire.
- Les listes ordonnées, qui, elles, sont en ordre et ont un numéro pour chaque élément de la liste (1, 2, 3, 4, etc.).
Techniquement, les listes non ordonnées sont balisées dans le code de votre site par :
<ul>
<li> Mon texte ici </li>
</ul>Explications
La balise <ul> indique au navigateur que c’est une liste non ordonnée (unordered list). Cette balise n’est pas visible sur votre page ; c’est la balise <li> qui est visible. Lorsque la balise <ul> est identifiée, une puce noire est affichée.
Passons maintenant aux listes ordonnées. Techniquement, c’est la même chose, mais les <ul> sont remplacées par les <ol>.
<ol>
<li> Mon texte ici </li>
</ol>Explications
La balise <ol> indique au navigateur que c’est une liste ordonnée (ordered list). Comme pour les listes non ordonnées, cette balise n’est pas visible sur votre page, et c’est la balise <li> qui est visible. Lorsque la balise <ol> est identifiée, un numéro s’affiche
Problème site web, le référencement SEO avec les mots en gras
Lorsque vous ajoutez du texte, beaucoup font l’erreur de mettre des phrases complètes en gras, et c’est également le cas pour les titres. Saviez-vous que le gras n’est que de la graisse ajoutée aux lettres, et que lorsque vous ajoutez des mots en gras, vous générez sans le savoir du code en intégrant une balise <strong></strong> ? Cette balise est lue par Google et référence vos mots en gras comme des mots-clés. Ainsi, une phrase entière ne peut pas être considérée comme un mot-clé, et le titre est déjà interprété par Google, donc il n’y a pas d’intérêt à le mettre en gras non plus. Voir notre article Strong, gras, SEO, quel est le point commun ?
Problèmes de site web, il est impossible de résoudre des problèmes inattendus.
Parfois, le thème activé sur votre site peut vous jouer des tours, et une simple mise en page peut vite vous rendre fou, juste à cause d’un décalage impossible à supprimer, ou de listes ordonnées qui affichent toujours « 1 » au lieu de « 1, 2, 3, 4 », etc.
Lorsque le problème est tenace et que les blocs du constructeur de page fourni par votre thème montrent leurs limites, il faut alors consulter le code. Il arrive parfois qu’il y ait des surprises, comme du code généré inutilement par le thème ou un thème qui ne comprend pas ce que vous souhaitez faire. Nous allons vous présenter, comme exemple, une problématique rencontrée avec des listes ordonnées et non ordonnées.
Sur la page du site internet, il y a une partie du contenu où se trouvent visiblement une liste ordonnée et une liste non ordonnée. Le chiffre « 1 » est affiché partout alors que nous souhaitons avoir une suite de chiffres. Pour réaliser cela, il faut intégrer dans la liste ordonnée une liste non ordonnée. Ah oui, vous voyez, ce n’est pas si simple que cela en a l’air si vous ne maîtrisez pas le langage informatique
Nous allons résoudre cette problématique ensemble, et vous allez vite vous rendre compte qu’il est difficile de résoudre ce problème seul sans l’aide d’un professionnel
Nous constatons rapidement le problème : chaque liste ordonnée est détachée des listes non ordonnées, ce qui affiche d’une part la liste ordonnée sur une ligne, puis, après, la liste non ordonnée sur plusieurs lignes. Mais nous constatons également un autre problème : il y a un titre H4 vide qui apparaît de nulle part ainsi que des balises <strong> également vides qui ne servent à rien. Pourquoi ? Bonne question, c’est le thème qui a fait cela.
Voici notre correction du code : nous avons tout d’abord supprimé les balises <strong> vides et inutiles, ainsi que la balise de titre <h4> vide.
Ensuite, nous avons conservé une seule balise <ol></ol> pour créer une seule liste ordonnée et obtenir une suite de chiffres 1, 2, 3, 4, etc.
C’est là que cela devient technique : nous ouvrons une balise <li> qui permettra le numéro 1, et dans cette balise, nous ajoutons une autre liste, mais non ordonnée, avec les balises <ul></ul>, pour afficher la liste à puces sous la ligne contenant le numéro 1. Vous avez en réalité une liste imbriquée dans une autre liste.
La correction du code est effectuée : sur le site, la suite de numéros de 1 à 4 s’affiche correctement de manière automatique, et la liste à puces (<ul>) est correctement affichée à l’intérieur.
Conclusion
Pourquoi faut-il des compétences pour mettre à jour son site internet ? Vous avez peut-être eu des difficultés à comprendre cet article ou même n’avez rien compris. C’est précisément pour cette raison qu’il est recommandé de faire appel à un professionnel : un site internet est technique et nécessite une compréhension des langages informatiques. Notre approche en développement de site internet vous permet d’éviter les problèmes comme ceux mentionnés précédemment. Pour en savoir davantage, vous pouvez nous Contacter via notre formulaire de contact. Retrouvez aussi toutes les informations sur notre prestation de création de site internet