Blog bejegyzés

Képek optimalizálása WordPress-ben

WordPress képoptimalizálás: fájlméret, fájlnév, alt, title

A Google rangsorolási algoritmusában is helyet kapott (megjegyzés: sokak szerint elég nagy súllyal) a weboldal betöltődésének sebessége, amelyre hatással van többek között a képfájlok mérete is. A nagyobb méretű képfájlok jócskán megnövelik a weboldal betöltődését, és ezzel egyidejűleg egyenes arányban növelhetik a visszafordulási arány (bounce rate) értékét is.

Tipp: vannak olyan tartalomkezelő rendszerek (a WordPress nem ilyen), amelyek esetében külön kell engedélyezni a képek indexelését.
Megjegyzés: a lejjebb található tippek nem fontossági sorrendet takarnak. A képek megfelelő optimalizálásához szinte kivétel nélkül nagyon fontosak.

– Megfelelő képformátum használata

Használjuk a legelterjedtebb képfájl formátumokat, mint például a veszteségesen tömörített jpeg vagy jpg képfájl formátumot, illetve a veszteségmentes tömörítésre alkalmas png-t vagy gif-et.

– Nagyobb képfelbontás megtartása

Törekedjünk arra, hogy lehetőleg minél jobb minőségű, azaz minél nagyobb felbontású (*pl.: 1024px, 1280px, 1920px szélesség) legyen a kép, de úgy, hogy az ne menjen nagyon a képfájl méretének rovására.

*Természetesen ezek alól a méretek alól kivételt képeznék azok a képek, amelyek speciális helyeken kerülnek megjelentetésre. Például a fejlécben a logó, vagy az oldalsávban megjelenített kép.

Megjegyzés: a Google képkeresőjében a nagyobb méretű és jobb minőségű képek a keresési találatok elején találhatóak.

– Megfelelő fájlméret kialakítása

Lehetőleg ne nagyon töltsünk fel több MB-os képeket a weboldalra, mert ezek nagymértékben lassítják a weboldal betöltődését, és növelik a visszafordulási arányt. Törekedjünk arra, hogy a jó minőségű képfájlok mérete ne haladja meg a 200-300 KB-ot.

Tipp: használjuk a médiatárba feltöltött képek esetében az ingyenes WP Smush bővítményt, amely minőségromlás nélkül, jelentősen csökkenti a képek (jpg, png, gif) méretét.
+Tipp: főoldali slider esetén – főleg, ha 3-nál több képet is megjelenítünk benne -, akkor vigyük le a képek méretét 100 KB alá.
++Tipp: képszerkesztő programok használata esetén, a képek mentése során használjuk a minőség választási opciót, vagy a „Mentés webre és eszközökre” lehetőséget.

– Helyes fájlnév megadása

A képfájl nevének megadása során a keresőbarát kialakítást válasszuk. Ami annyit jelent, hogy a képfájl nevében ne használjunk nagybetűt, ékezetet, szóközt, és alsó vonást.

Helytelen kialakítás: Piros Pöttyös_Túró Rudi.png
Helyes kialakítás: piros-pottyos-turo-rudi.png

SEO tipp: a képfájl megadásánál vegyük figyelembe az adott kép tartalmát és relevanciáját! Ne nevezzük el a képet irrelevánsan csak azért, hogy fontosabb kulcsszavakat nyerjünk vele.

– Kép Title és Alt tag-jének kitöltése

A kép TITLE (megjegyzés: WordPress-ben ez a képnél, név vagy cím mezőként szerepel) és ALT (megjegyzés: WordPress-ben ez a képnél, helyettesítő szöveg vagy alternatív szöveg mezőként szerepel) tag-jének kitöltése, a keresőrobotok munkáját segítik abban, hogy jobban felismerhessék, hogy mi található a képen. A képek TITLE ás ALT címkéinek pontos helyének kitöltéséről készített képernyőképeink, a lentebb található képgalériában láthatók.

