Megfelelően jelenik meg a weboldalam telefonon?

A legtöbb látogató telefonon tekinti meg a weboldalt. A Google is így tesz: a Google az oldalak mobil verzióját használja az indexeléshez és a rangsoroláshoz. Ami a telefonon nem jelenik meg az oldalon, azt a Google sem látja. Ebből a cikkből megtudhatja, hogyan ellenőrizheti saját maga, hogy az oldal megfelelően működik-e kis képernyőn.

A viewport szabály

A telefon nem tudja magától, hogy az oldal kis képernyőre lett tervezve. Utasítás nélkül a böngésző úgy tesz, mintha a képernyő sokkal szélesebb lenne, és lekicsinyíti a teljes oldalt. Ennek eredménye apró szöveg, amelyet nagyítani kell. A megoldás egyetlen sor a <head> részben minden oldalon:

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

• Ne legyen rögzített szélesség, mint például width=1024: ekkor a telefon ismét úgy viselkedik, mintha a képernyő széles lenne.
• Ne blokkolja a nagyítást: hagyja el a user-scalable=no és maximum-scale=1 beállításokat. A gyengén látóknak lehetőséget kell adni a szöveg nagyítására.

Az AI Builder, a WordPress sablonok és a legtöbb más weboldalkészítő automatikusan elhelyezi ezt a sort minden oldalon. Saját készítésű vagy régi weboldal esetén érdemes ellenőrizni: nyisson meg egy oldalt, kattintson a jobb gombbal, válassza az Oldalforrás megtekintése lehetőséget (vagy Ctrl+U), majd a Ctrl+F billentyűkombinációval keressen rá a viewport szóra.

Saját tesztelés

1. Nyissa meg a weboldalt a saját telefonján, és tekintse át a legfontosabb oldalakat.
2. Vagy számítógépen: nyissa meg a weboldalt Chrome-ban vagy Firefoxban, nyomja meg az F12 billentyűt, majd kattintson a telefon és táblagép ikonra. Válasszon egy keskeny eszközt.
3. Figyeljen a képernyőn kívül eső szövegre, az oldalakra, amelyeket oldalra kell görgetni, a túl kicsi vagy egymást átfedő gombokra, valamint a mobilon hiányzó részekre.
4. Ezután tesztelje az oldalt a PageSpeed Insights eszközben, a Mobil fülön. A jelentés értelmezéséről bővebben itt olvashat: A PageSpeed Insights jelentés értelmezése: a Core Web Vitals egyszerűen.

A Google külön Mobilbarát teszt eszköze, valamint a Search Console Mobilhasználhatóság jelentése 2023. december 1. óta nem létezik. Ha egy régebbi cikkben találkozik ezekkel, használja helyettük a fent leírt lépéseket.

Azonos tartalom mobilon és asztali gépen

Egy reszponzív weboldal esetén (egyetlen cím és egyetlen oldal, amely alkalmazkodik a képernyő szélességéhez) a tartalom automatikusan megegyezik. A Google ezt a megoldást javasolja. Ha külön mobil weboldala van, például m.example.com címen, vagy olyan rendszere, amely a telefonoknak más oldalakat küld, ellenőrizze az alábbiakat:

• azonos szöveg, akkor is, ha az mobilon egy lenyitható blokkban található;
• azonos cím és leírás;
• azonos képek azonos alt szövegekkel;
• ne legyen olyan tartalom, amely csak akkor töltődik be, ha a látogató végighúzza az ujját, kattint vagy begépel valamit: a Google ezt nem teszi meg.

További olvasnivaló

• Google: ajánlott eljárások a mobile-first indexeléshez (angol nyelven)
• MDN: a viewport szabály (angol nyelven)