Otsikko ja metakuvaus

Moduuli 3: Sivun tekninen perusta · Lukuaika: 11 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat kirjoittaa jokaiselle sivulle hyvän otsikon ja metakuvauksen, selittää, mitä Google tekee niillä ja miksi Google joskus korvaa ne, sekä tarkistaa, ovatko ne kunnossa omilla sivuillasi.

Keskeiset käsitteet: <title>, otsikkolinkki, metakuvaus (<meta name="description">), katkelma (snippet), Googlen tekemä uudelleenkirjoitus, katkaisu näytön leveyden mukaan, pituuden nyrkkisääntö, yksilölliset otsikot, brändinimi, hakusanojen kasaaminen, nosnippet

Kaksi riviä sivun head-osassa

Jokainen verkkosivu alkaa osalla, jota kävijä ei näe: <head>. Siinä on kaksi riviä, jotka ovat hakukoneille erityisen tärkeitä:

<head>
  <title>Morsiuskimput mittatilauksena Jyväskylässä | Kukkastudio Aino</title>
  <meta name="description" content="Morsiuskimppu, joka sopii juuri teidän päiväänne. Tule maksuttomalle tutustumiskäynnille studiollemme Jyväskylässä tai katso ensin esimerkkitöitämme.">
</head>

Otsikko (<title>-elementti) näkyy selaimen välilehdessä, kirjanmerkeissä ja ennen kaikkea hakutuloksissa. Google kutsuu hakutuloksen sinistä, klikattavaa riviä otsikkolinkiksi. Metakuvaus on sivun lyhyt tiivistelmä. Google käyttää sitä joskus otsikkolinkin alla näkyvään tekstinpätkään: katkelmaan (englanniksi snippet).

Yhdessä ne ratkaisevat pitkälti, klikkaako joku sinun tulostasi vai jonkun muun. Siksi tämä on yksi harvoista löydettävyyden asioista, joissa saat vartissa aikaan todellisen eron.

Mitä Google tekee otsikollesi

Google sanoo sen itse näin: varmista, että jokaisella sivulla on otsikko <title>-elementissä, ja tee siitä kuvaava ja ytimekäs. Epämääräiset otsikot, kuten "Home" tai "Tervetuloa", eivät kerro kenellekään mitään.

Google käyttää <title>-otsikkoasi yleensä, mutta ei aina. Google voi muodostaa otsikkolinkin myös muista lähteistä: sivun suurimmasta otsikosta (usein <h1>), sosiaalisen median og:title-tiedosta, sivun näkyvästä tekstistä, sivulle osoittavien linkkien tekstistä ja WebSite-tyypin jäsenneltyjen tietojen nimestä. Näin käy etenkin seuraavissa tilanteissa, jotka Google itse mainitsee:

Jos Google kirjoittaa otsikkosi uudelleen, se ei ole rangaistus. Se on merkki siitä, ettei otsikkosi kuvaa sivua tarpeeksi hyvin. Kun parannat otsikkoa, Google ottaa sen usein taas käyttöön hakurobotin seuraavan käynnin jälkeen.

Kuinka pitkä otsikko saa olla?

Tässä moni netin neuvo menee pieleen. Google sanoo suoraan, että <title>-otsikon pituudelle ei ole rajaa. Otsikkolinkki kuitenkin katkaistaan hakutuloksissa, jotta se mahtuu näytölle. Katkaisu tehdään näytön leveyden (pikselien) mukaan eikä tietyn merkkimäärän jälkeen: otsikko, jossa on paljon leveitä kirjaimia (m, w), katkeaa aiemmin kuin otsikko, jossa on kapeita (i, l).

Siksi tällä kurssilla käytetään nyrkkisääntöä, joka ei ole Googlen sääntö: pidä otsikon pituus noin 15 ja 65 merkin välillä. Lyhyempi on usein liian epämääräinen, pidemmästä voi pudota pois juuri tärkein osa. Laita siksi alkuun se, mikä sivu on, ja yrityksesi nimi loppuun.