Tipp: a tartalomba beágyazás esetén a CAPTION (felirat) mező is kitölthető, amely a látogatót segíti abban, hogy jobban megértse, pontosan mi látható az adott képen.
SEO tipp: a kép TITLE és ALT tag-jének megadásánál vegyük figyelembe az adott kép tartalmát és relevanciáját! A kép adatainak megadása során ne használjunk kulcsszóhalmozást, mert azért büntetés járhat!
Megjegyzés: WordPress esetében, ha a feltöltött kép esetében nincs kitöltve még a TITLE mező (név vagy cím mező), akkor a kép nevénél a fájlnév fog szerepelni (ha a mintapéldánkat vesszük, akkor: piros-pottyos-turo-rudi), amit utólag meg kell szerkesztenünk például így: Piros Pöttyös Túró Rudi

Egy keresőoptimalizált kép a forráskódban így néz ki:

<img src=”http://www.example.com/wp-content/uploads/2016/06/iszak-eszti.jpg” title=”Iszak Eszti” alt=”Iszak Eszti budapesti divat fotózása” width=”1024″ height=”683″ />

+bővített kivonattal pedig így (pirossal jelöltük a plusz kódsort):

<img itemprop=”image” src=”http://www.example.com/wp-content/uploads/2016/06/iszak-eszti.jpg” title=”Iszak Eszti” alt=”Iszak Eszti budapesti divat fotózása” width=”1024″ height=”683″ />

Kód értelmezése:

  • src = a kép elérése
  • title = buborékszöveg (akkor jelenik meg, amikor a képre rávisszük az egeret)
  • alt = a kép leírása
  • width = a kép szélessége px-ben
  • height = a kép magassága px-ben

Kép TITLE és ALT tag-jének kitöltése WordPress-ben:

 

Nagyon fontos!
A tartalomba beágyazott képek esetében még a beillesztés és az adott tartalom mentése előtt kell kitölteni az adott képek ALT és TITLE tag-jét (mindegy, hogy a „Médiatárba” feltöltve és egyből megszerkesztve, vagy az adott tartalom szerkesztésén belül a „Média hozzáadása” gombra kattintva és ott megadva), mert ha elmarad vagy csak utólag kerül megadásra az nem elegendő, mivel a tartalom forrásába az alap változat, azaz az alap ALT és TITLE értékek (a kép fájlnevének kötőjeles és kisbetűs, valamint ékezet nélküli verziója, mintapélda: juhasz-akos-1) kerülnek bele, amelyek nem keresőbarát kialakításúak. Utólag ez csak úgy módosítható, ha az adott tartalomban a képek törlésre és újbóli beillesztésre kerülnek.

– Geo lokáció kihasználása

Helyi vállalkozás esetén, de csak abban az esetben, ha a képek is RELEVÁNSAK a vállalkozásra nézve, akkor érdemes a képek fájlnevében (pl.: gyori-szobafestes.jpg vagy szobafestes-gyor.jpg) valamint a TITLE és az ALT részén is feltüntetni az adott települést.

– Bővített kivonatok használata

Bizonyos képek esetében használhatjuk a bővített kivonatokat (rich snippets) vagy más néven strukturált adatokat is, például recept képek vagy webáruház termékképei esetén. Ezek a „bélyegképek” aztán megjelenhetnek a keresőoldalakon az adott weboldal találatainak adatai mellett, mint egy kiegészítő információ, amelyek jócskán növelhetik a kattintási arányt is.

SEO tipp: recept- és webáruház képek esetén is használjunk EGYEDI, lehetőleg saját készítésű képeket!

– CDN használata (csak bizonyos weboldalak esetén)

