Rakenna ja julkaise

Rakenna ja julkaise

Sisällön löydettävyyteen ja saavutettavuuteen vaikuttavat olennaisesti mm. sivun osoite, linkitykset sekä muu hakukoneoptimointi. Tämä ohje auttaa sinua luomaan selkeää, saavutettavaa ja helposti löydettävää sisältöä.

Piirretty hahmo toimittajanhattu päässä

Ymmärrä ja suunnitteleKirjoita, kuvaa ja karsi Rakenna ja julkaiseTestaa ja jatkokehitä

Uuden sivun rakentaminen

Osoitteen muodostaminen

Mitä yksinkertaisempi sivun URL-osoite on, sitä käyttäjäystävällisempi, saavutettavampi ja löydettävämpi sivu on. Oleellisin osa on sivua kuvaava osa:

https://www.hel.fi/fi/kaupunkiymparisto-ja-liikenne/pysakointi

Näin muodostat sivun osoitteen:

  1. Jos sivulla on hero-elementti, osoite muodostuu automaattisesti sen otsikko-kentästä. Jos sivulla ei ole hero-elementtiä, osoite muodostuu sivun otsikko-kentästä. Osoitetta voi muokata manuaalisesti osoitealias-kentässä.
  2. Poista erikoismerkit, kuten !, & ja ;.
  3. Korvaa välilyönnit lyhyellä viivalla, esim. hel.fi/fi/kaupunkiymparisto-ja-liikenne.
  4. Käytä ainoastaan pieniä kirjaimia.
  5. Tiivistä tarvittaessa poistamalla tarpeettomat sanat.

Huom! Hel.fi:ssä käytetään ensisijaisesti hel.fi-päätteisiä osoitteita. Kaupungilla on kuitenkin myös niin sanottuja erillissivuja, jotka ovat .helsinki tai .hel.fi -päätteisiä. Osoitteen valinnassa tulee noudattaa yhteisiä periaatteita.

Lue lisätietoja verkkotunnuksen hakemisesta ja kaupungin kanavalinjauksista Pelikirjasta.

Osoitteen hakukoneoptimointi:

Sivun osoite näkyy hakutulossivulla ja siksi osoiterivin tulisi auttaa käyttäjää hahmottamaan, mitä sivu pitää sisällään. Osoitteen tulisi olla myös merkitykseltään selkeä. Esim: https://www.hel.fi/FI/kasvatus-ja-koulutus/lukiokoulutus/kallion-lukio/

Hakusanan löytymisellä osoitteesta on pieni positiivinen vaikutus sijoitukseen hakutulossivulla, mutta siihen ei tule pyrkiä käytettävyyden tai luettavuuden kustannuksella.

Lisätietoja osoitteen hakukoneoptimoinnista löydät sisällöntuottajan SEO-ohjeistuksesta.

Selkeä URL-rakenne tuottaa selkeitä linkkejä

Selkeän osoitteen tärkeys korostuu linkkijaoissa. Esimerkiksi jotkut sosiaalisen median kanavat jakavat linkkien osoitteet sellaisenaan. Selkeä URL-rakenne auttaa käyttäjää ymmärtämään, minne hän siirtyy linkkiä klikkaamalla.

Esim: https://www.hel.fi/FI/kasvatus-ja-koulutus/lukiokoulutus/kallion-lukio/

vs. https://www.hel.fi/FI/title/746923840/?ref_ttesl_hdh_ep1

Hel.fi:n sekä erillissivustojen (.hel.fi- ja .helsinki-päätteiset sivut) osoitteet toimivat sekä ääkkösten kanssa että ilman ääkkösiä. Osoitteen ensisijainen, eli virallinen, versio on aina ääkkösetön. Ääkkösellinen versio ohjaa käyttäjän ääkkösettömään versioon.

Tarvitaan vielä ohjeistus, miten ääkkösellisiä aliaksia luodaan? Miten ohjaus tapahtuu?

Esimerkki:

Kestävä Helsinki -sivuston virallinen osoite on kestava.helsinki. Kestävä.helsinki on ohjaava osoite, joka vie käyttäjän osoitteeseen kestava.helsinki.

