Médiaelemek, multimédiás tartalmak a weboldalon

Korábbi cikkeinkben már említettük, hogy fontos a weboldalon közzétett szövegek helyénvaló tagolása, képekkel és más médiaelemekkel történő gazdagítása, valamint az olvasók érdeklődésének fenntartása. Nem elég, ha megfelelő, egyedi szöveges tartalmak írásával a honlapra tereljük a látogatókat, ott is kell őket tartani valamivel. Márpedig egy hosszabb folyószöveget nem valószínű, hogy elolvasnak, hacsak nem színesítjük különböző érdekes és/vagy informatív médiaelemekkel is.

De mik is ezek a médiaelemek?

Ide tartoznak a képek és az infografikák, a videók és a hanganyagok. Az alábbiakban ezekről és a SEO-hoz fűződő viszonyukról lesz szó a UX (User Expericence, azaz felhasználói élmény) tükrében is nézve. Mielőtt belevágnánk, tisztázzunk néhány alapvető fogalmat!

Média (media): a latin eredetű média (medium = közeg, közvetítő elem, nyilvánosság) szó többes száma.

Multimédia: olyan információs tartalom vagy feldolgozási rendszer, amely többféle csatornát is használ (szöveg, hang, kép, animáció, videó és interaktivitás) a felhasználók tájékoztatására vagy szórakoztatására (Forrás: Wikipedia).

Ha átgondoltan és célzottan alkalmazzuk a különböző multimédiás lehetőségeket, azzal a látogatók számára is izgalmas tartalmakat hozhatunk létre, és SEO-szempontból is hatékonyabbá tehetjük vele weblapunkat:

• a különböző médiaelemek segítenek megragadni az olvasó figyelmét, felkelteni és megtartani az érdeklődését;
• megosztásra ösztönözhetnek a közösségi hálózatokban, így nőhet a látogatottság, a cég/márka ismertsége;
• tördelik a szöveges tartalmakat, ezáltal megkönnyítve az olvasást;
• növelik a felhasználói élményt;
• növelik az oldalon eltöltött időt;
• csökkentik a visszafordulási arányt.

Képek alkalmazása a weboldalon

Ha cikkeket írunk a blogba, ha termékismertetőket teszünk közzé egy webshopban vagy vásárlási és szállítási információkról szóló tájékoztatót készítünk, alkalmazzunk képeket! Nem mindegy azonban, hogyan és milyen fotókat használunk.

Ahol lehet, használjunk saját képet!

Ezalatt egyrészt azt értjük, hogy jó, ha saját fotókkal dolgozunk a cégismertetőnél és a kollégákat bemutató oldalakon, vagy egy kivitelező vállalkozás esetén a referenciaoldalon (pl. helyszíni képek). Vagyis valós fényképekkel és ne stockfotókkal (horribile dictu: konkurens weboldalakról lelopott és engedély nélkül felhasznált képek) apelláljunk az olyan aloldalaknál, melyek célja, hogy saját magunkat, ill. vállalkozásunkat és munkáinkat mutassuk be.

Másrészt pedig úgy értendő, hogy ahol ki lehet váltani saját készítésű fotóval vagy grafikával egy általános stockfotót, ott tegyük meg bátran. Tipikus példa erre az elérhetőségeknél feltüntetett telefonos kisasszony képe, ami több ezer weboldalról köszön vissza ránk.

A kép témája passzoljon a szöveghez

Elég furcsán hat, ha például egy sonkás ciabatta képe jelenik meg egy fordítóiroda oldalán. SEO-szempontból sem előnyös, ha a kép tartalma nem igazodik a szöveghez.

Persze lehet azzal érvelni, hogy ha a figyelemfelkeltés a cél, akkor egy meghökkentő, illogikusan elhelyezett médiaelem garantáltan megragadja a látogató tekintetét, kíváncsivá teszi. Azonban ha túl sokszor nyúlunk ilyen eszközökhöz, ellenkező hatást válthatunk ki: a user a látvány alapján azt fogja hinni, hogy nem az általa keresett témájú weboldalon jár, és a szélnél is sebesebben elhagyja azt. Ráadásul keresőoptimalizálási szempontból is rossz ötlet, mert a Google a sok más szegmensre jellemző, és az adott szöveges tartalmakhoz nem illő képek alapján irrelevánsnak titulálja majd a weblap tartalmi felépítését, és hátrébb rangsorolja azt a találati listán.

Na de honnan tudja a Google, hogy mi van a képen?

A Google rendkívül „okos” és rohamléptekkel fejlődik a képfelismerés terén, de alapvetően még mindig az alt attribútum és a fájlnév szolgál számára információval a fotókról, amiből két dolog következik.

