Hallo! Lass uns über die Auswirkungen von CSS auf SEO sprechen. Gerade kürzlich hat das Google Search Relations Team in einem Podcast ein paar Mythen aufgedeckt und einige Missverständnisse ausgeräumt, die sicher für dich interessant sind. Dieses Thema geht uns alle an, die wir Websites betreiben oder optimieren. Hier erfährst du, was wirklich zählt und worauf du getrost verzichten kannst. Los geht’s mit ein paar wichtigen Fakten!
CSS-Klassennamen haben **keinen Einfluss** auf das SEO
Die erste wichtige Information ist, dass CSS-Klassennamen **für Google keine Rolle spielen**. Martin Splitt von Google sagte im Podcast:
„CSS-Klassennamen sind lediglich dafür da, um Stylingregeln auf Elemente anzuwenden. Sie haben keine inhaltliche Bedeutung, und es ist egal, wie du sie nennst. Du kannst sie alle ‘blurb’ nennen, das hätte keinerlei Einfluss auf SEO.“
Das bedeutet, dass du dir definitiv keine Gedanken machen musst, ob bestimmte Keywords in den Namen vorkommen. Du kannst CSS-Klassen ganz nach Belieben benennen, da sie bei der Indexierung und beim Crawling durch Google ignoriert werden.
Gefahr: Inhalte in Pseudo-Elementen
Spannend wird es hingegen, wenn Inhalte in pseudo-Elementen wie :before oder :after hinzugefügt werden. Laut Splitt ist das ein häufiger Fehler:
„Pseudo-Elemente sollten nur für dekorative Zwecke genutzt werden. Inhalte, die für den Nutzer wichtig sind, gehören **immer in das HTML**. Nutzt man Pseudo-Klassen für Inhalte wie Texte oder Überschriften, erkennt Google diese nicht.“
Ein bespielhafter Fehler, den Google thematisierte, war die Verwendung von :before, um Hashtags darzustellen. Diese Inhalte wurden von Google schlichtweg nicht erkannt und tauchten auch in der Suchindexierung nicht auf.
Vermeide übergroße CSS-Dateien
Eine andere Sache, die schnell übersehen wird: die Größe deiner CSS-Dateien beeinflusst die **Performance der Seite** erheblich. Mueller betont, dass laut einem Bericht im Jahr 2022 die durchschnittlichen Stylesheets auf bis zu **70 Kilobyte** oder mehr angewachsen sind. Er berichtete sogar von einem Extrembeispiel mit **78 Megabyte**, was völlig unpraktikabel ist.
Dieses „Aufblähen“ der Stylesheets kann zu verschlechterten Ladezeiten führen und deine Core Web Vitals (wichtig für Google!) negativ beeinflussen. Die Lösung? **Unbenutzte CSS-Regeln eliminieren und optimieren.**
CSS immer crawlbar machen
Jetzt fragst du dich vielleicht: Warum sollte Google CSS-Dateien überhaupt crawlen? Ganz einfach: Damit **Google deine Seite so sieht wie der Nutzer**. Wenn CSS blockiert ist, könnte dies die Darstellung beeinträchtigen und möglicherweise negative Effekte haben, wenn es um mobile Optimierung oder versteckte Inhalte geht.
„Google empfiehlt ausdrücklich, CSS-Dateien nicht zu blockieren, da sie wichtig für das Rendering sind,“ scherzte Mueller mit einem Zwinkern.
Praktische Tipps für dich:
- Vergiss Optimierungsversuche bei Klassennamen. Es verschwendet nur Zeit.
- Setze Pseudo-Elemente klug ein, aber vermeide es, wichtige Texte oder Überschriften dort einzubauen. Diese Inhalte sollten ausschließlich im HTML stehen!
- Schaue dir regelmäßig die Größe und Optimierung deiner CSS-Dateien an. Das spart wertvolle Ladezeit.
- Blockiere niemals CSS für Bots: Das könnte verhindern, dass Google deine Seite korrekt anzeigt.
Interessiert an weiteren Details? Es gibt auch eine Audio-Version des ganzen Interviews, die dir weitere Einblicke gibt.
Zusammenfassend: Halte es einfach! Indem du HTML für Inhalte und CSS nur für das Styling nutzt, sorgst du für Klarheit und optimierst gleichzeitig deine SEO-Ergebnisse.
