A CSS háttérképek nem indexeltek

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 a picture Tag, 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 (img vagy picture) 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