Pourquoi Google ignore-t-il les hashtags ajoutés en CSS ::before ?

Comment Google traite-t-il le contenu généré via CSS ?

Googlebot analyse le HTML brut d'une page, pas son rendu visuel final. Quand un élément est ajouté via CSS ::before ou ::after, il existe uniquement dans l'affichage navigateur — c'est une couche cosmétique.

Le moteur d'indexation ne voit donc pas ces symboles. Si votre HTML contient <span>SEO</span> et que CSS ajoute un # devant, Google indexe "SEO", pas "#SEO". Le hashtag n'existe tout simplement pas pour lui.

Pourquoi certains sites utilisent-ils cette technique ?

L'objectif était probablement de créer des hashtags visuels pour améliorer l'apparence sans toucher au HTML. Peut-être pour des raisons esthétiques, ou pour transformer rétroactivement des mots en hashtags sans modifier le CMS.

Le problème ? Cette approche part du principe que Google indexe ce qu'un utilisateur voit. C'est faux. Google indexe ce qui est dans le DOM source, avant toute transformation CSS ou JavaScript côté client.

Quelle est la différence avec le contenu masqué en CSS ?

Google pénalise le cloaking et le texte masqué destiné uniquement aux robots. Ici, c'est l'inverse : du contenu visible pour les humains mais invisible pour les robots.

Ce n'est pas du spam au sens strict, mais ça crée un décalage entre l'intention SEO et la réalité technique. Si vous voulez que Google comprenne qu'il s'agit de hashtags, ils doivent être dans le HTML.

• Le contenu généré via ::before et ::after n'est pas indexé par Google
• Googlebot lit le HTML source, pas le rendu CSS final
• Un hashtag doit être présent dans le code HTML pour être reconnu comme tel
• Cette pratique crée une divergence entre ce que voit l'utilisateur et ce qu'indexe Google
• Aucune pénalité directe, mais une perte d'efficacité SEO totale pour ces éléments

Cette remontée de l'équipe indexation est-elle vraiment surprenante ?

Soyons honnêtes : non. Tout SEO qui connaît les bases du crawl et de l'indexation sait que le CSS n'est pas du contenu indexable. Ce qui est intéressant, c'est que Google prenne la peine de le signaler publiquement.

Ça révèle deux choses. D'abord, que cette pratique existe suffisamment pour mériter une alerte. Ensuite, que même en 2025, beaucoup de sites confondent encore rendu visuel et contenu crawlable.

Les hashtags ont-ils vraiment un impact SEO en dehors des réseaux sociaux ?

Voilà le vrai sujet. Sur une page web classique, un hashtag n'a aucun statut particulier pour Google. Ce n'est pas un signal de classement, ni une balise sémantique reconnue comme <h1> ou <strong>.

Les hashtags fonctionnent sur Twitter, Instagram, LinkedIn parce que ces plateformes les utilisent comme système de catégorisation interne. Sur votre site ? C'est juste du texte. Ajouter un # devant "SEO" ne change strictement rien pour Google par rapport à écrire "SEO" tout court.

Alors pourquoi ce site s'embêtait-il à les ajouter via CSS ? Probablement pour imiter l'esthétique des réseaux sociaux, sans réaliser que ça n'apportait aucune valeur SEO — même si les hashtags avaient été indexés.

Quelles autres techniques CSS posent des problèmes similaires ?

Tout contenu généré via pseudo-éléments CSS est invisible pour Google. Ça inclut les icônes ajoutées via ::before (souvent des caractères Unicode ou Font Awesome), les labels, les numéros de liste personnalisés, etc.

Et c'est la même logique avec du JavaScript qui modifie le DOM après chargement : si le contenu n'est pas dans le HTML initial et que Google ne l'exécute pas ou mal, il ne sera pas indexé. La différence ? JavaScript, Google tente de le rendre. CSS ::before ? Jamais.

Que faut-il vérifier sur mon site dès maintenant ?

Ouvre les DevTools de ton navigateur. Inspecte les éléments qui semblent contenir des symboles, icônes ou textes importants. Si tu vois ::before ou ::after dans le CSS, et que ce contenu a une valeur sémantique ou SEO, il faut le déplacer dans le HTML.

Concrètement ? Cherche dans tes feuilles de style les occurrences de content:. Si ça génère du texte visible qui a du sens pour l'utilisateur — pas juste une décoration — c'est un red flag.

Comment corriger ce type d'erreur sans casser le design ?

Si tu veux des hashtags indexables, écris-les directement dans le HTML. <span class="hashtag">#SEO</span>. Tu peux ensuite styliser ce span via CSS pour qu'il ressemble exactement à ce que tu veux.

Pour les icônes, utilise des balises SVG inline ou des images avec attribut alt, pas des pseudo-éléments CSS. Pour les labels ou compteurs, intègre-les dans le markup avec des data-attributes ou des spans cachés si besoin — mais dans le DOM source.

Le principe est simple : tout ce qui doit être compris par Google doit être dans le HTML. Le CSS sert à embellir, pas à créer du contenu.

Quelles erreurs éviter pour ne pas reproduire ce problème ?

• Ne jamais utiliser ::before ou ::after pour ajouter du texte ayant une valeur sémantique ou SEO
• Vérifier que les éléments visuels importants (prix, labels, hashtags) sont bien dans le HTML source
• Tester ses pages avec un crawler SEO (Screaming Frog, OnCrawl) pour voir ce que Google voit réellement
• Utiliser l'outil Inspection d'URL dans la Search Console pour comparer le HTML brut et le rendu
• Former les équipes dev et design à la distinction entre contenu indexable et décoration CSS
• Auditer régulièrement les modifications CSS qui touchent à des zones stratégiques (titres, descriptions, mots-clés)