CSS fono vaizdai nėra indeksuojami

Neseniai atliktame įrašo transliacijos paieškoje „Google“ paieškos santykių komanda perspėjo kūrėjus nenaudoti CSS visiems svetainių vaizdams.

Nors CSS fono vaizdai gali pagerinti vaizdinį dizainą, jie nematomi „Google“ vaizdų paieškai. Tai gali sukelti praleistų galimybių rodikliui ir paieškos matomumui.

Štai ką pataria „Google“ paieškos šalininkai.

CSS vaizdo problema

Epizodo metu Johnas Muelleris pasidalino pasikartojančiu klausimu:

„Aš turėjau ką nors, kas mane susimąstė praėjusią savaitę ar savaitę prieš socialinę žiniasklaidą:„ Panašu, kad mano kūrėjas nusprendė naudoti CSS visiems vaizdams, nes, jų manymu, tai geriau “. Ar tai veikia? “

Anot „Google“ komandos, šis požiūris kyla dėl nesusipratimo, kaip paieškos varikliai aiškina vaizdus.

Kai vaizdiniai pridedami naudojant CSS fono ypatybes, o ne standartines HTML vaizdo žymes, jie gali nepasirodyti puslapio DOM, todėl jų negalima indeksuoti.

Kaip paaiškino Martinas Splittas:

„Jei turite turinio vaizdą, jei vaizdas yra turinio dalis … norite imgvaizdo žyma arba a picture Žyma, kuri iš tikrųjų turi tikrąjį vaizdą kaip DOM dalį, nes norite, kad mes matytume kaip AH, taigi, šiame puslapyje yra šis vaizdas, kuris nėra tik dekoravimas. Tai yra turinio dalis, tada vaizdo paieška gali jį pasiimti. “

Turinys ir dekoravimas

Skirtumas tarp turinio ir dekoratyvinio vaizdo skirtumas yra tas, ar jis prideda prasmę, ar yra grynai kosmetinė.

Dekoratyvinius vaizdus, tokius kaip raštuotas fonas, atmosferos efektai ar animacijos, galima saugiai įgyvendinti naudojant CSS.

Kai vaizdas perteikia prasmę arba nurodomas turinyje, CSS yra prastas.

„Splitt“ pasiūlė šį pavyzdį:

„Jei turiu tinklaraščio įrašą apie šį konkretų kraštovaizdį ir noriu patikti žmonėms, pavyzdžiui, pažvelgti į šį nuostabų panoraminį kraštovaizdžio vaizdą ir tada tai yra fono vaizdas … problema yra turinys, konkrečiai nurodantis šį vaizdą, tačiau jis neturi įvaizdžio kaip turinio dalis“.

Tokiais atvejais vaizdas įdėkite į HTML naudojant img arba picture TAG užtikrina, kad ji suprantama kaip puslapio turinio dalis ir gali būti rodoma „Google“ vaizdo paieškoje.

Kas daro CSS vaizdus nematomus?

Splitt paaiškino, kodėl taip atsitinka:

„Vartotojui, žiūrint į naršyklę, apie ką jūs kalbate, Martin? Vaizdas yra čia pat. Bet jei žiūrite į DOM, jo visiškai nėra. Tai yra tik CSS dalykas, kuris buvo įkeltas į puslapio stilių.”

Kadangi „Google“ analizuoja DOM, kad nustatytų turinio struktūrą, vaizdai, kuriems būdingi vien per CSS, dažnai nepastebima, ypač jei jie nėra įtraukiami kaip tikri HTML elementai.

Šis skirtumas atspindi platesnį interneto kūrimo principą.

Padalijimas prideda:

„Idealiu atveju yra skirtumas tarp to, kaip atrodo svetainė ir koks yra turinys“.

O kaip atsargos nuotraukos?

Komanda atkreipė dėmesį į atsargų nuotraukas, kurios kartais pridedamos vaizdiniam patrauklumui, o ne originaliam turiniui.

Splitas sako:

„Reikšmė vis dar yra tokia, kaip šis vaizdas nėra mano. Tai yra atsargų vaizdas, kurį mes nusipirkome ar licencijavome, tačiau jis vis dar yra turinio dalis“, – pažymėjo komanda.

Nors šie vaizdai gali ne reitinguoti dėl dubliavimosi, jų įgyvendinimas HTML vis tiek padeda užtikrinti tinkamą indeksavimą ir pagerina prieinamumą.

Kodėl tai svarbu

Komanda pabrėžė keletą pavyzdžių, kai netinkamas įgyvendinimas gali sumažinti matomumą:

• Nekilnojamojo turto sąrašai: Namų nuotraukos, naudojamos kaip fono vaizdai, nebus rodomi atitinkamose vaizdų paieškos užklausose.
• Naujienų straipsniai: Diagramos ar infografikos, pridėtos per CSS, negali būti indeksuojami, susilpnėjant aptikimą.
• El. Prekybos svetainės: Produktų vaizdai, įterpti į foninius stilius, gali būti nerodomi su pirkiniais paieškose.

Ką daryti toliau

„Google“ komentarai rodo, kad turėtumėte vadovautis šia geriausia praktika:

• Naudokite HTML (img arba picture) Bet kokio vaizdo, kuris pateikia turinį arba nurodytas puslapyje, žymos.
• Rezervuokite CSS foną dekoratyviniams vaizdams, kurie neturi prasmės.
• Jei vartotojai gali tikėtis rasti vaizdą per paiešką, jis turėtų būti HTML.
• Tinkamas įgyvendinimas padeda ne tik naudojant SEO, bet ir naudojant prieinamumo įrankius bei ekrano skaitytojus.

Žvilgsnis į priekį

Leidėjai turėtų atsiminti, kaip įgyvendinami vaizdai.

Nors CSS yra galingas dizaino įrankis, naudojant su turiniu susijusius vaizdus, gali būti prieštaraujama geriausia indeksavimo, prieinamumo ir ilgalaikės SEO strategijos praktika.

Klausykite viso podcast'o epizodo žemiau:

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

Teminis vaizdas: Romos Samborskyi/Shutterstock