Tekninen hakukoneoptimointi on prosessi, jolla varmistetaan, että web-sivusto täyttää modernien hakukoneiden tekniset vaatimukset. Tärkeitä teknisen hakukoneoptimoinnin elementtejä ovat selaaminen, indeksointi, renderöinti ja web-sivuston arkkitehtuuri.

Teknisen hakukoneoptimoinnin perusteet

Miksi tekninen hakukoneoptimointi on tärkeää?

Vaikka web-sivustolla on paras sisältö, eivät Google ja muut hakukoneet arvosta sisältösivua, jos tekninen hakukoneoptimointi on huonosti tehty. Googlen ja muiden hakukoneiden on kyettävä etsimään, indeksoimaan, ja hahmottamaan web-sivuston sisältö. Mutta se on vain jäävuoren huippu. Vaikka Google indeksoisi kaiken sivuston sisällön, se ei tarkoita, että työ on kokonaan tehty. Tämä johtuu siitä, että optimointiin liittyy lukuisia asioita. Sivuston pitää toimia myös kännykällä, ei saa olla päällekkäistä sisältöä ja sivujen pitää latautua nopeasti jne. Hakukoneoptimoinnin auditoinnilla selvitetään kuinka hyvässä kunnossa web-sivusto on.

Kuinka voidaan parantaa teknistä hakukoneoptimointia?

Tekninen hakukoneoptimointi ei ole vain indeksointia, vaan siihen liittyy paljon asioita:

• Javascript
• XML-sivukartta
• SSL-sertifikaatti
• Sivuston arkkitehtuuri
• URL-rakenne
• Microdata
• Ohut sisältö
• Päällekkäinen sisältö
• Hreflang
• Kanoniset tunnisteet
• 404 sivua ei löydy
• 301 uudelleenohjaus

Sivuston rakenne ja navigointi

Sivuston rakenteen korjaaminen on jopa tärkeämpää kuin indeksointiin liittyvien ongelmien korjaaminen. Nimittäin monet indeksointiin liittyvät ongelmat johtuvat huonosti suunnitellusta web-sivuston rakenteesta. Lisäksi rakenne vaikuttaa kaikkeen optimointiin XML-sivukartoista robots.txt-tiedoston käyttämiseen.

Selkeä URL-osoiterakenne

Sivuston rakenne määrittää, miten kaikki web-sivuston sisältösivut on järjestetty. Yleensä halutaan selkeä rakenne, jossa kaikki sisältösivut ovat muutaman linkin päässä toisistaan.

Ei kannata miettiä liikaa web-sivuston URL-osoitteen rakennetta, varsinkaan pienissä sivustoissa kuten blogeissa. Kun URL-osoitteet on nimitetty johdonmukaisesti, tulee kokonaisuudesta looginen. Tämä auttaa käyttäjiä ymmärtämään missä kohtaa sivua he ovat.

Murupolku (breadcrumbs)

Murupolku on todella hyödyllinen hakukoneoptimoinnin kannalta. Murupolku nimittäin lisää sivuston sisäiset linkit automaattisesti sisäisiin luokkiin ja alasivuihin.

Selaus (crawling), indeksointi ja renderöinti

Hakukoneoptimoinnissa on äärimmäisen tärkeää, että hakukoneiden botit pystyvät käymään sivuston läpi ja indeksoimaan sisällön. Hyvä sisäinen linkitysrakenne varmistaa, että ne ymmärtävät sivustosi tärkeimmän sisällön.

Selauksessa hakukoneen botti skannaa jokaisen löytämänsä URL-osoitteen koodin ja sisällön.

Indeksoinnissa botti lisää vierailut sivut hakemistoon ja järjestää kaikki tiedot. Tietoja käytetään sitten mittaamaan sivun osuvuutta tiedon etsijän kyselyyn.

Kattavuus Google Search Consolessa

Kannattaa tarkistaa Google Search Consolen kattavuusraportti. Se kertoo, jos Google ei pysty indeksoimaan tai renderöimään sivuja, joita haluat indeksoida.

Robots.txt-tiedosto

• Koska kaikki sisältö ei ole arvokasta hakukoneita ajatellen, osa kannattaa sulkea hakukoneiden indekseistä robots.txt-tiedostolla.
• hakijoita ei kiusata
• omaa brändiä ei heikennetä roskatuloksilla
• Esimerkiksi sivuston sisäisen haun hakutulossivut kannattaa sulkea pois.

