2018.11.14. in marketing és pr

Hogyan befolyásolják a képek a SEO-t?

Hogyan befolyásolják a képek a SEO-t? - PRove Kommunikáció blog

Szinte bármilyen weboldalról legyen szó fontos, hogy a szöveges tartalom mellett legyenek képek is. 80%-kal nagyobb a valószínűsége, hogy elolvassák, megnézik az adott oldalt, ha az tartalmaz képeket is. Valamint a képes tartalmakra könnyebben visszaemlékeznek az emberek.

Azonban az már egyáltalán nem mindegy milyen fotókat, illusztrációkat használunk, ugyanis ezek számos tényezőre hatással vannak és a Google is „nézi”, figyelembe veszik őket.

Ma már nem kell ahhoz profi marketingesnek lenni, hogy tudjuk milyen fontos a SEM vagy a SEO. Vagy, hogy tisztában legyünk azzal, számít hányadik találatként jelenít meg minket a Google a keresőben. Azonban arról kevesebb szó esik milyen hatással van a keresőoptimalizációra az oldalunkra feltöltött képek mérete, minősége, fájlformátuma és a hozzájuk írt kulcsszavak, címszavak, illetve leírások.

A fentebb felsoroltak mind-mind javíthatják vagy ronthatják a keresőoptimalizációt. Annak érdekében, hogy a Google normál keresőjében és képkeresőjében egyaránt jobb találati helyezést érjen el az oldalunk néhány dologra oda kell figyelnünk.

Először is, ha keresőbarát weboldalt szeretnénk, akkor a képeket is optimalizálni kell! Ezt kétféleképpen tehetjük meg. Először is ügyeljünk a feltöltött kép méretére!

Amennyiben a weboldalunk a jóminőségű, de nagy felbontású, több megabyte-ot foglaló képek miatt lassan töltődik be, akkor lehetséges, hogy a látogatóink elunják magukat, elhagyják az oldalt. Az ideális képméret a legtöbb szakértő szerint 150-250 KB alatt van (ezt bizonyos esetekben, főleg webshopok esetében érdemes szigorúbban betartani). Egy weboldal címlapja maximum 2 MB lehet annak érdekében, hogy még gyorsan betöltsön az oldalunk. Ellenben egy címlapra feltöltött 3-4 MB-os fényképpel már elszúrhatunk mindent.

Továbbá, ha mobilkészülékről böngésznék az oldalt, akkor azért is elhagyhatják a látogatók, mert félnek, hogy a letöltés megeszi az adatforgalmuk jó részét. Az is megeshet, ha túl nagyméretűek a képek, hogy ha utazás közben böngésznék az oldalunkat (vonat, busz), akkor az állomásokon, illetve a járműveken biztosított ingyenes wifi a túl nagy sávszélességet igénylő képekkel ellátott oldalakat tiltja, tehát nem lesz hozzáférhető weblapunk ezeken a helyeken. A találati listát pedig az is befolyásolja milyen az oldalunk betöltődési sebessége, így közvetlenül is hat a képméret a SEO-ra.

Egyszóval minél nagyobb képfelbontású képet használunk annál nagyobb a kockázat a fogyasztói élmény biztosításában, és ezzel együtt romlik a Google keresőjén belüli találati helyezésünk is. Minél nagyobb méretű képet akarunk feltölteni a weboldalunkra, annál nagyobb erőforrásra lesz szükségük a látogatóinknak a kép megtekintéséhez.

Nyilván mindenki a lehető legjobb minőségű képeket szeretné feltölteni,

viszont ezt az oldal tárhelyének nagysága is befolyásolja. Sokszor felesleges nagy tárhelyet fizetni egy rosszul betöltődő, lassú honlap miatt. (Minél több fénykép van egy oldalra feltöltve annál jobban számít a képek mérete.) Ez különösen igaz egy webshop esetében, ahová nagyon sok kép kerül feltöltésre.

Webshop esetében ahhoz, hogy gyorsan betöltődjenek a képeink a képméreteken kívül érdemes odafigyelnünk, és akár beszereznünk egy CDN szervert is, amely akkor kifejezetten hasznos, ha külföldről is lehet rendelni tőlünk, vagy számítunk a külföldi látogatókra. Általában, ha egy oldalnak, például magyar szervere van, akkor azt egy másik országból nehezebb betölteni. Ezt a folyamatot gyorsítja fel a szerver, valamint növeli az oldal terhelhetőségét is.

Nem mellesleg arra is érdemes ügyelnünk, hogy egy adott országban milyen jogszabályok vonatkoznak, miket lehet webshopból rendelni, milyen képek jelenhetnek meg, mert ha jogszabályt sértünk a képeinkkel, akkor külföldön le lesz tiltva az oldal, vagy legalábbis nem lesznek megjeleníthetőek a képek.

