A következő írás egy vendégcikk Verdes Tamás tollából. Személyesen egy SEO Meetup-on találkoztunk pár hónapja, ő elő is adott a találkozón. Beszédében, írásaiban érződik a segítőkészség és az igényesség. Ebben a cikkben összefoglalja, hogy miért fontos a képek használata WordPress weboldalakon, és hogyan érdemes bánni velük.

A weboldalunkon használt fényképek nagyban befolyásolják honlapunk forgalmát és a felhasználói élményt. Az igényes képkezeléssel különleges, egyedi benyomást tehetsz az olvasódra, és a honlapod keresőoptimalizálásában is előre léphetsz.

Használj képeket!

Aranyszabály, hogy legyenek képek a honlapodon. Sajnos ez nem mindenkinek magától értetődő, ezért fontos hangsúlyozni. A fényképeket is közlő blogok, honlapok minden teszten jobban teljesítenek, az olvasók is több időt töltenek rajtuk. Mi, emberek, szeretjük a képeket, és önkéntelenül rájuk pillantunk. A képek komplex jelentést közvetítenek, leegyszerűsítik és megfoghatóvá teszik a dolgokat, és érzelmeket is közvetítenek. Ugyanez érvényes a Google Cégem profilokra, melyeknek a képek szintén fontos alkotóelemei. Röviden: használj képeket!

Használj egyedi képeket!

Egyedi képek használatával kiemelkedhetsz a tömegből. Mert stock-fotókat mindenki le tud tölteni, de egyedi képeket már nem mindenki tud készíteni. Pedig egyszerű. Íme néhány módszer, amihez nem kell profi fotóművésznek lenni:
• készíthetsz saját képeket a mobiloddal vagy a fényképezőgépeddel, majd ezeket beteheted a bejegyzéseidhez;
• letölthetsz stockfotókat, és ezekre tehetsz egyedi kézjegyet, aláírást, szöveget;
• használhatod minden képhez ugyanazt a szűrőt, ezzel egységessé téve a képeidet;
• rajzolhatsz, festhetsz te magad is, ha van rá időd és kedved.

A lényeg az, hogy minden képen legyen ott a kézjegyed: egy aláírás, egy jel, akármi, ami egyértelműen rád és a weboldaladra utal. És mindenképpen legyen rajta a márkaneved és a weboldalad URL-címe!
A képek szerkesztéséhez nem kell fizetős eszközöket vásárolnod. Filtereket, feliratokat, és további rengeteg szerkesztést el tudsz végezni online képszerkesztő programokkal (Canva, Befunky, Crello stb.). Ezek legtöbbje ingyenes, és egy átlagos céges blog számára szinte korlátlan lehetőségeket kínál. Lehetővé teszik számodra, hogy egyedi képeket hozz létre.

Lehet akár antipatikus is a kép. De ha van benne valami egyéni, emlékezni fognak rád.

Az egyedi képek hatalmas előnye, hogy a Google képkeresője meg fogja találni őket. Ellentétben a stockfotókkal. Mert azokról tudja, hogy ugyanaz a fénykép több ezer weboldalon bukkan fel. Ezért semmi értelme találatot csinálni belőlük, mert az olvasónak sem jelentenek semmit.

Nem egy ismeretlen cégtől, hanem egy embertől fogunk vásárolni. (A képen látható személy csak egy példa, nem ismerem.)

Az egyedi képek legfontosabbika a cég vagy vállalkozás munkatársainak arcképe. Senki nem akar egy arctalan céggel szerződni. Tulajdonképpen teljesen mindegy, hogy ki szeret és ki nem szeret fényképet közzétenni a honlapján (sokan nem szeretnek). De aki az interneten vállalkozik, annak tudomásul kell vennie: ha nem mutatja meg az arcát, kevesebb ügyfele lesz.

Használj érthető, olvasható, látható képeket!

A képeknek ugyanúgy olvashatónak kell lenniük, mint a szövegeknek. Ez korántsem magától értetődő. A legfontosabb, hogy a képi látvány igazodjon a szöveges tartalomhoz. Ha kertépítő cég weboldaláról van szó, akkor kert vagy fű legyen a képen. Ha ügyvéd weboldalról van szó, akkor legyen benne valami, ami az ügyvédi tevékenységre utal.