Noindexin käyttö

Jos halutaan, että hakukone indeksoi sivun, mutta jostain syystä halutaan se pitää poissa hakutuloksista, voidaan asia kertoa boteille metatunnisteella. Bottien sisällönkuvauskentän avulla voit myös ohjata heitä indeksoimaan sivun, mutta ei seuraamaan sivun linkkejä.

Microdata

• Microdata on standardoitu tapa tuoda lisää semantiikkaa web-sivustolle.
• Microdata on tärkeää hakukoneoptimoinnin kannalta, auttaa Googlea selvittämään sivun ja sivuston aiheita.
• Kesäkuussa 2011 Google, Bing, Yahoo ja Yandex julistivat yksimielisesti tukevansa microdataa ja julkaisivat Schema.org, jossa on microdatan ensisijainen sanasto.

Hreflang

Kansainvälisillä sivustolla hreflang-tunnisteesta on paljon hyötyä.

Sisäiset linkit syvällä sivustolla

Usein indeksointiin liittyviä ongelmia ei ole etusivulla, vaan syvällä sivustolla. Selkeä arkkitehtuuri estää ongelmien esiintymisen. On suositeltavaa, että sivuston syvin sivu on vain 3-4 klikkauksen päästä etusivulta.

Rikkinäiset sivuston sisäiset linkit

Rikkinäiset sisäiset linkit voivat vaikeuttaa Googlen bottia sivujen löytämisessä ja indeksoinnissa.

XML-sivustokartta

Sivukartat auttavat hakukoneita sisällön indeksoinnissa. Sivukartat pitää lähettää hakukoneille. Sivukartat ovat yleensä XML-formaatissa.

Sivukartan rakenne:

• loc = URI, esim. http://www.heikkikujala.fi
• lastmod = viimeksi muokattu
• changefreq = kuinka usein sisältöä päivitetään priority = tärkeys

Ohut ja päällekkäinen sisältö

Jos kirjoitetaan uniikkia sisältöä jokaiselle sivuston sisältösivulle, todennäköisesti ei tarvitse huolehtia päällekkäisestä sisällöstä. Ohut sisältö on sisältöä, jolla on vähän tai ei ollenkaan arvoa käyttäjälle. Lisäksi Google pitää ohuena sisältönä sivuja, joihin on kopioitu sisältöä alkuperäisiltä sivuilta. Hakukoneoptimoinnin auditoinnin työkaluilla voidaan tarkastaa onko sivustolla ohutta ja päällekkäistä sisältöä.

Jos sama sisältö on useilla sivustosi sivuilla, tai jopa muilla sivustoilla, voivat hakukoneet hämmentyä. Kun näillä sivuilla on sama sisältö, pitää hakukoneen päättää minkä sijoittaa korkeimmalle. Tämän seurauksena ne saattavat sijoittaa kaikki sivut, joilla on sama sisältö alhaisemmalle tasolle.

SSL

SSL-sertifikaatilla parannetaan kävijöiden yksityisyyttä pitämällä arkaluonteiset tiedot paremmin turvassa web-sivustolla. Hankkimalla sivustolle SSL-sertifikaatin, sivuston käyttäjien ja palvelimen välinen yhteys salataan. SSL parantaa myös hakukoneoptimointia, sillä Google priorisoi hakutuloksissaan turvallisia sivustoja. SSL ei kannata jättää käyttämättä rahan takia, sillä esimerkiksi Let’s Encrypt -palvelu tarjoaa ilmaisia sertifikaatteja.

Sivuston toimivuus kännykällä

Responsiivinen web-suunnittelu tarkoittaa sivuston toimivan kaikilla laitetyypeillä eli kännykällä, tabletilla ja tietokoneella. Google otti mobiili -ensin indeksoinnin käyttöön keväällä 2018. Mobiili-ensin indeksointi tarkoittaa Googlen käyttävän sivun mobiiliversiota indeksointiin ja arvostuksen antamiseen auttaakseen kännykän käyttäjiä. Tämän takia on tärkeä varmistaa sivuston toimivuus kaikilla laitetyypeillä.

Latausajat

Sivuston latausaikojen mittaamiseen on useita työkaluja. Google PageSpeed Insight antaa pisteitä kännykälle ja pc 0 – 100 sekä kertoo mitkä asiat sivussa on kunnossa ja missä on parannettavaa. Google otti kesäkuussa 2021 käyttöön Core Web Vitalsin päivityksen algoritmilleen, jotka kertovat kuinka hyvä reaalimaailman käyttäjäkokemus verkkosivulla on.