Nagyszámú és/vagy globális látogatottságú weboldal esetén, illetve ha sok képet használunk weboldalunkon, akkor érdemes pluszban CDN (Content Delivery Network) szolgáltatást is igénybe vennünk. Ezeknek a szolgáltatásoknak a lényege, hogy a weboldalunk statikus fájljait (JS és CSS fájlokat, és a képeket) eltárolja, majd a látogatóknak úgy szolgálja azt ki, hogy letöltésüket a látogató részére a hozzá legközelebbi szerverről biztosítja. Tehát a lényegük az, hogy a látogatók nem egy adott pontú szerverhez csatlakoznak, hanem a hozzájuk éppen legközelebbi szerverhez, amely így azt teszi lehetővé, hogy a látogatók függetlenül attól, hogy a világ mely pontján tartózkodnak, a statikus fájlokat közel ugyanakkora sebességgel tölthetik le a szerverről.

Megjegyzés: a CDN szolgáltatást tényleg csak azok számára érdemes beüzemelni, akiknek nagy látogatottságú weboldaluk van és/vagy a látogatók többségének földrajzi helye nagyon messze esik a szervertől, illetve nagyon sok képet használnak a weboldalon, amelyek egyenkénti mérete sem elenyésző.

Összegzés | Hogyan csökkenthetjük a képek méretét?

  • pl.: a kép felbontásának méretarányos csökkentésével (1920px szélességről méretarányosan levisszük a kép szélességét 1024 px-re)
  • pl.: a kép minőségének csökkentésével (a kép minősége nagyban csökkenthető úgy is, hogy az emberi szem észre sem veszi a különbséget)
  • pl.: megfelelő fájlformátum választásával (ha nagyobb méretű képünk van, akkor megpróbálkozhatunk azzal, hogy másik képfájl formátumban próbáljuk elmenteni)
  • pl.: veszteségmentes tömörítéssel (a továbbiakat lásd a WP Smush cikk alatt)
  • pl.: képszerkesztő programokkal a „Mentés webre és eszközökre” használatával

SEO tipp (javaslat):

WordPress weboldal esetében teljesen felesleges trükközni a képek mappájának elérési útjának módosításával, hogy egy kulcsszót csempészünk bele. A WordPress az alapértelmezett mappát (uploads) használja a képek elhelyezésére, amit tovább bont évekre és azon belül a hónapok számával. A „Beállítások/Média” menüpont alatt ez az útvonal viszont szabadon megváltoztatható. Például uploads helyett kepek-re.

Alapértelmezett kialakítás:

http://www.sajathonlap.hu/wp-content/uploads/2016/09/brand-logo.png

Megváltoztatott útvonal:

http://www.sajathonlap.hu/wp-content/kepek/brand-logo.png

Nagyon fontos!

SOHA ne töltse fel a fényképezőgépéből közvetlenül a weboldalára a képeket! A feltöltésük előtt mindenképpen optimalizálja méretűket (elfogadható méret: max 200-300 KB, de minőségi képek esetén lehet 300-800 KB is)! Ha 3-5 MB-os képeket tölt fel, akkor nincs az a WordPress bővítmény, amely elfogadható méretűvé optimalizálná utólag, és azt se felejtse el, a nagyméretű képek jócskán növelik weboldalának betöltődésének sebességét, amellyel egyenes arányban növekszik a visszafordulási arány (bounce rate) értéke is.

További hasznos WordPress cikkek a wpSHOP.hu ajánlásával!

Print Friendly, PDF & Email

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.

Hasonló bejegyzések

WordPress biztonság
50+ WordPress biztonsági tipp

WordPress biztonsági tippek, a teljesség igénye nélkül Az alábbi cikkünkben a nyílt forráskódú (open source)

SEO search
SEO tippek-trükkök

Bevezető Onsite SEO Offsite SEO SEO tévhitek (zárolt tartalom) Jó tanács (zárolt tartalom) Gyanús

Online marketing
Konverziónövelő webáruház tippek

Piackutatás Konkurenciaelemzés Brand Webáruház Termékértékesítés Keresőoptimalizálás MarketingAz általunk készített WordPress alapokra épülő WooCommerce