Az egyszerűség verhetetlen.

Sokan tartanak attól, hogy a közhelysség csapdájába esnek – például, hogy ügyvédi irodájukat Justicia istennő szobrával illusztrálják. És igen, ez egy közhely. De sokkal jobb közhelyesnek lenni, mint érthetetlennek. Személyes tapasztalatom, hogy a közhelyek jobban működnek, mint a túlságosan kreatív, érthetetlen képi megoldások.

Az ökölszbály ennyi: ha 10 ismerősödből 10 meg tudja mondani a címlapképről, hogy miről szól a vállalkozásod, remek képet választottál. Minél többen esnek gondolkodóba, annál rosszabb a kép, és annál nagyobb a veszélye, hogy vevőket fogsz veszíteni.

Keresőoptimalizáld és méretezd a képeket!

A képeket ugyanúgy keresőoptimalizáljuk, mint az írást vagy az egész weboldalt. Ennek több, egyaránt fontos szabálya van.

Mindig add meg a szöveges tartalmakat a képhez!

A túlságosan nagy képek lassítják az oldal betöltését, rontják a felhasználói élményt, és hátrafelé csúsztatják a weboldalt a keresőben. Ezért törekedj rá, hogy 200 KB-nál nagyobb fényképet ne tölts fel a honlapodra! Legyen minél kevesebb KB a kép, és persze maradjon éles, élvezhető. Képek átméretezéséhez rengeteg eszköz közül választhatsz.
Ha a képet 200 KB közelébe tömörítetted, további teendőid is vannak.

• A fájl neve legyen beszédes. DSC73548.jpg helyett budapest-hidjai.jpg. A névben csak kisbetűket, kötőjelet és ékezet nélküli betűket használj! Ezzzel érthetővé teszed a file-t a Google számára. És garantálod, hogy az ékezetes karakterek ne akadályozzák a képek betöltését a régebbi készülékeken.
• A képekhez, ha egy mód van rá, adj feliratot! Ez a kép alá írt rövid, egymondatos tartalom, ami kiegészíti vagy maragyázza a kép jelentését.
• A képhez adj alternatív szöveget (helyettesítő szövegnek is mondjuk)! Az angol megfelelője az alternativ text vagy alt text. Eredetileg látássérültek számára fejlesztették ki, és a Google komoly SEO-faktorrá avatta. Hiba kihagyni. Az alternatív szövegre írd rá vagy a tartalom kulcsszavát vagy azt, amit a képen látunk!
• Az oldaltérképek tartalmazzák a fényképekre vonatkozó információkat! A korszerű oldaltérképek nem listázzák külön a képeket, de számon tartják, hogy egy-egy tartalomhoz vagy cikkhez hány fénykép társul. Ebből is látszik, hogy a képeknek jelentős SEO-értékük van. Ha a WordPress honlapodon a Yoast SEO bővítményt használod, nyugodt lehetsz. A bővítmény katalógusba rendezi a képeket is.

Képek tesztelése és javítása a Google PageSpeed Insights segítségével

A Google PageSpeed Insights értékelése

Saját honlapunkon könnyedén ellenőrizhetjük a képek teljesítményét. Ehhez a Google PageSpeed Insights eszközt használjuk.
A képen láthatjuk, hogy a garden-kerteszet.hu weboldal 50%-os értéket kapott a teszten. Ez önmagában nem jelent sem rosszat, sem jót. Érdemes megnéznünk azonban, hogy a sebesség csökkenéséért mennyiben felelősek a képek, és mit tehetünk ennek érdekében.
Három javaslatot ad számunkra a Google eszköze. A képek file-formátumainak módosítását, a képek kódolásának rendberakását és a képek leméretezését.


Javaslatok a Google PageSpeed Insights eszköztől a képekre vonatkozóan

