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ésafterha 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ésafter… Abeforeá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
:beforevagy: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 apictureTag, 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:
