Edellisessä Headup-aiheisessa kirjoituksessa oltiin vielä Headless-huumassa. Huumasta on siirrytty toimeen ja tuotekehitystä on viety eteenpäin satoja tunteja. Tässä kirjoituksessa käyn hieman läpi käytännön asiakasprojekteissa vastaan tulleita haasteita ja niihin tehtyjä ratkaisuja.
Hakukoneoptimointi
Jo aikaisemmassa kirjoituksessa käsiteltiin pre-renderingiä, jonka avulla varmistetaan, että ilman javascriptiä toimiville hakukoneille näytetään riittävä sisältö hakukonenäkyvyyden turvaamiseksi.
Arjen hakukoneoptimointityötä on helpotettu rakentamalla tuki The SEO Framework -lisäosalle (sori, Yoast), jonka avulla ylläpitäjät voivat syöttää metaotsikoita ja metakuvauksia samaan tapaan kuin perinteisellä verkkosivustolla. Lisäosan avulla voidaan asettaa myös Twitterin ja Facebookin somejakokuvat normaaliin tapaan ja säätää sivukohtaisesti Meta-Robots -arvoa.
Headup tuottaa hakukoneille tarkoitetun XML-sivukartan perusominaisuutena ja tukee WordPressin robots.txt-tiedostoa.
Uudelleenohjaukset
Miten uudelleenohjaukset toimivat, kun taustalla ei ole perinteistä palvelinta käsittelemässä pyyntöjä? Uudelleenohjausten tekeminen sivustouudistusten yhteydessä on erittäin tärkeää, jotta säilytetään saavutettu hakukonenäkyvyys ja vältetään 404-linkit. Uudelleenohjausten osalta ratkaisutapa riippuu käytetystä hosting-ympäristöstä.
Mikäli julkinen sivusto sijoitetaan esimerkiksi Netlify:hin, voidaan käyttää palvelun tarjoamaa _redirects -tiedostoa. AWS-ympäristöön olemme rakentaneet Lambda@Edge -ratkaisun. Molemmissa tapauksissa ylläpitäjät voivat tehdä uudelleenohjauksia WordPressin ylläpidosta.
Multisite
Perinteisen WordPressin yksi vahvuuksista on useamman sivuston ylläpitäminen samalla järjestelmällä ja tämä ominaisuus on toteutettu totta kai myös Headupiin. Yhden sisällöntuotantoympäristön avulla voidaan toteuttaa useita omalla domainilla toimivia staattisia React-sivustoja.
Kieliversiointi
Headup-sivustojen kieliversiointi on ratkaistu tekemällä WPGraphQL-tuki suositulle Polylang-lisäosalle. Kieliversiointituki tukee myös url-osoitteiden kääntämistä. Tässäkin tapauksessa sisällöntuottajan käyttökokemus on pidetty mahdollisimman tuttuna ja turvallisena.
Haku
Headup-sivustolla voidaan käyttää hakuratkaisua, joka kerää tiedot sivuston julkisesta käyttöliittymästä. Myös haun kannalta on olennaista, että lähdekoodista löytyy riittävä ”server-rendattu” osuus sisällöstä.
Omissa toteutuksissamme suosimme meille tuttua ja tehokasta Valu Search -hakua, mutta myös muiden hakupalveluiden käyttö on mahdollista.
Lomakkeet
Koska julkinen sivusto ei voi lähettää dataa julkaisujärjestelmän suuntaan, lomakkeiden toteuttamiseen on etsitty ja löydetty vaihtoehtoisia ratkaisutapoja. Esimerkiksi Jotform -tyyppisen palvelun avulla lomakkeita voidaan rakentaa yhtä joustavasti kuin ennenkin ja tarvittaessa vielä integroida niitä eteenpäin muihin taustajärjestelmiin.
Integraatiot
Sisällöntuotantoon tai käyttäjähallintaan liittyvät integraatiot toimivat samalla tavalla kuin perinteisessä WordPress-ympäristössä, koska ne tehdään sisällöntuotantoympäristöä, eikä julkista sivustoa vasten. Esimerkiksi AD-integraatio tai yhteystietojen tuonti esimerkisi ulkoisesta puhelinluettelojärjestelmästä onnistuu Headupiin yhtä vaivattomasti kuin perinteiseen WP-sivustoon.
Dynaamiset suodatusnäkymät
Dynaamisten suodatusnäkymien, kuten yhteystietohakemiston, suodatukset voidaan rakentaa joko täysin käyttäjän selaimessa ajettavalla koodilla tai hyödyntämällä esimerkiksi hakuratkaisun rajapintaa. Käyttäjän selaimessa tapahtuva suodatus toimii sujuvasti kun suodatettavia kohteita on alle 1000. Suuremmissa määrissä suodattamiseen saadaan tehoa hakuratkaisun rajapintoja hyödyntämällä.
Kustannukset
Entäpä kustannukset? Headless-sivustoihin saattaa liittyä mielikuvia korkeista toteutus- ja kehityskustannuksista, mutta käytäntö on osoittanut, että tällä hetkellä puhutaan noin 1,4-kertoimesta projektibudjetin osalta. Headup-alustan kehityksen ja käytännön projekteissa karttuvan osaamisen myötä tämäkin kerroin pienenee ajan myötä.
Kun huomioidaan pitkällä tähtäimellä skaalautuvuuden edullisuus, esimerkiksi sijoittamalla sivusto Amazonin S3:seen ja jakamalla CloudFrontin 220:n yhteyspisteen kautta hajautetusti maailmalle, kustannuserot pienentyvät entisestään.