Test SEO : Google indexe-t-il le contenu des pseudo-éléments CSS before et after ?

27 mars 2024 — Temps de lecture : 2 min

Table des matières

Dans l'édition de la semaine dernière, je vous parlais des pseudo-éléments CSS ::before et ::after, et de la propriété content.

Pour rappel, ça ressemble à ce genre de règle CSS :

h1::after {
  content: "Lorem ipsum dolor sit amet"
}

Le texte "Lorem ipsum dolor sit amet" doit s'afficher après le h1

J'ai pas mal réfléchi sur le sujet, en particulier sur l'impact SEO de cette propriété CSS.

La question que je me pose notamment, c'est : est-ce que les contenus situés à l'intérieur peuvent être indexés ou non par Google ?

En fait, je connais déjà la réponse parce que j'avais vu passer quelques articles sur le sujet, comme ici : https://www.searchcandy.uk/seo/technical-seo/css-pseudo-elements/.

Et une expérience assez marrante là : https://jessbpeck.com/horribleseoexperiments/cssonlypage/.

Mais comme ces tests datent un peu, je me suis dit que ça pourrait être sympa d'essayer à mon tour de les reproduire.

Notamment pour valider qu'avec cette petite manip' CSS, on peut réduire le duplicate content interne d'un site.

Et oui ! Imaginez un gros bloc de texte à vocation marketing qui se répète sur toutes les pages d'un site et qui fait grimper votre taux de DC. Un coup de CSS et hop, on n'en parle plus !

J'ai donc mis en place 3 tests différents que je vous détaille ici.

1er test : utilisation de after et content dans une balise <style>

Le texte ci-dessous est généré grâce à la propriété CSS content et le pseudo-élement ::after. La déclaration est faite via une balise <style> située dans le <head> de la page.

👇

2ème test : utilisation de after et content dans un fichier CSS externe

Le texte ci-dessous est généré grâce à la propriété CSS content et le pseudo-élement ::after. La déclaration est faite via un fichier CSS externe appelé dans le <head>.

👇

3ème test : utilisation de after et content avec la fonction attr() dans un fichier CSS externe

Le texte ci-dessous est généré grâce à la propriété CSS content, le pseudo-élement ::after et la fonction attr(). La déclaration est faite via un fichier CSS externe appelé dans le <head>. La fonction attr() récupère le contenu de l'attribut data-content de l'élément ciblé (ici la balise <p> ayant pour id "test3").

👇

Voilà, le test est en place. Plus qu'à attendre Googlebot.

Je vous ferai une petite update à intervalles réguliers concernant l'indexation 😉

Résultats

28/03 (J+1) : la page est indexée mais aucun des mots inventés ne retourne de résultats Google sur la correspondance exacte
03/04 (J+7) : toujours aucun résultat
28/04 (M+1) : toujours aucun résultat

Tests SEO

Antoine Brisset Twitter

Consultant SEO depuis 2010. Je traque les clics inutiles et j'automatise les tâches répétitives pour gagner du temps dans mon quotidien de travailleur du web.

Référencement des images : Google prend-il en compte les métadonnées IPTC ?

Le test que j'ai effectué récemment concernant l'indexation du contenu dans les pseudo-éléments CSS before et after m'a donné envie de mettre en place d'autres tests SEO. Je me suis donc penché sur un sujet pour lequel la littérature SEO est presque