CSS Osztálynevek: Mit Érdemes Tudni Róluk SEO Szempontból?

Az utóbbi időben sok szó esett a CSS (Cascading Style Sheets) hatásáról a keresőoptimalizálás (SEO) szempontjából, különösen a Google legutóbbi podcastjában, ahol Martin Splitt és John Mueller tisztázták a CSS szerepét a weboldalak rangsorolásában. Az egyik legfontosabb megállapításuk, hogy a CSS osztályneveknek nincs hatásuk a Google keresőoptimalizálására. Splitt hangsúlyozta, hogy ezek az osztálynevek csupán a stílusok alkalmazására szolgálnak, és nem képezik a weboldal tartalmát, így a Googlebot és más HTML elemzők figyelmen kívül hagyják őket a fontos információk kinyerése során.

A CSS osztálynevek és azok szerepe

Az osztályneveket a CSS-ben kizárólag vizuális stílusok alkalmazására használják, tehát ha például minden osztálynevet „blurb”-ra nevezünk el, az nem befolyásolja a SEO-t. A Google rendszere ugyanis nem veszi figyelembe ezeket a neveket, amikor a tartalom rangsorolásáról van szó. Ezzel szemben a CSS pseudo elemek, mint például :before és :after, problémákat okozhatnak, ha valódi tartalmat helyezünk el bennük. A cél az, hogy a tartalom a HTML-ben legyen, míg a megjelenés a CSS-en keresztül legyen megoldva.

Miért problémásak a pseudo elemek?

Ha a valódi tartalom, mint például a címsorok vagy bekezdések, a CSS pseudo elemekben találhatóak, az azt jelenti, hogy ezek a keresőmotorok és a képernyőolvasók számára láthatatlanok maradnak. Ezért nem terjedhetnek el, és nem befolyásolják a weboldal rangsorolását. Egyszer például a Google indexelő csapata jelezte, hogy egy weboldal a :before pseudo osztályt használta a hashtagek szimbólumainak megjelenítésére, ami miatt a Google rendszere nem tudta azokat észlelni. Ez világosan mutatja, hogy a CSS használata a webfejlesztésben rendkívül fontos, és a tartalom és a megjelenés szétválasztása kulcsfontosságú.

A CSS méretének hatása a teljesítményre

A podcast során a CSS fájlok méretének problémáira is kitértek. Az adatok szerint a mobilra optimalizált CSS fájlok medián mérete 68 KB, míg asztali gépeken 72 KB volt. Az óriási CSS fájlok hátrányosan befolyásolják a Core Web Vitals mutatókat és a felhasználói élményt, ami közvetlen hatással van a rangsorolásra. A fejlesztőknek érdemes figyelniük a CSS fájlok optimalizálására, például a nem használt szabályok eltávolításával és a fájlok minimalizálásával.

Praktikus tippek SEO szakembereknek

A podcastban elhangzottak alapján érdemes megfontolni a következő lépéseket: először is, ne optimalizáljunk osztályneveket, mivel a CSS osztályokban található kulcsszavak nem segítik a rangsorolást. Másodszor, ügyeljünk arra, hogy a valódi tartalom a HTML-ben szerepeljen, és ne a :before vagy :after pseudo elemekben. Harmadszor, auditáljuk a CSS fájlok méretét, mivel a túl nagy fájlok hátrányosan befolyásolják az oldal sebességét és a Core Web Vitals mutatóit. Végül, győződjünk meg arról, hogy a CSS fájlok böngészhetőek legyenek, mert a blokkolt stíluslapok zavarhatják az oldal renderelését.

Mit mond a szakértő a témáról?

Megkérdeztük Császár Viktor SEO szakértőt, hogy mit gondol a CSS és SEO kapcsolatról. Viktor megjegyezte: „A CSS osztálynevek és pseudo elemek jelentősége sok SEO szakember számára nem világos, de fontos, hogy a tartalom a megfelelő helyen legyen. A keresőmotorok a HTML struktúrát elemzik, és ha a tartalmat elrejtjük a CSS mögé, az negatívan befolyásolja a rangsorolást. Emellett a nagy méretű CSS fájlok optimalizálása is kulcsfontosságú a felhasználói élmény javítása érdekében. A weboldalak teljesítménye közvetlen hatással van a keresési rangsorokra, ezért javaslom, hogy a webfejlesztők figyeljenek a CSS optimalizálására.” További információkért látogasson el Császár Viktor weboldalára: csaszarviktor.hu.

Forrás: SearchEngineJournal.com