Éléments Web utilisés correctement pour le référencement

Dernière mise à jour le 16 janvier 2019

La plupart des pages Web sont constituées de 3 éléments de base, HTML, CSS et JavaScript. Ces blocs de construction constituent toutes les pages Web, peu importe ce qu'ils utilisent pour les rendre. Chaque élément Web a sa place. Bien qu'il puisse y avoir un certain chevauchement, leur utilisation à dessein aide à créer une page optimisée pour le référencement. Alors, comment ces éléments doivent-ils être utilisés et de quelles manières peuvent-ils être utilisés à mauvais escient ?

Les fonctions de base de l'élément Web

Comparons une page Web à une maison. Une maison a plusieurs parties, chacune à sa place et servant son but. Dans notre maison de page Web, le HTML ressemble aux éléments Web structurels, aux fermes, aux murs, aux fondations. HTML fournit une disposition de contenu de page importante, décrivant son ordre et les éléments qui apparaissent où.

CSS doit être utilisé pour le style. Si nous nous en tenons à l'illustration de la maison, ce serait la couleur de vos murs, de vos armoires, du type de sol que vous avez, etc. Les couleurs de votre page, les tailles de police, la disposition réelle de la page peuvent également être définies dans le CSS. Mais attendez, la mise en page ne devrait-elle pas être en HTML ? Bonne question. Alors que le HTML doit mettre en page les éléments qui seront sur votre page, le CSS doit contrôler la façon dont ces éléments seront affichés sur cette page. CSS est responsable d'une grande partie de la réactivité du Web.

Maintenant que votre maison est construite, il est temps pour certains services publics, comme votre électricité et votre eau courante. JavaScript doit être utilisé pour les éléments interactifs de votre page, tels que la modification des éléments lorsque vous cliquez dessus, l'affichage des données, etc. JavaScript peut être utilisé pour modifier l'ensemble de l'apparence de votre page, ce qui fonctionne bien si vous l'adaptez à un certain public ou à un cas d'utilisation.

Pourquoi les séparer ?

Donc, si vous pouvez utiliser HTML et CSS à la fois pour la mise en page, et JavaScript et CSS pour le style, pourquoi les séparer ? Lorsque Google indexe votre page, il recherche des indicateurs clés sur le sujet de votre page et sur son fonctionnement. Si vous utilisez l'un des éléments de manière inappropriée, vous pouvez envoyer de mauvais signaux et nuire à votre classement. Cela peut se produire souvent lorsque vous travaillez avec des éditeurs CMS qui utilisent des préréglages pour les éléments, ou qui exécutent du JavaScript inutile qui ralentit les pages pour faire des choses qui pourraient être faites en CSS.

Alors, passons en revue certains des abus courants.

Utilisation abusive des balises de titre

