Mobil először és a viewport

Modul 4: Sebesség, mobil és https · Olvasási idő: 10 perc

Tanulási cél: A lecke után el tudja magyarázni, mit jelent a mobile-first indexelés, fel tudja ismerni és meg tudja írni a jó viewport-beállítást, és el tudja kerülni azokat a buktatókat, amelyek miatt a mobiloldala kevesebbet mutat vagy rosszabbul működik, mint az asztali oldala.

Kulcsfogalmak: mobile-first indexelés, okostelefonos crawler, reszponzív kialakítás, dynamic serving (dinamikus kiszolgálás), külön mobilwebhely, <meta name="viewport">, width=device-width, initial-scale, nagyítás letiltása, azonos tartalom, tolakodó felugró ablakok (interstitials), érintési célpontok

A Google telefonnal nézi a webhelyet

A Google sokáig úgy nézte a webhelyeket, ahogyan egy számítógép. Ennek vége. Az indexeléshez és a rangsoroláshoz a Google az oldalai mobilváltozatát használja, és ezt a Googlebot okostelefonos crawlerével kéri le. Ezt hívják mobile-first indexelésnek. 2023 októberében a Google azt írta, hogy az átállás befejeződött: szinte minden webhelynél ez most egyszerűen „indexelés”. 2024 júliusa óta a Google azokat az utolsó webhelyeket is a mobilos crawlerrel járja be, amelyeket addig még az asztali crawler látogatott; ami telefonon egyáltalán nem érhető el, azt így már nem lehet indexelni.

Mit jelent ez a gyakorlatban? Ami nincs rajta a mobiloldalán, az a Google számára nem létezik. Ha telefonon elhagy egy szövegrészt, egy táblázatot, a nyitvatartását vagy a strukturált adatait, „mert kicsi a képernyő”, akkor a Google sem látja azt a részt.

A mobilos megjelenés három módja

A modern webhelyépítők és WordPress-témák szinte mind reszponzívak. Az AI Builderrel készült webhely is reszponzív: egyetlen oldal, amely alkalmazkodik. Ha Önnek régi webhelye van külön m.-változattal, akkor a reszponzív kialakításra való átállás gyakran a legnagyobb javulás, amit elérhet.

A viewport: a sor, amelytől minden működik

A telefonos böngésző nem tudja magától, hogy az oldala kis képernyőre készült. Utasítás nélkül úgy tesz, mintha a képernyő sokkal szélesebb lenne, például 980 pixel (ezt a példát hozza az MDN dokumentációja), és az egész oldalt addig kicsinyíti, amíg el nem fér a képernyőn. Az eredmény: apró betűk, amelyekhez nagyítani kell. Ilyenkor a reszponzív kialakítás sem működik, mert a CSS azt hiszi, hogy széles a képernyő.

A megoldás egyetlen sor minden oldal <head> részében:

<meta name="viewport" content="width=device-width, initial-scale=1">

• A width=device-width azt mondja: legyen az oldal olyan széles, mint az eszköz képernyője. Így a CSS a képernyőszélességekkel tud dolgozni.
• Az initial-scale=1 azt mondja: induljon nagyítás és kicsinyítés nélkül.

Pontosan ezt a sort ajánlja a Lighthouse (az ellenőrzés a Chrome-ban és a PageSpeed Insightsban). A Lighthouse hibásnak minősíti az oldalt, ha a viewport-sor hiányzik, vagy nincs benne width=.

Amit jobb elkerülni

Egyes webhelyek többet is beleírnak:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Így a látogató nem tud többé nagyítani. Ez rendezettnek tűnhet („az elrendezés egyben marad”), de a gyengénlátók számára akadályt jelent. A WCAG 2.2 akadálymentességi irányelv 1.4.4-es sikerkritériuma (Szöveg átméretezése, AA szint) megköveteli, hogy a szöveg 200 százalékig nagyítható legyen anélkül, hogy tartalom vagy funkció elveszne. A W3C hivatalos ellenőrzési szabálya, a „Meta viewport allows for zoom”, hibásnak minősíti azt a viewportot, amelyben user-scalable=no szerepel, vagy amelyben a maximum-scale 2-nél kisebb. Ezeket a részeket tehát hagyja el. (Az iPhone-on futó Safari ma már alapértelmezés szerint figyelmen kívül hagyja őket, a többi böngésző azonban nem.)

Szintén hiba a rögzített szélesség, például width=1024. Ilyenkor a telefon ismét úgy tesz, mintha a képernyő 1.024 pixel széles lenne, és a reszponzív kialakítás haszontalanná válik.

Azonos tartalom mobilon és asztali gépen