Suosimme ääkkösetöntä versiota, sillä ääkköset eivät ole käytössä kansainvälisesti. Näin varmistamme sivuston sujuvan käytön myös esimerkiksi ulkomailta sekä laitteilla, joiden näppäimistöissä ei ole ääkkösiä.

Lue lisätietoja ääkkösten käyttämisestä verkkotunnuksessa Traficomin-sivuilta.

Viestinnässä ja markkinoinnissa voit käyttää osoitteesta sekä ääkkösellistä että ääkkösetöntä versiota.

Esimerkkejä:

Hel.fi-sivut:

  • Lisää tietoa aiheesta löydät pysäköinnin sivulta.
  • hel.fi/pysakointi TAI hel.fi/pysäköinti

Murupolku:

  • Etusivu > Kaupunkiympäristö ja liikenne > Pysäköinti

Erillissivustot

  • Lisää tietoa aiheesta löydät Kestävä Helsinki -sivustolta.
  • kestava.helsinki TAI kestävä.helsinki

Hel.fi:ssä käytetään ensisijaisesti hel.fi-päätteisiä osoitteita. Erillissivut ovat .helsinki tai .hel.fi -päätteisiä.

Erillissivuja voi olla tarpeen luoda mm. markkinoinnillisiin tarkoituksiin. Erillissivujen sijainti hel.fi:ssä tulee miettiä tarkkaan niin, että asiakaspolku säilyy sujuvana ja käyttökokemus yhtenäisenä.

Tutustu kanavahallinnan ohjeisiin.

Kun käyttäjä siirtyy hel.fi:stä erillissivulle, on hänen hyväksyttävä evästeet. Hel.fi-päätteisten sivujen välillä liikuttaessa uutta hyväksyntää ei tarvita. Lue lisää kaupungin evästeiden hyväksymiskäytännöistä.

Otsikointi

Kaikilla sivuilla tulee olla selkeä ja sisältöä kuvaava pääotsikko, eli header (h1).​

H1 on käyttäjälle näkyvä sivun otsikko, kun taas hakukoneille näkyvä otsikko on title. H1 ja title (ks. seuraava kohta) ovat kaksi eri asiaa, vaikkakin vastaavat usein toisiaan. Sivun otsikolla ei kuitenkaan ole hakukoneiden kannalta samanlaista vaikutusta kuin titlellä (esim. se ei yleensä näy hakutuloksissa).​

Kirjoita jokaiselle uudelle asialle sivulla välitosikko (h2, h3, h4 jne.). Väliotsikoita kannattaa käyttää tiuhaan, sillä käyttäjät tyypillisesti selailevat sivustoa väliotsikoiden avulla.

Lue lisää otsikon hakukoneoptimoinnista sisällöntuottajan SEO-ohjeistuksesta.

Otsikoi sekä pää- että väliotsikot informatiivisesti

  • Kerro otsikossa, mistä on kyse, esim. “Milloin kannattaa ottaa yhteyttä sosiaali- ja potilasasiamieheen?”
  • Käytä otsikossa verbiä, joka ohjaa toimimaan, esim. “Hae lukioon”
  • Aktiivinen otsikko houkuttelee, esim. “Kun olet tyytymätön saamaasi hoitoon tai palveluun, toimi näin:”

Muista tarkistaa, että sivun otsikot ovat linjassa toistensa kanssa.

Huom! Sivun otsikon ei tarvitse vastata navigaation sanoitusta yksi yhteen. Pääotsikossa täytyy kuitenkin olla navigaatio-otsikon sanat. Navigaatio-otsikkoa voi olla tarpeen tiivistää, kun taas sivun otsikon on hyvä olla mahdollisimman kuvaava (esim. Opiskelu lukiossa > navigaatio-otsikko on pelkkä “opiskelu”).

Title

Title-tunnisteen tehtävä on kertoa käyttäjille ja hakukoneille niin tiivistetysti kuin mahdollista, mistä sivulla on kysymys.​ Hel.fi-sivun title sisältää aina kutakin sivua kuvaavan osan sekä Helsingin kaupunki -tunnisteen, joka tulee title-kenttään automaattisesti.

Title-tunniste poimitaan automaattisesti Google-hakutuloksiin ja esim. sosiaalisen median jakoihin​.

