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.

Szövegírás csomagjaink:

Könnyed tartalom

Általános és populáris témák, blog és SEO optimalizált cikkek


Weboldal tartalom

Komplex, teljes weboldal szöveg, egymásra épülő aloldalakkal


Marketing és PR tartalom

Kifejezetten marketing és reklám céllal írt, SEO optimalizált cikkek


Szakmai tartalom

Nyelvezetében és tartalmában szakmailag helytálló cikkek


[adln-quotes limit=3]