Mobilbarát weboldal keresőoptimalizálás

Avagy hogyan optimalizáljunk egy honlapot okostelefonra?

Magyarországon 2021-ben körülbelül 7,1 millióan rendelkeznek mobilinternettel a Statista adatai alapján, emiatt a legtöbb honlap tulajdonos mobilbarát weboldal keresőoptimalizálást kér a SEO ügynökségektől.

Ez azért fontos, mert ha ennyi ember használja aktívan az okostelefonját internetezésre, akkor azokat a weblapokat, amelyeket nem optimalizáltak mobilra a fejlesztők, nem fogják elérni az emberek, így a vásárlói forgalom nagy részétől egyszerűen elesnek ezek a site-ok.

Ebben a bejegyzésünkben részletesen leírjuk a mobilbarát weboldal keresőoptimalizálási folyamatot, mely a 2021-es évben talán még fontosabb, mint az elmúlt néhány évben.

Weboldal keresőoptimalizálás mobilra

1.  Néhány aranyszabály a részletek előtt

Mielőtt konkrétan leírjuk, hogy pontosan miként érdemes elrendezni a weboldalon lévő tartalmakat mobilon, muszáj megemlítenünk azokat a sajnos unalmas dolgokat, amelyek nélkül viszont nem beszélhetünk mobilbarát weboldal keresőoptimalizálásról.

  • Legyen gyors a weboldal (ne csak a betöltés, de az oldalon való interakciókat se akadályozza lassulás).
  • Használjunk reszponzív dizájnt.
  • Tegyünk nappali és éjszakai módot a dizájnba, hogy a felhasználó elalvásához szükséges melatonin termelést este ne zavarjuk meg egy hófehér képernyővel.
  • Tegyük a fontos és gyakran keresett információkat könnyen elérhetővé.
  • Ne használjunk egész képernyős felugró ablakokat promócióknak, pláne akkor ne, ha szöveges felületet olvas(na) épp a látogató.
  • Ne használjunk bonyolult dizájnt, helyette törekedjünk az egyszerű, könnyen kezelhető felületek kialakítására.
  • Ügyeljünk a gombok megfelelő méretére, hiszen nem mindenkinek lilliputiak az ujjai.
  • Figyeljünk a betűméretre is, hiszen csak azért mert mobilra optimalizálunk, még nem jelenti azt, hogy 8px-es betűméretet kell használnunk.
  • Kapcsoljuk ki az autokorrekt lehetőséget az ajánlatkérő vagy üzenetküldő űrlapokon, hiszen ez könnyen az őrületbe tudja kergetni a felhasználókat.
  • Még véletlenül se használjunk Flash-t, pláne akkor ne, ha azt akarjuk, hogy az iPhone tulajdonosok is használni tudják a weboldalunkat mobilon.

2.  PC vs. mobil – nem minden fér rá egy mütyür kijelzőre

A legtöbb weboldal készítő cég először PC-re készíti el a weblap dizájnját, s azt alakítja át mobilra. Ez a megoldás azért jó, mert így a PC verzió valóban PC-re készül (nincs infinite scroll), a mobil verzió pedig valóban mobilra.

Mivel egy PC sokkal nagyobb kijelzővel rendelkezik (8K – 7680 x 4320 pixel), mint egy apró okostelefon kijelző, emiatt sokkal több média elem fér el rajta, mint amit egy mobil kijelzőre rá lehet préselni.

Itt pedig fontos szerepet kapnak azok a döntések, amelyek arról szólnak, hogy mi megy át a mobil verzióra, s mi az, amit semmiképpen sem lehet majd lefejleszteni, mert a kis képernyőn nem nyújtana pozitív felhasználói élményt.

Mi lesz a szöveges menüvel?

Míg PC-n a menü általában a weboldal tetején vízszintesen található szöveges formában, addig ez a fajta megjelenés szinte lehetetlen lenne mobilon, hiszen nincs hely neki. A menü emiatt a mobilra optimalizált weboldalak 99%-a három vízszintes vonallal (hamburger ikon) jelöl, melyet már megszoktak a mobil felhasználók az elmúlt évek során.

Hova kerül a bejelentkezés / regisztráció?

Egy PC-n semmi gond nincs a bejelentkezés / regisztráció lehetőséggel, amelyet főként a site jobb felső sarkába tesznek a fejlesztők. Van elég hely nekik, meg is szokták már a felhasználók ezt az elrendezést.

Maga a bejelentkezés és a regisztráció szó igen hosszú, így ezekre sem lesz nagyon hely mobilon. Szerencsére erre is kitaláltak már kényelmes megoldásokat a fejlesztők, így a logint általában mobilon a menü jobb alsó sarkába teszik, amelyet a felhasználók a hamburger ikonra kattintva tudnak elérni.

Mi lesz a nyelvi választóval?

