Pirmiausia mobilieji įrenginiai ir viewport

4 modulis: Greitis, mobilieji įrenginiai ir https · Skaitymo laikas: 10 min.

Mokymosi tikslas: Po šios pamokos galėsite paaiškinti, ką reiškia mobile-first indexing, atpažinti ir parašyti tinkamą viewport nustatymą bei išvengti spąstų, dėl kurių Jūsų mobilusis puslapis rodo mažiau arba veikia prasčiau nei kompiuterio versija.

Pagrindinės sąvokos: mobile-first indexing, išmaniojo telefono tikrintuvas (crawler), prisitaikantis (responsive) dizainas, dynamic serving, atskira mobilioji svetainė, <meta name="viewport">, width=device-width, initial-scale, mastelio keitimo blokavimas, vienodas turinys, įkyrūs iššokantys langai (interstitials), paspaudimo taikiniai

Google žiūri telefonu

Ilgą laiką Google svetaines matė taip, kaip jas mato kompiuteris. Tai jau praeitis. Indeksavimui ir reitingavimui Google naudoja Jūsų puslapių mobiliąją versiją ir ją gauna per Googlebot išmaniojo telefono tikrintuvą. Tai vadinama mobile-first indexing. 2023 m. spalį Google parašė, kad perėjimas baigtas: beveik visoms svetainėms tai dabar tiesiog "indeksavimas". Nuo 2024 m. liepos Google ir paskutines svetaines, kurias dar lankė kompiuterio tikrintuvas, tikrina mobiliuoju tikrintuvu; tai, ko telefonu visiškai neįmanoma pasiekti, nebegali būti indeksuojama.

Ką tai reiškia praktikoje? Tai, ko nėra Jūsų mobiliajame puslapyje, Google neegzistuoja. Jei telefone praleidžiate dalį teksto, lentelę, darbo laiką ar struktūrizuotus duomenis "nes ekranas mažas", Google tos dalies taip pat nemato.

Trys būdai kurti mobiliąją versiją

Beveik visi šiuolaikiniai svetainių kūrimo įrankiai ir WordPress temos yra prisitaikantys. Svetainė, sukurta su AI Builder, taip pat prisitaikanti: vienas puslapis, kuris prisitaiko. Jei turite seną svetainę su atskira m. versija, perėjimas prie prisitaikančio dizaino dažnai yra didžiausias patobulinimas, kurį galite padaryti.

Viewport: eilutė, dėl kurios viskas veikia

Telefono naršyklė savaime nežino, kad Jūsų puslapis sukurtas mažam ekranui. Be nurodymo ji elgiasi taip, lyg ekranas būtų daug platesnis, pavyzdžiui, 980 pikselių (tokį pavyzdį pateikia MDN dokumentacija), ir sumažina visą puslapį, kad šis tilptų ekrane. Rezultatas: smulkutis tekstas, kurį tenka didinti. Tada neveikia ir prisitaikantis dizainas, nes CSS mano, kad ekranas platus.

Sprendimas yra viena eilutė kiekvieno puslapio <head> dalyje:

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

• width=device-width reiškia: padarykite puslapį tokio pločio, kaip įrenginio ekranas. Tada Jūsų CSS gali dirbti su ekrano pločiais.
• initial-scale=1 reiškia: pradėkite be didinimo ar mažinimo.

Būtent šią eilutę rekomenduoja Lighthouse (patikra Chrome naršyklėje ir PageSpeed Insights). Lighthouse puslapį įvertina neigiamai, jei viewport eilutės nėra arba joje nėra width=.

Ko geriau nedaryti

Kai kurios svetainės įrašo daugiau:

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

Tada lankytojas nebegali didinti puslapio. Atrodo tvarkinga ("maketas nesubyra"), tačiau silpnaregiui tai kliūtis. Prieinamumo gairių WCAG 2.2 sėkmės kriterijus 1.4.4 (Teksto dydžio keitimas, AA lygis) reikalauja, kad tekstą būtų galima padidinti iki 200 procentų neprarandant turinio ar funkcijų. Oficiali W3C tikrinimo taisyklė "Meta viewport allows for zoom" atmeta viewport su user-scalable=no arba su maximum-scale, mažesniu nei 2. Todėl šias dalis praleiskite. (Safari iPhone telefone dabar jų pagal numatymą nepaiso, bet kitos naršyklės paiso.)

Klaida yra ir fiksuotas plotis, pavyzdžiui, width=1024. Tada telefonas vėl elgiasi taip, lyg ekranas būtų 1024 pikselių pločio, ir Jūsų prisitaikantis dizainas tampa beprasmis.

Vienodas turinys mobiliajame ir kompiuteryje