Google PageSpeed Insight

Latausaikojen optimoinnissa huomioitavat asiat:

• CSS
• JavaCript
• HTML5
• Kuvat
• Julkaisujärjestelmä
• Palvelin

CSS

Tavoitteena on sivuston sisältävän vain 1 kpl css-tiedostoa, mutta käytännössä pahimmillaan voi olla yli 30 kpl. Tämä johtuu siitä miten sivusto on kehitetty ja käyttöliitymäkirjaston valitsemisesta. Jokaista asiaa varten voi olla erillinen oma julkaisujärjestelmän laajennus, jolla on omat css- ja js-tiedostot. Ainoastaan YOOthemen kehittämässä UIkit:ssä on kaikki mahdolliset komponentit. Muut eivät sisällä, joten usein joudutaan täydentämään 3. osapuolen komponenteilla.

Critical path määrittäminen

Kun CSS-tiedostot on pakattu ja yhdistetty, kannattaa määrittää ns. critical path. Critical path tarkoittaa sivun yläosan muotoiluja, ne lisätään html:ään sisään.

JavaScript

Myös JavaScriptin osalta tavoitteena on, että olisi vain 1 kpl js-tiedosto.

• Kutsu JavaScript-tiedostoon kannattaa laittaa ihan body-osan loppuun.
• JavaScriptin latautumiseen voi vaikuttaa defer ja async -tekniikoilla.
  • Defer kertoo web-selaimelle, että sen pitäisi jatkaa työskentelyä sivun kanssa, ladata skripti taustalla ja suorittaa skripti sitten, kun sitä ladataan.
  • Async tarkoittaa, että skripti on täysin riippumaton eli sivun sisältö käsitellään ja näytetään huomioimatta async käyttävää skriptiä.
  • Jos käytetään deferiä, sivu näkyy ennen kuin skripti on latautunut.
  • Deferiä kannattaa käyttää skripteihin, jotka tarvitsevat koko DOM (Document Object Mode) ja / tai niiden suhteellinen suorittamisen järjestys on tärkeää.
  • Asynciä kannattaa käyttää riippumattomiin skripteihin, kuten laskureihin tai mainoksiin, joiden suorittamisen järjestys ei ole tärkeää.

Web-fonttien integroiminen julkaisujärjestelmän teemaan

Web-fontit kannattaa integroida julkaisujärjestelmän teemaan https://google-webfonts-helper.herokuapp.com/ fonts , jotta olisi vähemmän DNS-hakuja (loopup).

Kuvat

Kuvien optimointi

• Kuvien hakukoneoptimoinnin lisäksi niitä kannattaa optimoida myös latausaikojen kannalta.
• Kuvat kannattaa jakaa seuraavan sukupolven muodoissa kuten WebP, jotka pakkaavat kuvat pienempään tilaan kuin jpg- ja png-kuvaformaatit.
• WebP on bittikarttakuvien tiedostomuoto, jossa voidaan käyttää häviöllistä ja häviötöntä pakkausta.
• WebP syntyi vuonna 2010 Googlen VP8-videoformaatin sivutuotteena ja julkaistiin avoimena formaattina vuonna 2010.
• Kuvia voi optimoida siihen erikoistuneella palvelulla kuten Tinypng.com

Kuvien lazy loading -tekniikka

