Reactin analytiikka ja haku­kone­opti­mointi

Viime aikoina on ollut jonkin verran keskustelua Reactilla toteutettujen verkkopalveluiden hakukoneoptimoinnin ja analytiikkatoteutusten haasteista. Mm. Vierityspalkki julkaisi artikkelin “Headless”-konsepti ihastuttaa ja vihastuttaaAvautuu uuteen välilehteen viitaten Reactin ja vastaavien Headless-arkkitehtuurien ongelmiin ja aiheesta muualla käytyihin keskusteluihin. Nyt on hyvä hetki avata näitä aiheita tarkemmin ja hälventää mahdollisia pelkoja.

Olemme Wunderilla viime aikoina toteuttaneet jonkinmoisen nipun verkkopalveluita Drupalilla (OpetushallitusAvautuu uuteen välilehteen), Reactilla (TraficomAvautuu uuteen välilehteen) tai näiden hybriditoteutuksena (Finavia). Tyypillisesti tämän kokoisiin projekteihin toteutetaan räätälöity verkkoanalytiikka ja palveluissa on vaatimuksena myös hakukoneiden kannalta optimoitu tekninen toteutus. Kokemusta aiheesta on siis kertynyt sen verran, että voimme turvallisesti vertailla näitä teknisiä ratkaisuja keskenään myös analytiikan ja hakukoneoptimoinnin osalta.

React yleisesti

Pohjustetaan aihetta tarkastelemalla Reactin käyttötapauksia. React on Facebookin kehittämä JavaScript-kirjasto, joka on tarkoitettu käyttöliittymien toteutuksiin. Jo tämä määrittely kertoo, että React ei ole optimaalisin valinta, jos tarvitaan puhtaasti staattinen verkkosivusto. Jos sen sijaan tarkoituksena on rakentaa verkkopalvelu, joka sisältää interaktiivisia komponentteja, ollaan Reactin ytimessä. Tästä seuraa hakukoneoptimoinnin ja verkkoanalytiikan kannalta kaksi perusväittämää:

1. Interaktiiviset toiminnot harvemmin ovat hakukonenäkyvyyden suhteen kriittisiä
2. Interaktiivisten toimintojen analytiikkaseuranta on palvelun kehittämisen kannalta äärimmäisen kriittinen

Jos Reactilla toteutetaan jokin kyselykone, varausprosessi, checkout tms. – on kyseisen toiminnon sisältö lähtökohtaisesti melko köyhää ja odotukset näkyvyydestä hakukoneessa heikot. Näihin palveluihin liikenne ohjataan tyypillisesti muilta sivuilta tai mainonnalla. Esimerkiksi varausprosessiin tullaan lähes poikkeuksetta aina yrityksen palveluita kuvaavilta sivuilta, eikä suoraan hakukoneista. Ei siis ole mitään syytä, miksi tämän tyyppisen palvelun tulisi näkyä hakukoneiden tuloksissa. Näkyvyyden sijaan tämän tyyppiselle palvelulle on äärimmäisen tärkeää tuottaa tietoa siitä mitä käyttäjä kyseisessä prosessissa kokee, eli analytiikan pitää seurata käyttäjän toimintoja hyvinkin tarkkaan.

Yleensä verkkopalveluissa on jonkinlainen sekoitus interaktiivisia palvelu/toiminto-sivuja ja hakukonenäkyvyyden kannalta kriittisiä staattisia sivuja. Tällöin pitää miettiä onko liiketoiminnan ja asiakaskokemuksen kannalta järkevää toteuttaa koko palvelu Reactilla, vai ainoastaan interaktiiviset osat. Mikäli hakukonekriittinen sisältö esitetään myös Reactilla, seuraa tästä hakukoneoptimoinnin kannalta lisävaatimuksia.

Google Analytics & React

