Képek a Google-ben: alt szöveg, fájlnév és képoptimalizálás a weboldalon

Egy kisvállalati weboldalon a képek legalább annyira fontosak, mint a szöveg: a termékfotó, a referenciamunka vagy az üzlet képe sokszor előbb meggyőz, mint bármilyen leírás. A Google Search Central útmutatója, a Google image SEO best practices szerint a Google több felületen segít vizuálisan felfedezni az információt, ilyen a szöveges találat mellett megjelenő kép, a Google Discover és a Google Képek, és a képek megjelenésére vonatkozó általános javaslatok mindegyiknél ugyanazok. Az alábbiakban ezt foglaljuk össze weboldal-üzemeltetői szemmel.

Szabványos HTML képelem, ne CSS-háttér

Az útmutató szerint a szabványos HTML képelemek segítik a feltérképezőket abban, hogy megtalálják és feldolgozzák a képeket. A Google az img elem src attribútumában találja meg a képet, akkor is, ha az egy picture elemen belül van. A CSS-sel beállított képeket a Google nem indexeli. Ha tehát egy fontos kép csak háttérképként szerepel, azt a Google Képek nem fogja megmutatni.

Reszponzív képek és tartalék src

A reszponzív képekhez a weboldalak a picture elemet vagy az img elem srcset attribútumát használják. A Google szerint egyes böngészők és feltérképezők ezeket nem értik, ezért mindig érdemes tartalék URL-t megadni az src attribútumban. A picture elemen belül is legyen egy img elem tartalékként, src attribútummal.

Támogatott formátumok, sebesség és minőség

A Google Kereső az img elem src attribútumában hivatkozott képeket a következő formátumokban támogatja: BMP, GIF, JPEG, PNG, WebP, SVG és AVIF. Az útmutató azt is javasolja, hogy a fájlnév kiterjesztése egyezzen a fájltípussal. Az éles képek a Google szerint vonzóbbak a felhasználóknak, a találati bélyegképben is, és növelhetik a forgalom esélyét. Ugyanakkor a képek gyakran az oldal méretének legnagyobb részét adják, ami lassúvá és drágává teheti a betöltést, ezért érdemes a legújabb képoptimalizálási és reszponzív technikákat alkalmazni. A sebesség elemzéséhez az útmutató a PageSpeed Insightst ajánlja.

Melyik kép jelenjen meg előnézetként?

A Google szerint az előnézeti kép kiválasztása teljesen automatikus, de befolyásolható. Megadható a schema.org primaryImageOfPage tulajdonsága, egy kép a fő entitáshoz kapcsolva (például egy BlogPosting image tulajdonságával), vagy az og:image meta tag. Az előnyben részesített képnél az útmutató ezt javasolja:

• legyen releváns és jellemző az oldalra,
• ne általános kép legyen, például a webhely logója, és ne szöveget tartalmazó kép,
• kerülje a szélsőséges képarányt, vagyis a túl keskeny vagy túl széles képet,
• lehetőleg nagy felbontású legyen.

Beszédes fájlnév és alt szöveg

A Google a kép témájáról az oldal tartalmából is tájékozódik, a képaláírásokat és a képcímeket is beleértve. Ezért ahol lehet, a kép kerüljön releváns szöveg közelébe, és a kép témájához illő oldalra. A fájlnév az útmutató szerint csak nagyon enyhe jelzést ad, de a rövid, beszédes név (a Google példájában my-new-black-kitten.jpg) jobb, mint az IMG00023.JPG, és kerülni érdemes az olyan általános neveket, mint az image1.jpg. Ha a képeket lokalizáljuk, a fájlneveket is érdemes lefordítani.

A legfontosabb képmetaadat az alt szöveg, vagyis a képet leíró szöveg. A Google szerint ez a képernyőolvasót használó és a lassú kapcsolaton böngésző felhasználóknak is segít. A Google az alt szöveget számítógépes látás algoritmusokkal és az oldal tartalmával együtt használja a kép témájának megértéséhez, és ha a kép link, az alt szöveg horgonyszövegként is hasznos. Az alt szöveg legyen hasznos és informatív, a kulcsszavakat pedig megfelelően, az oldal tartalmához illően használja. A kulcsszavakkal való teletömés rossz felhasználói élményt ad, és a webhely akár spamnek is tűnhet tőle.

Képsitemap és egységes kép-URL

Azokat a képeket, amelyeket a Google máskülönben nem találna meg, képsitemapban is meg lehet adni. A képsitemapban más domainről, például CDN-ről származó kép-URL is szerepelhet; ilyenkor a Google javasolja a CDN domainjének igazolását a Search Console-ban. Ha ugyanaz a kép több oldalon is szerepel, mindig ugyanazzal az URL-lel érdemes hivatkozni rá, hogy a Google gyorsítótárazhassa és újrahasznosíthassa, és ne kelljen többször lekérnie.

Mit nézünk meg egy ügyféloldalon

A Flybuiltnél ezt a rövid listát használjuk, amikor egy élő ügyféloldal képeit ellenőrizzük. Nem Google-garancia, hanem az útmutató lefordítása a napi munkára.

• A fontos képek, például a termék-, referencia- és csapatfotók, img elemként szerepelnek-e, nem csak CSS-háttérként.
• Minden tartalmi képnek van-e valós, a képet leíró magyar alt szövege, kulcsszóhalmozás nélkül.
• Az új feltöltések beszédes, kötőjeles fájlnevet kapnak-e az IMG_1234.jpg típusú nevek helyett.
• A reszponzív képeknél megvan-e a tartalék src.
• Az og:image az oldalra jellemző kép-e, nem a logó.
• A PageSpeed Insightsban a képek nem lassítják-e túlzottan az oldalt.

Forrás: Google Search Central, Google image SEO best practices.