Title on yleensä sama kuin H1-otsikko, vaikka se onkin eri asia. Title näytetään hakutuloksissa ja H1 näkyy itse sivulla. Titlen ja H1-otsion yhtenäisyys on tärkeää, joten jollei ole erityistä syytä, ne kannattaa pitää samana.​

Titlen pituus on enimmillään 50-60 merkkiä, jotta näkyy kokonaan hakutuloksissa. Tähän merkkimäärään kuuluu myös titlen lopussa oleva “| Helsingin kaupunki”.​

Tärkeät kriteerit titlelle:

1. kuvailee sivun sisältöä

2. on riittävän lyhyt

3. sisältää tavoitellun hakusanan. ​

Lue lisää titlestä sisällöntuottajan SEO-ohjeistuksesta.

Metakuvaus (meta description) on sivun sisältöä kuvaava teksti, joka näkyy hakutulossivulla heti titlen alla. Teksti kirjoitetaan meta description -kenttään. Jos et kirjoita metakuvausta, hakukone hakee hakutulossivun kuvaukseen jotakin muuta tekstisisältöä sivulta.

Kuten titlen, myös metakuvauksen tulisi olla sekä hakukone- että käyttäjäystävällinen. Kuvauksessa kannattaa käyttää tyypillisiä hakusanoja, koska Google lihavoi ne hakutuloksissa.

Tee näin:

  • Mieti tekstiä googlaajan näkökulmasta – avaa tekstissä, kuinka sivusi vastaa hakijan tiedontarpeeseen (tunnista tarve esimerkiksi hakusana-analyysillä).
  • Kirjoita 120–160 merkin pituinen teksti (mobiilissa näkyy lyhyempi, desktop-versiossa pidempi). Ole ytimekäs, jotta viesti on mahdollisimman ymmärrettävä. Kesken katkeava, eli kolmeen pisteeseen päättyvä kuvaus, ei ole houkutteleva.
  • Lisää kuvaukseen hakusana. Aktiiviset verbit kuten katso, opi, lue, hae ovat usein toimivia.

Lue lisää metakuvauksesta sisällöntuottajan SEO-ohjeistuksesta.

Ingressi on sivun ensimmäinen ja samalla tärkein teksti, joten siihen kannattaa panostaa. Kerro ingressissä kaikkein olennaisin – mistä on kyse. Hel.fi:ssä ensimmäinen teksti voi löytyä jo hero-osiosta.

Ajattele samalla tavalla kuin journalistisissa ohjeissa: otsikoi informatiivisesti ja kirjoita tärkein ingressiin.

Huomioi ingressiä kirjoittaessasi, että Google poimii sisältösivuilta ensimmäisen kappaleen hakutulosyhteenvetoon (featured snippet), jos sivu on tarpeeksi hyvä ja käytettävä. (Google ei muodosta hakutuosyhteenvetoa, jos sivu ei ole sisällöllisesti tarpeeksi hyvä.) Google muodostaa ikään kuin automaattisen kysymyksen, johon se hakee vastausta hakutulosyhteenvedosta. Jos sivu siis vastaa tiettyyn kysymykseen, kannattaa teksti kirjoittaa vastauksen muotoon.

Muista testata sivuja! Voit kokeilla jo julkaistuja sivujasi incognito-tilassa.

Kirjoita leipäteksti huolella. Kerro ainoastaan olennainen – jätä rohkeasti toissijaiset asiat ja turhat täytesanat pois. Asetu sivuston käyttäjän asemaan ja hio tekstistä selkeä ja napakka. Lisäksi voit jättää poikkeuksen poikkeukset pois tekstistä, jos ne on pakko jossain ilmoittaa, voi ne lisätä linkin taakse lisätietoihin.

Verkossa tasattua leipätekstiä on vaikeaa lukea, joten käytä liehuvaa taittoa.

  • Vältä pitkiä kappaleita.
  • Älä tavuta yhdyssanoja.
  • Pidä rivin pituus maksimissaan 80 merkissä.
  • Älä käytä SUURAAKKOSIA.

Kuvat ja videot

