HTML

HTML-KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

Kuinka optimoida HTML-dokumentin head-osio

HTML-dokumentin ylätunniste eli head-osio sisältää metatietoa ja asetuksia, jotka vaikuttavat siihen, miten selain käsittelee ja esittää verkkosivun. Vaikka nämä tiedot eivät näy selaimen näytöllä (nk. viewport-alue), ne ovat tärkeitä esimerkiksi sivun ulkoasun, toimivuuden ja hakukonenäkyvyyden kannalta.

Head-osion minimirakenne on: 


<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sivun otsikko</title> 
</head>

Merkistön määrittäminen meta charset:n avulla

Ensimmäinen meta-komento, meta charset="UTF-8, määrittää HTML-tiedoston merkistökoodauksen. Hyvänä käytäntönä on sijoittaa merkistötieto head-osion ensimmäiselle riville. Selain tarvitsee merkistötiedon sisällön esittämistä (renderöintiä) varten, ja sen sijoittaminen mahdollisimman ylös lähdekoodissa nopeuttaa sivun renderöintiä hieman.

Mobiiliystävälliset sivut meta name="viewport:n avulla

Toinen meta-komento, meta name="viewport" on kriittinen tekijä, jotta sivusto toimii odotetusti eri laitteilla ja näyttökoolla. Komento määrittää kuinka kuinka sivu skaalautuu, ja kuinka selaimen tulisi käsitellä mittayksiköitä (nk. laitepikselit). Tämä mahdollistaa mobiiliystävällisten verkkosivujen rakentamisen.

title-elementti on hakukoneoptimoinnin ytimessä

Viimeinen pakollinen asia head-osiossa on title-elementti. Sen avulla määritellään koko dokumentin otsikko, joka näkyy selaimen otsikkorivillä/välilehden otsikossa. Erityisen suuri merkitys title-elementin sisällöllä on hakukoneoptimoinnin kannalta, sillä se muodostaa hakukoneiden tuloksissa näkyvän linkkitekstin sivustolle.

Vältä saman otsikon toistamista useissa eri sivuilla, sillä se voi heikentää sivuston hakukonenäkyvyyttä ja käyttäjäkokemusta. Otsikon pituudelle ei ole varsinaista ylärajaa, mutta koska hakukoneet esittävät vain 50-60 ensimmäistä merkkiä, otsikon pituus yritetään yleensä rajata tähän. Vaikka otsikko voi olla pidempi, näiden ensimmäisten merkkien tulisi olla informatiivisia ja houkuttelevia käyttäjän huomion herättämiseksi.

Elementtien järjestyksellä on väliä

Selain lukee ja tulkitsee head-osion sisällön nk. FIFO-järjestyksessä. Tämä tarkoittaa, että järjestys missä asiat esitellään head-osiossa määrittelee järjestyksen, jossa selain aloittaa niiden prosessoinnin. Tästä syystä edellä mainitut kolme rakennetta tulisi pyrkiä esittelemään välittömästi head-osion aloituksen jälkeen.

Muita hyödyllisiä elementtejä head-osiossa

Edellä esitellyt kolme tagia muodostavat head-osion pakollisen minimirakenteen. HTML tarjoaa useita lisärakenteita, joiden lisäämistä head-osioon kannattaa harkita. Alla joitakin keskeisimpiä:

Link-elementin avulla ohjataan ulkoisten resurssien käytöstä

Link-elementin avulla voidaan ohjeistaa kuinka selaimen tulisi käsitellä ja hakea ulkoisia resursseja. Tämä prosessi sisältää resurssin sijainnin (URL) määrittämisen sekä mahdollisesti lisätietojen, kuten resurssin tyypin ja prioriteetin, ilmoittamisen. Oikein käytettynä link-elementti voi parantaa sivun suorituskykyä, käytettävyyttä ja hakukonenäkyvyyttä. Esimerkiksi CSS-tyylitiedostojen linkitys voidaan ohjata tapahtumaan ennen kuin selain renderöi sivun rakennetta, mikä estää välkkymistä ja antaa sivusta siistimmän, ammattimaisen vaikutelman..


<!-- Etsii etukäteen verkkotunnuksen IP-osoitteen – nopeuttaa resurssin hakua >
<link rel="dns-prefetch" href="//images.2kmediat.com" />

<!-- Muodostaa yhteyden selaimen ja palvelimen välille ennen kuin resurssia tarvitaan >
<link rel="preconnect" href="//images.2kmediat.com" />

<!-- Lataa resurssin (esim. CSS, fontti, kuva) ennen kuin selain sitä varsinaisesti tarvitsee >
<link rel="preload" href="/tyylit/artikkelit.css" as="style" />

Hakukonenäkyvyyden kannalta keskeinen käyttösovellus on nk. canonical-osoitteen määrittäminen. Canonical määrittää verkkosivun "virallisen URL-osoitteen" hakukoneille. Tämä on erityisen hyödyllistä silloin, kun verkkosivustolla on useita URL-osoitteita, jotka johtavat samaan sisältöön – kyselymerkkijonot ja https/http-versiot sivustosta ovat yleisiä tilanteita. Käyttämällä kanonista osoitetta varmistat, että hakukoneet indeksoivat ja priorisoivat yhden, pääasiallisen version verkkosivustasi. Tämä auttaa välttämään duplikaattisisällön aiheuttamia ongelmia ja parantaa hakukonenäkyvyyttä. 


