Legfrissebb adatok szerint az emberek 68%-a mobileszközön – telefon, tablet – netezik, ezért elengedhetetlen a mobilbarát weboldal készítése ahhoz, hogy minél több látogatót elérjünk. Az ugyanis, hogy mennyire mobilbarát egy honlap, jelentős szerepet játszik a keresőmotoros rangsorolásokban és természetesen az organikus forgalom generálásban. Aki tehát nem fordít figyelmet a mobil keresőoptimalizálásra, potenciális vásárlókat veszít. Cikkemben most a legjobb gyakorlatokat mutatom be, hogy mikre érdemes odafigyelni, ha mobilbarát weboldalt szeretnénk.

Miért olyan fontos a mobilbarát weboldal készítése?

A Google az indexeléshez és a rangsoroláshoz túlnyomórészt a weboldalak mobil verzióját veszi alapul. Ezt jelenti az ún. mobile-first indexing vagy mobile-first indexelés.

A kereső óriás már a 2010-es évek közepe óta törekedett arra, hogy a webhelyeket a mobilbarát megoldások felé terelje, aminek elsősorban az volt az oka, hogy közel 10 éve a mobilos forgalom meghaladja az asztali gépekét. A mérleg nyelve mostanra jelentősen a mobilok felé billen, jelenleg majdnem 70%-nál járunk. 2021 tavaszán teljesen átálltak a mobil-first indexelésre, azaz a Google a mobilbarát weboldalakat részesíti előnyben a feltérképezések során.

Nincs ugyan kőbe vésve, hogy egy oldalnak feltétlenül szükséges mobil verzióval rendelkeznie, de ahhoz, hogy szép eredményeket érhessünk el a keresési rangsorban, elengedhetetlen.

Mitől lesz mobilbarát egy weboldal?

A mobilbarát weboldalt kifejezetten úgy tervezik, hogy minden eszközön ugyanúgy működjön. Ez azt jelenti, hogy ne legyen különbség a használat során akkor sem, ha desktopon böngészünk, illetve ha okostelefonon, táblagépen használjuk. És ugyanúgy működjön Androidon, mint iOS-en.

A túl széles menüsorok például mobilon nehezen használhatók, és a Flash animációk sem működőképesek.

A mobilbarát weboldal fő jellemzői:

Egyszerűsített navigáció
A képek kisebb méretben jelennek meg
A megfelelő működés nem függ a mobil operációs rendszertől

Milyen formában hozható létre mobilbarát weboldal?

Mobil first szemléletű oldalakat az alábbiak szerint lehet készíteni:

Reszponzív dizájnnal (Responsive) – Technikailag a reszponzív dizájn ugyanazt a HTML-kódot szolgálja ki ugyanazon az URL-en, függetlenül a felhasználók eszközétől (például asztali számítógép, táblagép, mobil stb.), de a tartalmat a képernyőméret alapján másképp jeleníti meg. A Google azért ajánlja a reszponzív webdizájnt, mert ez a legkönnyebben megvalósítható és karbantartható tervezési minta.
Dinamikus kiszolgálással (Dynamic serving) – Ugyanazt az URL-címet használja, függetlenül az eszköztől. Ez a konfiguráció a user agent detektálásra és a Vary: user agent HTTP válasz fejlécre támaszkodik, hogy a HTML különböző verzióját szolgáltassa a különböző eszközöknek.
Elkülönített URL-ekkel (Separate URLs) – Minden eszközön más HTML-t szolgáltat, és külön URL-címeken. A dinamikus kiszolgáláshoz hasonlóan ez a konfiguráció is a user agentre és a Vary HTTP fejlécekre alapoz, hogy a felhasználókat a webhely eszköznek megfelelő verziójára irányítsa át.

Mikre kell odafigyelni a mobilbarát weboldal készítésekor?

#1. tipp: Reszponzív dizájn használata

A reszponzív webhely javíthatja a mobil keresőoptimalizálást, mivel a Google a mobilbarát webhelyeket magasabban rangsorolja a találati listáján. Ennek oka a már említett mobile first szemlélet.

Az olyan e-kereskedelmi weboldalépítő platformok, mint a Wix vagy a Squarespace, rendelkeznek mobilbarát témákkal, amelyek testreszabhatók, hasonlóan a WordPress-hez.

