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.

– 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.

– 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.

– 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

– 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.

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:

– 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.

– 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.

Ö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!

• WordPress ismertető
• WordPress biztonsági tippek
• WordPress trükkök: Facebook oldal beillesztése
• Top WP Bővítmények: WP Smush
• Top WP Bővítmények: WordPress SEO by Yoast
• Top WP Bővítmények: BackWPup