Dans un récent épisode de la recherche de Google sur le disque podcastMartin Splitt et John Mueller ont précisé comment CSS affecte le référencement.

Alors que certains aspects du CSS n'ont aucune incidence sur le référencement, d'autres peuvent influencer directement la façon dont les moteurs de recherche interprètent et classent le contenu.

Voici ce qui compte et ce qui ne fait pas.

Les noms de classe n'ont pas d'importance pour les classements

L'un des plats les plus clairs de l'épisode est que les noms de classe CSS n'ont aucun impact sur la recherche Google.

Split a déclaré:

«Je ne pense pas que ce soit le cas. Je ne pense pas que nous nous en soucions parce que les noms de classe CSS ne sont que cela. Ils affectent simplement un morceau de feuille de style quelque peu identifiable spécifique aux éléments et c'est tout. C'est tout. Vous pouvez les nommer tous« blurb ». Cela ne ferait pas de différence d'un point de vue SEO. »

Les noms de classe, ont-ils expliqué, sont utilisés uniquement pour appliquer un style visuel. Ils ne sont pas considérés comme faisant partie du contenu de la page. Ils sont donc ignorés par Googlebot et d'autres analyseurs HTML lors de l'extraction d'informations significatives.

Même si vous alimentez le HTML dans un modèle de langue ou un robot de base, les noms de classe ne tiennent pas compte du fait que si votre système est explicitement conçu pour lire ces attributs.

Pourquoi le contenu dans Pseudo Elements est un problème

Bien que les noms de classe soient inoffensifs, l'équipe a averti de placer un contenu significatif dans les pseudo-éléments CSS comme :before et :after.

Split a déclaré:

«L'idée à nouveau – l'idée originale – est de séparer la présentation du contenu. Le contenu est donc dans le HTML, et comment il est présenté est dans le CSS. Donc avec before et aftersi vous ajoutez des éléments décoratifs comme un petit triangle ou un petit point ou une petite ampoule ou comme une petite licorne – quoi que ce soit – je pense que c'est bien parce que c'est décoratif. Il n'a pas de sens au sens du contenu. Sans cela, ce serait toujours bien.

L'ajout de fioritures visuelles est acceptable, mais l'insertion des titres, des paragraphes ou de tout contenu orienté par les utilisateurs dans les éléments pseudo brise le principe principal du développement Web.

Ce contenu devient invisible pour les moteurs de recherche, les lecteurs d'écran et tous les autres outils qui reposent directement sur l'analyse du HTML directement.

Mueller a partagé un exemple réel de la façon dont cela peut mal tourner:

«Il y a eu une fois une escalade de l'équipe d'indexation qui a dit que nous devrions contacter le site et leur dire d'arrêter d'utiliser before et after… Ils utilisaient le before Pseudo Class pour ajouter un signe de nombre à tout ce qu'ils ont considéré comme des hashtags. Et notre système d'indexation était comme, ce serait tellement agréable si nous pouvions reconnaître ces hashtags sur la page parce qu'ils sont peut-être utiles pour quelque chose. « 

Parce que les symboles de hashtag ont été ajoutés via CSS, ils n'ont jamais été vus par les systèmes de Google.

Splitt l'a testé en direct pendant l'enregistrement et confirmé:

« Ce n'est pas dans le Dom … donc il n'est pas ramassé par rendu. »

Le CSS surdimensionné peut nuire aux performances

L'épisode a également abordé des problèmes de performances liés aux feuilles de style gonflées.

Selon les données du Web Almanac 2022 de l'archive HTTP, la taille médiane d'un fichier CSS était passée à environ 68 Ko pour le mobile et 72 Ko pour le bureau.

Mueller a déclaré:

«Le Web Almanac dit que chaque année, nous voyons le CSS se développer en taille, et en 2022, la taille médiane de la feuille de style était de 68 kilo-ou 72 kilobytes.… Ils ont également mentionné le plus grand qu'ils ont trouvé était de 78 mégaoctets.

Ce type de ballonnement peut avoir un impact négatif sur les vitaux du Web de base et l'expérience utilisateur globale, qui sont deux domaines qui faire Influence le classement. Les cadres et les bibliothèques prédéfinies sont souvent la cause.

Bien que les développeurs puissent atténuer cela avec une élagage des règles de minification et inutilisée, tout le monde ne le fait pas. Cela fait de l'optimisation CSS un élément valable sur votre liste de contrôle technique de référencement.

Gardez le CSS rampable

Malgré le rôle limité de CSS dans le classement, Google recommande toujours de rendre les fichiers CSS rampables.

Mueller a plaisanté:

« Les directives de Google disent que vous devriez faire en sorte que vos fichiers CSS se compensent. Il doit donc y avoir une sorte de magie là-dedans, non? »

La vraie raison est plus technique que magique. Googlebot utilise des fichiers CSS pour rendre les pages comme les utilisateurs les verraient.

Le blocage du CSS peut affecter la façon dont vos pages sont interprétées, en particulier pour la mise en page, la convivialité mobile ou les éléments comme le contenu caché.

Conseils pratiques pour les pros du référencement

Voici ce que cet épisode signifie pour vos pratiques de référencement:

  • Arrêtez d'optimiser les noms de classe: Les mots clés dans les cours CSS n'aideront pas votre classement.
  • Vérifiez les pseudo-éléments: Tout contenu réel, comme le texte destiné à être lu, devrait vivre en html, pas dans :before ou :after.
  • Taille de la feuille de style d'audit: Les grands fichiers CSS peuvent nuire à la vitesse de la page et aux vitaux du Web de base. Coupez ce que vous pouvez.
  • Assurez-vous que CSS est expiré: Le blocage des feuilles de style peut perturber le rendu et avoir un impact sur la façon dont Google comprend votre page.

L'équipe a également souligné l'importance d'utiliser des balises HTML appropriées pour des images significatives:

«Si l'image fait partie du contenu et que vous vous dites:« Regardez cette maison que je viens d'acheter », alors vous voulez un imgune balise d'image ou un picture Tag qui a en fait l'image réelle dans le cadre du DOM parce que vous voulez que nous voyions comme, ah, donc cette page a cette image qui n'est pas seulement la décoration. »

Utilisez CSS pour le style et le HTML pour le sens. Cette séparation aide les utilisateurs et les moteurs de recherche.

Écoutez l'épisode du podcast complet ci-dessous:

https://www.youtube.com/watch?v=L2E3GBDP_QY

By : manuboss