Yhä useampi sivusto käyttää käyttöliittymän luomisessa JavaScriptiä tai jotain modernia JavaScript-kirjastoa kuten React, Vue tai Angular.
Kaikki nämä teknologiat ovat hienoja ja SEO-tekijänä rohkaisen devaajia aina käyttämään työhön kaikkein sopivimpia työkaluja, niin kauan kunhan tietyt internetin lainalaisuudet huomioidaan.
Yksi näistä lainalaisuuksista on historiallisesti ollut se, että hakukonerobotit eivät seuraa JavaScriptillä generoituja linkkejä. On tiedossa, että Google pystyy renderöimään JavaScriptiä ja siten heillä on mahdollisuus löytää JavaScript-linkit.
Mutta kyky tehdä jotain on eri asia kuin halu tehdä asiaa.
Eli kysymys kuuluukin, pystyykö ja haluaako Google indeksoida sisältöjä, jotka ovat JS-generoitujen linkkien takana?
Miksi JavaScript-pohjaiset linkit ovat haaste hakukoneille?
Suurin osa osaavista SEO-konsulteista ja -tekijöistä on jo vuosia toistanut devaajille mantraa ”jos jotain ei esiinny DOMissa/lähdekoodissa, Google ei sitä huomaa”.
JS-linkit ovat hakukoneille haasteellisia, sillä hakukonerobotit eivät klikkaile mitään elementtejä vaan niiden toimintatapa pohjautuu täysin koodiin, jota ne voivat tulkita.
Käytännössä tämä tarkoittaa sivun lähdekoodia tai sitä koodia, minkä ne pystyvät itse renderöimään. On hyvä muistaa, että Googlen hakuprosessissa sisältöjen löytäminen ja niiden tulkitseminen tapahtuvat eri vaiheissa, ei yhtä aikaa.
Eli vaikka Google pystyy renderöimään JavaScriptiä, lisää sen renderöiminen aina tehottomuutta. Voit oppia lisää SEOn ja modernin JavaScriptin yhteispelistä täältä Slidesharesta.
Etenkin sivustot, joilla on JavaScript-pohjainen front end nojautuu usein JavaScriptillä generoituihin linkkeihin, joita ei ole renderöity serverin päässä valmiiksi. Täten niitä ei siis löydy sivuston lähdekoodista.
Jos Google ei löydä näitä linkkejä tai tunnista niitä linkeiksi, ei hakukone voi löytää linkitettyjä sisältöjä sivustolta ellei niitä ole sivustokartoissa. Mutta vaikka sisällöt voidaan saada sivustokartoilla Googlen indeksiin, se ei kuitenkaan tarkoita, että Google pystyisi ymmärtämään sivuston hierarkian pelkkien yksittäisten sivujen avulla.
Tutkimusmetodi
Päätimme pistää OIKIOn SEO Labseissa testiin, että löytääkö ja seuraako Google JS-generoituja linkkejä.
Testissä luotiin 4 sivua, joista yksi toimi testin pääsivuna. Pääsivulle lisättiin 3 linkkiä:
- Linkki, joka osoittaa sivulle normaalilla <a href=””> -linkillä.
- Linkki, joka generoidaan sivulatauksen yhteydessä JavaScriptillä <a>-tagina.
- Normaali tekstipätkä, joka muutetaan JavaScriptillä linkiksi klikin yhteydessä.
Käytännössä sivu näytti tältä kävijän selaimessa:
Testin pääsivua eikä linkkien kohdesivuja ei lisätty sivustokarttaan eikä niihin linkitetty mistään muualta kuin testin pääsivulta. Tällöin kohdesivuille pystyi löytämään vain testin pääsivun kautta. Kaikki testin sivut olivat hakukonerobottien indeksoitavissa.
Tuloksien varmentamiseen käytettiin kahta pääasiallista tapaa:
- Katsottiin serverilogeista, että onko Google käynyt sivuilla.
- Tutkitaan hakutuloksista, että löytyykö testin pääsivun lisäksi kaikki 3 kohdesivua Googlen indeksistä.
Myöhemmin on ollut myös mahdollista testata Googlen fetch & render -työkalulla miten Google tulkitsee sivuja. Tämän lisäksi ollaan käytetty myös Google Search Consolesta löytyvää URL Inspection -työkalua tutkimaan mitä Google sivulta löytää.
Testin tulokset: JS-generoidut linkit saattavat toimia
Olin yllättynyt näistä tuloksista, sillä odotin testin osoittavan selkeästi, että JS-generoituja linkkejä ei seurata. Tämä olikin tilanne kauan, sillä ensimmäisten viikkojen aikana hakutuloksista löytyi vain testin pääsivu sekä normaalin <a>-linkin takana oleva sivu.
Kuitenkin tänään tätä artikkelia kirjoittaessa huomasin, että myös JS-generoitua linkkiä oli seurattu ja kohdesivu löytyi Googlen hakutuloksista:
Tämän lisäksi Google on myös indeksoinut normaalin <a>-linkin takana olevan sisällön. Kohdesivu, jolle osoittaa klikistä generoitava JS-linkki ei kuitenkaan ole Googlen hakutuloksissa.
Eli voin käyttää JS-generoituja linkkejä huoletta?
Vaikka Google tässä testissä pystyikin seuraamaan JS-generoitua linkkiä, en suosittelisi kenenkään nojaavan pelkkiin JS-generoituihin linkkeihin esimerkiksi navigaatiossa tai murupoluissa.
Tämä johtuu siitä, että kuten yllä kuvasin, Googlen robottien prosessissa sisältöjen löytäminen ja niiden tulkitseminen tapahtuu eri aikaan. Eli vaikka Googlen robotti löytää sivuja, ne renderöidään ja tulkitaan myöhemmin. Näin ollen Googlen crawler eli Googlebot ei pysty lähettämään kerralla kaikkia sivuja indeksoijalle eli Caffeinelle tulkittavaksi.
Olen nähnyt useita kertoja JavaScript-pohjaisten linkkien epävakauden ja tehottomuuden SEOn suhteen. Esimerkiksi yhdellä asiakkaallamme osa tuotelistauksista on piilossa niiden JS-toteutustavan takia. Ja toisella asiakkaallamme oli ongelma juuri JS-generoitujen murupolkulinkkien vuoksi eikä Google pystynyt tulkitsemaan murupolkuja säännöllisesti linkeiksi.
Jos testissä käytettyä pääsivua tutkii Google Search Consolen URL-inspection-työkalulla, voidaan huomata Googlen tällä hetkellä tunnistavan linkin:
Tässä kannattaa pitää mielessä muutama asia:
- Kyseessä on normaali vanilla JavaScript, eikä linkin generoimiseen ole käytetty esimerkiksi Reactia tai Vue.js:ää
- Linkki generoidaan ilman mitään käyttäjä-interaktiota
- Linkki lisätään ihan normaalina <a>-tagina
Suosittelen edelleenkin, että mahdollisimman paljon JS-generoitua sisältöä renderöidään serverin päässä käyttäjille ja roboteille, jotta sivut ovat helpommin tulkittavia myös vanhemmilla laitteilla. JavaScriptin tulkitseminen kun vaatii paljon tehoja ja hidastaa käyttökokemusta enemmän kuin vaikka saman painoiset kuvat.
Joka tapauksessa asiaa kannattaa pitää silmällä, sillä tilanne voi muuttua jo lähitulevaisuudessa.
Koska testin tulos oli niin mielenkiintoinen, avaa se ovet useille jatkotesteille kuten:
- Toimiiko tämä samalla tavalla jos olisi käytetty vaikka Reactia tai Angularia?
- Näkeekö Google säännöllisesti linkin samalla tavalla vai vaihteleeko sivun tulkinta?
- Miten käy jos linkin generoi käyttämättä <a>-tagia?
Testit jatkukoon.
