2025-06-18 · Baduno szerkesztőség · 6 blog.readMin · Blog és tudás
Kép SEO: WebP, alt szövegek és a betöltési idő kifogások vége
A képek a legtöbb oldalon a legnehezebb ballaszt és egyben a legrosszabbul kihasznált SEO felület. Mindkettő egy délután alatt megváltoztatható.
Formátumkérdés tisztázva
A WebP (vagy AVIF) JPEG/PNG helyett jellemzően 30–70% súlyt spórol, azonos hatás mellett. Alig van már ok a régi formátumokra – minden kép-pipeline automatikusan konvertáljon, ahogy a miénk teszi.
Méretek és betöltés
A width- és height-attribútumok megakadályozzák a layout ugrásokat, a loading=lazy elhalasztja a láthatatlant, a hero kép prioritást kap. Három attribútum, érezhető hatás az összes Core Web Vitalsra.
Alt szövegek: előbb az embereknek, aztán a gépeknek
Egy jó alt szöveg leírja, hogy mit lehet látni és mire való – először a képernyőolvasó-felhasználóknak, aztán a képkeresésnek. A kulcsszó-tömés mindkét célcsoportnak árt. Többnyelvű esetben érvényes: az alt szövegeket is le kell fordítani, nem szabad elfelejteni.
Saját képek használata
A készleten lévő fotókat mindenki felismeri, tele van velük a képkereső. A saját, konzisztens vizuális világ – ma már AI segítségével is előállítható – erősíti a márkát és a megkülönböztethetőséget. Ennek a weboldalnak minden képe saját gyártás; pont ez a lényeg.
Hatékonyság AI-alapú képoptimalizálással
Az AI automatikusan kiválaszthatja az optimális formátumot és a legjobb tömörítést. Az eszközök elemzik a képmotívumot és paramétereket állítanak be anélkül, hogy Önnek manuálisan kellene ellenőriznie minden képet. Jellemzően 40–60%-os fájlméret-csökkenés érhető el változatlan minőség mellett. Az eredményeket azonban szúrópróbaszerűen embernek kell ellenőriznie, mivel az AI néha részleteket hagyhat figyelmen kívül. A gyakorlatban sok tartalomkezelő rendszer ilyen optimalizálásokat plugin segítségével integrál. Példa: egy utazási portál automatikusan konvertált több ezer képet, 55%-os sávszélességet takarított meg, és 1,2 másodperccel javította a betöltési időt anélkül, hogy egy alkalmazottnak hozzá kellett volna nyúlnia egyetlen képhez sem.
Képek oldaltérképe: Strukturált adatok és indexelés
A képek csak akkor kerülnek elő, ha a keresőmotor képes feltérképezni őket. Használja a kép-oldaltérképet, hogy dinamikusan generált képek esetén is jelentse az összes URL-t. Egészítse ki a strukturált adatokat (morzsa, termék, videó) kép-URL-ekkel, hogy a Google a képeket gazdag eredményekben jelenítse meg. Ügyeljen arra, hogy a kép-URL-ek közvetlenül az eredetire mutassanak, ne egy szkriptparaméteren keresztül. Példa: egy bútorokat árusító online áruház az összes termékképet belefoglalja az XML oldaltérképbe, és Product sémát használ image tulajdonsággal. Ennek eredményeként a képek kiemelten jelennek meg a Google Képek keresésben, és gyakrabban kattintanak rájuk.
Reszponzív képek és art direction
Az srcset és sizes attribútumokkal a böngésző a viewportnak megfelelő képet kap. Ez mobil eszközökön hatalmas megtakarítást jelent. Az art direction (picture elem) akár eltérő kivágásokat is lehetővé tesz – pl. mobilon a termékre fókuszálva, asztali gépen a teljes jelenetet. A megvalósításhoz több képváltozatra van szükség, de a modern CMS-ek ezt automatizálhatják. Egy utazási blog minden úti célhoz egy hero képet használ; mobilon egy középre igazított kivágást tölt be, amely 70%-kal kisebb. A képre való kattintási arány 15%-kal nőtt, mert minden eszközön optimálisan hat.
A képek a legtöbb oldalon a legnehezebb ballaszt és egyben a legrosszabbul kihasznált SEO felület. Mindkettő egy délután alatt megváltoztatható.
Képek monitorozása és hibajavítása
Még az optimalizált képek is okozhatnak problémákat: 404-es hibák, rossz méretek, hiányzó alt szövegek. A képek rendszeres bejárása segít az ilyen hibák azonosításában. Az olyan eszközök, mint a Screaming Frog vagy a beépített SEO bővítmények megmutatják, mely képek nem rendelkeznek alt szöveggel vagy túl nagyok. Alakítson ki egy munkafolyamatot: frissítés vagy új képsorozat után automatikus ellenőrzés, majd kézi mintavétel. Példa: Egy híroldal felfedezi, hogy a régebbi cikkekben a képek 20%-a nincs WebP-re konvertálva. Egy szkript utólag konvertálja, a betöltési idő 0,8 másodperccel javul.
Kép-CDN és gyorsítótárazás: Hol laknak a pixelek
A képek Content Delivery Network (CDN) segítségével történő kiszolgálása tehermentesíti a szerverét és felgyorsítja a megjelenítést az összes kontinensen. A CDN optimalizált másolatokat tárol a képeiről a felhasználóhoz közeli edge szervereken. Intelligens gyorsítótárazással kombinálva – pl. hosszú cache-élettartam a változatlan képekhez és rövid a dinamikusakhoz – csökkentheti a forrásszerverhez intézett kérések számát. Ügyeljen arra, hogy a cache-fejlécek helyesen legyenek beállítva: Cache-Control: public, max-age=31536000, immutable a statikus képverziókhoz. Frissítéskor változtassa meg a fájlnevet vagy használjon cache-bustert. A modern kép-CDN szolgáltatások automatikusan képesek WebP vagy AVIF formátumban elküldeni a képeket a böngésző képességeitől függően. A beállítás általában egy aldomain (pl. media.ihrewebsite.de) és egy CNAME bejegyzés segítségével történik. A gyakorlatban a CDN-re való átálláskor 40-60%-os betöltési időcsökkenést tapasztalhat a nemzetközi látogatók képeinél. Fontos: Figyelje a HTTP állapotkódokat – a 304 Not Modified kívánatos, a 503 vagy 403 hibás konfigurációra utal. Az átállás után végezzen bejárást (crawl), hogy megbizonyosodjon arról, hogy minden kép-URL helyesen feloldódik, és nem keletkeznek duplikált vagy hibás bejegyzések.
Képlicencek és jogi buktatók a SEO-ban
A képek SEO-hatását szerzői jogi problémák semmissé tehetik. A keresőmotorok az értékelés során figyelembe veszik a tartalom jogszerűségét is. Kizárólag licencelt vagy saját készítésű képeket használjon. Stockfotók esetén ügyeljen a licencfeltételekre: sok csak korlátozott számú megjelenítést engedélyez, vagy kizárja a kereskedelmi felhasználást. Adja meg helyesen a szerzőt, mert a hiányzó kredit még licenc esetén is jogi figyelmeztetést vonhat maga után. Creative Commons képeknél különböztesse meg a változatokat: a CC0 mindent engedélyez név nélkül, a CC BY megköveteli a szerző feltüntetését. Valósítson meg egy munkafolyamatot: minden kép a közzététel előtt kapjon licencmegjegyzést a metaadatokban (pl. EXIF-XMP) és az oldalon egy látható vagy strukturált adatokként elhelyezett jelzést. Használja az og:image tulajdonságot a helyes licencinformációval, hogy a közösségi hálózatokban is átláthatóságot teremtsen. A jogi tisztaság erősíti a bizalmat, ami hosszú távon pozitívan hathat a rangsorolásra. Rendszeresen ellenőrizze, hogy vannak-e érvényes licenc nélküli képek – az automatizált eszközök felismerik a hiányzó metaadatokat. Példa: Egy blog eltávolította a véletlenül használt, nem szabad képeket, és CC0 felvételekkel helyettesítette; a visszafordulási arány csökkent, mert már nem riasztották el a felhasználókat jogi figyelmeztetések.
CDN és kép-gyorsítótárazás: Betöltési idő globális optimalizálása
A Content Delivery Network (CDN) a képek kiszolgálásához szinte nélkülözhetetlen, amint weboldalának nemzetközi látogatói vannak. A CDN-ek a képeket különböző régiókban lévő szervereken tárolják, és a földrajzilag legközelebbi helyről szolgálják ki. Ez jelentősen csökkenti a késleltetést. Kulcsfontosságú a cache-fejlécek helyes konfigurálása. Állítson be hosszú cache-időket a statikus képverziókhoz (pl. egy év), és használjon cache-bustert (pl. hash a fájl URL-ben), hogy frissítéskor azonnal az új verzió kerüljön kiszolgálásra. E mechanizmus nélkül előfordulhat, hogy a látogatók elavult vagy hibás képeket látnak. Számos CDN emellett automatikus képoptimalizálást is kínál: a kliens támogatásától függően konvertálnak WebP vagy AVIF formátumba, hozzáigazítják a felbontást a végberendezéshez, és veszteségmentesen tömörítenek. Ezek a funkciók tehermentesítik a szervert és mérhető másodperctöredékekkel javítják a betöltési időt. Ellenőrizze azonban, hogy a CDN-optimalizálás nem írja-e felül saját beállításait – szeretné megtartani az ellenőrzést az Alt-szövegek és metaadatok felett. Példa: Egy európai webáruház CDN-t használ képoptimalizálással, és az ázsiai vásárlók betöltési idejét 5 másodpercről 2 alá csökkenti. Az átálláshoz csupán a gyorsítótárazási stratégia módosítására és az optimalizálási szabályok engedélyezésére volt szükség. Ügyeljen arra, hogy kép-URL-jei CDN-kompatibilisek legyenek, és minden kép ugyanazon a CDN-en keresztül kerüljön kiszolgálásra a mixed-content figyelmeztetések elkerülése érdekében.
Képengedélyek és jogi biztosítás
A weboldalán használt képek esetében jogi buktatókkal kell számolnia, amelyek veszélyeztethetik mind a SEO-teljesítményt, mind a hírnevét. Minden olyan képhez, amelyet nem Ön készített, érvényes licenc szükséges – ez vonatkozik a mesterséges intelligencia által generált képekre is, amelyek jogi státusza még nem tisztázott véglegesen. Kizárólag megbízható forrásból származó, licencelt képeket vagy saját felvételeket használjon. Dokumentálja a licencet minden képhez a CMS-ben, lehetőleg a forrásra mutató hivatkozással. A hiányzó vagy hibás licencinformációk figyelmeztetésekhez vezethetnek, amelyek költségesek és időigényesek. Az alt szövegekben és képfeliratokban se használjon engedély nélkül védjegyeket vagy védett kifejezéseket. Továbbá: a személyeket ábrázoló képekhez sok országban hozzájárulás (modell-engedély) szükséges. Enélkül nem használhatja a képeket kereskedelmi célokra. Ezért ellenőrizze a stock fotóknál, hogy reklámcélokra is engedélyezettek-e. Egy utazási portál például egy ingyenes adatbázisból vett át képeket, amelyek azonban csak szerkesztői célokra voltak licencelve – ez egy eltiltó keresethez vezetett. Ezért építsen be egy ellenőrzési lépést a munkafolyamatba: a külső kép feltöltése előtt rögzítse a licencet és erősítse meg a felhasználási feltételeket. Ez a fegyelem hosszú távon védelmet nyújt, és bizalmat épít a látogatókban, mivel bizonyíthatja, hogy minden tartalmat jogszerűen használ.
blog.faqT
Valóban manuálisan kell ellenőriznem minden kép alt szövegét?
Ideális esetben igen, de nagyon sok kép esetén használhat mesterséges intelligencia eszközöket javaslatok készítéséhez. Az eredményeket azonban szúrópróbaszerűen ellenőriznie kell, mivel a MI gyakran figyelmen kívül hagyja a kontextuális árnyalatokat. Bevált munkafolyamat: Az automatikusan generált alt szövegeket anyanyelvi beszélővel ellenőriztesse – különösen többnyelvű projekteknél.
Hogyan tudom megállapítani, hogy a képeim már optimálisan tömörítettek?
Használjon egy olyan eszközt, mint a PageSpeed Insights vagy a Lighthouse a Chrome DevTools-ban. Ezek megmutatják az optimalizált képek által elérhető megtakarítási lehetőségeket. Crawlolja le teljes weboldalát egy SEO eszközzel, amely képenként listázza a fájlméretet. Ha egy kép meghaladja a 200 KB-ot, optimalizálnia vagy konvertálnia kell.