L'une des utilisations abusives les plus courantes consiste à utiliser des balises d'en-tête pour styliser les éléments Web. Les balises de titres décrivent les principaux sujets sur une page, de la balise H1 la plus importante (chaque page devrait avoir) à H6. Lorsqu'ils sont utilisés pour styliser des éléments, vous indiquez à Google que ces mots représentent le sujet de votre page. Ou, vous pourriez utiliser la mauvaise balise d'en-tête (comme utiliser un h3 au lieu d'un h2 parce que vous préférez la taille de la police). Dans les deux cas, vous envoyez le mauvais message. Au lieu de cela, vous devez utiliser CSS pour styliser les éléments à la taille ou à la police appropriée que vous souhaitez.

Balises H1 doubles

Un autre problème courant est d'avoir 2 balises H1 ou plus sur une page. Votre balise H1 doit être l'idée principale de la page ; il devrait dire à tout le monde (et à chaque robot d'exploration) qui visite la page de quoi il s'agit, et en tant que tel, vous ne devriez en avoir qu'un. Avoir deux balises H1, c'est comme envoyer deux signaux différents sur la page. Certaines personnes et même des thèmes professionnels ont tendance à mettre leur logo dans une balise H1. Veillez donc à ce qu'il n'y en ait qu'un par page.

---

---

Toutes les images sont des images d'arrière-plan.

Il n'y a rien de mal à avoir une image d'arrière-plan. Les images sont accrocheuses et peuvent ajouter beaucoup de valeur à votre site et inciter les utilisateurs à acheter des produits ou des services. Mais toutes vos images ne doivent pas être des images d'arrière-plan. Travaillant récemment sur un site, j'ai découvert que le CMS transformait toutes les images en images d'arrière-plan. L'intention ici est de les styliser et de les redimensionner plus facilement. Bien que cela puisse améliorer son apparence, vous perdez une partie essentielle des avantages des images sur votre page : le texte alternatif. Le texte alternatif décrit le contenu de l'image et est utilisé par les lecteurs d'écran pour identifier le contenu d'une image. En faisant de toutes vos images des images d'arrière-plan, vous réduisez l'accessibilité de la page, ce qui la rend plus difficile pour les personnes handicapées et peut prendre un coup de Google dans votre classement.

Rendu CSS avec JavaScript

La diffusion inutile de CSS via JavaScript augmente les temps de chargement des pages. Il est préférable de lier le fichier CSS dans l'en-tête au lieu de le faire passer par cette étape supplémentaire. De plus, l'utilisation de JavaScript pour des animations simples ou des effets de survol augmente le temps de chargement alors que cela peut être fait beaucoup plus rapidement via CSS. Même l'ajout de frameworks JavaScript lorsqu'ils ne sont pas nécessaires peut augmenter les temps de chargement. Comme charger jQuery pour animer un bouton. Au lieu d'écrire le JavaScript vanille, ou mieux encore, d'utiliser les éléments d'animation en CSS ou même une feuille de style d'animation CSS, le chargement est beaucoup plus rapide.

Styliser les éléments Web en HTML

Le style des éléments directement dans le fichier HTML est un sujet controversé. De nombreux thèmes et plugins dans WordPress et d'autres CMS reposent continuellement sur l'écrasement des feuilles de style et d'autres plugins. Ceci est généralement considéré comme une mauvaise pratique. Certains créateurs de contenu écrivent des styles directement dans leur contenu car ils souhaitent modifier leurs styles de thème. Quel est le problème avec ça ? Cela provoque souvent des problèmes CSS lorsque les styles écrits directement dans les éléments HTML écrasent les styles du fichier CSS. Pour éviter cela, au lieu de l'écrire directement dans le code HTML, attribuez une classe aux éléments Web et ajoutez une nouvelle feuille de style à laquelle vous ajoutez les styles. Cela peut éviter les problèmes de feuilles en conflit qui peuvent casser ou styliser votre site de manière incorrecte.

Utiliser HTML pour styliser les mises en page

Celui-ci est un peu délicat car les thèmes associent souvent les sélecteurs CSS à la structure HTML. Cela rend plus difficile pour une personne d'apporter des modifications à la structure HTML sans casser les styles vitaux qui rendent la page lisible et fonctionnelle. Par exemple:

Dans l'exemple, si vous modifiez la structure du HTML de l'ancien, vous perdriez tous les styles de cet élément car il dépendait de la structure. Au lieu de cela, découpler le style de la structure, comme dans les classes ultérieures, vous permettra de réutiliser votre CSS même si vous modifiez la structure HTML.

Une page correctement formatée est une page bien optimisée.

Le contenu de votre page est un facteur énorme dans les classements. Il en va de même pour l'utilisation correcte des éléments de la page Web. Plus précisément, HTML, CSS et JavaScript jouent un rôle tout aussi important dans l'optimisation du référencement de votre page. En connaissant le rôle de chaque élément Web et en l'utilisant de manière appropriée, vous pouvez augmenter votre classement. Créez simplement une page à la fois fonctionnelle et attrayante. Si vous envisagez de changer de thème pour un CMS ou d'ajouter du CSS ou du JavaScript personnalisé à vos pages, jetez un coup d'œil et assurez-vous que vous utilisez correctement vos éléments Web.