• Poissa näkyvistä olevat ja piilotetut kuvat kannattaa ladata vasta kun kaikki kriittiset resurssit on ladattu.
• Normaalisti sivu latautuu vasta kun kaikki resurssit on ladattu, joka ei ole latausaikojen kannalta optimaalista.
• Ratkaisu on kuvien lazy loading -tekniikka: kuva ladataan vasta kun sen pitäisi näkyä näytöllä.
• Lazy loading -tekniikkaa voi toteuttaa useilla eri tavoilla.
• Chrome-selaimen versioon 76 tuli tuki sisään rakennetulle lazy loading-ominaisuudelle.
• lazySizes (https://github.com/aFarkas/lazysizes/blob/gh- pages/README.md) on ehkä paras lazy loading -tekniikka, koska siinä voi käyttää myös Webp-kuvaformaatissa olevia kuvia.

HTML5

HTML5 preload

HTML5 preload:n avulla voidaan ladata resurssit varhaisessa vaiheessa head-osassa niin, että resurssit eivät estä renderöintiä.

Käytännössä web-selaimelle annetaan ohje suorittaa alustava lataus, jotta ei jouduta odottamaan resurssin latautumista.

HTML5 preload voidaan käyttää

• CSS
• JavaScript
• web-fontit

HTML5 prefetching DNS

HTML5 DNS prefethcing -tekniikalla ilmoitetaan web-selaimelle, että pitää hakea resursseja toisesta verkkotunnuksesta. Haettavia resursseja ovat esim.

• Google Tag Manager
• Google Analytics

Julkaisujärjestelmät

• Staattisten web-sivustojen generaattorit kuten Hugo tai Jekyll ovat parhaita latausaikojen kannalta, koska sisältö on valmiina optimaalisessa muodossa eli html-tiedostoina.
• Toiseksi parhaita ovat tiedostopohjaiset julkaisujärjestelmät kuten Grav.
• Huonoimpia ovat tietokantoja käyttävät julkaisujärjestelmät kuten Drupal, Joomla tai WordPress.
• Latausaikojen kannalta tyypillisesti pahin pullonkaula julkaisujärjestelmissä on tietokantayhteys, jonka takia kannattaa hyödyntää julkaisujärjestelmän välimuistia (dataa ei tarvitse hakea tietokannasta).

Serveri

Laitteisto

Palvelimen tyyppejä:

• Dedikoitu eli yksittäinen fyysinen palvelin
• Virtuaalipalvelin eli pilven tai yksittäisen palvelimen resursseista tietty osa on varattu on tietylle käyttäjälle.
• Pilvi / klusteroitu tarkoittaa käytännössä sitä, että tietty määrä fyysisiä palvelimia kytketään yhteen, jolloin on tehokkaampi kokonaisuus, joka on samalla vikasietoinen.
• Web-hotelli tarkoittaa, että yksittäiselle käyttäjälle on varattu tietty määrä resursseja. Perinteisesti esim. levytilaa ja siirtokapasiteettia, mutta nykyään jotkin palveluntarjoajat takaavat prosessoritehoakin.

Perinteisessä web-hotellissa on riski, että on liikaa käyttäjiä suhteessa resursseihin. Esimerkiksi sivusto X toimii hitaasti, koska samalla palvelimella sijaitseva sivusto Y on voimakkaan kuormituksen alaisena. Moderneissa web-hotelleissa, joissa on varattu käyttäjälle tietty määrä prosessoritehoa, ainoa negatiivinen asia verrattuna virtuaalipalvelimeen on tyytyminen asennettuihin ohjelmistoihin. Eli esimerkiksi PHP-ohjelmointikielestä on versio x tuettu, vaikka tarvittaisiin uudempi, ei voida mitään. Riippumatta minkä tyyppiseen palvelimeen päädytään, kannattaa valita massamuistiksi ssd, joka on paljon nopeampi kuin perinteinen kovalevy.

Ohjelmistot

Palvelinohjelmistot: Apache vs Nginx

• Valinta Apachen ja Nginx välillä voidaan tehdä palvelintyypin skaalautuvuuden perusteella.
• Jos käytössä on virtualipalvelin ja halutaan mahdollisimman skaalautuva, kannattaa valita Nginx.
• Jos käytössä on web-hotelli ja halutaan mahdollisuus käyttää .htaccess-tiedostoa, kannattaa valita Apache.
• Jos ei haluta tehdä valintaa Apachen ja Nginxin välillä, on mahdollista käyttää molempien yhdistelmää.
  • Kumpaakin voidaan käyttää välityspalvelimena, mutta tyypillisesti Nginx toimii Apachen edessä käänteispalvelimena, jolloin Nginx vastaa staattisesta sisällöstä kuten kuvista ja Apache dynaamisesta eli esim php:stä.

Gzip vs Brotli

• Gzip on pakkausalgoritmi, jolla pakataan tiedostot pienemmäksi nopeaan siirtoon tietoverkoissa sekä se on lisäksi tiedostoformaatti.
• Brotli on pakkausalgoritmi, jonka on kehittänyt Google.
• Gzip vs Brotli
  • JavaScript-tiedostot Brotlilla pakattuna ovat 14% pienempiä kuin Gzipillä.
  • HTML-tiedostot ovat Brotlinilla pakattuna 21% pienemmät kuin Gzipillä.
  • CSS-tiedostot ovat Brotlinilla pakattuna 17% pienemmät kuin Gzipillä.