Hyvän otsikon kirjoittaminen

Googlen ohjeista ja käytännöstä:

1. Kerro, mistä sivu kertoo. "Morsiuskimput tilauksesta Jyväskylässä" on parempi kuin "Palvelut".
2. Jokaiselle sivulle oma otsikko. Kahta samannimistä sivua ei voi erottaa toisistaan hakutuloksissa.
3. Brändinimi lyhyesti alkuun tai loppuun ja erotettuna merkillä, kuten |, : tai -. Google suosittelee, ettei jokaisen otsikon perään liitetä pitkää iskulausetta.
4. Ei hakusanojen kasaamista. "Kukat Jyväskylä, kukkakauppa Jyväskylä, kukkakimppu Jyväskylä halpa" ei auta. Google mainitsee hakusanojen toistamisen nimenomaan asiaksi, joka näyttää roskapostilta; se on jopa roskapostikäytännöissä (oppitunti 8.2).
5. Pidä se ajan tasalla. Vuosiluku otsikossa tarkoittaa, että sinun on päivitettävä se joka vuosi.

Yleinen virhe sivustoeditoreissa: kotisivun otsikko on pelkkä yrityksen nimi. "Kukkastudio Aino" kertoo, kuka olet, mutta ei sitä, mitä teet tai missä. "Kukkastudio Aino | Kukkakauppa Jyväskylässä" toimii paremmin sellaiselle, joka ei vielä tunne sinua.

Metakuvaus

Metakuvaus on <meta>-elementissä:

<meta name="description" content="...">

Google sanoo: katkelma tulee pääasiassa sivun omasta sisällöstä. Metakuvausta käytetään, jos se tiivistää sivun paremmin kuin jokin sivun tekstinpätkä. Lisäksi katkelma voi vaihdella hakukyselyn mukaan: Google näyttää kohdan, joka sopii kysymykseen parhaiten. Hyvä metakuvaus ei siis takaa, että se näkyy, mutta se lisää todennäköisyyttä, että otsikkosi alla lukee jotain järkevää.

Tässäkin pätee: Googlella ei ole enimmäispituutta, mutta katkelma katkaistaan, jotta se mahtuu näytölle. Tämän kurssin nyrkkisääntö: 70-160 merkkiä. Tarpeeksi pitkä, jotta se kertoo jotain, ja tarpeeksi lyhyt, jotta se näkyy kokonaan.

Näin kirjoitat metakuvauksen:

• Tiivistä tavallisin lausein, mitä sivulta löytyy.
• Mainitse konkreettisia tietoja, jotka auttavat valitsemaan: paikkakunta, mitä tarjoat ja kenelle.
• Jokaiselle sivulle oma kuvaus. Jos aikaa on vähän, aloita kotisivusta ja suosituimmista sivuistasi; näin Google itsekin suosittelee.
• Ei hakusanaluetteloa. Googlen mukaan tällaisia kuvauksia käytetään katkelmana harvemmin.

Mitä metakuvaus ei tee: se ei ole sijoitustekijä, jolla nousisit hakusanojen avulla korkeammalle. Sen tehtävä on houkutella hakija klikkaamaan.

Päätä itse, mitä näytetään

Haluatko, ettei Google näytä katkelmaa lainkaan tai näyttää siitä vain osan? Se onnistuu robots-metarivillä: <meta name="robots" content="nosnippet"> (ei katkelmaa) tai max-snippet:50 (enintään 50 merkkiä). Yksittäisen tekstinkohdan voit rajata pois data-nosnippet-attribuutilla. Useimmat pienet sivustot eivät tätä tarvitse.

Missä näet ja tarkistat ne