Ha a keresőoptimalizálást is szeretnénk segíteni:

• Érdemes a képfájlokat a tartalmukra utaló, kulcsszavas fájlnévvel ellátni a feltöltés előtt. A fájlnév lehetőleg ne legyen túl hosszú, ne használjunk ékezetes betűket és speciális karaktereket, valamint több szó esetén kötőjellel tagoljuk azt (pl. ford-focus-berauto.jpg)!
• Érdemes a képek alt attribútumának a kép tartalmára utaló, kulcsszavas leírást megadni (azért ne erőltessük bele minden fotóba mindenáron). Az alt attribútum értéke lehet akár rövidebb mondat, és ékezetes betűket, speciális karaktereket is nyugodtan alkalmazhatunk benne (pl. Ford Focus bérautó országos autópálya matricával).

• és

Amennyiben a weboldalon szereplő képeket is megfelelő, az optimalizálási céljainkat segítő alt attribútumokkal láttuk el, ez hatással lehet a találati listán elért helyezésünkre. A normál szöveges kereséseknél megjelenített képes találatok között is megjelenhetnek a fotóink, valamint a Google képkereső használatakor is nagyobb eséllyel fognak szerepelni a listában, így növelhetik a keresőből érkező forgalom növekedését.

Képformátumok, képméretek: mit és mekkorát?

Rengeteg különböző képformátum létezik, azonban a böngészők ezeknek csak egy részét támogatják, így értelemszerűen ezeket kell használni egy weboldal tartalmaiban. Ám nem mindegy, hogy melyik formátumot milyen képi elemeknél alkalmazzuk, és a képméreteket is érdemes átgondoltan megválasztani, ha azt szeretnénk, hogy weblapunk gyorsan betöltődjön.

Márpedig azt szeretnénk, ugyanis ha az oldal a nagy felbontású, több megás képek miatt lassan töltődik be, akkor a látogatók nem fogják kivárni ezt. Továbbá a betöltődési sebesség Google rangsorolási tényező is, így mind a magas visszafordulási arány, mind a lassú betöltődés hátrányosan hat a SEO-ra.

Egy kép mérete kapcsán két dologról beszélhetünk:

• a kép fizikai kiterjedése, látvány szerinti, pixelekben mért mérete
• a képfájl mérete kilobyte-ban (kB) vagy megabyte-ban (MB)

Vagyis a keresőoptimalizálás és a felhasználói élmény növelése érdekében egyrészt a kép tényleges, pixelben mért méreteit lehet csökkenteni, másrészt az ideális formátum megválasztásával és a megfelelő tömörítés révén a fájlméret tovább csökkenthető.

Ha jól akarjuk csinálni, a képeket a lehető legkisebb fájlméretűre kell csökkentenünk, de úgy, hogy ez ne menjen a képminőség rovására.

A legelterjedtebb webes képformátumok a .jpg, a .png és a .gif. Ezek főbb tulajdonságai röviden:

A fenti, raszteres formátumok mellett manapság a .svg formátumú képek, grafikák is elterjedtek, amik vektorosak, így minőségromlás nélkül nagyíthatók. Ezek elsősorban egyszerűbb grafikai részek megjelenítésére ideálisak (pl. ikonok, designelemek), de egy szöveget is tartalmazó logó esetén is jó választás (keresőoptimalizálási szempontból ennek azért is van jelentősége, mert az svg XML alapú leírónyelv, a szöveges részét a Google képes „elolvasni”.)

Mekkora az akkora?

Alapszabály, hogy a képet akkora méretben töltsük fel a szerverre, amekkorában az maximum meg lesz jelenítve. Igen ám, de a különböző méretű kijelzők és a reszponzív design korában nem is olyan egyszerű meghatározni, hogy mekkora az akkora. Amennyiben a weblapot kiszolgáló rendszer nem méretezi automatikusan a képeket (nem hozza létre a különböző felbontásokhoz ideális méretű képváltozatokat), illetve azt sem teszi lehetővé, hogy ezt mi végezzük el manuálisan, aszerint kell döntenünk, hogy melyik a fontosabb számunkra: a kis fájlméret vagy a kiváló képminőség.

A fejléc és a háttérképek esetén a teljes szélességet érdemes alapul venni, ami jelenleg a HD-felbontáshoz igazodva 1920 px.