A Google a mobile-first indexelésről szóló dokumentációjában néhány olyan dolgot említ, amelynek mindkét változatban egyeznie kell. Reszponzív webhelynél ez magától így van, dynamic servingnél és külön mobilwebhelynél viszont ellenőriznie kell:

• Maga a tartalom. A szöveg mobilon lehet lenyitható blokkban vagy fülön, de benne kell lennie az oldalban.
• A cím és a metaleírás (3.1. lecke) legyen egyenértékű.
• A strukturált adatok (5. modul) mindkét változatban szerepeljenek.
• A képek ugyanazokkal az alt-szövegekkel és jó minőségben jelenjenek meg.
• Ne legyen olyan tartalom, amely csak egy művelet után töltődik be. A Google szó szerint ezt írja: a fő tartalmat ne csak akkor töltse be, amikor a látogató görget, kattint vagy gépel; a Googlebot ezt nem teszi meg.
• A robots.txt ne tiltsa le a mobiloldalakat és azok CSS-, JavaScript- és képfájljait. CSS nélkül a Google nem látja, hogyan néz ki az oldal.

Kényelmes kis képernyőn is

Néhány szempont, amelyet a Google a jó oldalélmény kérdései között említ, és amelyet a saját telefonján ellenőrizhet:

• Olvasható szöveg nagyítás nélkül.
• Érintési célpontok (gombok, menüben lévő linkek): legyenek elég nagyok és ne túl közel egymáshoz, hogy ne érintse meg véletlenül a rosszat.
• Ne legyenek tolakodó felugró ablakok. A Google azt írja, hogy a tartalmat eltakaró elemek (például egy egész oldalt elfoglaló hírlevélablak rögtön belépéskor) bosszantják a látogatókat és rontják a bizalmat, és a keresőmotorok számára is megnehezítik a tartalom megértését. Használjon inkább egy kis sávot. A jogszabály által előírt ablakok, például az életkor-ellenőrzés, nem tartoznak ez alá az irányelv alá.
• Ne kelljen vízszintesen görgetni: egy túl széles kép vagy táblázat az egész oldalt oldalra tolja. Adjon a táblázatoknak saját görgetősávot.

A Google 2023 végén megszüntette a külön Mobile-Friendly Test eszközt és a Search Console Mobile Usability jelentését. Az ellenőrzést most a saját telefonján, a böngésző fejlesztői eszközeinek mobilnézetében, valamint a Lighthouse vagy a PageSpeed Insights segítségével végezheti (4.3. lecke).

A gyakorlatban: nézze meg saját maga

Nyissa meg a webhelyét a számítógépen Chrome-ban vagy Firefoxban, nyomja meg az F12 billentyűt, és kattintson a telefont és táblagépet ábrázoló ikonra (eszközsáv). Válasszon egy keskeny készüléket, és lapozza végig a legfontosabb oldalait. Figyeljen a képernyőről kilógó szövegre, az egymásra csúszó gombokra és a mobilon hiányzó részekre. Ezután nézze meg a forráskódban (Ctrl+U), hogy szerepel-e a viewport-sor.

Az AI Builder a width=device-width, initial-scale=1 viewport-sort magától beilleszti minden oldalba. A WordPress-témák is így tesznek, ahogyan a legtöbb más webhelyépítő is. Saját készítésű vagy régi webhelynél érdemes ellenőrizni: egyetlen sorról van szó, de nélküle a mobilos kialakításból semmi sem működik.

Összefoglalás

• A Google az oldalai mobilváltozatát indexeli és rangsorolja; ami onnan hiányzik, azt a Google nem látja.
• A reszponzív kialakítás az ajánlott módszer: egy cím, egy HTML.
• Minden oldalnak szüksége van erre: <meta name="viewport" content="width=device-width, initial-scale=1">.
• Ne tiltsa le a nagyítást: ne legyen user-scalable=no, és ne legyen 2 alatti maximum-scale (WCAG 1.4.4).
• Tartsa azonosan a tartalmat, a címet, a metaleírást és a strukturált adatokat mobilon és asztali gépen, és kerülje az oldalt eltakaró felugró ablakokat.

Kvíz

Feladat

Feladat A4.2: Megfelelő a viewport az oldalán? Adja meg egy oldal címét (például a kezdőlapjáét). A program beolvassa a HTML-t, és ellenőrzi, hogy pontosan egy <meta name="viewport"> szerepel-e a <head> részben width=device-width értékkel, és hogy nincs-e letiltva a nagyítás (user-scalable=no vagy 2 alatti maximum-scale). Ezután nézze meg saját maga ugyanezt az oldalt a böngészője mobilnézetében. Nincs saját webhelye? Használja a www.wikipedia.org címet.

További olvasnivaló

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, ACT-szabály: Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, A viewport metacímke: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html