Yleisesti kun maailmalla puhutaan verkkopalvelun analytiikasta, sillä valitettavan usein tarkoitetaan Google Tag Managerin kautta sivustolle tiputettua Google Analyticsin perustasoista kävijäseurantaa. Jos ollaan toteuttamassa interaktiivista verkkopalvelua Reactilla, ei tämä perustason seurannan tuottama informaatio riitä. Interaktiivisessa verkkopalvelussa tulee kerätä tietoa käyttäjän käyttäytymisestä klikki-, kenttä- tai vaihetasolla, eikä silloin yksittäisen sivun katselu tai bounce rate kerro mitään käyttäjän reaktioista tai palvelun toimivuudesta. Vaaditaan siis aina verkkoanalytiikan räätälöintiä, jotta saadaan riittävän tarkkaa dataa palvelun kehittämisen tueksi. Räätälöidyn analytiikan avulla saadaan tietoa siitä, minkälaisia valintoja käyttäjä on tehnyt palvelussa, esimerkiksi mitä kenttiä hän on täyttänyt tai mitä on jättänyt täyttämättä. Tämän datan avulla voidaan analysoida asiakkaan etenemiseen ja mahdollisesti palvelun käytön keskeyttämiseen johtaneita seikkoja.

Jos verrataan perinteisen CMS:n (WordPress, Drupal jne.) ja React-palvelun analytiikan toteutusprojektin työmäärää räätälöimättömän Google Analyticsin osalta, on Reactissa hieman enemmän tekemistä. React ei lataa sivua perinteisen CMS:n tapaan aina käyttäjän navigoidessa uuteen näkymään, joten perinteisessä järjestelmässä analytiikkaan automaattisesti lähtevä “pageload-hit” jää Reactissa tapahtumatta. Tämän vuoksi React-toteutuksiin rakennetaan erikseen toiminto, joka lähettää tuon tiedon analytiikalle. Kun Reactilla toteutetuissa palvelussa käyttäjä navigoi uuteen näkymään, React päivittää näkymän ja käyttäjälle näkyvän URL-osoitteen. Samalla palvelu välittää tiedon uudesta URL:sta ja generoi “pageview hitin”. Eli vaikka varsinaista sivulatausta ei tapahdu, vastaavat tiedot kuitenkin lähetetään Google Analyticsiin. Google Analyticsin kannalta tässä ei ole mitään eroa.

Kun verrataan työmääriä ja toteutuksen vaikeutta räätälöidyn Google Analyticsin osalta, tilanne muuttuu tasaväkiseksi. Näissä projekteissa analytiikan määrittely- ja toteutusvaiheen työt tyypillisesti dominoivat työmäärää selkeästi enemmän kuin teknologia, jolla palvelu toteutetaan. Kokemuksemme mukaan esim. Drupaliin toteutettu räätälöity Google Analytics vaatii melko tarkasti saman työmäärän, kuin vastaavaan Reactilla toteutettuun palveluun rakennettu toteutus. Räätälöidyssä järjestelmässä tuomme teknologiasta riippumatta käyttäjän toimista kertovat tiedot tavalla tai toisella palvelusta Google Analyticsille, joten koodaustyötä on aina tiedossa – eikä React ole tässä suhteessa sen helpompi tai vaikeampi kuin perinteiset CMS-järjestelmät.

Reactin tekninen hakukonenäkyvyys

React-palvelun tekninen hakukoneoptimointi poikkeaa jossain määrin perinteisten CMS-järjestelmien optimoinnista. Aiheesta voisi kirjoittaa vaikka kirjan, mutta keskitytään tässä pariin pääkohtaan: JavaScript-palveluiden näkyvyyteen ja “one page” applikaation metatietojen välittämiseen hakukoneille.