Amennyiben már egy olyan weboldallal rendelkezünk, amely nem teljesít jól a mobileszközökön, érdemes hozzáadni a viewport meta taget a head taghez. Ezzel ugyanis a webhely megfelelően skálázódik a különböző eszközökön a képernyőméretektől függően.

#2. tipp: Letisztult dizájn, könnyű navigáció

A mobilbarát weboldal készítésekor elengedhetetlen, hogy a dizájn egyszerű, és a navigáció könnyen érthető legyen.

Érdemes üres terekkel játszani, hogy a tartalmat a felhasználók könnyen átlássák, és rendezett maradjon. Emellett szabaduljunk meg minden elavult kontenttől, hogy ezek ne foglaljanak felesleges helyet.

A menüsornál kerüljük a túlzsúfolást, mert ez nem jelenik meg megfelelően a mobil képernyőkön. Széles menü helyett inkább válasszunk lenyíló változatot, azonban itt is törekedni kell a kevesebb több elvére.

#3. tipp: Oldalsebesség optimalizálása

Hogy milyen gyors egy oldal, az nagyban befolyásolja, hogy a látogatók mennyi időt töltenek ott. Egy felmérés szerint az 1 másodperc alatt betöltődő weboldalon háromszor magasabb a konverziós arány, mint egy 5 másodperc alatt betöltődőn.

Többféle eszköz is rendelkezésre áll, hogy ellenőrizzük weboldalunk betöltési sebességét, ilyen például a BrowserStack SpeedLab oldala. Egyszerűen csak meg kell adni honlaunk URL-címét és a Get free report-ra kattintani. Ezután láthatjuk azt is, hogy desktopon, illetve mobileszközön hogyan hasít az oldal. Fontos, hogy külön keresést kell indítani a két verzióra.

Az oldalbetöltési sebesség javítható például azzal az egyszerű trükkel, ha videóinkat más webhelyen tároljuk és csak beágyazzuk.

#4. tipp: Képek tömörítése és megfelelő tagek használata

Sokat tehetünk a megfelelő oldalsebességért a képek tömörítésével is, iyenkor ugyanis csökken a megjelenítéshez betöltendő adatmennyiség.

Képet számos ingyenes eszközzel – pl. TinyPNG – tömöríthetünk anélkül, hogy a kisebb képméret a fotók minőségének rovására menne.

Egy másik lehetőség, a lusta betöltés, amikor a képek csak akkor lesznek láthatók, amikor szükség van rájuk. Például, ha a felhasználó lefelé görget.

Ezekre figyeljünk még a képeknél:

Mindig csak támogatott formátumú képeket alkalmazzunk.
Ne használjunk folyamatosan változó URL-eket. A Google nem fogja tudni megfelelően feldolgozni és indexelni ezeket.
A mobiloldalon ugyanaz az alt szöveg szerepeljen a képekhez, mint desktopon. Ez igaz a címekre, feliratokra, fájlnevekre és a képekhez tartozó szövegekre is.

#5. tipp: Strukturált adatok ellenőrzése

Győződjünk meg róla, hogy mobil és asztali webhelyeken ugyanazok a strukturált adatok állnak rendelkeznek. Ha fontossági sorrendet kell felállítani, hogy mely típusokat adjuk hozzá a mobil webhelyünkhöz, kezdjük a Breadcrumb, a Product és a VideoObject strukturált adatokkal.
Használjunk helyes URL-címeket a strukturált adatokban. Ellenőrizzük, hogy a mobilverzió strukturált adataiban szereplő URL-ek a mobilos URL-ekre frissülnek.
Ha Data Highlightert használunk a strukturált adatok szolgáltatásához, rendszeresen ellenőrizni kell a műszerfalon a kivonatolási hibákat.

#6. tipp: Azonos meta adatok használata

Fontos, hogy mind desktopon, mind a mobilverzióban ugyanazok a meta adatok szerepeljenek. Figyeljünk rá, hogy a cím és a meta leírás a webhely mindkét verziójában megegyezzen.

#7. tipp: Flash helyett HTML5

Az Adobe Flash népszerű az animációkhoz, azonban a mobileszközök nem támogatják, ezért célszerű kerülni.

A HTML5 segítségével könnyen beágyazhatunk filmeket és zenéket, valamint létrehozhatunk olyan animációkat, amelyeket a mobileszközök is támogatnak.

#8. tipp: Felugró ablakok kerülése