A normál szöveges tartalmakban elhelyezett fotó optimális szélessége továbbra is 600-800 px, mivel az emberi szem ennyit tud egyszerre kényelmesen befogni, így nincs értelme a cikkeinkben elhelyezett képeket ennél szélesebbre venni. Azonban rohamosan terjednek a retina HD-kijelzők, amiken a 800 px méretű kép már nem igazán szép. A fotóminőségre nagy hangsúlyt fektető weblapoknál (pl. egy esküvői fotós oldal) ennél nagyobb felbontású képekről (is) kell gondoskodni. Ideális esetben a retina-ready felbontású képeket csak akkor tölti be a rendszer, ha a látogató az ezt megkívánó eszközzel nézi a weblapot.

A reszponzív képmegjelenítés miatt lett a szabvány része az srcset attribútum az src–t kiegészítve, azaz itt a kijelző méretéhez igazodva az adott kép több méretben kerül a forráskódba.

Példa:

             ford-focus-berauto-480w.jpg 1.5x,

            ford-focus-berauto-640w.jpg 2x"

     src="ford-focus-berauto-640w.jpg" alt="Kék Ford Focus bérautó"/>

Infografika alkalmazása a weboldalon

Bár a képekhez tartozik, mégis elkülönül kicsit az infografika az egyéb képi tartalmaktól. Az infografika ugyanis a tartalommarketing egyik eszköze, többletinformációt hordoz, és a normál képekkel ellentétben általa könnyebben közölhetjük üzeneteinket.

Ha le akarjuk egyszerűsíteni a fogalom meghatározását, az infografika olyan médiaelem, ami képekkel, grafikonokkal illusztrálva közvetít valamilyen információt. Előnye, hogy gyorsabban és könnyebben befogadható általa, amit közölni szeretnénk.

Mik azok az információk, amik infografikával ábrázolhatóak?

• számok, statisztikák
• működési és egyéb folyamatok
• hierarchikus viszonyok
• hálózatok, hálózati felépítések
• tények és konklúziók
• idézetek
• fotók vagy rajzok
• időbeni és egyéb fordulópontok, nevezetes dátumok/események
• összehasonlítások

Az infografika révén időt spórolunk a látogató számára, hiszen hosszas olvasgatás helyett pár pillantással eljut hozzá az üzenet. Felmérések szerint az emberi agy az információk több mint 75%-át látás útján fogadja be – az infografika segítheti a folyamat felgyorsítását.

Videók alkalmazása a weboldalon

A multimédiás lehetőségek egyik lényeges eleme a videók alkalmazása a weboldalon. Ez lehet akár a kezdőlapi képváltóban vagy ahelyett, háttérként megjelenítve, egy szöveges tartalomba beágyazva, stb. A lényeg, hogy legyen figyelemfelkeltő és informatív, segítsen a látogatót ott tartani az oldalon, és lehetőleg támogassa az érdeklődőből vásárlóvá/ügyféllé konvertálását.

A megjelenítés kétféleképp történhet:

1.)    A videó a saját szerverre van feltöltve, és a lejátszáshoz szükséges vezérlést mi biztosítjuk hozzá. A html5 videókról bővebben itt lehet tájékozódni.

2.)    A videó egy videómegosztó (pl. Youtube, Vimeo) szerverére van feltöltve, és onnan ágyazzuk be a weboldalra, így nem szükséges hozzá külön lejátszót biztosítanunk, mivel a vezérlőelemekkel együtt történik a beágyazás. A videómegosztó által adott kódot egyszerűen ki kell másolni és beilleszteni a forráskódba, de érdemes előtte megnézni a megjelenési beállításokat, és kiválasztani a nekünk megfelelőt (pl. beállíthatunk automata lejátszást, kikapcsolhatjuk a lejátszás végén hasonló videókat felajánlását, vagy eltüntethetjük a kezelőgombokat).

Annak érdekében, hogy a Google a videókereséseknél is megjelenjen, érdemes a forráskódban minél több információt megadni a videóról a schema.org jelölések segítségével.

Milyen típusú videókat tehetünk közzé?