Hel.fi-sivulla käytetään kuvituskuvia hyvin harkiten. Jos sinulla ei ole asiaan liittyvää ja informaatiota lisäävää tai selkeyttävää kuvaa, mieti kuvan käyttöä tarkkaan. Hyvä ohjenuora on, että jos et keksi kuvalle sopivaa alt-tekstiä, on kuva todennäköisesti tarpeeton.

Muista tallentaa kuva niin, että tiedoston nimestä selviää kuvan sisältö. Vaikka Drupal skaala kuvan, älä käytä liian isoa kuvaa.

Hel.fi:ssä käytettävät videot tulee aina tekstittää. Tekstitys toimii mahdollisesti verkkoplayerissä suoraan ruudunlukuohjelmassa.

Piirretty toimittaja

Kuvien ALT-tekstit

Muista kirjoittaa kuvalle alt-teksti. Tämä on tärkeää, sillä ruudunlukuohjelmat ja hakukoneet käyttävät alt-tekstiä. Alt-teksti myös korvaa kuvan silloin, kun kuva ei lataudu oikein.

Jos käytät kuvaa, jonka informaatio ei ole relevanttia ihmisille, jotka eivät näe, jätä alt-teksti kokonaan pois. Sisältömuotoilijana päätös on sinun, mutta muista tehdä se perustellusti. Jos alt-teksti on tyhjä, ruudunlukuohjelma ei kerro käyttäjälle, että sivulla ylipäätään on kuva.

Jos kuva sisältää tekstiä, täytyy se kirjoittaa myös tekstimuodossa verkkosivuille. Ruudunlukuohjelma ei lue kuvan sisältämää tekstiä.

Alt-tekstistä voit lukea lisää esimerkiksi saavutettavasti.fi-sivustolta.

Linkitys hel.fi-sivustolla

Linkitys luo sivustolle toimivan rakenteen ja parantaa sisällön löydettävyyttä. Hyvä linkki erottuu ympäröivästä tekstistä yhdellä silmäyksellä ja kuvaa tarkasti, mihin se johtaa.

Muista tarkistaa säännöllisesti, että sivuston linkit toimivat.

Linkkien saavutettavuus on keskeistä verkkosisällön saavutettavuudelle. Linkkien saavutettavuudessa pitää huomioida esimerkiksi linkkiteksti, linkin kohde, linkkien visuaalinen erottuvuus ja linkkien määrä sivulla.

Linkkien tulisi erottua ympäröivästä tekstistä selkeästi. Käyttäjän tulisi myös ymmärtää, mitä linkistä tapahtuu, vaikka hän ei näkisi sivua.

Lue lisää linkkien saavutettavuudesta saavutettavasti.fi-sivustolta.

Sisäiset linkit, eli linkit hel.fi:n sivujen ja sisältöjen välillä, auttavat sekä käyttäjiä että hakukoneita navigoimaan sivustolla, löytämään sisältöjä sekä hahmottamaan teemoja ja hierarkioita.

Käyttäjän johdattaminen eteenpäin sivustolla linkkien avulla varmistaa hyvän käyttökokemuksen. Pohdi siis jokaisen sivun ja sisällön yhteydessä käyttäjän polkua ja sitä, mihin haluat lukijasi ohjata.

Ulkoiset linkit auttavat käyttäjiä ja hakukoneita navigoimaan sivujen välillä. Kun sivustolle johtaa paljon linkkejä muilta sivuilta, se nousee hakutuloksissa korkeammalle.

Jos linkki vie pois sivustolta, kerro käyttäjälle aina selkeästi, minne se vie (osoitetta ei merkitä näkyviin).

Esimerkkejä:

  • Voit tehdä sähköisen oirearvion Omaolo-palvelussa.
  • Tarkista aikataulut HSL:n sivulta
  • Tarkista omat terveystietosi (Omakanta)

Huom! Linkit laitetaan pääsääntöisestä avautumaan aina samaan ikkunaan. Tämä koskee myös hel.fi:n ulkopuolisia linkkejä. Lue lisää alta kohdasta “Samaan vai eri ikkunaan”.

Linkkiteksti on tyypillisesti lyhyt, noin 1–5 sanan mittainen ilmaisu. Esimerkiksi näin: Jos tarvitset apua muistutuksen tekemiseen, ota yhteyttä sosiaali- ja potilasasiamieheen.

