Amikor egy weboldalt tervezek, akkor (nagy örömömre) egyre sűrűbben merül fel az ügyfelek részéről a keresőoptimalizálás (SEO), mint szempont. Ez egyrészről szuper, hiszen valamilyen szintű tudatosságot jelent, viszont legtöbbször SEO alatt sokan csak a weboldal szövegezésére és a megfelelő kulcsszavak kiválasztására gondolnak. Bár az oldal tartalma (content) valóban fontos, azonban további tényezők is szerepet játszanak, mint például a weboldal elrendezése és felépítése (layout), illetve a weboldal betöltési sebessége (speed és site load time) és rendelkezésre állása (uptime és availability). A sikeres keresőoptimalizáláshoz és mobil SEO-hoz mindhárom tényezőt összhangban kell tartani.

A Google 2015 április 21-i algoritmus frissítése óta a keresési találatok sorrendjét befolyásolja az is, hogy a weboldal mobilra optimalizált, azaz mobilbarát (mobile-friendly), vagy sem. A Google célja, bár drasztikusnak tűnhet, valójában nagyon is előremutató: A cél, hogy minden felhasználó a lehető legjobb minőségű, számára releváns találatot lássa, ami minden eszközén tökéletesen jelenik meg.

A mobilbarát weboldalak szükségességét nagyon jól mutatja, hogy a comScore adatai alapján 2014-ben a mobil internet felhasználók száma meghaladta az asztali számítógépen netezők számát.

Bizonyos esetekben pedig ez az arány még jobban eltolódott a mobil felhasználók irányába, melyre egy nagyszerű példa volt számomra, mikor az idén érettségiző Húgom a Pitch megújulása után csak ennyit mondott: “végre egy oldal, amely könnyen kezelhető telefonról böngészve”.

Az algoritmusfrissítést követően az emberek fejében zavar keletkezett. A mobilbarát weboldal kifejezés szinonimájaként kezdték el használni a reszponzív weboldalt. Sokak fejében az él, hogy ha egy oldal nem reszponzív, akkor egyben nem is mobilbarát. Pedig ez nem igaz.

Habár a Google a reszponzív webdesignt ajánlja, és az esetek többségében megfelelő választás lehet, nem ez az egyedüli mobilbarát választás. Vannak más lehetőségek is.

Minden reszponzív weboldal mobilbarát, de nem minden mobilbarát weboldal reszponzív.

Mitől lesz mobilbarát egy weboldal?

Általánosságban véve egy weboldal akkor lesz mobilbarát (nem csak a keresőrobotok szemében), ha különböző (mobil)eszközökön a felhasználó számára fölösleges interakciók (kicsinyítés, nagyítás, elforgatás) nélkül is könnyen használható. Már a weboldal tervezése közben érdemes odafigyelni egy-két irányelvre, ami a későbbi továbbfejlesztést és a mobilra való optimalizálást egyaránt megkönnyíti.

1. Első a felhasználó, ne nehezítsük meg a dolgát!

Az első, és talán legfontosabb, hogy próbáljuk megtervezni a látogatóink útvonalait a weboldalon belül és segítsük őket a kitűzött célok elérésében. Mindezt a legkevesebb interakció (kattintás, görgetés) igénybevételével. Ez egy win-win szituáció, hiszen ha a látogatók elérik céljukat az oldalon , akkor jó esetben a mi céljaink is teljesülnek. Ez jelentheti a termékünk, szolgáltatásunk értékesítését, feliratkozást a hírlevelünkre vagy éppen a tudásunk átadását. Fontos, hogy ezek a célok pontosan meg legyenek határozva és segítsük, vagy tereljük a felhasználóinkat a célok elérése felé. Ha ezt nem tesszük meg, emiatt nehézkessé, átláthatatlanná válik a weboldal kezelése – például a termékértékesítés gombot elrejtjük a felhasználó elől – akkor az oldal nem lesz sikeres, a felhasználóinkat pedig konverzió nélkül el fogjuk veszíteni.

Ahogy Papp Gábor mondaná,

Egy jó weboldal olyan, mint egy jó cserkész. Segít, ahol tud.

2. Tracking és folyamatos optimalizáció

Kövesd a látogatóid, bármerre is mennek a weboldalon belül. A gyűjtött adatok és tapasztalatok alapján pedig folyamatosan optimalizálj a folyamatokon, hogy a lehető legtöbb felhasználó elérje a célját. Így lesz egyre magasabb a konverziód. Ez egy folyamatos munka, nem érdemes elhanyagolni.

A konverziós pont felé vezető úton (funnel) a felhasználókat különböző eszközökkel tudod nyomon követni (trackelni). Ennek leggyakrabban használt eszköze a Google Analytics, de ha ennél többre van szükséged, akkor a KISSmetrics-et vagy a Mixpanel-t tudom ajánlani.

