Hakukoneoptimointi (SEO) ja web-komponentit (Web Components)

Hakukoneet ovat yhä tärkein yksittäinen liikenteen lähde suurimmalle osalle verkkosivuja. Vaikka Facebook ja muut sosiaalisen median palvelut ovat kasvattaneet merkitystään ja maksettu hakukonemarkkinointi on yhä suositumpaa, on yhä tärkeää olla orgaanisten hakutulosten kärjessä.

Miten varmistaa hyvä näkyvyys hakutuloksissa kun selainteknologia ottaa harppauksia ja vanhat totuudet ovat uhattuna esimerkiksi Web Components -teknologian suunnalta?

Tähän sisältöön liitetty metadata (tietoa tiedosta) on tärkeässä asemassa ja esimerkiksi Facebookin suosittelema Open Graph (OG), JSON-LD (JSON Linked Data) ja Schema.org ovat olleet verkkopalveluiden kehittäjien peruskauraa jo vuosia. Näiden huomiotta jättäminen on ammattitaidon puutetta.

Tämä metadata on kuitenkin ollut yhä lisätty HTML(5) kielellä merkittyyn sisältöön, joka on ytimeltään pysynyt muuttumattomana jo yli kaksi vuosikymmentä; HTML-kielessa on määritelty tietyt "tagit", joita selaimet on rakennettu ymmärtämään.

Web-komponentit ovat ennennäkemätön haaste hakukoneoptimoinnille

Vaikka itse HTML-kieli on staattinen, verkkosivustot ovat jo pitkään olleet pääsääntöisesti dynaamisesti tuotettuja. Hakukoneille ei ole ollut sinänsä mitään merkitystä onko sivusto tuotettu vaikkapa Javalla tai PHP:llä. Millä tahansa julkaisujärjestelmällä voi tuottaa hyvin tai huonosti hakukoneptimoituja sivustoja.

Viime vuosina suosioon nousseet JavaScript kirjastot kuten Angular ja React tukevat myös palvelimella renderöintiä. Tässä suhteessa ne eivät siis ole (oikein tehtynä) muuttaneet mitään hakukoneoptimoinnin suhteen, sillä ne tuottavat sitä samaa vanhan kansan HTML:ää kuin vaikkapa WordPress, Drupal tai Kotisivukone.

Suosiotaan kasvattavat web-komponentit ovat luonteeltaan erilaisia ja luovat uuden haasteen hakukoneoptimoijille. Ne toimivat selaimessa "natiivisti", eli ne laajentavat selaimen ymmärtämää HTML-tägien kirjastoa. Tavallaan web-kehittäjät, mattimeikäläiset, pääsevät samalle linjalle HTML-kielen ja selainten kehittäjien kanssa.

Haasteena hakukoneoptimoinnille tästä tulee se, että vaikka selaimet näitä web-komponentteja tukevatkin yhä laajemmin, niin hakukoneiden robottien tuki niille on yhä puutteellista. Web-komponenteilla on siis tällä hetkellä todella helppo kirjoittaa verkkosivusto- tai -sovellus, jonka sisältö jää yksinkertaisesti näkemättä hakukoneilta.

Google: Käytä Polyfill-tekniikkaa ja tarjoa kaikki sisältö myös JSON-LD -muodossa

Kestää vuosia ennenkuin yleiset selaimet kuten Google Chrome, Mozilla Firefox ja Microsoft Edge ja hakukoneiden robotit tukevat web-komponentteja täysin. Tilanne ei ole sinänsä uusi ja aiemminkin selainten ominaisuuksien puutteita pyöreistä kulmista läpinäkyviin kuviin on paikattu niin sanotuilla polyfilleillä.

Polyfillit paikkaavat selainten puuttuvat ominaisuudet JavaScript-kielellä tai muilla jipoilla. Aiemmin ne on suunnattu lähinnä "normaaleja selaimia" kuten tietokoneita, tabletteja ja älypuhelimia varten, mutta web-komponenttien myötä niistä tulee merkittäviä myös hakukoneoptimoinnin työkaluna. Aiemmin polyfillejä on käytetty lähinnä kosmetiikkaan, mutta nyt ne nousevat merkittävämpään osaan.

Google on kehittänyt Polymer-kirjaston, joka mahdollistaa web-komponenttien kehittämiseen ja käyttöön ottoon ennenkuin selaimet tukevat standardia täysipainoisesti. Syksyllä 2016 järjestetyssä Polymer Summit tapahtumassa Googlen kehittäjät kertoivat, että heidän kehittämänsä toimii hyvin myös Googlen hakurobotin, Googlebotin kanssa.

Toinen tapa varmistaa että sivusto on hakukonerobottien saatavissa on upottaa se sivulle JSON-LD -muodossa. Google suosittelee kehittäjäblogissaan että kaikki sisältö tulee upottaa sivustolle myös JSON-LD -muodossa, joka tarkoittaa että hakukone robotti pystyy lukemaan sen vaikka ei ymmärtäisikään kirjoittamaasi web-komponenttia. Tätä kautta sisältösi päätyy luonnollisesti Googlen hakuindeksiin.

Yllämainittu JSON-LD on hyvä vaihtoehto, mutta on huomattava että se vaatii erikseen hakukonerobottien huomioinnin. Tämän takia se on riskialttiimpaa unohtaa sivustoa rakennettaessa ja etenkin sitä ylläpitäessä. Selaimille suunnatut taas varmistavat näkymisen sekä perinteisille selaimille, että hakukoneroboteille.

Web-komponenttien ja hakukoneoptimoinnin suhteen onkin siis järkevää, että käytetyt Polyfill-kirjastot, kuten Polymer tai Skate.js pidetään sivustolla pitkään senkin jälkeen kun selaimet eivät niitä enää kaipaa.

-- Jani Tarvainen, 28/11/2016