Googlen tiedetään olevan hyvin tarkka siitä mihin se rajallisia resurssejaan käyttää, joten Reactin kaltaisten JavaScript toteutuksien indeksointi saattaa jäädä hakukonenäkyvyydeltään heikoiksi. Jotta Google saa kuvan siitä, mitä käyttäjä React-palvelussa näkee ja lukee, pitää Googlebotin suorittaa sivuston javascript koodi. Tämä aiheuttaa Googlelle ylimääräistä työtä ja koska resurssit internetin sivustojen läpikäyntiin ovat rajalliset, vaikuttaa aina kaikki ylimääräinen vaiva sivuston mahdollisuuksiin sijoittua hyvin hakutuloksissa. Mitä helpommaksi indeksoinnin Googlelle teet, sitä todennäköisimmin sivut indeksoidaan kattavammin ja nopeammin. Ja mitä vaikeampaa indeksointi on, sitä haastavampaa hakutuloksiin pääseminen ja hyvän sijoituksen saavuttaminen on. React-palvelun indeksointia pitää siis helpottaa, jos palvelun sisältö on hakukonekriittistä.

Yksi tapa hoitaa Javascript toteutuksen aiheuttamat näkyvyysongelmat React-palveluissa on renderöidä hakukonenäkyvyyden kannalta tärkeiden sivujen sisältö valmiiksi palvelimella ja tarjoilla ne sieltä suoraan hakukoneille. Näin hakukoneen ei tarvitse kuluttaa resurssejaan javascript-toteutusten renderöintiin, vaan se saa sivustot perinteiseen tapaan HTML-koodina palvelimelta. Tästä tekniikasta käytetään nimitystä Server Side Rendering eli SSR. Kun SSR otetaan huomioon heti projektin alusta lähtien, ei React-palvelun tekninen hakukoneoptimointi käytännössä tältä osin lisää projektin työmäärää tai kustannuksia merkittävästi. Mikäli sivustolla on paljon käyttäjiä ja sivujen renderöinti on liian raskasta toteuttaa kaikille käyttäjille, voidaan resurssien käyttöä optimoida renderöimällä nämä sivut vain Googlen ja muiden hakukoneiden crawlereille.

Toinen sivustojen suorituskykyyn hakukoneissa vaikuttava asia on sivujen metatietojen välittäminen Googlelle. Reactissahan sovellus periaatteessa toimii yhdellä sivulla, jolloin huolimatta käyttäjän toimenpiteistä tai navigoinneista sivuilla, varsinaisia sivulatauksia ei tule. React-applikaation käyttäjälle näyttämä sisältö kasataan aina käyttäjän selaimessa sen mukaan miten käyttäjä applikaatiossa navigoi. Kun sivulatauksia ei tule, ei myöskään sivujen metatietoja välitetä hakukoneille.

Metatietojen välittämiseen on useampia tapoja. SSR on yksi näistä tavoista, eli kun sivu renderöidään serverillä hakukoneille erikseen, sisällytetään sivun koodiin myös metatiedot. Mikäli SSR ei ole käytössä, löytyy metatietojen välittämiseen myös muita tapoja.

Yhteenveto

Tämän artikkelin tarkoituksena ei ole toimia syvällisenä analytiikan tai SEO:n tietolähteenä React toteutuksien rakentamisessa. Haluamme vain hälventää epäilyksiä siitä, että React olisi altavastaaja näiltä osin verkkopalveluiden rakentamisessa.

React-palvelun (ja toki kaikkien muidenkin palveluiden) tekninen hakukoneoptimointi ja räätälöidyn analytiikan määrittely ja asennus tulee ottaa huomioon projekteissa ensimmäisestä päivästä lähtien. Kun asiat pidetään mielessä heti alusta, voidaan palvelun rakenteet toteuttaa niin että a) systeemit oikeasti toimii ja b) niistä ei koidu lisäkustannuksia. Jälkeenpäin näiden huomiointi on kallista ja joskus jopa mahdotonta.

Mikäli olet suunnittelemassa palvelusi toteuttamista Reactilla tai haluat korjata jo olemassa olevan toteutuksen mahdollisia puutteita, autamme mielellämme.