Mobilā versija vispirms un viewport

4. modulis: Ātrums, mobilās ierīces un https · Lasīšanas laiks: 10 minūtes

Mērķis: Pēc šīs nodarbības Jūs varēsiet izskaidrot, ko nozīmē mobile-first indexing, atpazīt un uzrakstīt pareizu viewport iestatījumu un izvairīties no kļūdām, kuru dēļ Jūsu mobilā lapa parāda mazāk vai darbojas sliktāk nekā datora versija.

Pamatjēdzieni: mobile-first indexing, viedtālruņa rāpuļprogramma, responsīvs dizains, dynamic serving, atsevišķa mobilā vietne, <meta name="viewport">, width=device-width, initial-scale, tālummaiņas bloķēšana, vienāds saturs, uzbāzīgi uznirstošie logi (interstitials), pieskāriena mērķi

Google skatās ar tālruni

Ilgu laiku Google aplūkoja vietni tā, kā to dara dators. Tas ir pagātnē. Indeksēšanai un ranžēšanai Google izmanto Jūsu lapu mobilo versiju un ielādē to ar Googlebot viedtālruņa rāpuļprogrammu. To sauc par mobile-first indexing. 2023. gada oktobrī Google rakstīja, ka pāreja ir pabeigta: gandrīz visām vietnēm tā tagad ir vienkārši "indeksēšana". Kopš 2024. gada jūlija Google arī pēdējās vietnes, kuras vēl apmeklēja ar datora rāpuļprogrammu, pārmeklē ar mobilo rāpuļprogrammu; to, kas tālrunī vispār nav sasniedzams, vairs nevar indeksēt.

Ko tas nozīmē praksē? Tas, kas nav Jūsu mobilajā lapā, Google acīs neeksistē. Ja tālrunī izlaižat teksta daļu, tabulu, darba laiku vai strukturētos datus, "jo ekrāns ir mazs", tad Google šo daļu arī neredz.

Trīs veidi, kā veidot mobilo versiju

Mūsdienu vietņu veidotāji un WordPress tēmas gandrīz visas ir responsīvas. Arī AI Builder vietne ir responsīva: viena lapa, kas pielāgojas. Ja Jums ir veca vietne ar atsevišķu m. versiju, pāreja uz responsīvu dizainu bieži ir lielākais uzlabojums, ko varat veikt.

Viewport: rinda, kas liek visam darboties

Tālruņa pārlūks pats nezina, ka Jūsu lapa ir veidota mazam ekrānam. Bez norādes tas izliekas, ka ekrāns ir daudz platāks, piemēram, 980 pikseļi (piemērs no MDN dokumentācijas), un samazina visu lapu, līdz tā ietilpst ekrānā. Rezultāts: sīks teksts, kurā jātuvina. Arī responsīvs dizains tad nedarbojas, jo CSS domā, ka ekrāns ir plats.

Risinājums ir viena rinda katras lapas <head> daļā:

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

• width=device-width nozīmē: padariet lapu tikpat platu kā ierīces ekrāns. Tad Jūsu CSS var strādāt ar ekrāna platumiem.
• initial-scale=1 nozīmē: sāciet bez tuvināšanas vai tālināšanas.

Tieši šo rindu iesaka Lighthouse (pārbaude pārlūkā Chrome un PageSpeed Insights). Lighthouse noraida lapu, ja viewport rindas nav vai tajā nav width=.

Ko labāk nedarīt

Dažas vietnes ieraksta vairāk:

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

Tad apmeklētājs vairs nevar tuvināt. Tas šķiet glīti ("izkārtojums paliek vesels"), bet cilvēkam ar vāju redzi tas ir šķērslis. Piekļūstamības vadlīniju WCAG 2.2 veiksmes kritērijs 1.4.4 (Resize Text, AA līmenis) prasa, lai tekstu varētu palielināt līdz 200 procentiem, nezaudējot saturu vai funkcijas. Oficiālais W3C pārbaudes noteikums "Meta viewport allows for zoom" noraida viewport ar user-scalable=no vai ar maximum-scale zem 2. Tāpēc izlaidiet šīs daļas. (Safari iPhone tālrunī tās mūsdienās pēc noklusējuma ignorē, bet citi pārlūki ne.)

Nepareizs ir arī fiksēts platums, piemēram, width=1024. Tad tālrunis atkal izliekas, ka ekrāns ir 1.024 pikseļus plats, un Jūsu responsīvais dizains ir bezjēdzīgs.

Vienāds saturs mobilajā un datora versijā