< link rel="canonical" href="https://www.2kmediat.com/xhtml/head.asp" />

Visuaalisuuden ja käytettävyyden parantamiseksi on suositeltavaa määritellä sivustolle fav-kuvake. Fav-kuvake, eli favicon, on pieni ikonikuva, joka näkyy selaimen välilehdellä, kirjanmerkeissä ja mobiililaitteiden kotinäkymissä. Sen avulla voidaan parantaa sivuston tunnistettavuutta ja vahvistaa brändi-identiteettiä. Eri laitteet ja selaimet saattavat vaatia eri kokoisia kuvatiedostoja, joten on hyvä suunnitella favicon-sarja, joka kattaa suositeltavia kokoja kuten 16x16 pikseliä, 32x32 pikseliä, ja 180x180 pikseliä. Varmista, että kuvat ovat selkeitä ja skaalautuvat hyvin eri kokoisille näytöille. 


<link rel="icon" href="/favicon.ico">         
<link rel="apple-touch-icon" href="/favicon-180.png" />

Tyylien määrittäminen HTML-dokumentissa

CSS eli Cascading Style Sheets on teknologia, jonka avulla määritellään verkkosivujen ulkoasu: fontit, värit, asettelut, marginaalit, animaatiot ja paljon muuta. Vaikka HTML huolehtii sivun sisällöstä, CSS vastaa siitä, että sisältö on visuaalisesti houkuttelevaa ja käyttäjäystävällistä.

Tyylit voidaan liittää HTML-dokumenttiin useilla eri tavoilla, joista yleisimmät ovat rivinsisäiset ja ulkoiset tyylit.

Rivinsisäinen tyyli luodaan: 


<style>
/* tyylit määritellään tässä */
<style>

Ulkoinen tyylitiedosto otetaan käyttöön viittaamalla siihenlink-elementin avulla. 


<link rel="stylesheet" href="/tyylit/artikkelit.css">

Vaikka nämä kaksi menetelmää johtavat teoreettisesti samaan lopputulokseen, niiden suorituskyvyssä on merkittävä ero:

Suorituskyvyn kannalta rivinsisäinen tyyli tarjoaa tiettyjä etuja. Toisaalta työskentelyn hallinnan kannalta ulkoiset tyylitiedostot ovat selkeämpi ratkaisu. Lisäksi ulkoisten tyylitiedostojen latausnopeutta on mahdollista optimoida käyttäen aiemmin esiteltyä preload-menetelmää.

Skriptin liittäminen

JavaScript-koodin liittäminen osaksi HTML-tiedostoa tapahtuu script-elementin avulla. Kuten CSS:n tapauksessa, myös skriptin voi liittää rivinsisäisesti tai linkitettynä.

Rivinsisäinen skripti määritellään <script>-elementin sisälle, yleensä suoraan HTML-tiedoston head- tai body-osioon: 


<script>
// js-koodi tulee tänne
</script>

Myös linkitettyjä skripti määritellään script-elementin avulla Tällöin src-attribuutti ilmaisee skriptitiedoston sijainnin. Suorituskyvyn kannalta tulisi huomioida, että ulkoisen skriptin lataaminen ja suoritus head-osiossa voi hidastaa sivun renderöintiä ja heikentää Googlen PageSpeed Insights-tulosta. Tätä oletuskäytöstä voi muokata käyttämällä defer (suorita kun DOM valmis) tai async (suorita heti) attribuutteja.


<script src="script.js" defer></script>

Meta-tietojen hallinta

Meta-komennot muodostavat head-osion hajanaisimman ryhmän. Erilaisia meta-komentojen yhdistelmiä on olemassa satoja. Seuraavassa esimerkkikoodissa hyödynnetään muutamia yleisimpiä meta-komentoja: 


<!-- Hakukoneiden ohjeistamiseen -->
<meta name='robots' content='index, nofollow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
<meta name="description" content="Lyhyt kuvaus sivusta.">

<!-- Sosiaalisen median palveluiden ohjeistamiseen -- >
<meta property="og:title" content="Artikkelin otsikko facebookissa" />
<meta name="twitter:title" content="Artikkelin otsikko Twitterissä" />

Meta-elementtien vaikutus sivun renderöintiin ja esittämiseen on yleisesti ottaen vähäinen. Poikkeuksen tähän muodostaa tämän oppaan alussa esitellyt charset- ja viewport-metat. Näitä kahta lukuunottamatta meta-komennot tulisi pyrkiä sijoittamaan head-osion loppuun.

Artikkelin tiedot

Otsikko: HTML:n head-osion optimointi: nopeampi sivusto ja parempi SEO

Kuvaus: Tutustu, miten HTML-dokumentin head-osio vaikuttaa sivun latausnopeuteen ja hakukonenäkyvyyteen. Opit optimoimaan rakenteen suorituskyvyn ja käytettävyyden parantamiseksi.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: