Google : gardez le contenu important hors des pseudo-éléments CSS avant ou après

Google a posté sur Twitter « nous vous recommandons de ne pas ajouter de contenu ou de symboles significatifs en utilisant les pseudo-éléments CSS ::before ou ::after. » Google a déclaré qu’un tel contenu « pourrait ne pas être utilisé pour indexer vos pages ». Notez qu’il ne s’agit pas d’un changement dans le fonctionnement de la recherche Google, cela vient d’être mentionné dans la documentation.

Google ajoutée qu’il « a clarifié dans le guide du développeur que la recherche Google ne peut actuellement pas indexer le contenu dans les propriétés de contenu CSS car cela ne fait pas partie du DOM. »

Google a ajouté que vous pouvez toujours utiliser l’élément à des fins décoratives.

Un pseudo-élément CSS est un mot-clé ajouté à un sélecteur qui vous permet de styliser une partie spécifique du ou des éléments sélectionnés. Un pseudo-élément CSS est utilisé pour styliser les parties spécifiées d’un élément. Il peut être utilisé pour styliser la première lettre, ou ligne, d’un élément et insérer du contenu avant ou après le contenu d’un élément. Vous pouvez voir des exemples de la façon dont cela se fait sur Écoles W3.

Google a déclaré avoir spécifiquement mis à jour leur documentation d’aide pour mentionner cela.

Voici ce tweet :

Nous avons ajouté une mise à jour à nos documents à https://t.co/P5NEdHpk0Y – nous vous recommandons de ne pas ajouter de contenu ou de symboles significatifs en utilisant les pseudo-éléments CSS ::before ou ::after, car ils pourraient ne pas être utilisés pour indexer vos pages. Les éléments décoratifs sont bien.

– Centre de recherche Google (@googlesearchc) 22 septembre 2023

Attention, il ne s’agit pas d’un nouveau changement mais d’une mise à jour de la documentation :

Correct. Nous l’avons également mentionné pour le rendu précédemment, mais cela n’a jamais été documenté par écrit. Nous avons rencontré certains sites qui utilisent cela, et il est difficile d’expliquer quoi corriger sans avoir de référence :).

— Salut John, ton profil a attiré mon attention. Aie. (@JohnMu) 22 septembre 2023

Oui, ce n’est pas un changement, c’est juste une mise à jour de la documentation sur la façon dont les choses se passent. Je pourrais également l’imaginer changer au fil du temps, soit à mesure que les navigateurs évoluent pour le rendre sélectionnable/trouvable, soit séparément.

— Salut John, ton profil a attiré mon attention. Aie. (@JohnMu) 22 septembre 2023

🚨 N’utilisez pas ::before et ::after pour du contenu important, sémantique ou exploitable.

Ceci est également important pour l’accessibilité. Les utilisateurs qui s’appuient sur des lecteurs d’écran peuvent également manquer ce contenu à cause de ces pseudo-éléments. https://t.co/myWPohfSGw

– Andrea Volpini (@cyberandy) 22 septembre 2023

Remarque : je publie des histoires aujourd’hui, dimanche, car demain c’est Yom Kippour et je ne publie rien à Yom Kippour.

Discussion sur le forum à X.