Google dokumentācijā par mobile-first indexing min dažas lietas, kurām jābūt vienādām abās versijās. Responsīvā vietnē tā ir automātiski, bet ar dynamic serving un atsevišķu mobilo vietni tas Jums jāpārbauda:

• Pats saturs. Mobilajā versijā teksts drīkst būt izvēršamā blokā vai cilnē, bet tam jābūt lapā.
• Virsrakstam un metaaprakstam (nodarbība 3.1) jābūt līdzvērtīgiem.
• Strukturētajiem datiem (modulis 5) jābūt abās versijās.
• Attēli ar tiem pašiem alt tekstiem un labā kvalitātē.
• Nav satura, kas ielādējas tikai pēc darbības. Google to saka burtiski: neielādējiet galveno saturu tikai tad, kad apmeklētājs velk, klikšķina vai raksta; Googlebot to nedara.
• robots.txt nedrīkst bloķēt mobilās lapas un to CSS, JavaScript un attēlus. Bez CSS Google nevar redzēt, kā lapa izskatās.

Ērti uz maza ekrāna

Daži punkti, ko Google min kā jautājumus labai lapas pieredzei un ko Jūs pārbaudāt savā tālrunī:

• Salasāms teksts bez tuvināšanas.
• Pieskāriena mērķi (pogas, saites izvēlnē) pietiekami lieli un ne pārāk tuvu viens otram, lai nejauši nepieskartos nepareizajam.
• Nav uzbāzīgu uznirstošo logu. Google raksta, ka elementi, kas aizsedz saturu (jaunumu vēstules logs pāri visai lapai, tiklīdz ienākat), kaitina apmeklētājus un grauj uzticību, kā arī apgrūtina meklētājprogrammām saprast Jūsu saturu. Labāk izmantojiet nelielu joslu. Likumā noteikti logi, piemēram, vecuma pārbaude, uz šo vadlīniju neattiecas.
• Nav horizontālās ritināšanas: pārāk plats attēls vai tabula pabīda visu lapu uz sāniem. Piešķiriet tabulām savu ritjoslu.

Google 2023. gada beigās pārtrauca atsevišķo testu "Mobile-Friendly Test" un pārskatu Mobile Usability pakalpojumā Search Console. Tagad pārbaudi veicat ar savu tālruni, ar mobilo skatu pārlūka izstrādātāju rīkos un ar Lighthouse vai PageSpeed Insights (nodarbība 4.3).

Praksē: pārbaudiet paši

Atveriet savu vietni pārlūkā Chrome vai Firefox datorā, nospiediet F12 un noklikšķiniet uz tālruņa un planšetdatora ikonas (ierīču rīkjosla). Izvēlieties šauru ierīci un pārlūkojiet svarīgākās lapas. Pievērsiet uzmanību tekstam, kas iziet ārpus ekrāna, pogām, kas pārklājas, un daļām, kuru mobilajā versijā trūkst. Pēc tam pirmkodā (Ctrl+U) pārbaudiet, vai viewport rinda ir vietā.

AI Builder pats ievieto viewport rindu width=device-width, initial-scale=1 katrā lapā. To dara arī WordPress tēmas un lielākā daļa citu vietņu veidotāju. Pašu veidotā vai vecā vietnē to ir vērts pārbaudīt: tā ir viena rinda, bet bez tās nekas no Jūsu mobilā dizaina nedarbojas.

Kopsavilkums

• Google indeksē un ranžē Jūsu lapu mobilo versiju; to, kas tur trūkst, Google neredz.
• Responsīvs dizains ir ieteicamais veids: viena adrese, viens HTML.
• Katrai lapai vajadzīgs <meta name="viewport" content="width=device-width, initial-scale=1">.
• Nebloķējiet tālummaiņu: nav user-scalable=no un nav maximum-scale zem 2 (WCAG 1.4.4).
• Saglabājiet vienādu saturu, virsrakstu, metaaprakstu un strukturētos datus mobilajā un datora versijā, un izvairieties no uznirstošajiem logiem, kas aizsedz lapu.

Tests (quiz)

Uzdevums

Uzdevums A4.2: Vai Jūsu lapai ir pareizs viewport? Ievadiet lapas adresi (piemēram, savas sākumlapas). Programma nolasa HTML un pārbauda, vai <head> daļā ir tieši viens <meta name="viewport"> ar width=device-width un vai tālummaiņa netiek bloķēta (user-scalable=no vai maximum-scale zem 2). Pēc tam paši aplūkojiet to pašu lapu pārlūka mobilajā skatā. Nav savas vietnes? Izmantojiet www.wikipedia.org.

Vairāk lasīt

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