Ezek közül az elsőt el is felejthetjük. Közel másfél órás kutatás után sem találtam olyan eszközt, ami JPEG 2000, JPEG XR vagy WebP formátumba konvertálta volna a képeket. A fizetős PhotoShop sem rendelkezik ezzel az opcióval. Úgy látszik, ezek a formátumok valóban a következő generációra várnak. (Ha te találtál rá megoldást, kérlek, egy kommentben jelezd nekünk).
A képek megfelelő kódolása azt jelenti, hogy a weboldal akkora képméretet tölt be, amekkora az adott eszközhöz szükséges. Itt nem ez történik. Túlságosan nagy pixelszélességű képeket tettek fel az oldalra, és bizony ezek töltődnek be mobilon is. Ez komoly hiba. Azzal védekezhetünk ellenük, ha prémium minőségű WordPress sablonokat használunk. A többi sablonnal lehet, hogy szerencsénk lesz, lehet, hogy nem.
A képek leméretezése egyszerű és fontos dolog. Egy weboldal vagy egy aloldal nem lehet nagyobb 2 MB-nál. Mert ekkor sok eszközön túl lassan töltődik be, és az olvasó  elkattint, mert azt hiszi, az oldal megszűnt vagy nem üzemel. Ezért kulcskérdés a képek méretének leszorítása. Ne tévesszen meg az, hogy a te gépeden gyorsan jön be az oldal, a Google PageSpeed eszköz nem hazudik. A te böngésződ ugyanis elmentette a képeket a gyorsítótárban, de az első alkalommal érkező látogatódnak nem. És alapvetően neki szól a weboldal. Tehát ha nagyok a képek, azt le kell méretezni.

+1: A WordPress szerkesztőben rejlő új lehetőségek

A WordPress weboldalak alapértelmezett bejegyzés-szerekesztője különösen fontos számunkra. A 2018-tól bevezetett új Gutenberg szerkesztő a szöveges tartalom képi támogatását új szintre emelte. Ma már nem csak arra van lehetőség, hogy képeket és videókat adjunk a cikkünkhöz. A Gutenberg lehetővé teszi, hogy a képek elrendezése révén sajátos képi világot szőjünk a tartalomba anélkül, hogy kódolnunk kellene.
A Gutenberg kép blokkja az alábbi funkciókkal rendelkezik:
• Képek feltöltése teljes szélességben (site-wide képek használata);
• Képek feltöltése a tartalomból kilógó szélességben;
• Képek egymás mellé rendezése galéria funkció használata nélkül
A lehetőségek szemléltetésére érdemes megnézni a StudioPress által létrehozott,  a Gutenbergre optimalizált sablon és bővítmény demó oldalát. A sablon és a bővítmény egyébként ingyenesen letölthető, és atombiztos alapot ad egy weboldalhoz.
Amit itt látsz, az a WordPress piacvezető cégeinek (WP Engine és StudioPress) egyedi fejlesztése. Azért is érdemes megnézni és tesztelni, mert nagyon úgy tűnik, hogy ebbe az irányba akarják tovább fejleszteni a WordPresst. Egy nagyon letisztult, a tartalomra és a képekre fókuszáló vizuális világ körvonalazódik. És ez nem véletlen: minél egyszerűbb egy oldal, minél tisztábban olvasható a szöveg, annál jobban lehet vele pénzt csinálni.

A képek és a weboldal üzleti sikere

Egy weboldal üzleti sikerét a tartalom és a stratégia dönti el. A keresőoptimalizálás sikere sem a képeken és fotókon fog múlni önmagában. Tehát nem kell túldimenzionálni a képekkel való munkát. Inkább írj 10 minőségi, pontosan optimalizált cikket egy-egy suta képpel, mint egyetlen cikket 10 hiperszuper fotóval. De ha már képeket teszel fel, figyelj arra, hogy ne a képek (vagy azok mérete) miatt váljon elérhetetlenné a tartalom. És ha egy mód van rá, kerüld a jellegtelen, gagyi képek használatát. Ha teheted, saját blogod készítése során már az indulástól fogva fordíts gondot a képek kulturált és kreatív használatára!

Ha jelentős mennyiségű tartalmat állítasz elő, a képekre való odafigyelés mindenképpen meg fog térülni. Mert a Google szépen lassan listázni kezdi az egyedi képeidet a képkeresőben. És az olvasók is szépen lassan megismerik, megszokják azt, hogy a te honlapodon egy csak rád jellemző vizuális világ fogadja őket. Ha pedig ez megtörtént, akkor a képekkel – pont annyira, amennyire érdemes – hozzájárultál ahhoz, hogy építsd és ápold a saját márkádat. Ezt a munkát nagyon kevesen végzik el az interneten.

Szerző: Verdes Tamás