Mai întâi mobilul și viewport-ul

Modulul 4: Viteză, mobil și https · Timp de citire: 10 minute

Obiectivul lecției: După această lecție veți putea explica ce înseamnă mobile-first indexing, veți putea recunoaște și scrie o setare viewport corectă și veți evita capcanele din cauza cărora pagina dumneavoastră pe mobil afișează mai puțin sau funcționează mai prost decât pagina pentru desktop.

Concepte cheie: mobile-first indexing, crawlerul pentru smartphone, design responsive, dynamic serving, site mobil separat, <meta name="viewport">, width=device-width, initial-scale, blocarea zoomului, conținut identic, ferestre pop-up intruzive (interstitials), ținte de atingere

Google se uită cu un telefon

Multă vreme, Google a privit un site așa cum o face un computer. Acele vremuri au trecut. Pentru indexare și clasare, Google folosește versiunea mobilă a paginilor dumneavoastră și o preia cu crawlerul pentru smartphone al Googlebot. Aceasta se numește mobile-first indexing. În octombrie 2023, Google a scris că tranziția s-a încheiat: pentru aproape toate site-urile este acum pur și simplu „indexare”. Din iulie 2024, Google accesează cu crawlerul mobil și ultimele site-uri care mai erau vizitate cu crawlerul pentru desktop; ceea ce nu poate fi accesat deloc pe un telefon nu mai poate fi indexat.

Ce înseamnă asta în practică? Ceea ce nu se află pe pagina dumneavoastră mobilă nu există pentru Google. Dacă pe telefon omiteți un fragment de text, un tabel, programul de funcționare sau datele structurate „pentru că ecranul este mic”, atunci nici Google nu vede acel fragment.

Trei moduri de a construi pentru mobil

Aproape toate constructoarele de site-uri moderne și temele WordPress sunt responsive. Un site creat cu AI Builder este și el responsive: o singură pagină care se adaptează. Dacă aveți un site vechi cu o versiune m. separată, trecerea la design responsive este adesea cea mai mare îmbunătățire pe care o puteți face.

Viewport-ul: rândul care face totul să funcționeze

Un browser de telefon nu știe de la sine că pagina dumneavoastră a fost făcută pentru un ecran mic. Fără instrucțiuni, se comportă ca și cum ecranul ar fi mult mai lat, de exemplu 980 de pixeli (exemplul dat de documentația MDN), și micșorează întreaga pagină până când încape pe ecran. Rezultatul: text minuscul, pe care trebuie să îl măriți. Nici un design responsive nu funcționează atunci, deoarece CSS-ul crede că ecranul este lat.

Soluția este un singur rând în <head> al fiecărei pagini:

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

• width=device-width înseamnă: faceți pagina la fel de lată ca ecranul dispozitivului. Astfel, CSS-ul dumneavoastră poate lucra cu lățimi de ecran.
• initial-scale=1 înseamnă: începeți fără mărire sau micșorare.

Acesta este exact rândul recomandat de Lighthouse (verificarea din Chrome și PageSpeed Insights). Lighthouse respinge o pagină dacă rândul viewport lipsește sau nu conține width=.

Ce este mai bine să nu faceți

Unele site-uri adaugă mai mult:

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

Astfel, un vizitator nu mai poate mări pagina. Pare ordonat („aspectul rămâne intact”), dar pentru cineva cu vedere slabă este un obstacol. Ghidul de accesibilitate WCAG 2.2 cere, în criteriul de succes 1.4.4 (Redimensionarea textului, nivelul AA), ca textul să poată fi mărit până la 200 la sută fără pierderi de conținut sau de funcționalitate. Regula oficială de testare a W3C, „Meta viewport allows for zoom”, respinge un viewport cu user-scalable=no sau cu maximum-scale mai mic de 2. Prin urmare, omiteți aceste elemente. (Safari pe iPhone le ignoră în prezent în mod implicit, dar alte browsere nu.)

Greșită este și o lățime fixă, de exemplu width=1024. Atunci telefonul se comportă din nou ca și cum ecranul ar avea 1.024 de pixeli lățime, iar designul dumneavoastră responsive devine inutil.

Conținut identic pe mobil și pe desktop