Ha nem vagyunk benne biztosak, hogy optimálisak-e a képeink méretei, akkor érdemes kipróbálnunk a Google sebességmérő eszközét, amely azon kívül, hogy megadja, milyen gyors az oldalunk pontosan kiírja mekkorák a képméreteink. Ha ezek meghaladják a szükséges mértéket, akkor le kell kicsinyíteni a képeket vagy tömöríteni kell!

A képek sikeres átméretezéséhez vagy tömörítéséhez azonban nem árt tisztában lennünk a képek főbb tulajdonságaival, ha nem akarunk minőségromlást.

A képformátum a digitális grafikai információk szervezésének egyik módja. Az ilyen információkat tároló formátumokat raszter vagy vektor néven csoportosíthatjuk. Vektorgrafikus rendszerek esetében az objektumok kiterjedését helyvektorokkal írják le. Előnye a rasztergrafikus képekkel ellentétben, hogy kiértékelésének erőforrásigénye sokkal kisebb. A vektoros képeket a grafikus szerkesztők használják és általában ikonok, logók vagy rajzolt illusztrációk formájában készülnek. Vektorformátumok például az SVG és a CGM. A fényképek nem lehetnek vektorosak, mivel a fényképezőgépek csak raszteres képeket hoznak létre.

Raszteres formátumban a képeket pixelek rácsaként állítják össze, a megfelelő adatokkal tömörített vagy tömörítetlen módon. A raszterizált képek általában elveszítik a jó minőséget, amikor felnagyítjuk őket. Raszteres formátumok: JPEG, PNG, GIF, BMP és TIFF. A rasztergrafikus képek elemi alkotói a képpontok, másnéven pixelek. A pixel, az az picture element a kép tovább nem bontható elemi része. A kép felbontását az adott felületegységre jutó képpontok száma határozza meg. Néhány elterjedtebb és széles körben használatos felbontás érték (800 x 600, 1024 x 768, 1280 x 1024, 1600 x 1280, 1920 x 1080).

A képek felbontását dpi-ben, dot per inch mértékegységben határozzák meg. Ez a képpontontok mennyiségét jelenti. Tehát, ahány dpi felbontású a kép, annyi pont található egy hüvelykjén (vagyis 2,54 cm-en). Minél nagyobb a dpi, annál nagyobb a képfelbontás. Egy weboldalra feltöltött képnek elég 72 dpi-esnek lennie, ez az átlagfelhasználók körében, akiknek a monitora 70-100 dpi-t tud, megfelelő képminőséget ad.

Egy fotó ideális mérete általában maximum pár száz (100-200) kbit. Tehát a fényképezőgépből, mobilkészülékből közvetlenül ne akarjuk képeinket az oldalunkra feltölteni, mert sokkal nagyobb kbit-eket kaphatunk. Azonban azzal számolnunk kell, hogy a slidereket nagyobb méretben kell feltölteni. Egyedül ezek adják a kivételt. Egy slider ideális mérete 1900 pixelszélesség, de a kbit nagyságára ügyelni kell!

A legjobb, amit tehetünk a képméret csökkentése érdekében, ha lekicsinyítjük vagy tömörítjük a képeket már a weblapra történő feltöltés előtt.

Ebben segít az Irfanview, PicMonkey and Pixlr, Adobe Photoshop CC, Corel Photo Paint, a GIMP és még sorolhatnánk. Azonban, ha a kép feltöltése után jövünk rá, hogy túl nagyok a képméretek akkor is van megoldás. Ebben segítenek az alábbi képátméretező programok: FileOptimizer és Online Interface, valamint letöltés nélkül is futtatható online a JPEG MINI, a PunyPNG és a Kraken.

A képek átméretezése hatással van a SEO-ra

 

A másik megoldás a tömörítés.

Ekkor használhatjuk például a Stuffit Expandert vagy a Stuffit Deluxe programot. Online tömörítőprogramok esetében, amelyek a weblap típusától függetlenül alkalmazhatóak használjuk a compressor.io, tinypng.com, vagy az imageoptimizer.net oldalt.

Jó megoldás lehet a WP Smush Plugin (Plugin: egy adott szoftverbe vagy hardverbe opcionálisan beépíthető, annak képességeit bővítő vagy módosító kiegészítő modul.) Ez a modul az eredeti képeket tömöríti újra a weblapon. A plugin a feleslegesen nagy fotókat a tömörítés mellett át is méretezi, amely gyorsítja a weblap elérését. (Több-kevesebb sikerrel működnek ezek a programok, ezért hasznosabb, ha előzetesen tervezünk.)