Google dokumentacijoje apie mobile-first indexing nurodo kelis dalykus, kurie abiejose versijose turi būti vienodi. Prisitaikančioje svetainėje taip yra savaime, o naudojant dynamic serving ir atskirą mobiliąją svetainę tai reikia patikrinti:

• Pats turinys. Mobiliajame tekstas gali būti išskleidžiamame bloke ar skirtuke, bet jis turi būti puslapyje.
• Pavadinimas ir metaaprašas (pamoka 3.1) turi būti lygiaverčiai.
• Struktūrizuoti duomenys (modulis 5) turi būti abiejose versijose.
• Paveikslėliai su tais pačiais alt tekstais ir geros kokybės.
• Jokio turinio, kuris įkeliamas tik po veiksmo. Google tai sako tiesiai: neįkelkite pagrindinio turinio tik tada, kai lankytojas braukia, spusteli ar rašo; Googlebot to nedaro.
• robots.txt neturi blokuoti mobiliųjų puslapių ir jų CSS, JavaScript bei paveikslėlių. Be CSS Google negali matyti, kaip puslapis atrodo.

Patogu mažame ekrane

Keli punktai, kuriuos Google mini kaip geros puslapio patirties klausimus ir kuriuos galite patikrinti savo telefone:

• Įskaitomas tekstas be didinimo.
• Paspaudimo taikiniai (mygtukai, meniu nuorodos) pakankamai dideli ir ne per arti vienas kito, kad netyčia nepaspaustumėte ne to.
• Jokių įkyrių iššokančių langų. Google rašo, kad turinį uždengiantys elementai (naujienlaiškio langas per visą puslapį vos įėjus) erzina lankytojus ir kenkia pasitikėjimui, be to, paieškos sistemoms sunkiau suprasti Jūsų turinį. Geriau naudokite nedidelę juostą. Teisės aktų reikalaujami langai, pavyzdžiui, amžiaus patikra, šiai gairei nepriklauso.
• Jokio slinkimo horizontaliai: per platus paveikslėlis ar lentelė išstumia visą puslapį į šoną. Lentelėms suteikite atskirą slinkties juostą.

Atskirą Mobile-Friendly Test įrankį ir Mobile Usability ataskaitą Search Console Google nutraukė 2023 m. pabaigoje. Dabar tikrinate savo telefonu, naršyklės kūrėjo įrankių mobiliuoju rodiniu ir su Lighthouse arba PageSpeed Insights (pamoka 4.3).

Praktikoje: pažiūrėkite patys

Atidarykite savo svetainę Chrome arba Firefox kompiuteryje, paspauskite F12 ir spustelėkite telefono ir planšetės piktogramą (įrenginių įrankių juostą). Pasirinkite siaurą įrenginį ir peržiūrėkite svarbiausius puslapius. Atkreipkite dėmesį į tekstą, kuris išeina už ekrano ribų, mygtukus, kurie užlenda vienas ant kito, ir dalis, kurių mobiliajame trūksta. Tada pažiūrėkite į išeities kodą (Ctrl+U), ar yra viewport eilutė.

AI Builder viewport eilutę width=device-width, initial-scale=1 pats įrašo į kiekvieną puslapį. Tą patį daro WordPress temos ir dauguma kitų svetainių kūrimo įrankių. Jei svetainė sukurta pačių arba yra sena, verta patikrinti: tai tik viena eilutė, bet be jos neveikia niekas iš Jūsų mobiliojo dizaino.

Santrauka

• Google indeksuoja ir reitinguoja Jūsų puslapių mobiliąją versiją; ko ten trūksta, Google nemato.
• Prisitaikantis dizainas yra rekomenduojamas būdas: vienas adresas, vienas HTML.
• Kiekvienam puslapiui reikia <meta name="viewport" content="width=device-width, initial-scale=1">.
• Neblokuokite mastelio keitimo: jokio user-scalable=no ir jokio maximum-scale mažiau nei 2 (WCAG 1.4.4).
• Turinį, pavadinimą, metaaprašą ir struktūrizuotus duomenis laikykite vienodus mobiliajame ir kompiuteryje, venkite puslapį uždengiančių iššokančių langų.

Testas (quiz)

Užduotis

Užduotis A4.2: Ar Jūsų puslapis turi tinkamą viewport? Įveskite puslapio adresą (pavyzdžiui, savo pagrindinio puslapio). Programa perskaito HTML ir patikrina, ar <head> dalyje yra lygiai viena <meta name="viewport"> su width=device-width ir ar neblokuojamas mastelio keitimas (user-scalable=no arba maximum-scale mažiau nei 2). Tada patys peržiūrėkite tą patį puslapį savo naršyklės mobiliuoju rodiniu. Neturite savo svetainės? Naudokite www.wikipedia.org.

Skaitykite daugiau

• 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 taisyklė Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, viewport metažymė: 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