Utoljára frissítve: 2024.03.28. | Szerző: Online Vállalkozz
A weboldal grafikája vonzza a felhasználó figyelmét. Színezi, érdekesebbé teszi a hosszú tartalmat, segítve a legfontosabb információk átadását.
Lehetővé teszi, hogy forgalmat generáljunk egy képkeresőből . Ahhoz azonban, hogy ez megtörténjen, a képeket és fényképeket optimalizálni, keresőoptimalizálni kell. Ma ez lesz a témánk: Képek keresőoptimalizálása.
A webhely forgalmának növelése során általában a webhely pozíciójára összpontosítunk, akár a webhelyünk organikus rangsorolásáról van szó, akár Google Ads (AdWords) vagy közösségi média megjelenésről beszélünk.
Kivételt képeznek ebben honlapunk fontos elemei a képek. A honlapunkon található képek optimalizálását sok esetben elhanyagoljuk, nem használva ki a keresőoptimalizálásában rejlő határtalan lehetőségeket.
A fényképek weboldalon történő kezelése nem csak azt jelenti, hogy azokat közvetlenül a fényképezőgépről/mobiltelefonról feltöltjük a weboldalra. Egy csomó dolgot optimalizálhatunk képeinkkel kapcsolatba, melyek így jelentős forgalmat generálnak a Google Graphics keresőmotorján keresztül.
Ebből a bejegyzésből többek között megtudhatod:
- miért fontos a megfelelő fájl elnevezés,
- milyen előnyei vannak a képtömörítésnek, és hogyan lehet azt megvalósítani,
- hogyan válasszuk ki a megfelelő fájlkiterjesztéseket, a helyzettől függően,
- milyen szerepet játszik az ALT grafika
- … és megtudhatsz néhány más érdekes dolgot is, a webhely képeinek helyes kezelésével kapcsolatban.
A képek testreszabása és keresőoptimalizálása – 7 tipp
1. Fontold meg a fotók és grafikák hasznosságát.
A képek szerepe, az üzenet felépítése és az első benyomás kialakítása.
Kiegészítik a szöveget, vizuális élménnyel gazdagítva azt.
Blogunkban gyakran megemlítjük, hogy a vizuális üzenet sokkal gyorsabban eljut hozzánk, mint pusztán a szöveg.
Ezért, ha bármikor úgy döntesz, hogy képeket teszel fel a weboldalra, gondosan mérlegeld a szerepüket.
Példa erre az online áruházban található termékfotó . Ez egy meglehetősen specifikus képtípus, mivel az értékesítés sikere nagyban függ tőlük.
Meg kell jeleníteni a termékeket a képeken, különböző szögekből fényképezve, mind fehér alapon, mind mindennapi használat során lefotózva.
Fontos az is, hogy képesek legyünk a fénykép kiválasztott részeit nagyítani a kívánt részletek megtekintéséhez.
Mint láthatod, a teljes kontextus és a képekhez kapcsolódó összes funkció nagyon fontos . Természetesen az adott webhelytől függenek, de a képek hozzáadásának egyszerűen átgondolt filozófiának kell lennie.
2. Válaszd ki a megfelelő fájlformátumot.
Sok grafikus fájlformátumot használhatunk: PNG, JPG, GIF, SVG, stb. A technológiák sokfélesége abból fakad, hogy nem mindegyik alkalmas minden típusú képhez.
A JPG fájlokat minden olyan színes grafikához használni kell, amelyek széles színpalettával rendelkeznek. A fényképek tökéletes példája. A JPG-nek köszönhetően képesek vagyunk meghatározni a képminőséget, ahol általában mintegy 70% -os tömörítés még lehetővé teszi kielégítő minőség elérését viszonylag csökkentett fájl méret mellett.
A GIF formátum viszont egy színpalettára korlátoz minket, legfeljebb 256 színnel. Emiatt a GIF nem alkalmas komplex grafikákra. Ideális minden olyan ikonhoz és képhez, ahol nem kell sok színt használnia – logók, zászlók stb. Érdemes megemlíteni, hogy GIF formátumban animációk mentésére is van lehetőségünk.
A PNG két típusra osztható: és PNG-24.
A PNG-8 nagyon hasonló a GIF-hez. Annak ellenére, hogy nem kínál animációt, jobban működik, ha átlátszó, és lehetővé teszi kisebb méretű fájlok beszerzését.
A PNG-24 hasonló a JPG-hez, azonban van egy nagyon fontos tulajdonsága – nincs minőségvesztés. Ennek köszönhetően gyönyörű grafikákat kaphatunk azzal a feltétellel, hogy minél nagyobb a színpaletta, annál nagyobb lesz a fájlméret. A PNG-t általában az interneten közzétett, átlátszó hátterű grafikákhoz használják.
Érdekes tény: van egy olyan fájlformátum, hogy APNG , az Animated Portable Network Graphics. Ez a formátum még mindig meglehetősen kísérleti, de a Google Chrome 2017. július óta támogatja.
Érdemes megemlíteni az SVG-t is – ez egy vektor formátum, amely teljesen különbözik a korábban említettektől. Ideális logókhoz és egyszerű grafikákhoz, amelyek szinte “geometriai”, vagyis kerek vagy szögletes alakúak.
Összegezve: a formátum olyan, mint a ruházat – az alkalomnak megfelelően kell választani.
Sokkal többet megtudhatsz erről a témáról cikkünkből, amely a weboldal grafikájának optimalizálásáról szól.
3. Ügyelj a helyes fájlnevekre.
Ennél a pontnál egyértelműen elmagyarázzuk, miért is rendkívül fontos területe a képoptimalizálás a SEO-nak. Itt van egy egyszerű példa.
Ha látod annak a mappának a tartalmát, amelyben megmutatta (a lista nézetben nem jelennek meg miniatűrök) fájlokat, például:
- IMG_0001.JPG
- IMG_0002.JPG
- IMG_0003.JPG stb.
Ennek az elnevezésnek a segítségével megtudod előre mondani, hogy mi van a képen, miről szól a kép? … Természetesen nem.
A helyzet egészen más:
- Samsung-Galaxy-S10.jpg
- Lexus-RX-450.JPG
- GoPro-Hero-8-Black.JPG
Magából az elnevezésből a fentiek esetében meg tudják mondani, miről is szól.
A képfájlokat a tartalomnak megfelelően kell elnevezni , mivel az ilyen megoldás hatalmas segítséget jelent, nem csak a mi számunkra, és a weboldalunk látogatói számára, hanem a keresőmotor robotjai számára is.
Valószínűleg felmerül benned a kérdést: “Mi van, ha több tucat grafikát kell feltöltenem egyszerre?” Erre is van megoldás: Tömeges átnevezés segédprogram .
A Tömeges átnevezés segédprogram egy egyszerű program, amely lehetővé teszi sok fájl nevének egyszerre kezelését. A fenti képen láthatja, hogy – három opció segítségével – több fájl neve megváltozott.
Ez a program sok időt takarít meg, ha az a feladat, hogy egyszerre több fájlt nevezze át.
4. Állítsd be az optimális képméreteket.
Mi az ideális grafikus méret? Erre a kérdésre senki sem válaszol egyértelműen, mert minden az adott esettől függ.
Fontos a minőség és a méret közötti megfelelő egyensúly, mivel ezek arányosak.
Elégítsd ki a felhasználók vizuális igényeit. Használd a képeket olyan méretben, hogy kis helyet foglaljanak, de elég jó minőségűek legyenek.
Ha fotós vagy, tegyél közzé miniatűröket a weboldalon (arra a területre szabva, amelyen megjelennek). Csak egy kis képre kattintással (vagyis egy művelet végrehajtásával) lehet nagyobb vagy akár tényleges méretű képet megnyitni, natív felbontásban.
Ez számos előnnyel jár, mivel időt takaríthat meg a fényképek letöltésében és csökkenti az adatátvitel mennyiségét.
Ebben az esetben szintén adhatok neked egy tippet, ami jelentősen egyszerűsíti az életedet. Ez a Bulk Resize Photos nevű szolgáltatás.
Ennek köszönhetően számos fájl méretét csökkentheted a drag-and-drop eszköz segítségével . Csak annyit kell tenned, hogy kiválasztod a fényképeket, és azt a fenti képernyőképen megjelölt mezőbe húzod.
Még számtalan lehetősége van a szerkesztésre – méretezés, magasság, szélesség megváltoztatása, vízjel hozzáadása stb.
Ez a program népszerűségét, a rendkívül egyszerűségének köszönheti . Nincs szükség semmiféle regisztrálásra vagy telepítésére. Még csak nem is kell feltölteni a fényképeket online. A szolgáltatás csak “kapu”-ként szolgál, és egy sor tevékenységet elvégezhetsz a saját gépeden!
5. Használj tömörítést, azaz csökkentsd a méretet anélkül, hogy a minőség csökkenne.
Van egy dolog, a képek tömörítése. Ez a művelet lehetővé teszi a grafikus fájlok méretének jelentős csökkentését, a minőség elvesztése nélkül (vagy valóban minimális veszteséggel).
A helyi társaság SEO-n keresztüli promóciójáról szóló szövegben két szolgáltatást említettem, amelyek segíthetnek ebben.
Az első a TinyPNG :
Mint a Bulk Resize Photos esetében, itt is csak válaszd ki az adott fájlokat, és húzd őket a megfelelő mezőbe. A szolgáltatás letölti a képeket, feldolgozza azokat és tömörített verziókat készít a számodra.
Mindez akkor fontos, ha érdekel a képek SEO optimalizálása, mert még a Google is hangsúlyozza, hogy a képeket tömöríteni kell. Ha nem így teszel, akkor a Google PageSpeed Insights figyelmeztetést jelenít meg a teszt után, tehát lehet, hogy valami nincs rendben.
A TinyPNG nyilvánvalóan nem az egyetlen megoldás. A Smush Image Compression and Optimization egy olyan plugin, amelyet biztonságosan használhatsz, ha webhelyed WordPress CMS alapú. Az alkalmazás gondoskodik a korábban hozzáadott grafikákról, és tömöríti a későbbiekben azokat , amelyeket feltöltesz a szerverre.
6. Töltsd ki az ALT attribútumok tartalmát.
Vess egy pillantást az alábbi képre.
Ez a webhely kódrészletét mutatja, pontosabban a kép megjelenítéséért felelős sort. Az alapjellemző az SRC, azaz a forrás. A grafika címét jelzi. A kép nem jelenik meg a megfelelően kitöltött útvonal nélkül.
Az aláhúzott rész viszont az ALT attribútumot jelzi . Mint láthatja, értéke “Ingyenes kiszállítás”. Ez azt jelenti, hogy a weboldal szerzői ezt a szöveget a grafika alternatív értékének jelölték meg, ha – valami csoda miatt – nem jelenik meg a felhasználó számára.
Valószínűleg felmerül benned a kérdés: “mit tegyél?” Nos, ha a képek SEO optimalizálását szeretnéd elvégezni, akkor a webhely minden grafikájánál ki kell töltened az ALT attribútumot.
Az ALT attribútum egy adott grafikához specifikus szöveget rendel. Ennek köszönhetően közvetlenül megmondhatja a keresőmotor robotjainak, hogy mi is található pontosan ezen a képen. Mi, emberek, természetesen ismerjük a tartalmat. A robotokat azonban segíteni kell.
Ha például fotót teszel közzé egy gasztro blogban, az adott oldal a rizskók receptet írja le, a fotón pedig egy szelet rizskók látható, akkor az ideális ALT-nak a “Rizskók” vagy “Rizskók recept” -nak kell lennie.
Az ALT-nak egyszerűen leírónak kell lennie . Próbáld meg a lehető legrövidebben leírni az attribútumot, anélkül, hogy kulcsszóhalmozást követnél el.
7. Ügyelj arra, hogy a képeket a szövegkörnyezetbe illeszd.
A keresőmotor robotjai a teljes aloldalakat elemzik. Tiszta szöveg, kód és természetesen fotók.
A képek SEO optimalizálásakor figyelembe veszik a grafika “környezetét” is, azaz a teljes környezetet, amelyben a képek megtalálhatók.
Ezért ellenőrizd, hogy az aktuális oldal szövege megfelel-e az ott használt képeknek. A teljes oldalnak egységes egészt kell képeznie , hogy az oldal témája világos legyen.
Természetesen ez nem csak a keresőmotorok robotjaira vonatkozik, hanem a weboldaladra látogató felhasználókra is. Végül is a weboldalakat, ideális esetben úgy hozzuk létre, hogy az oldalra érkező felhasználók és a Google keresőmotor robotja is maximálisan elégedettek legyenek.
Hol található ingyenes, jó minőségű fotó?
Ha nagyszerű, ingyenes képeket keresel, ajánlom olvasd el ezt a bejegyzést: 15 weboldal, ahonnan jó minőségű, ingyenes, jogtiszta képeket tölthetsz le. Itt számos olyan webhely található, amelyekről sokféle fényképeket tölthet le.
A Pixabay kétségtelenül az egyik kedvencünk erről a listáról . Ez a weboldal egy jól elkészített és kiterjedt fénykép-adatbázis, rengeteg hasznos funkcióval.
Image SEO optimalizálás – csak ennyi?
Egyáltalán nem.
Van még néhány olyan kérdés, amelyről ebben a témában lehetne még beszélni, például a képek szerepe a webhelytérképen és az esetleges problémák, amelyeket a CDN-képekkel okozhatunk.
Szélesebb körben tárgyaljuk ezeket a kérdéseket, egy későbbi bejegyzés sorozat részeként.