Mindkét szolgáltatás esetében az egyes forgalmi források figyelembe vételével ki tudod elemezni, hogy mobil eszközről a funnelben a felhasználók meddig jutnak el, hol szignifikánsan magasabb lemorzsolódás, azaz hol kell még optimalizálnod a felhasználói élményen (UX).

3. A weboldal legyen konzisztens minden eszközön

Ha különböző (mobil)eszközökön is megkönnyítjük a látogatóink interakcióit, akkor hálásak lesznek, és magasabb arányban konvertálhatjuk a látogatókat felhasználóvá, vagy akár vásárlóvá. A legoptimálisabb eredmény elérése érdekében célszerű már a weboldal elkészítése során figyelembe venni a felhasználói élményt (User Experience) és a használhatóságot (Usability) meghatározó alapelveket is.

A felhasználói élményt a weboldal használata során szerzett érzések, tapasztalatok, élmények összessége alkotja. A használhatóság fogalma pedig azt jelöli, hogy egy adott weboldal mennyire „felhasználóbarát” (mennyire könnyű a használata), milyen mértékben képesek a felhasználók egy-egy feladatot (például keresés) vagy folyamatot (például vásárlás) könnyedén és gyorsan végrehajtani rajta.

Felhasználói élmény és használhatóság szempontjából kulcsfontosságú, hogy a weboldal minden menüpontja és funkciója elérhető legyen mobileszközről is. A menüre vonatkozóan általános érvényű szabály, hogy – mobileszközökre tervezett weboldalak esetén – vízszintes menü helyett ajánlott inkább függőleges, úgynevezett „hamburger” menüt alkalmazni, amelynek ikonját a képernyő jobb vagy bal felső sarkában helyezzük el.

További fontos alapszabály, hogy a mobilról elérhető weboldal verzió esetében a menücímkék és funkciók elnevezésein ne változtassunk, a sorrendjüket azonban felcserélhetjük, amennyiben objektív adatokkal rendelkezünk arról, hogy a mobilról internetező weboldal látogatók körében melyek a leggyakrabban használt menüpontok és a legnépszerűbb funkciók, ezzel is megkönnyítve a weboldalunk használatát.

Mobilbarát, de milyen technológiát válasszak?

Ahogy arról már szó volt, a mobilbarát weboldal nem attól lesz mobilbarát, hogy reszponzív. A mobilra optimalizálásra vannak más lehetőségeink is, de mégis milyenek?

• Reszponzív design (responsive)
• Dinamikus kiszolgálás (dynamic serving)
• Teljesen elkülönített oldalak (fully separated)

De vegyük őket szépen sorban.

Reszponzív design

A reszponzív design egy olyan technika, ami lehetővé teszi, hogy ugyanazt a HTML kódot és URL-t használjuk minden eszközön, és a képernyő méretétől függően rugalmasan jeleníti meg a tartalmat. A legnagyobb előnye, hogy elegendő egy weboldalt fejleszteni és karbantartani.

Reszponzív design előnyök & hátrányok

Pro tipp: Ahhoz, hogy a keresőrobotok megértsék a reszponzív oldalad struktúráját, hozzáférést kell biztosítanod a CSS és a JavaScript fájlokhoz is, ezért a robots.txt fájlodban ne blokkold a weboldal elemeit a Googlebot és a Googlebot-Mobile számára.

A thepitch.hu reszponzív weboldala jelenleg így néz ki mobilon.

Dinamikus kiszolgálás (dynamic serving)

A dinamikus kiszolgálás esetében a weboldal szervere érzékeli, hogy milyen eszközről próbáljuk megnyitni az oldalt és még az oldal betöltődése előtt kiválasztja az eszközhöz illő, egyedileg megtervezett oldalt. Ennek előnye, hogy így egymástól függetlenül különböző oldalsablonokat tervezhetünk mobileszközökre, tabletekre vagy akár okostévékre is. Persze amennyiben erre van igény. 🙂

Mivel a dynamic serving esetében azonos URL-en különböző verziókat használunk az asztali (desktop) és mobil nézetekhez, ezért fontos, hogy ezt a HTTP Header-ben jelezzük a keresőrobotoknak. Erről bővebben a Google fejlesztőknek szánt oldalán olvashatsz.

Dinamikus kiszolgálás előnyök & hátrányok

Teljesen elkülönített oldalak (fully separated)

Ebben az esetben külön weboldalt tartunk fenn az asztali (desktop) nézetnek és a mobileszközöknek. Ezt megtehetjük a külön aldomainnel (m.domain.com), az elkülönített weboldalt elhelyezhetjük egy almappában (example.com/mobil) vagy akár külön domain nevet is vásárolhatunk hozzá (domain.mobile).