• Lähdekoodissa: avaa sivusi, napsauta hiiren oikealla painikkeella ja valitse "Näytä sivun lähdekoodi" (tai Ctrl+U). Hae Ctrl+F:llä <title ja description.
• Hakutuloksissa: hae site:example.com nähdäksesi, miten Google näyttää sivusi. Jos otsikkolinkki poikkeaa <title>-otsikostasi, katso, mikä yllä olevan taulukon tilanteista sopii.
• Search Consolessa: Performance-raportti (oppitunti 2.3) näyttää, mitkä sivut saavat paljon näyttökertoja mutta vähän klikkauksia. Niissä parempi otsikko ja kuvaus kannattaa eniten.

Käytännössä: otsikon ja kuvauksen asettaminen

• WebOkén AI Builderissa annat jokaiselle sivulle oman otsikon ja kuvauksen. Jos jätät otsikon tyhjäksi, tavallisen sivun otsikoksi tulee "Sivun nimi | Sivuston nimi" ja kotisivun otsikoksi pelkkä sivustosi nimi. Anna siksi kotisivulle itse otsikko, joka kertoo myös, mitä teet. AI Builderin SEO-tarkistus varoittaa, jos otsikossa on yli 65 ja kuvauksessa yli 160 merkkiä: samat nyrkkisäännöt kuin tällä kurssilla.
• WordPressissä WordPress muodostaa otsikon itse sivun otsikosta ja sivuston nimestä. Metakuvausta WordPress ei tee itse; siihen tarvitset SEO-lisäosan tai teeman, joka tarjoaa sen. Asiaa käsitellään myös WordPress-kurssin oppitunnilla 9.2.

Muissa sivustoeditoreissa se toimii samaan tapaan: etsi asetuksia, kuten "SEO", "Hakukoneet" tai "Sivun asetukset".

Yhteenveto

• Otsikko on hakutulosten klikattava rivi; metakuvaus tiivistää sivun ja näytetään joskus katkelmana.
• Google voi korvata otsikkosi, jos se on puolityhjä, vanhentunut, virheellinen tai kaikkialla sama, tai jos sivulla ei ole selvää pääotsikkoa.
• Googlella ei ole enimmäispituutta, mutta se katkaisee näytön leveyden mukaan. Tämän kurssin nyrkkisäännöt: otsikko 15-65 merkkiä, kuvaus 70-160 merkkiä.
• Jokaiselle sivulle oma, kuvaava otsikko ja kuvaus; ei hakusanojen kasaamista; brändinimi lyhyesti loppuun.
• Metakuvaus auttaa ihmisiä valitsemaan, ei nosta sijoitustasi.

Tietovisa

Tehtävä

Tehtävä A3.1: Sivusi otsikko ja metakuvaus. Syötä oman sivustosi jonkin sivun osoite (kotisivu tai jokin tärkeä sivu). Ohjelma hakee sivun samaan tapaan kuin hakukone, lukee <title>-otsikon ja metakuvauksen ja laskee merkit. Näet, ovatko ne olemassa, pysyvätkö ne nyrkkisääntöjen rajoissa ja kertooko otsikko muutakin kuin pelkän yrityksesi nimen. Eikö sinulla ole omaa sivustoa? Käytä osoitetta www.rijksoverheid.nl.

Lisälukemista

Näiden artikkelien vaiheet koskevat WebOkén hallintapaneeleja; muilla palveluntarjoajilla se toimii samaan tapaan.

• Ilmoita verkkosivustosi hakukoneisiin (Google ja Bing)
• Sitebuilder ja AI Builder: kumman valitset ja miten avaat sen?
• Google Search Central, otsikkolinkkien hallinta hakutuloksissa: https://developers.google.com/search/docs/appearance/title-link
• Google Search Central, katkelmat ja metakuvaus: https://developers.google.com/search/docs/appearance/snippet
• Aseta otsikko, kuvaus ja alt-teksti sivukohtaisesti
• Ilmainen WordPress-kurssi 9.2: Löydettävyys: perusteet