• Termékismertető: a termék tulajdonságait, használatát és előnyeit bemutató videó, amely segíti a vásárlót a döntésben.
• Cég/márkavideó: a brandépítést, termékbevezetést szolgáló megoldás.
• Eseményről készült videó: ide tartozik pl. a cég által szervezett nyereményjáték átadója, egy jótékonysági gála, de akár egy csapatépítő tréningről készült mozgófelvétel vagy egy flashmob is.
• Szakértői videók, oktatóanyagok, magyarázatok: ezek megerősíthetik a szakértői státuszt, a szolgáltató cégek (pl. oktató, kivitelező szegmensben) számára kifejezetten ajánlatosak, de gyakorlatilag bármiről lehet készíteni ilyen típusú videót.
• Szakértői interjúk: segítenek a hitelesség, a szakértői státusz emelésében, a bizalomépítésben.
• Tippek, trükkök, tanácsok: általában ezek rövid, pár perces videók, amiket a legtöbben megnéznek és megosztanak, mert gyakorlati hasznuk van.
• Ügyfélvélemények: a vásárlót/ügyfelet segítik a döntésben, ha meggyőződhet róla, hogy más, korábbi vásárlóknál/ügyfeleknél már bevált az adott termék/szolgáltatás.
• Belsős információk: ha bepillantást engedünk a színfalak mögé, az mindig érdekes.
• Hírek: szegmensfüggő, hogy minek lehet hírértéke, és milyen gyakorisággal lehet ezt videós formában közzétenni, de mindenképp hatékonyabb, mintha szimpla szöveges kiírásban közölnénk, hogy „Megérkeztek a legújabb audiophile hangfalak a stúdióba, és ki lehet próbálni őket”.

Videók megosztása, vírusvideók

Fontos, hogy lehetőséget biztosítsunk a videós tartalmak megosztására, mert – erős kijelentés következik – az emberek szívesebben néznek meg egy videót manapság, mint olvasnak el egy több ezer karakteres bejegyzést.

Ha olyan felvételekkel dolgozunk, amik jól is sikerültek (pl. termékismertetők, szolgáltatás bemutatók), akkor vírusvideók is válhatnak ezekből. Persze megfelelő onlinemarketing-támogatással. Ha utóbbi adott, akkor nőhet weboldalunk ismertsége (tömegesen osztják meg a közösségi hálózatokon), ezáltal a látogatottság is.

Ezentúl pedig trendik leszünk, így könnyebben köteleződnek el mellettünk azok is, akik még csak most ismerkednek a cégünkkel. Ha megvan a bizalom, nagyobb lesz az esélye annak, hogy minket, a szolgáltatásunkat/termékünket választják, sőt tovább ajánlanak az ismerősöknek is.

Hanganyagok alkalmazása a weboldalon

A szimpla hanganyagok ma már ritkábban kerülnek alkalmazásra, ugyanis videóval vagy bármilyen mozgóképpel együtt nagyobb hatást érnek el a felhasználóknál. Bár még nem koptak ki teljesen a köztudatból, hiszen podcastoknál, verses oldalaknál vagy hangoskönyveket forgalmazó webshopoknál, esetleg zenei együttesek site-ján igenis megállják a helyüket. Ha a hanganyagok alkalmazása mellett döntünk, azért arra mindenképpen ügyeljünk, hogy jó legyen a minőség, és a userek maguk szabályozhassák annak erősségét. De erre most nem térünk ki részletesebben.

Interaktív multimédiaelemek

Az interakciót, azaz felhasználói beavatkozást lehetővé tevő multimédiaelemeket mind a felhasználói élmény növelése, mind a Google keresőoptimalizálás érdekében érdemes lehet alkalmazni weblapunkon. Ugyanis ha a felhasználó több időt tölt az oldalon, és ráadásul közben valamilyen módon hozzá is tesz a tartalomhoz – például hozzászólást írt, értékel egy terméket, stb. –, azzal a Google felé is jelzi, hogy ez egy értékes, érdekes weblap a számára (feltéve, hogy nem negatív értékelések tucatjai maradnak a látogatók után, de ez egy másik történet).

Az interaktív multimédia lényege, hogy a felhasználó valamilyen módon kapcsolatba léphet a tartalommal, befolyásolhatja a megjelenítő alkalmazás működését, eltérhet a lineáris megjelenítési folyamattól, vagy akár teljesen egyedi saját tartalmat hozhat létre a segítségével.

Ezek a tartalmak jellemzően Adobe Flash, Microsoft Silverlight, vagy Java alkalmazásával kerülnek beágyazásra a weboldalon, de a HTML5/CSS/JS technológia is egyre alkalmasabbá válik a multimédiával végzett interakció megvalósítására.

Mik lehetnek interaktív elemek a weboldalon?

• online játékok
• oktató modulok (e-learning)
• tervező elemek
• konfigurátorok
• virtuális galériák
• virtuális séták
• távvezérelhető webkamerák
• stb.

Akárhogy is, médiaelemeket mindenképpen érdemes, már-már kötelező szerepeltetnünk a weboldalunkon. Mindegy, hogy szolgáltatást vagy termékeket kínálunk, a multimédiás tartalmak nagyban támogatják a site-unk találati listás besorolását, ezáltal növekedhet a látogatottság, ergo a pénztárcánk is vaskosabb lehet.