Sok olyan weboldal van a neten, amely nemzetközi ügyfelekkel foglalkozik. Ebben az esetben elengedhetetlen az, hogy a site-ot több nyelven is el tudják érni a felhasználók. PC-n továbbra is könnyen le lehet egy ilyen kis lenyíló nyelvválasztó menüt készíteni csinos kis zászlókkal.

Mobilon persze erre sem lesz hely. Így a bejelentkezéshez hasonlóan a nyelvi választó is a menübe kerül, csak ezt a bal oldalra teszik, a bejelentkezés / regisztráció mellé. Így ezt is csak a hamburger ikonra kattintás után lehet elérni okostelefonon.

Érdekes mód az alsó menüsor általában marad, ahogy van

Az alsó menüsorban általában a Rólunk, Kapcsolat, Karrier, Jogi információk, Üzletek, Nyitvatartás, stb. plusz a közösségi média ikonok szerepelnek, amelyek nyilván kényelmesen elférnek a PC verzió láblécében.

Mobilon általában ezt úgy szokás megoldani, hogy a 3-4 oszlopba szedett szöveges menü plusz ikonok helyett a weboldal alján, egy hosszú felsorolásba kerülnek bele a láblécben lévő menüpontok és ikonok.

Hogyan változnak a szöveges oldalak mobilon?

Míg PC-n szinte csak a fantázia szabhat határt annak, hogy miként rendezzük el a szövegblokkokat és a képeket vagy videókat, addig mobilon azért elég rendesen meg van kötve a dizájnerek keze, hiszen itt mindig helyhiány van.

Amikor egy szolgáltatást írunk le egy weboldalon, s azt akarjuk, hogy tetszetős legyen mobilon is az eredmény, ügyeljünk arra, hogy a képek mérete egyezzen a kijelző felbontásával. Még véletlenül se töltsünk be egy 4K-s képet egy iPhone 4 apró telefonra. Egyrészt ezzel lemerítjük az ügyfél készülékének az akksiját, másrészt pedig pillanatok alatt el fogja így használni a mobilinternetén elérhető adatforgalmat a látogató.

Általánosságban elmondható, hogy mobilon az alábbiak szerint érdemes egymásra pakolni a különféle média elemeket:

  • Kép / Videó / Slideshow
  • Cím
  • 1-2 mondatos leírás
  • Vázlatpontokba szedett felsorolás
  • “Olvass tovább / További információ” gomb
  • Ezáltal egy csinos kis blokkot kapunk, amelyről egyértelműen látszik, hogy a különféle képes és szöveges elemek összetartoznak.

3.  Gyakori hibák mobilbarát weboldal keresőoptimalizálása során

Íme néhány konkrét példa arra, amikor félresikerül a mobil verzió, s agybajt kapnak a felhasználók, s gondolkodás nélkül menekülnek egy másik site-ra:

  • Aktuális webdizájn trendek követése akkor is, amikor az egyáltalán nem illik a vállalat imidzsébe.
  • A felsővezetők akaratának, nem pedig a felhasználói igények érvényesítése a webdizájn megtervezése során. → Így lesznek hupilila barkács oldalak és rózsaszín építőipari oldalak…
  • Szakmai zsargon használata akkor, amikor nem B2B, hanem B2C a vállalati profil.
  • Nem hierarchikus, hanem össze-vissza navigáció, amelyen mindent lehet, csak gyorsan navigálni nem a különféle menüpontok között.
  • Teljes képernyőt eltakaró promóciók, amelyek akadályozzák a weboldal használatát.

Konklúzió

A mobilbarát weboldal keresőoptimalizálás 2021-ben nagyon fontos, hiszen ma már az is mobilról nézegeti a weboldalakat, aki néhány éve hallani sem akart róla. Emiatt nagyon lényeges az, hogy a vállalati weboldalaknak profi mobil verziója legyen, amelyen kényelmesen, gyorsan és mindenféle fennakadás nélkül megkapják a látogatók a keresett információt.

Nem szabad elfelejteni azt a kellemetlen tényt, hogy rengeteg típusú okostelefon van már a piacon, amelyeknek nemcsak a képernyő mérete, de az operációs rendszer is teljesen különböző.

Fontos emiatt az, hogy ne csak egy androidos, windows vagy iOS operációs rendszeren futó készüléken próbáljuk ki a weboldalt, hanem használjunk különféle emulátorokat, amelyekkel rengeteg féle okostelefonon ki tudjuk próbálni, hogy milyen felhasználói élményt fog okozni a weboldal általános használata a usereknek.

Figyeljünk a tervezésre, legyen könnyen használható az oldal mobilon is, és teszteljünk, teszteljünk és teszteljünk. Így elkerülhetőek olyan hibák, amelyek csak akkor derülnek ki, ha más-más típusú készüléken nyitjuk meg a site-ot.