John Mueller et Martin Splitt de Google ont parlé pendant un peu moins de 40 minutes sur le sujet de CSS et de référencement. Ils ont couvert pourquoi les fichiers CSS sont importants pour le référencement, comment les cadres CSS modernes ont l'impact des pages et les implications SEO des noms de classe CSS et des pseudo-éléments.
C'est une bonne écoute pour la plupart des SEO techniques ou même non techniques à écouter, voici l'intégration:
Voici comment Gemini a résumé la conversation:
- CSS et Connexion SEO: Bien qu'il ne soit pas aussi couramment discuté que JavaScript, CSS a des implications pour le référencement, principalement concernant la façon dont les robots de Google interprètent et indexent le contenu. Les lignes directrices de Google recommandent de faire en sorte que les fichiers CSS se fassent.
- Taille des fichiers CSS:
- Les fichiers CSS ont augmenté au fil des ans. En 2022, la taille médiane de la feuille de style était d'environ 68 à 72 Ko.
- Les cadres conduisent souvent à des fichiers CSS plus grands, bien que les règles inutilisées puissent être supprimées et les fichiers divisés pour optimiser la taille.
- Un exemple extrême d'un fichier CSS de 78 Mo a été mentionné, ce qui est très inhabituel et problématique.
- Noms de classe CSS et SEO:
- Les noms de classe CSS n'ont aucun impact direct sur le référencement.
- Les Crawlers analysent généralement HTML pour le contenu du texte, supprimant les attributs comme les noms de classe.
- ! Règle importante dans CSS:
- La déclaration `! Importante» remplace les règles de spécificité CSS ** **, forçant un style particulier à s'appliquer indépendamment des autres règles contradictoires.
- C'est une solution de contournement pour des scénarios de style complexes mais n'a pas d'implications SEO.
- Pseudo-éléments («:: avant» et `:: après»):
- Ces pseudo-éléments CSS permettent aux développeurs d'ajouter du contenu décoratif (comme des icônes ou de petits symboles) avant ou après un élément sans l'ajouter directement au HTML.
- Surtout, le contenu ajouté via `:: avant 'ou` :: après' Les pseudo-éléments ne sont pas inclus dans le modèle d'objet de document (DOM) et donc non repris par les systèmes de rendu et d'indexation de Google.
- Recommandation: Utilisez des pseudo-éléments uniquement à des fins décoratives **. Ne ** pas ** Utilisez-les pour le contenu qui doit être indexé ou fournit un contexte significatif (par exemple, l'ajout d'un symbole de hashtag aux mots). Le contenu vital pour le sens ou le contexte doit toujours être directement dans le HTML.
- Unités de la fenêtre (par exemple, `100VH`):
- L'utilisation d'unités comme `100VH` (100% de la hauteur de la fenêtre) pour des éléments comme les images de héros peut entraîner des problèmes avec la façon dont les outils de prévisualisation du rendu de Google affichent la page. En raison de «l'expansion de la fenêtre» lors du rendu, ces éléments peuvent sembler disproportionnellement importants dans les captures d'écran, poussant le contenu réel hors de vue.
- Bien que peu susceptible d'affecter directement l'indexation si le contenu est toujours dans le DOM, il peut rendre le débogage plus difficile et peut indiquer un problème d'accessibilité. Limiter la croissance avec «max-height» est une solution suggérée.
- Cacher le contenu avec CSS:
- Alors que par le passé, certains ont tenté de masquer le texte en faisant correspondre la couleur de la police à la couleur d'arrière-plan, c'est moins courant maintenant.
- Les techniques de cachette modernes impliquent souvent `afficher: aucune;`, qui supprime efficacement l'élément de la disposition visuelle et généralement du Dom rendu pour les moteurs de recherche.
- Images CSS par rapport aux balises HTML `IMG`:
- Les images CSS (propriété d'image d'arrière-plan) sont principalement destinées aux ** éléments décoratifs ** qui ne transmettent pas le contenu essentiel. Ils ne sont pas indexés comme des images par des moteurs de recherche.
- Les balises HTML «IMG» ou «Picture» doivent être utilisées pour ** des images de contenu ** qui font partie intégrante du sens de la page (par exemple, photos de produits, images dans un article de presse, graphiques). Ces images font partie du DOM, peuvent être indexées par la recherche d'images, et leur contexte peut être compris par les Crawlers.
- Fivide philosophique: le principe global est que CSS est pour le style, tandis que le HTML est pour le contenu. Mélanger ces rôles, en particulier en mettant un contenu crucial dans CSS, peut entraver la compréhension et l'accessibilité des moteurs de recherche.
- L'utilisation de CSS pour créer des dispositions de type table pour les données tabulaires est généralement une mauvaise utilisation.
- Pour les données tabulaires réelles, l'utilisation d'éléments HTML «Table» est préférable car il permet aux moteurs de recherche (et aux lecteurs d'écran) de reconnaître les lignes et les colonnes, facilitant une meilleure compréhension et indexation des informations structurées.