A felugró ablakok jól működnek a weboldalak asztali verzióin, de a mobileszközökön nem.

A felugró ablakok nehezen láthatók kisebb képernyőkön és bonyodalmat okozhatnak, ha például egy űrlap felugró ablakként jelenik meg. Egyrészt maga a kitöltés is problémás lehet, másrészt maga az ablak bezárása is.

#9. tipp: Megfelelő méretű és elhelyezésű gombok

Ha egy gomb túl kicsi, vagy rossz helyen van egy mobil weboldalon, akkor nehezen használható. A legtöbb mobilfelhasználó a hüvelykujját használja a navigációhoz, ezért a gomboknak elég nagyoknak kell lenniük ahhoz, hogy a hüvelykujjal is használhatók legyenek. Fontos továbbá, hogy az oldal alján kapjanak helyet.

#10. tipp: Jól olvasható betűtípus

A betűtípus és annak nagysága is kulcsfontosságú egy honlapon. Érdemes minimum 14 pixeles betűméret használni, de tesztelni kell, mert van, hogy ez sem olvasható könnyedén a kisebb képernyőkön.

Nem érdemes például script típusú betűtípusokkal kísérletezni mobilon, mert elképzelhető, hogy nehezen láthatók.

A könnyebb fogyaszthatóságot segítheti még bizonyos szövegrészek kivastagítása.

Célszerű továbbá a jól bevált fekete színnél maradni a betűk esetében. Nem megfelelő fényviszonyok esetén ugyanis a színes karakterek jelentősen ronthatnak az olvashatóságon.

#11. tipp: Linkek és CTA-k kezelése

A linkek elhelyezésénél figyelembe kell venni, hogy mennyire könnyű azokra ujjal rákattintani. A nagyon sűrűn elhelyezett linkek továbbá jelentősen ronthatják a felhasználói élményt mobilon.

Ha olyan link kerül a cikkbe, amely külső weboldalra visz, ezt mindenképp fontos jelezni a felhasználóknak.

Sose zsúfoljuk túl a weboldalt cselekvésre ösztönző felhívásokkal sem. Ha túl sok műveletet kell végrehajtaniuk a látogatóknak, akkor kisebb képernyőn nehéz lehet a navigálás, és ez zavart okozhat. Csak azokat a kritikus funkciókat használjuk, amelyeket az olvasók aktívan keresnek, például a kapcsolatfelvételi űrlapot.

#12. tipp: Azonos tartalom desktopon és mobilon

Még azonos tartalom esetén is, az asztali és a mobil oldal közötti elrendezésbeli különbségek azt eredményezhetik, hogy a Google másképp értelmezi a kontetnet. Ha a kettő ugyanolyan, az biztosítja, hogy a két verzió azonos kulcsszavakra tudjon rangsorolni.

Amennyiben a mobil verzió kevesebb tartalommal rendelkezik, mint a desktop, mindenképp frissíteni kell a mobil változatot, hogy annak elsődleges tartalma megegyezzen az asztaliéval. A felhasználói élmény maximalizálása érdekében a mobilon más designt is alkalmazhatunk – például a tartalmat strukturálhatjuk -, csak győződjünk meg arról, hogy a kontent egyenértékű az asztali webhelyével.

#13. tipp: Folyamatos tesztelés

Hogy mennyire mobilbarát webhelyünk, azt többféleképpen is tesztelhetjük. Fontos, hogy Android és iOS eszközökön is mindennek tökéletesen kell futnia.

A weboldalt a Google Mobile-Friendly Test nevű, ingyenesen használható tesztjén is csekkolhatjuk, az összes oldal külön ellenőrizhető.

Fontos, hogy minden egyes webhely frissítés után meg kell tenni.

Konklúzió

Ahhoz, hogy nagyobb organikus forgalmat tudjunk generálni weboldalunk számára és előkelő helyezéseket érjünk el a találati listán, elengedhetetlen a mobilbarát szemlélet. Tekintve, hogy a felhasználók közel 70%-a mobilról netezik, kulcsfontosságú, hogy megfelelő felhasználói élményt tudjunk biztosítani a kis képernyőn is. Érdemes tehát a fentiek figyelembe vételével megtervezni újonnan készülő weboldalunkat, vagy átalakítani, optimalizálni már működő honlapunkat.

Segíthetünk tartalmi SEO-ban, mobil keresőoptimalizálásban? Keress bennünket!