A másik lehetőség a WP Fastest Cache. Ez a modul nem újra tömöríti a meglévő JPG és PNG fájlokat, hanem létrehoz belőlük egy webp formátumú variációt. A webp képek (a Google évekkel ezelőtt létrehozott, nyílt forráskódú képformátuma, kifejezetten webes felhasználásra) mérete töredéke a hagyományos képfájloknak, miközben a képminőséget nem rontja. Ennek köszönhetően sokkal gyorsabban töltődhet be az oldal, ha webp képeket használunk. A gyorsaság mellett pedig okostelefonos böngészésnél is kevesebb adatforgalmat zabál. 2018-tól a Safarin kívül az összes böngészőn működik

Sajnos mindkét modul kifejezetten WordPress típusú oldalakhoz lett kitalálva. Viszont ezeket használhatjuk már a weblapra feltöltött képek utólagos tömörítésére is.

A sikeres optimalizációért és a látogatottság növelésért érdemes egyedi, saját fényképeket feltöltenünk. Azokat pedig lógóval, vagy vízjellel védenünk. Az egyedi, saját képek látványosabbá teszik az oldalt, ezáltal több látogatót vonzanak. Ha már mindenképpen ingyenesen letölthető, vagy az úgynevezett stock fotókat szeretnénk használni, akkor ezeket érdemes a feltöltés előtt filterezni, egyedivé tenni.

Stock fotók azok a képek, amiket térítés ellenében lehet használni. Ma már stock fotókat gyűjtő oldalak is működnek. Filterezés, retusálás nélkül az oldalunk túl sablonosnak fog tűnni, és a stock fotók a SEO-t sem erősítik. A Canva program például könnyen segít szebbé, egyedibbé tenni saját és az átlag, mindenki által használt képeket egyaránt. Szintén hasznos lehet az Easel.ly, Pablo és a Visual.ly is erre a célra.

Hasznos tanácsként mondjuk el,

hogy a kép mindig szorosan kapcsolódjon ahhoz a szöveghez, bejegyzéshez, amiről írunk. Nem kihagyható lépés a képeket, vagy a mostanában egyre divatosabb animált gif-eket (különösen a külföldi oldalakon) úgy feltölteni az oldalra, hogy már a feltöltés előtt átnevezzük, ékezet nélkül a képet arra, amit ábrázolnak, amihez kapcsolódik a szövegünk, vagy a bejegyzésnek a kulcsszavára.

Az oldalra feltöltött fotókat, grafikákat stb. mindig be kell állítani és indexálni kell!

Szintén erősíti a keresőoptimalizációt, ha az oldalunkba XML Sitemap-et, magyarul XML webhelytérképet építünk be. Ez lehetővé teszi, hogy a Google keresőrobotjai megértsék a webhelyünk struktúráját, és ezáltal könnyebben feltérképezzék az oldalunkat, ami erősít a keresőben betöltött rangsorunkat, általa könnyebb az oldalunkra rátalálni. Létezik a képekhez való sitemap.xml is, amely segítségével felhívja a Google figyelmét a JavaScriptek által feltöltött képekre.

Így egy teljesen új webhelytérkép jöhet létre kizárólag a képekhez, vagy képinformációkat adhat egy meglévő XML-webhelytérképhez. A WordPress webhelyek esetében a Google XML képekhez való Sitemap automatikusan hoz létre webhelytérképet a WordPress médiafájlok mappába feltöltött képekhez. Ezáltal segíti, hogy képeinket, így aztán az oldalunkat is jobban indexálja a Google.

A képekhez társítsunk al- és címszavakat! Tag-ezd őket!

Ezek legyenek pontosak, magyarázzuk meg felirattal, hogy mit látunk a képen, ha erre szükség van és jelöljük meg a forrást, ha nem ingyenes vagy saját képről van szó. A megfelelő cím- és kulcsszavakkal ellátott képek javítják a SEO-t.

Az úgynevezett alt attribútumok (alternatív szöveg/alt tag/alt tulajdonság) kitöltésével kiegészítő leírásokat adhatunk a képeknek, fájloknak. A helyes alt tag-ek használata a keresőoptimalizáláson kívül azért is lényeges, mert ha valamilyen oknál fogva nem lenne megjeleníthető a kép az oldalon, nem töltődne be megfelelően, akkor ez a szöveg marad a helyén.

Olyan esetekben, amikor a kép nem áll rendelkezésre a látogató számára azért, mert kikapcsolták a képek megjelenítését adatforgalom használat közben a böngészőjükben, vagy látássérültek és képernyőleolvasót használnak, az alternatív szöveg biztosítja, hogy semmilyen információ vagy funkció ne vesszen el az oldalról. Tehát minden felhasznált képnél legyen alt szöveg, ami tartalmazza az adott oldal, tartalom kulcsszavát.

A legfontosabb, hogy leírjuk mi látható a képen, hogy ezt a Google keresőmotorjai használni tudják. A szöveg segítse a médiatartalom megértését, utaljon az anyag tartalmára. Minél relevánsabb a képhez hozzáadott szöveg, annál több keresőmotor tartja majd fontosnak a képet. Az optimális alternatív szöveg, lényegre törő és egyedi.

