Perinteisesti selaimessa suoritettavat yhden sivun sovellukset (Single Page App), jota myös PWA edustaa, eivät ole saaneet kovinkaan hyviä hakukonesijoituksia. Huonon näkyvyyden aiheuttaa monesti se, että hakukoneet eivät noteeraa ensimmäisen sivun latauksen jälkeen tapahtuvaa dynaamisesti haettavaa sisältöä.

Single Page Appien pitää kuitenkin latautua nopeasti ja käyttäjäkokemuksen täytyy olla jouheva. Jos sivun lataus kestää mobiililaitteella yli 3 sekuntia, 53 % käyttäjistä poistuu välittömästi. Myös Google sijoittaa nopeat sivustot korkeammalle hakutuloksissa.

Renderöintitapa vaikuttaa hakukoneystävällisyyteen, latausnopeuteen ja sivuston suorituskykyyn

Palvelimella renderöity sisältö näkyy boteille, mutta käyttäjäkokemus jää helposti hitaammaksi. Lisäksi se kuormittaa verkkoyhteyttä ja palvelinta enemmän. Selainpäässä tapahtuva renderöinti on kevyempi vaihtoehto palvelimelle ja verkkoyhteydelle. Usein kuitenkin sovellukset, joissa liikutellaan paljon dataa, tarvitsevat tuen Service Workereille, joka on vain uusimmissa selaimissa. Ollaan siis vaikeiden valintojen äärellä. Kuinka palvella mahdollisimman hyvin luonnollisia käyttäjiä kuitenkaan hakukoneita unohtamatta?

Jos sivustolla on otettu huomioon kaikki indeksointiin liittyvät asiat ja sisältö on bottien luettavissa, orgaaninen näkyvyys hakutuloksissa on parempi. Vaikka Googlebot ei hyödy client-pään välimuisteista, se saa tietoa oikeiden käyttäjien latausajoista. Chrome User Experience Report (CrUX) lähettää statistiikkaa Chrome-käyttäjistä, joka oletettavasti vaikuttaa Googlen hakutulosten laskentaan.

Googlebotin rajoitteet

Googlebotin renderöinti perustuu Chrome 41 -selaimen headless-versioon, joka on julkaistu vuonna 2015. Luonnollisesti kehitys on ajanut edelle ja kaikki modernit teknologiat eivät ole tuettuja. Lisäksi Google on tehnyt eri syistä muitakin rajoitteita. Tässä niistä tärkeimmät:

  • WebSocket-protokolla ei ole tuettu.
  • IndexedDB ja WebSQL eivät ole käytössä.
  • Chrome 41 tukee ainoastaan ES5-syntaksia.
  • Tuki ainoastaan HTTP/1.x ja FTP:lle.
  • 3D- ja VR-sisällöt eivät ole indeksoitavissa.
  • Istuntojen data ja evästeet tyhjennetään sivulatausten välissä. Google haluaa nähdä sivut, kuten ne näyttäisiin ensimmäisellä latauskerralla.
  • Service Workers -ominaisuus on tuettu vain osittain.
  • Kaikki sivuston JavaScript-tiedostot eivät lataudu luotettavasti ensimmäisellä latauskerralla.

JavaScript on raskasta selaimelle

JavaScript on huomattavasti raskaampaa suorittaa selaimessa, kuin valmis HTML. Erityisesti mobiililaitteissa, joissa on rajallinen määrä laskentatehoa, JS:n parsiminen voi kestää jopa 36 % kauemmin, kuin työpöytäkoneessa. Myös laitteen akku kuluu nopeammin, kun prosessoria kuormitetaan. Sivun ensimmäinen lataus mobiililaitteella voi kestää huomattavan kauan, jos se vaatii paljon JavaScriptin suorittamista. Tämä vaikuttaa negatiivisesti ”Time to First Paint”- ja ”First Contentful Paint”-mittareihin, jotka ovat osa CrUX-raporttia. Tästä johtuen ensimmäinen lataus pitäisikin tarjota palvelimella valmiiksi renderöitynä.

Tue vanhempia selaimia ja botteja

Kaikki uudemmatkaan selaimet eivät tue kaikkia PWA-ominaisuuksia. Ominaisuuksien tunnistamiseen on suositeltavaa käyttää PWA Feature Detectoria, jotta kaikille käyttäjille voidaan tarjota yhdenmukainen sisältö. PWA Feature Detectoreja on saatavana muun muassa avoimena lähdekoodina.

Selaimille, jotka eivät tue esimerkiksi Service Worker -ominaisuutta, sisältö tarjoillaan palvelimella renderöitynä (SSR). Normaalisti CSR:nä tarjottava sisältö voidaan renderöidä tarvittaessa palvelimella, joka mahdollistaa yhteensopivuuden vanhempien selainten ja bottien kanssa. Dynaamiseen renderöintiin on olemassa valmiita työkaluja, kuten Headless Chrome + Puppeteer ja Rendertron.

Dynaaminen renderöinti Googlebotille ja hybridimalli moderneille selaimille

Tiivisti: miten teen PWA:sta SEO-ystävällisen?

  • Korjaa kaikki JavaScript-virheet. Joskus ne estävät Googlebottia indeksoimasta sisältöä.
  • Muuta ES5+-moduulit ES5-yhteensopiviksi transpilerin (esim. Babel) avulla Googlebottia varten. Käytä aina standardeja HTML-tageja linkeissä.
  • Vältä JS:llä tehtäviä uudelleenohjauksia. Tee ne palvelinpäässä.
  • Käytä Googlebotin tukemaa pushState()-metodia URL:n muuttamiseen
  • Tee sivuista linkitettäviä, jolloin Googlebot pääsee sisältöihin käsiksi.
  • Pidä huolta, että kuvat ovat optimoituja ja indeksoitavissa.
  • Vältä timeoutin ja keinotekoisten viiveiden käyttöä JavaScriptissä. Niiden käyttäminen saa sivun renderöitymisen näyttämään hitaalta mittareissa.
  • Varmista, että sisältö on yhdenmukainen riippumatta käytettävästä selaimesta.
  • Varmista, että meta-tiedot päivittyvät sekä selainpään että palvelinpään renderöinnin yhteydessä.
  • Älä estä hakokonetta näkemästä sisällön kannalta tarpeellisia JS-tiedostoja robots.txt:ssä.
  • Käytä ensimmäiseen sivunlataukseen palvelinpään renderöintiä (SSR). Tarjoile sekä sovellus että sisältö valmiiksi pureskeltuna.
  • Käytä selainpään renderöintiä (CSR) ensimmäisen sivunlatauksen jälkeen tapahtuviin latauksiin. Hakuboteille ja vanhemmille selaimille dynaaminen renderöinti CSR:n sijaan (Ad-hoc SSR).
  • Syvällisemmin aiheeseen voi perehtyä myös Divanten ja Elephaten julkaiseman selvityksen avulla.
Avainsanat:
PWA, SEO
ambientia

Blogi