Linkkiteksti voi olla kokonainen virke, jos virke on lyhyt. Esimerkiksi näin: Tutustu työväenopistoon

Jos linkki on vain yksittäinen sana, sen täytyy kuvata sivun sisältö tarkasti. Esimerkiksi näin: Omakanta-palvelu

Vältä epämääräisen yksittäisen sanan tai sanaparin linkkausta. Ei näin: ”Lue lisää”, ”tästä”, “linkki”, ”täältä” tai ”paina tästä”. Suosi sen sijaan selkeiden, kokonaisten virkkeiden linkkausta. Esimerkiksi näin: Tutustu taustamateriaaliin tai Lue lisää asukaspysäköinnistä

Jos käytät kuvaa linkkinä, muista kertoa sen yhteydessä linkin kohde. Älä käytä pelkkiä kuvalinkkejä, joiden yhteydessä ei ole tekstinä tietoa, mihin linkki vie.

Huomaathan, että jos kuva on linkki, kuvan alt-teksti viittaa linkkiin, ei kuvaan. Kerro siis alt-tekstissä, mihin kuvalinkki vie, äläkä sitä, mitä kuvassa on.

Hel.fi:hin on suunniteltu erilaisia CTA- (Call to Action) eli toimintakehotepainikkeita ja -nappeja eri käyttötarkoituksia varten.

Käytä CTA:ssa verbiä, joka kuvaa, mitä oikeasti tapahtuu, kun nappia painetaan. ”Lue lisää” ei riitä. Sen sijaan ”Lue lisää asukaspysäköinnistä” on hyvä CTA.

Älä käytä painikkeessa epämääräistä sanaa kuten “Nettikauppa”, vaan aktivoivaa muotoa, kuten “Osta lippuja”.

Jos linkistä avautuu tiedosto, merkitse tiedostomuoto linkkitekstiin. Merkitse myös tiedoston koko.

  • Kantakaupungin pysäköintikartta (pdf, 5 Mt)

Huom! Jos lataat sivustolle tiedostoja, muista varmistaa, että ne ovat saavutettavia.

Ankkuri- tai pikalinkki ohjaa eri kohtaan samalla sivulla. Sijoita ankkurilinkki sivun alkuun ja linkkaa siitä samalla sivulla olevaan väliotsikkoon.

Jos linkki vie erikieliselle sivustolle tai sisältöön, kerro se linkin yhteydessä. Tyypillinen tilanne on, kun ruotsin- tai englanninkieliseltä sivulta linkitetään suomenkieliselle sivulle tai sisältöön.

Esim. 2020 annual assessment report (in Finnish)

Muotoilut linkkeihin tulevat automaattisesti komponenteista / Drupalista, emme käytä käsin muotoiltavia tehosteita (esim. väkäset).

Pääsääntö on, että kaikki linkit avautuvat aina samaan ikkunaan. Näin varmistamme saavutettavuuden.

Tutustu WCAG-ohjeeseen linkkien avautumisesta uuteen ikkunaan (ohje englanniksi).

Joissakin tapauksissa linkki kannattaa kuitenkin laittaa avautumaan uuteen ikkunaan. Tällaisia tapauksia ovat esimerkiksi:

1. Sivun avaaminen katkaisee esimerkiksi lomakkeen täyttämisen ja häiritsee näin käyttökokemusta.
2. Käyttäjä on kirjautunut palveluun ja linkki johtaa sivustolle, joka kirjaa hänet ulos.
3. Jokin muu erityinen syy pitää hel.fi auki samaan aikaan toisella välilehdelle.

Kun linkki avautuu uuteen ikkunaan, kirjoitetaan linkkitekstin loppuun “(avautuu uuteen ikkunaan)”.

Esim. Katso ohje asiakasmaksulaskurin käyttöön (avautuu uuteen ikkunaan). Näin tehdään myös tiedostoihin, kuten pdf:iin linkatessa.

Huom! Myös hel.fi:n ulkopuolelle vievät linkit laitetaan pääsääntöisesti avautumaan samaan ikkunaan.

CTA eli toimintakehote

Hel.fi:hin on suunniteltu erilaisia CTA- (Call to Action) eli toimintakehotepainikkeita ja -nappeja eri käyttötarkoituksia varten.

