A Record Podcast nemrégiben végzett keresésében a Google Keresési Kapcsolatok csapata figyelmeztette a fejlesztőket, hogy a CSS -t használják az összes weboldal képéhez.
Míg a CSS háttérképek javíthatják a vizuális kialakítást, a Google Image Search számára láthatatlanok. Ez elmulasztott lehetőségekhez vezethet a kép indexelésében és a keresési láthatóságban.
Íme, amit a Google keresési támogatói tanácsolnak.
A CSS képprobléma
Az epizód során John Mueller ismétlődő kérdést osztott meg:
„Volt valaki, aki a múlt héten vagy egy héttel korábban úgy gondolom, hogy a közösségi médiában:” Úgy tűnik, hogy a fejlesztőm úgy döntött, hogy a CSS -t használja az összes képhez, mert úgy vélik, hogy jobb. ” Működik ez?
A Google csapat szerint ez a megközelítés abból a félreértésből fakad, hogy a keresőmotorok hogyan értelmezik a képeket.
Ha a látványt a CSS háttér tulajdonságai segítségével adják hozzá a standard HTML képcímkék helyett, előfordulhat, hogy nem jelennek meg az oldal DOM -ban, ezért nem indexelhetők.
Ahogy Martin Splitt elmagyarázta:
„Ha van tartalomképe, ha a kép a tartalom része …
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átjuk, mint AH, tehát ennek az oldalnak ez a képe nemcsak dekoráció. Ez a tartalom része, majd a képkeresés felveheti. ”
Tartalom vs dekoráció
A tartalomkép és a dekoratív kép közötti különbség az, hogy értelmet ad -e vagy tisztán kozmetikai jellegű -e.
A dekoratív képeket, például a mintás háttereket, a légköri hatásokat vagy az animációkat, a CSS segítségével biztonságosan megvalósíthatók.
Amikor a kép jelentést közvetít, vagy a tartalomban hivatkozik, a CSS rossz illeszkedés.
Splitt a következő példát nyújtotta:
„Ha van egy blogbejegyzésem erről a konkrét tájról, és szeretném, ha azt szeretném mondani, hogy az emberek, mint például a táj csodálatos panorámás nézete, és akkor ez egy háttérkép … A probléma az, hogy a tartalom kifejezetten hivatkozik erre a képre, de nincs a kép a tartalom részeként.”
Ilyen esetekben a képet a HTML -be helyezve a img vagy picture A TAG biztosítja, hogy megértsék az oldal tartalmának részeként, és jogosultak a Google Image Search -ben történő indexálásra.
Mi teszi a CSS -képeket láthatatlanná?
Splitt elmagyarázta, miért történik ez:
„A böngészőt néző felhasználó számára, miről beszélsz, Martin? A kép ott van. De ha a DOM -ot nézi, akkor ez egyáltalán nincs. Ez csak egy CSS dolog, amelyet betöltött az oldal stílusához.”
Mivel a Google elemzi a DOM -ot a tartalomszerkezet meghatározására, a tisztán CSS -en keresztüli képeket gyakran figyelmen kívül hagyják, különösen, ha nem szerepelnek tényleges HTML elemekként.
Ez a megkülönböztetés tükrözi a szélesebb webfejlesztési alapelvet.
A Splitt hozzáadja:
„Ideális elválasztás van a webhely megjelenése és a tartalom között.”
Mi a helyzet a stock fotókkal?
A csapat foglalkozott a stock fotók használatával, amelyeket néha a vizuális vonzereje érdekében adnak hozzá, nem pedig az eredeti tartalomhoz.
Splitt azt mondja:
„A jelentés még mindig olyan, mintha ez a kép nem az enyém. Ez egy stock kép, amelyet vásároltunk vagy engedélyezünk, de ez továbbra is a tartalom része” – jegyezte meg a csapat.
Noha ezek a képek nem rangsorolhatják a duplikáció miatt, a HTML -ben történő megvalósítás továbbra is elősegíti a megfelelő indexelést és javítja az akadálymentességet.
Miért számít ez
A csapat számos példát kiemelt, ahol a nem megfelelő végrehajtás csökkentheti a láthatóságot:
- Ingatlanlisták: A háttérképként használt otthoni fotók nem jelennek meg a releváns képkeresési lekérdezésekben.
- Hírcikkek: A CSS -en keresztül hozzáadott táblázatok vagy infographicsok nem indexálhatók, gyengítve a felfedezhetőséget.
- E-kereskedelmi webhelyek: A háttérstílusokba ágyazott termékképek nem jelennek meg a bevásárláshoz kapcsolódó keresések során.
Mi a teendő ezután
A Google megjegyzései azt mutatják, hogy be kell tartania ezeket a bevált gyakorlatokat:
- Használja a HTML -t (
imgvagypicture) Címkék minden olyan képhez, amely tartalmat közvetít, vagy az oldalon hivatkozik. - Fenntartja a CSS hátterét olyan dekoratív látványtervekhez, amelyek nem jelentik a jelentést.
- Ha a felhasználók elvárhatják, hogy keresés útján találjanak képet, akkor a HTML -ben kell lennie.
- A megfelelő megvalósítás nem csak a SEO -t, hanem az akadálymentességi eszközöket és a képernyő olvasóit is segíti.
Előre nézve
A kiadóknak figyelembe kell venniük a képek megvalósítását.
Míg a CSS egy hatékony eszköz a tervezéshez, a tartalommal kapcsolatos képek kézbesítéséhez való felhasználása ellentmondhat az indexelés, az akadálymentesség és a hosszú távú SEO stratégia bevált gyakorlatainak.
Hallgassa meg a teljes podcast epizódot az alábbiakban:
https://www.youtube.com/watch?v=L2E3GBDP_QY