A strukturált adatokra is ügyeljünk!

Strukturált adat: kibővíti a hagyományos metacímet és a leírást. Strukturált adatokat háromféleképpen illeszthetünk be: microdata alkalmazása (HTML alapú), RDFa (HTML5 kiterjesztése) és a JSON-LD, amelyhez a Google Tag Manager használata szükséges. Google szerint a strukturált adatok nem javítják az oldal rangsorát, viszont segítséget jelentenek a képkeresésnél. Ha strukturált adatokat adunk a képhez, akkor egy adott forgalomhoz a Google a mi fotónkat fogja társítani, hozzákapcsolni, amikor valaki beírja az adott keresőszót a képkeresőbe.

Legvégül vegyük sorra mely fájlformátumokat érdemes leginkább használnunk weblapunkon.

Sokan a képeknél a JPG és a PNG formátumra esküsznek, de valójában, több lehetőség közül is választhatunk, annak függvényében mire szeretnénk felhasználni a képet, mi a kép célja. A JPG vagy JPEG, „Joint Photographic Experts Group” a legszélesebb körben támogatott képformátum. Számos digitális fényképezőgép és weboldal használja a JPEG szabványt állóképekhez és fényképekhez, mivel ez a 16 bites formátum több millió színt kezel, és jelentősen csökkenti a fájlméreteket. Azonban a JPEG-ben rejlő veszteséges tömörítés miatt a fájlok képminősége minden egymást követő mentéssel csökken. A formátum sok színnel dolgozik.

A hordozható hálózati grafika, rövidítve PNG-ként, a GIF javított, nyílt forrású alternatívájaként jött létre. A PNG szintén igen elterjedt képfájl. Előnye, hogy könnyebben tömöríthető minőségvesztés nélkül. Kétfajta formátuma van: PNG-8, ami csak 256 színnel dolgozik és a PNG-24, ami több millió színnel és nagyobb fájlmérettel. A PNG-t leginkább az átlátszó hátterű képekhez és a kevés színt igénylő (pl. csak feliratot) használó képekhez használjuk. Ugyanis a JPEG-től eltérően képes az átláthatóság megőrzésére is.

A PNG-8 változat ugyanazt a 256 színes palettát támogatja, mint a GIF, de jobban támogatja az átlátszóságot és kisebb fájlokat hoz létre. A veszteségmentes PNG-24 változat JPEG-hez hasonlít, mivel több millió színnel működik. Azonban a PNG-24 nem mindig kompatibilis a különböző platformokkal és alkalmazásokkal, és az ebből eredő fájlok általában nagyobbak, mint a JPG, JPEG-ek.

A Graphics Interchange Format vagy a GIF az egyik legrégebbi képformátum, amelyet a webre terveztek, a 8 bites korban. Mivel a GIF paletta 256 színre korlátozódik, ezt a formátumot általában alacsony színváltozatokra használják, mint például grafikonok és logók. Ezenkívül, lehetővé teszi a felhasználók számára, hogy egyszerű animációkat (mozgó képek) készítsenek.

A BMP (amely a „Bitmap” rövidítése) a tömörítés nélküli kép színadatait tárolja, ami magas színvonalat biztosít, ugyanakkor nagy fájlokat hoz létre. Ezért a JPG, JPEG-gel és a GIF-fel ellentétben a BMP-t leginkább nyomtatásra használják, nem az interneten.

A veszteségmentes tömörítésnek köszönhetően a Tagged Image File Format (TIFF) segít csökkenteni a fényképek méretét a minőség megőrzése mellett. A TIFF népszerű a grafikusok és a fotósok körében, számos szkennelési és faxolási alkalmazást felismer.

Arra a kérdésre, hogy melyik formátum a legoptimálisabb annak függvényében lehet érdemben válaszolni, hogy eldöntjük, mire szeretnénk használni a képet.

A Facebook például csak JPG, JPEG, PNG és GIF képfájltípusokat fogad el. Ha a weboldalunkra színes fényképeket szeretnénk feltölteni és tárolni a lehető legkisebb méretben, akkor a JPG, JPEG-et válasszuk! Ha az a legfontosabb szempont, hogy a feltöltött kép magas minőségű, esetleg átlátszó hátterű legyen, akkor a PNG-t válasszuk! Márkaboltokhoz vagy azok logóihoz, amelyek átláthatóságot igényelnek a PNG-vel vagy a GIF-fel próbálkozzunk!

Reméljük, összefoglalónk hasznosnak bizonyul, és mindenki átgondolja, hogyan, milyen méretben és formában, milyen címmel és címszavakkal tölti fel képeit weblapjára, illetve foglalkozik-e a tageléssel!




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

Az e-mail címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük

19 − három =