Pro tipp: Ha ezt a megoldást választjuk, mindenképp jelöljük a keresőrobotok számára a különböző változatokat, különben duplikált tartalomnak minősülhet a keresők szemében.

• Az asztali nézet esetén jelöljük a hozzátartozó mobil verzió elérhetőségét,

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/oldal-1">

• illetve a mobil nézet esetén pedig jelöljük az eredeti (asztali nézet) tartalom elérhetőségét egy kanonikus jelzés (canonical tag) segítségével

<link rel=”canonical” href=”http://example.com/oldal-1”>

Figyeljünk arra, hogy az egyes aloldalakat a megfelelő helyre irányítsuk át, ami lehet akár egyirányú (unidirectional redirect), azaz csak az asztali (desktop) nézetből irányítunk át a mobilnézetre, vagy kétirányú (bidirectional redirect), mely mindkét irányba, oda-vissza működik.

A Google nem különbözteti meg az egy-, vagy kétirányú átirányítást, a lényeg, hogy konzisztensen kezeljük őket, és a megegyező tartalmat mutassuk meg mindkét verzió esetében. Ezen kívül érdemes a látogatóknak lehetőséget biztosítani az átirányítás felülírására. (Pl: Mobil nézet esetében válthasson desktop nézetre.)

Továbbá érdemes néhány szót fordítani magára az átirányításra, ugyanis ez  szerver-oldalon (server side) és kliens oldalon (client side) egyaránt megoldható. A szerver oldali átirányítás abból a szempontból előnyösebb, hogy gyorsabb. Az oldal betöltési sebessége pedig SEO szempontból nem elhanyagolható szempont. Bármelyiket is választjuk, mindenképpen állítsuk be a HTTP 301 (permanent, vagyis állandó) vagy a 302-es (temporary, ideiglenes) státuszkódot, ezzel is segítve a keresőrobotoknak az oldal megértését.

Pro tipp: A 302-es státuszkódú átirányítás nem ad át pl. helyezést (ranking) és a keresőmotor által generált értékeket (link juice), míg a 301 igen. A 302-es átirányítás akkor lehet hasznos, ha tudatosan nem szeretnénk link juice-t átadni az új oldalnak.

Elkülönített oldalak előnyök & hátrányok

Összehasonlítás

Amint azt láthattuk, szólnak érvek mindhárom technológiai megoldás mellett és ellen is.

Mobilbarát verziók összehasonlítása

Azt, hogy melyik a legjobb megoldás, nagyban függ a céloktól, erőforrásoktól és a lehetőségektől. Az esetek többségében a reszponzív webdesignt ajánlanám az egyszerűsége miatt, de mielőtt belevágnál érdemes egyeztetni egy szakértővel és figyelembe venni a külső tényezőket is.

Mit tegyek, ha nem mobilbarát a weboldalam?

Hogyan tudod eldönteni, hogy mobilbarát-e jelenleg a weboldalad? Teszteld le a Google Mobilbarát teszt alkalmazásával.

Csak meg kell adnod a weboldalad URL-jét, kattints az „Elemzés” gombra és máris látod, hogy az oldalad átmegy-e a teszten.

Ha az oldal mobilbarát, akkor ezt az eredményt kapod:

Ha pedig nem az, akkor ezt:

Ha jelenleg nem mobilbarát a weboldalad, vagy új weboldal készítése előtt állsz, akkor 3 lehetőség közül választhatsz:

1. A legegyszerűbb és egyben legolcsóbb megoldás a DIY (Do It Yourself, vagyis Csináld Magad). Vegyünk egy tartalomkezelő rendszert (CMS), majd töltsünk le egy tetszőleges mobilbarát oldalsablont (template, theme), vagy prémium sablonok esetében vegyük azt meg. Ezt követően kisebb-nagyobb kalandok átélése során te is létre tudsz hozni egy saját mobilbarát weboldalt.
2. Ha egy meglévő weboldalt szeretnél mobilbaráttá alakítani, és rendelkezel a megfelelő tech skillekkel is, az alább található irányelvek alapján, ismeretlen szerző után, szabadon: “csak oldd meg és kész”. Illetve érdemes a Google Web Fundamentals oldalát átnézni, rengeteg hasznos code snippet és best practice-t találsz meg.
3. A harmadik, egyben a legkényelmesebb – és a közhiedelemmel ellentétben, nem biztos, hogy a legdrágább – megoldás, hogy felfogadsz egy megfelelő szaktudással, tapasztalattal és referenciával rendelkező webfejlesztőt. Ha már meglévő, akár több éves weboldalról beszélünk, akkor valószínűleg a weboldal újraépítését fogja javasolni, ugyanis rengeteg olyan technológia érhető már el (CSS Framework-ök, Template-ek), melyek megkönnyítik és hatékonyabbá teszik a weboldal újjáépítését, ahelyett hogy minden apró hibát egyesével próbáljunk befoltozni. Továbbá ez a lépés javasolt akkor is, ha Flash alapú, vagy már elavult tartalomkezelő rendszerre épülő weboldalad van.