În documentația despre mobile-first indexing, Google menționează câteva lucruri care trebuie să fie identice pe ambele versiuni. La un site responsive acest lucru se întâmplă de la sine; la dynamic serving și la un site mobil separat trebuie să verificați:

• Conținutul propriu-zis. Pe mobil, textul poate sta într-un bloc extensibil sau într-o filă, dar trebuie să se afle în pagină.
• Titlul și meta descrierea (lecția 3.1) trebuie să fie echivalente.
• Datele structurate (modulul 5) trebuie să existe pe ambele versiuni.
• Imaginile, cu aceleași texte alt și la o calitate bună.
• Fără conținut care se încarcă abia după o acțiune. Google o spune explicit: nu încărcați conținutul principal abia atunci când vizitatorul glisează, dă clic sau tastează; Googlebot nu face asta.
• robots.txt nu trebuie să blocheze paginile mobile și fișierele lor CSS, JavaScript și imaginile. Fără CSS, Google nu poate vedea cum arată pagina.

Plăcut pe un ecran mic

Câteva puncte pe care Google le menționează ca întrebări pentru o experiență bună a paginii și pe care le puteți verifica pe propriul telefon:

• Text lizibil, fără a fi nevoie de mărire.
• Ținte de atingere (butoane, linkuri dintr-un meniu) suficient de mari și nu prea apropiate unele de altele, astfel încât să nu atingeți din greșeală elementul greșit.
• Fără ferestre pop-up intruzive. Google scrie că elementele care blochează conținutul (o fereastră de abonare la newsletter peste întreaga pagină imediat ce intrați) îi deranjează pe vizitatori și afectează încrederea, iar motoarelor de căutare le este mai greu să vă înțeleagă conținutul. Folosiți mai degrabă o bară mică. Ferestrele obligatorii prin lege, cum ar fi o verificare a vârstei, nu intră sub incidența acestei recomandări.
• Fără derulare orizontală: o imagine sau un tabel prea lat împinge întreaga pagină în lateral. Oferiți tabelelor o bară de derulare proprie.

La sfârșitul anului 2023, Google a oprit testul separat Mobile-Friendly Test și raportul Mobile Usability din Search Console. Verificarea o faceți acum cu propriul telefon, cu vizualizarea mobilă din instrumentele pentru dezvoltatori ale browserului și cu Lighthouse sau PageSpeed Insights (lecția 4.3).

În practică: verificați singur

Deschideți site-ul în Chrome sau Firefox pe computer, apăsați F12 și dați clic pe pictograma unui telefon și a unei tablete (bara de instrumente pentru dispozitive). Alegeți un dispozitiv îngust și parcurgeți cele mai importante pagini. Fiți atent la textul care iese din ecran, la butoanele suprapuse și la fragmentele care lipsesc pe mobil. Apoi verificați în codul sursă (Ctrl+U) dacă rândul viewport este prezent.

AI Builder adaugă automat rândul viewport width=device-width, initial-scale=1 în fiecare pagină. Temele WordPress fac același lucru, la fel ca majoritatea celorlalte constructoare de site-uri. La un site realizat de dumneavoastră sau la unul vechi merită să verificați: este un singur rând, dar fără el nimic din designul dumneavoastră mobil nu funcționează.

Rezumat

• Google indexează și clasează versiunea mobilă a paginilor dumneavoastră; ceea ce lipsește acolo, Google nu vede.
• Designul responsive este metoda recomandată: o singură adresă, un singur HTML.
• Fiecare pagină are nevoie de <meta name="viewport" content="width=device-width, initial-scale=1">.
• Nu blocați zoomul: fără user-scalable=no și fără maximum-scale sub 2 (WCAG 1.4.4).
• Păstrați identice conținutul, titlul, meta descrierea și datele structurate pe mobil și pe desktop și evitați ferestrele pop-up care acoperă pagina.

Test

Exercițiu

Exercițiul A4.2: Are pagina dumneavoastră un viewport corect? Introduceți adresa unei pagini (de exemplu pagina principală). Programul citește HTML-ul și verifică dacă în <head> există exact un <meta name="viewport"> cu width=device-width și dacă zoomul nu este blocat (user-scalable=no sau maximum-scale sub 2). Apoi examinați singur aceeași pagină în vizualizarea mobilă a browserului. Nu aveți un site propriu? Folosiți www.wikipedia.org.

Resurse suplimentare

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