CSS Osztálynevek és SEO: Amit Tudnod Érdemes!

A közelmúltban a Google Search Relations csapata fontos információkat osztott meg a CSS és az SEO közötti kapcsolatról, különös figyelmet fordítva a CSS osztálynevek szerepére. Az újabb podcast epizódban Martin Splitt és John Mueller részletezték, hogy a CSS különböző elemei miként befolyásolják a keresőoptimalizálást. Az alábbiakban bemutatjuk a legfontosabb pontokat, amelyek segíthetnek a weboldalak optimalizálásában.

CSS Osztálynevek és SEO

Az egyik legfontosabb megállapítás, hogy a CSS osztálynevek nem befolyásolják a Google keresési rangsorolását. Martin Splitt kiemelte, hogy az osztálynevek csupán vizuális stílusokhoz kapcsolódnak, és a Google nem tekinti őket a tartalom részének. Ez azt jelenti, hogy az osztálynevek elnevezése, akár „blurb”-nak, akár másnak hívják őket, nem hoz létre változást az SEO szempontjából. A Googlebot és más HTML-elemzők figyelmen kívül hagyják ezeket az elemeket, amikor értelmes információkat keresnek egy weboldalon.

Fontos megjegyezni, hogy bár az osztálynevek nem játszanak szerepet a rangsorolásban, a CSS más aspektusai, mint például a pseudo elemek, komoly problémákat okozhatnak. A pseudo elemek, mint a :before és :after, nem megfelelő használata esetén a tartalom láthatatlanná válik a keresőmotorok számára, mivel ezeket a Google nem képes észlelni a DOM-ban.

Teljesítményproblémák a CSS-sel

A podcast során szó esett arról is, hogy a túlméretezett CSS fájlok hátrányosan befolyásolják a weboldalak teljesítményét. A 2022-es HTTP Archive Web Almanac adatai szerint a mobil esetében a CSS fájlok medián mérete körülbelül 68 KB, míg asztali számítógépeken 72 KB volt. John Mueller figyelmeztetett arra, hogy a túl nagy fájlok lassíthatják a betöltődést, ami végső soron negatívan befolyásolja a Core Web Vitals mutatókat is. Az ilyen problémák elkerülése érdekében a webfejlesztőknek érdemes optimizálniuk a CSS fájljaikat, például a fölösleges szabályok eltávolításával.

Google ajánlása szerint a CSS fájloknak elérhetőnek kell lenniük a keresőmotorok számára, mivel ezek segítik a Googlebotot abban, hogy a felhasználók számára látható módon renderelje az oldalakat. Ha a CSS blokkolva van, az hátrányosan érintheti a weboldal értelmezését, különösen a mobilbarát tervezés és a rejtett tartalmak szempontjából.

Praktikus tanácsok SEO szakembereknek

A podcast epizód alapján az alábbi javaslatokat érdemes megfontolni a SEO gyakorlatok során:

• Ne optimalizálj osztályneveket: A CSS osztályokban elhelyezett kulcsszavak nem segítenek a rangsorolásban.
• Ellenőrizd a pseudo elemeket: A valódi tartalomnak az HTML-ben kell lennie, nem pedig :before vagy :after elemekben.
• Auditáld a stíluslapok méretét: A nagy CSS fájlok hátrányosan befolyásolják az oldal sebességét és a Core Web Vitals-t.
• Biztosítsd, hogy a CSS elérhető legyen: A stíluslapok blokkolása megzavarhatja a renderelést és befolyásolhatja, hogy a Google hogyan értelmezi az oldaladat.

Mi a véleménye a szakértőnek?

Megkérdeztük Császár Viktor SEO szakértőt, hogy kommentálja a legújabb fejleményeket a CSS és SEO kapcsolatáról. Viktor elmondta: „A Google friss bejelentései világosan mutatják, hogy a CSS osztálynevek nem játszanak szerepet a rangsorolásban, ami felszabadítja a webfejlesztőket a felesleges optimalizálási kényszer alól. Az igazi kihívás a CSS megfelelő használata, hogy a felhasználói élményt és a keresőoptimalizálást egyaránt javítsuk. A pseudo elemek helytelen használata komoly problémákat okozhat, hiszen a tartalom láthatatlanná válik a keresőmotorok számára. Ezért érdemes alaposan átgondolni, hol és hogyan használunk CSS-t a weboldalunkon.” További információkért látogass el Császár Viktor weboldalára: csaszarviktor.hu.

Forrás: SearchEngineJournal.com