Onko verkkosivusi toimiva myös puhelimella?
Suurin osa kävijöistä katsoo verkkosivustoasi puhelimella. Google tekee samoin: Google käyttää sivujesi mobiiliversiota niiden indeksointiin ja sijoitukseen. Mitä puhelimessasi ei näy sivulla, sitä Google ei siis myöskään näe. Tässä artikkelissa luet, miten voit itse tarkistaa, toimiiko sivustosi hyvin pienellä näytöllä.
Viewport-sääntö
Puhelin ei automaattisesti tiedä, että sivusi on tehty pienelle näytölle. Ilman ohjetta selain toimii ikään kuin näyttö olisi paljon leveämpi ja pienentää koko sivun. Silloin saat pikkuruisen tekstin, jota joutuu lähentämään. Ratkaisu on yksi rivi jokaisen sivun <head>-osiossa:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Ei kiinteää leveyttä kuten
width=1024: silloin puhelin toimii taas ikään kuin näyttö olisi leveä. - Älä estä lähentämistä: jätä
user-scalable=nojamaximum-scale=1pois. Heikkonäköisten pitää voida suurentaa tekstiä.
AI Bouwer, WordPress-teemat ja useimmat muut verkkosivustorakentajat lisäävät tämän rivin itse jokaiselle sivulle. Itse tehdyn tai vanhan sivuston kohdalla kannattaa tarkistaa asia: avaa sivu, napsauta hiiren oikealla painikkeella, valitse Näytä sivun lähdekoodi (tai Ctrl+U) ja etsi Ctrl+F:llä sanaa viewport.
Testaa itse
- Avaa sivustosi omalla puhelimellasi ja käy läpi tärkeimmät sivut.
- Tai tietokoneella: avaa sivustosi Chromessa tai Firefoxissa, paina F12 ja napsauta puhelimen ja tabletin kuvaketta. Valitse kapea laite.
- Kiinnitä huomiota tekstiin, joka jää näytön ulkopuolelle, sivuun, jota joutuu vierittämään sivusuunnassa, liian pieniin tai päällekkäisiin painikkeisiin sekä osiin, jotka puuttuvat mobiilissa.
- Testaa sen jälkeen PageSpeed Insightsissa Mobiili-välilehdellä. Lue lisää siitä, miten tulkitset raporttia, artikkelista PageSpeed Insightsin lukeminen: Core Web Vitals selkokielellä.
Googlen erillinen Mobiiliystävällisyyden testi ja Search Consolen Mobiilikäytettävyys-raportti eivät ole enää olemassa 1. joulukuuta 2023 lähtien. Jos törmäät niihin vanhassa artikkelissa, käytä nyt yllä olevia vaiheita.
Sama sisältö mobiilissa ja työpöydällä
Responsiivisella sivustolla (yksi osoite ja yksi sivu, joka mukautuu näytön leveyteen) sisältö on automaattisesti sama. Google suosittelee tätä tapaa. Jos sinulla on erillinen mobiilisivusto, kuten m.example.com, tai järjestelmä, joka lähettää puhelimille eri sivuja, tarkista silloin:
- sama teksti, myös jos se on mobiilissa avattavassa lohkossa;
- sama otsikko ja kuvaus;
- samat kuvat samoilla alt-teksteillä;
- ei sisältöä, joka latautuu vasta kun kävijä pyyhkäisee, napsauttaa tai kirjoittaa: Google ei tee niin.
Lue lisää
- Google: suositellut käytännöt mobile-first-indeksoinnille (englanniksi)
- MDN: viewport-sääntö (englanniksi)