Ha érdekel bővebben a technikai keresőoptimalizálás, akkor iratkozz fel a fizetős SEO képzésünkre. Itt részletesen foglalkozunk a technikai SEO-val is.

Tippek, trükkök mobilbarát weboldalakhoz

A mobil SEO három témakörében (tartalom, elrendezés és sebesség) összegyűjtöttünk néhány tippet-trükköt, vagy hívjuk őket best practice-nek, melyeket érdemes figyelembe venni.

Tartalom (Content)

• A kevesebb néha több
  Ne legyenek túlzsúfolt képernyőid, ne terheld túl a felhasználóid információkkal. Nem minden fog elférni mobil képernyőn az, ami az asztali nézeten elfér.
• Figyelj a kulcsfontosságú funkciókra
  Ne rejts el fontos funkciókat a mobilfelhasználóid elől sem, biztosítsd, hogy gyorsan elérjék azt amit szeretnének.
• Ne használj Flasht
  A mobilkészülékek nem játszanak le a flash alapú animációkat, videókat.

Teszt: peek.usertesting.com

Elrendezés (Layout)

• A gombok legyenek érintésbarátak
  Egy dolog, hogy szépen jelenik meg valami. Egy másik, hogy meg lehet-e érinteni őket?
• Figyelj a betűméretre
  Használj megfelelő méretű, egyszerű, könnyen olvasható, letisztult betűtípust.
• Kerüljük a mouse-over effektet
  Míg számítógépen a kurzort egy gomb fölé tudjuk vinni, az ember ujja erre nem képes. Használjunk helyette gombokat, ahol a gomb megnyomására jelenik meg a plusz információ.
• Ne használj pop-up-ot
  Asztali nézetben is zavaróak, hát még mobil képernyőn.
• Kerüld a horizontális scrollt
  Figyelj oda, hogy a felhasználónak ne kelljen vízszintesen görgetnie

Teszt:

• responsinator.com
• mobilephoneemulator.com
• mobiletest.me

Sebesség (Speed)

• Túl sok HTTP request
  Mivel a mobilfelhasználóknak általában korlátozott a mobilinternet hozzáférésük több szempontból is (lefedettség, sebesség és adatforgalom), ezért ne várd el tőlük hogy óriási fájlokat töltsenek le.
• Optimalizáld a képeket
  Ne tölts fel több megás képeket, fölöslegesen lassítja a betöltődést. Ezen kívül ha van rá lehetőség, az egyes képeknek legyen minden képernyőmérethez egy megfelelő, kicsinyített verziója
• Túl sok kód
  A túl sok kód (főleg Javascript és CSS) lassíthatja az oldalt mobileszközökön. Érdemes a kódokat tömöríteni (minify).

Hogyan teszteljek?

A weboldal sebességének és technológiai felkészültségének teszteléséhez a GTMetrix oldalt szoktam használni, amely a Google PageSpeed-je és a Yahoo YSlow-ja alapján vizsgálja a weboldal teljesítményét, könnyen értelmezhető áttekintést ad az aktuális helyzetről, illetve a kulcsfontosságú szempontokat külön-külön is értékeli, megoldási javaslatot ad a jobb teljesítmény érdekében. Ezen kívül a már említett Google PageSpeed Insights is egy alapos, de könnyen értelmezhető diagnózist ad a weboldal sebességéről és felhasználói élményéről, illetve tanácsokkal lát el, hogyan teheted mobilbarátabbá weboldalad.

Fejlesztés közbeni teszteléshez pedig ajánlom a Google Chrome-ba épített Inspect funkció mobil nézetét, ahol létező eszközök felbontásait kipróbálva tudjuk tesztelni oldalunkat. Ha pedig áttekintő képet akarsz látni, hogyan néz ki a weboldal az egyes mobileszközökön érdemes kipróbálni a responsinator.com-ot, esetleg még használhatsz mobil emulátorokat is, mint a MobileTest.me, vagy a mobilephoneemulator.com.

Ezen kívül is léteznek még különböző eszközök teszteléshez, egy próbát mindenképp megérnek:

• MobiReady
• W3C mobileOK checker

Remélem a frissen megszerzett tudás segítségül szolgálhat a mobile-friendly címke megszerzésében. Ha valahol elakadtál vagy további segítségre van szükséged, írj kommentben, illetve ha ismersz még tippeket, trükköket, netán valamit máshogy csinálsz, ne tartsd magadban, oszd meg kommentben.

Tetszett a cikk? Szeretnél még több ilyet olvasni?

Akkor iratkozz fel és küldünk egy emailt, ha hasonló cikket írunk!

0% spam, 100% online marketing.