Je li Vaša web stranica dobra na mobitelu?

Većina posjetitelja gleda Vašu web stranicu na telefonu. Google to također radi: Google koristi mobilnu verziju Vaših stranica za indeksiranje i rangiranje. Ono što se na telefonu ne prikazuje na stranici, Google dakle ne vidi. U ovom članku saznajete kako sami provjeriti radi li Vaša stranica dobro na malom zaslonu.

Pravilo viewporta

Telefon sam od sebe ne zna da je Vaša stranica napravljena za mali zaslon. Bez uputa preglednik se ponaša kao da je zaslon mnogo širi i smanjuje cijelu stranicu. Tada dobivate sićušan tekst u koji morate zumirati. Rješenje je jedan redak u <head> svake stranice:

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

• Bez fiksne širine poput width=1024: tada telefon opet djeluje kao da je zaslon širok.
• Nemojte blokirati zumiranje: izostavite user-scalable=no i maximum-scale=1. Osobe koje slabije vide moraju moći povećati tekst.

AI Builder, WordPress teme i većina drugih alata za izradu web stranica sami postavljaju ovaj redak na svakoj stranici. Kod samostalno izrađene ili starije stranice vrijedi provjeriti: otvorite stranicu, kliknite desnom tipkom miša, odaberite Prikaži izvorni kod stranice (ili Ctrl+U) i pomoću Ctrl+F potražite viewport.

Testiranje samostalno

1. Otvorite Vašu stranicu na vlastitom telefonu i prođite kroz najvažnije stranice.
2. Ili na računalu: otvorite Vašu stranicu u Chromeu ili Firefoxu, pritisnite F12 i kliknite na ikonu telefona i tableta. Odaberite uski uređaj.
3. Obratite pozornost na tekst koji izlazi izvan prikaza, stranicu koju morate pomicati bočno, gumbe koji su premali ili se preklapaju, te dijelove koji nedostaju na mobilnoj verziji.
4. Zatim testirajte u alatu PageSpeed Insights na kartici Mobilni. Kako se taj izvještaj čita, opisano je u članku Čitanje PageSpeed Insightsa: Core Web Vitals jednostavnim jezikom.

Zaseban test prilagođenosti mobilnim uređajima tvrtke Google i izvještaj Mobilna upotrebljivost u Search Consoleu ne postoje od 1. prosinca 2023. Ako ih pronađete u starijem članku, koristite gore navedene korake.

Isti sadržaj na mobilnoj verziji i verziji za računalo

Kod responzivne stranice (jedna adresa i jedna stranica koja se prilagođava širini zaslona) sadržaj je automatski jednak. Google preporučuje taj način. Ako imate zasebnu mobilnu stranicu, poput m.example.com, ili sustav koji telefonima šalje druge stranice, provjerite sljedeće:

• isti tekst, čak i ako se na mobilnoj verziji nalazi u proširivom bloku;
• isti naslov i opis;
• iste slike s istim alt tekstovima;
• bez sadržaja koji se učitava tek nakon što posjetitelj prijeđe prstom, klikne ili upiše nešto: Google to ne radi.

Dodatno čitanje

• Google: preporučene prakse za mobile-first indeksiranje (na engleskom)
• MDN: pravilo viewporta (na engleskom)