Käytä CTA:ssa verbiä, joka kuvaa, mitä oikeasti tapahtuu, kun nappia painetaan. “Lue lisää” ei riitä. Sen sijaan “Lue lisää asukaspysäköinnistä” on hyvä CTA.

Älä käytä epämääräistä sanaa kuten Nettikauppa, vaan aktivoivaa muotoa, kuten Osta lippuja.

Piirretty hahmo

Hakukoneoptimointi

Hakukoneoptimointia ovat kaikki ne toimenpiteet, joilla lisätään hakukoneiden ei-maksetuista hakutuloksista sivustolle saapuvan liikenteen määrää ja laatua.

Google arvioi sivustoja asiantuntevuuden, varmuuden ja luotettavuuden perusteella. Tätä kutsutaan EAT-laatuohjeeksi (Expertise, Authoritativeness, Trustworthiness).

Hakutulosten osuvuuteen vaikuttaa monia eri parametrejä, joista tärkeimmät ovat:

  • Sivulle johtavien sisäisten ja ulkoisten linkkien määrä ja laatu.
  • Sivulla oleva sisältö. Sisällön täytyy olla laadukasta ja täyttää käyttäjien tarpeet.
  • Data käyttäjien toiminnasta (klikit, sivulla vietetty aika, poistumiset yms.).

Kun Google järjestää sisältösivujen hakutuloksia, tärkein yksittäinen kriteeri on searcher satisfaction, eli kuinka hyvin käyttäjän tarve täyttyy eri hakutuloksilla. Tämän vuoksi käyttäjäkeskeisyys ja -empatia on tärkeää. Jo sisältöä muotoiltaessa on hyvä miettiä vastauksia seuraaviin kysymyksiin: Kun käyttäjä hakee hakusanalla ‘pysäköinti Helsingissä’, minkälaisia kysymyksiä hänellä on mielessään? Mitä hän odottaa saavansa?

Piirretty hahmo sanoo Hienoa!

On hyvä muistaa, että hel.fi on Googlen näkökulmasta merkittävä sivusto – sinne ja sen kautta muille sivustoille on paljon liikennettä. Sisältö on myös ajantasaista ja relevanttia. Hakusanaoptimoinnin rooli on huolehtia, että asiat tehdään jatkossakin oikein.

Placeholder

Sisällöntuottajan SEO-ohje


Tästä ohjeesta löydät parhaita käytäntöjä sisältöjen hakukoneoptimointiin.

Placeholder

Tekninen SEO-ohje


Mitä ohjelmistokehittäjän ja ylläpitäjän on hyvä tietää hakukoneoptimoinnista?

placeholder

Avainsanatutkimus


Hel.fi-avainsanatutkimusta voit käyttää työkaluna sisältösuunnittelussa.

Miten parannan hakutulosta?

Hakukoneen hakutulossivulla voi kiivetä ylöspäin mm. näin:

  • Varmista, että ko. hakusanasta on ylipäätään mahdollista ja järkevää kilpailla (hel.fi-sivusto voi todennäköisesti kilpailla useimmista hakusanoista).
  • Tarkista, mikä hel.fi:n sivu sijoittuu Googlen hakutuloksissa tällä hakusanalla. Tämän voit tehdä esim. googlaamalla hakusanan incognito/private-tilassa.
  • Kohdista ja optimoi sisältö tarkasti hakijan oletettuun tarpeeseen (sisältötyyppi, formaatti, erityiskulma), esimerkiksi: Näin haet influenssarokotuksen influenssakaudella 2020-2021.
  • Tarkista, että sisältösivulle on riittävästi linkkejä sivuston muilta aihetta käsitteleviltä sivuilta. Pohdi myös, onko ulkopuolisia sivustoja, joiden olisi hyvä linkittää aiheeseen.
  • Odota ja tarkista, näkyykö parannusta.
Piirrettyjä timantteja

Kaksi piirrettyä hahmoa tervehtii

Pikapalaute

Löysitko tiedon mitä kaipasit? Voit jättää palautetta palvelun toiminnallisuuksista tai kertoa, jos jokin asia ei mielestäsi toiminut tai mennyt aivan nappiin.