A Google megerősíti, hogy a CSS osztálynevek nem befolyásolják a SEO -t

Martin Splitt és John Mueller, a Google Keresési Podcast -ot nemrégiben végzett keresésének epizódjában tisztázta, hogy a CSS hogyan befolyásolja a SEO -t.

Noha a CSS egyes aspektusai nincsenek hatással a SEO -ra, mások közvetlenül befolyásolhatják a keresőmotorok értelmezését és a tartalmat.

Íme, mi számít, és mi nem.

Az osztálynevek nem számítanak a rangsorban

Az epizód egyik legtisztább elvitele az, hogy a CSS osztálynevek nincs hatással a Google keresésre.

Splitt kijelentette:

"Nem hiszem, hogy igen. Nem hiszem, hogy érdekelünk, mert a CSS osztálynevek csak ilyenek. Csak egy konkrét kissé azonosítható stíluslap -szabályokat rendelnek az elemekhez, és ennyi. Ez minden. Mindegyiket„ elmosódhatnánk ”. Ez nem változtatna SEO szempontjából. ”

Az osztályneveket - magyarázták - csak a vizuális stílus alkalmazásához használják. Nem tekintik őket az oldal tartalmának. Tehát a GoogleBot és más HTML elemzők figyelmen kívül hagyják őket, amikor értelmes információkat gyűjtenek.

Még akkor is, ha a HTML -t egy nyelvmodellbe vagy egy alapvető lánctalp táplálja, az osztálynevek csak akkor vesznek részt, ha a rendszert kifejezetten kifejezetten az attribútumok elolvasására tervezték.

Miért jelent problémát az álnév elemek tartalma?

Míg az osztálynevek ártalmatlanok, a csapat figyelmeztette, hogy értelmes tartalmat helyez a CSS ál -elemekbe, mint például :before és :after-

Splitt kijelentette:

„Az ötlet ismét - az eredeti ötlet - az, hogy elkülönítse a prezentációt a tartalomtól. Tehát a tartalom a HTML -ben található, és a CSS -ben van. Tehát before és afterha olyan dekoratív elemeket ad hozzá, mint egy kis háromszög vagy egy kis pont vagy egy kis izzó, vagy mint egy kis egyszarvú - bármi is, azt hiszem, hogy ez rendben van, mert dekoratív. A tartalom értelmében nincs értelme. Enélkül még mindig rendben lenne. ”

A vizuális virágzás hozzáadása elfogadható, de a címsorok, bekezdések vagy bármilyen felhasználó felé tartó tartalom beillesztése az ál-elemekbe megszakítja a webfejlesztés alapelveit.

Ez a tartalom láthatatlanná válik a keresőmotorok, a képernyőolvasók és az egyéb eszközök számára, amelyek a HTML közvetlen elemzésére támaszkodnak.

Mueller egy valós példát osztott meg arról, hogy ez hogyan hibázhat:

„Volt egykor az indexáló csapat eszkalációja, amely szerint kapcsolatba kell lépnünk a webhelygel, és meg kell mondanunk nekik, hogy hagyja abba a használatát before és after… A before ál -osztály, hogy számot adjunk hozzá mindazhoz, amit hashtagoknak tartanak. És az indexáló rendszerünk olyan volt, mint olyan jó lenne, ha felismernénk ezeket a hashtagokat az oldalon, mert talán hasznosak valami számára. ”

Mivel a hashtag szimbólumokat CSS -en adták hozzá, a Google rendszerei soha nem láttak őket.

Splitt a felvétel során élőben tesztelte, és megerősítette:

"Nem a DOM -ban van ... tehát a megjelenítés nem veszi fel."

A túlméretezett CSS árthat a teljesítményre

Az epizód a duzzadt stíluslapokkal kapcsolatos teljesítményproblémákkal is érintette.

A HTTP Archive 2022 -es Web Almanac adatai szerint a CSS fájl medián mérete körülbelül 68 kb -ra nőtt a mobil és 72 kB -ra az asztalhoz.

Mueller kijelentette:

"A Web Almanac azt mondja, hogy minden évben látjuk, hogy a CSS méretének növekedése növekszik, és 2022 -ben a medián stíluslap mérete 68 kilobájt vagy 72 kilobájt volt.… Megemlítették a legnagyobbat, amelyet 78 megabájtnak találtak.… Ezek szöveges fájlok."

Ez a fajta puffadás negatívan befolyásolhatja az alapvető webes életet és az általános felhasználói élményt, amelyek két olyan terület, amely csinál befolyásolja a rangsorolásokat. A keretek és az előre gyártott könyvtárak gyakran oka.

Míg a fejlesztők ezt enyhíthetik a miniszterelnöki és a fel nem használt szabály metszéssel, nem mindenki tesz. Ez teszi a CSS optimalizálását érdemes elemnek a műszaki SEO ellenőrző listáján.

Tartsa a CSS -t mászni

Annak ellenére, hogy a CSS korlátozott szerepe a rangsorolásban, a Google továbbra is azt javasolja, hogy a CSS fájlok feltérképezhetőek legyenek.

Mueller viccelődött:

"A Google iránymutatásai azt mondják, hogy a CSS -fájlokat feltehetővé kell tenni. Tehát ott kell lennie valamiféle varázslatnak, igaz?"

Az igazi ok technikai, mint varázslatos. A GoogleBot CSS fájlokat használ az oldalak megjelenítésére, ahogyan a felhasználók látják őket.

A CSS blokkolása befolyásolhatja az oldalak értelmezését, különösen az elrendezés, a mobilbarát vagy az olyan elemek, mint a rejtett tartalom esetében.

Gyakorlati tippek a SEO profikhoz

Íme, mit jelent ez az epizód a SEO gyakorlatához:

Hagyja abba az osztálynevek optimalizálását: Kulcsszavak a CSS osztályokban nem segítik a rangsorolást.
Ellenőrizze az álnév elemeit: Bármely valódi tartalomnak, mint például az olvasásnak szánt szöveg, HTML -ben kell élnie, nem :before vagy :after-
Ellenőrzési stíluslap mérete: A nagy CSS fájlok sérthetik az oldalsebességet és az alapvető webes életet. Vágja le, amit csak tudsz.
Gondoskodjon arról, hogy a CSS feltérképezhető legyen: A stíluslapok blokkolása megzavarhatja a megjelenítést, és befolyásolhatja a Google megértésének módját.

A csapat hangsúlyozta annak fontosságát is, hogy a megfelelő HTML -címkéket használja az értelmes képekhez:

„Ha a kép része a tartalomnak, és olyan vagy, mint:„ Nézd meg ezt a házat, amelyet éppen vettem. imgegy képcímke vagy a picture Tag, amelynek ténylegesen a DOM részeként van a tényleges kép, mert azt akarja, hogy láthassuk, Ah, tehát ennek az oldalnak ez a képe nemcsak a dekoráció. ”

Használja a CSS -t a stílushoz és a HTML -hez a jelentéshez. Ez az elválasztás segít mind a felhasználók, mind a keresőmotorok számára.

Hallgassa meg a teljes podcast epizódot az alábbiakban:

https://www.youtube.com/watch?v=L2E3GBDP_QY