SPA-sovelluksen hakukoneoptimointi : ReactJS-pohjaisen sovelluksen indeksoituminen

Abstract

Hakukoneet on alun perin rakennettu ymmärtämään vain perinteisiä palvelinrenderoituja sivuja. SPA-sovellukset ovat keränneet suosiotaan perinteisten verkkosivujen rinnalla nopean käytettävyytensä ja kevyen rakenteensa ansiosta. SPA-sovelluksissa näkymien muodostuminen tapahtuu selaimessa JavaScriptin avulla. Tätä kutsutaan selainrenderoinniksi. Selainrenderoinnin vuoksi on kyseenalaistettu hakukoneiden kykyä löytää, tulkita ja indeksoida SPA-sovelluksia. Tutkimuksen tavoitteena on selvittää, onko SPA-sovellusten indeksoituminen Googleen sellaisenaan mahdollista vai onko tarve turvautua palvelinpuolen renderointiin selainpuolella näkymien muodostamisen ohella. Opinnäytetyö toteutetaan kehittämistutkimuksena, sillä tutkimuksessa pyritään kehittä-mään Solteqin toimintaa SPA-sovellusten hakukoneoptimoinnin osalta. Opinnäytetyön tuotoksena valmistunut ReactJS-testisovellus indeksoitui Googleen, kun Googlen indeksoitumisenkriteerit otettiin huomioon. Opinnäytetyön tuloksena tuotettiin kaksi ReactJS sovellusta: tavallinen sekä isomorfinen ReactJS-sovellus, joka kykenee tarjoamaan palvelinpuolen renderoinnin SPA-toimintojen ohelle. Työssä tutkittiin myös sitä, kuinka isomorfinen SPA-sovellus rakennetaan. Työn lopputuloksena päädyttiin siihen, että Googlen lisäksi muut hakukoneet eivät kykene suorittamaan JavaScriptia tarpeeksi hyvin. Ainoa mahdollisuus indeksoitua näiden hakukoneiden tietokantoihin on tehdä isomorfinen SPA-sovellus, joka takaa hakukoneoptimoi-tavuutensa lisäksi myös parhaan käytettävyyden SPA-tekniikoin. Selainrenderoinnin pettä-essä sovellus perääntyy palvelinrenderointiin.

Search engines were originally built to understand only websites that use server-side rendering. Single page applications (SPA) have gathered plenty of attention due to providing a fluid user experience with their efficient usability and lightweight structure. SPA technology uses JavaScript to create views in the browser, which is called client-side rendering. Because of client-side rendering, the ability of search engines to find, crawl and index SPAs has been questioned. The goal of the research was to find out if it is possible to index SPAs into Google’s database as they are, or does the application need server-side rendering alongside client-side rendering. This thesis was carried out as a development research, as the research aims to improve Solteq’s knowledge about the search engine optimization of SPAs. The ReactJS test application created as a part of this research was able to index fully into Google as long as Google’s indexing criteria were taken into consideration. Two ReactJS applications were produced as a part of this thesis: a regular one as well as an isomorphic application that uses server-side rendering alongside the traditional client-side rendering. Building an isomorphic structure was researched in this thesis. The research resulted in the discovery that other search engines besides Google were not able to execute JavaScript properly. The only possibility to index SPA in their databases was to use an isomorphic application structure that ensures not only its ability to render content for all search engines to be able to reach it but it also gives the best user experience with SPA’s client-side rendering.