Mikä on hreflang – Kattava opas esimerkeillä

Hreflang on tärkeä HTML-tunniste sellaisille verkkosivustoille, joiden sisältö on saatavilla useilla kielillä. Hreflang-tunnisteen (hreflang tag) avulla hakukoneet voivat näyttää sivustosi sisällön käyttäjälle sopivalla kielellä. Käyttämällä hreflangia voit siis parantaa sivustosi käyttäjäkokemusta ja näkyvyyttä.

Tässä aloittelijan oppaassa käymme läpi hreflang-tunnisteiden edut ja näytämme, kuinka voit lisätä niitä verkkosivustollesi.

  

Miksi hreflang-tunnisteet ovat tärkeitä hakukoneoptimoinnille?

Hreflang-tunnisteilla on ratkaiseva rooli hakukoneoptimoinnissa (SEO),  jos haluat tavoittaa erikielisiä käyttäjiä. Tunniste varmistaa, että hakukoneet näyttävät sivustosi sisällön oikealla kielellä ja auttaa sinua välttämään päällekkäistä sisältöä. Kerromme näistä lisää alla.

Näytä sivustosi sisältö useilla kielillä

Aiotko luoda monikielisen verkkokaupan,  jossa myyt tuotteita tai palveluita useissa maissa asuville asiakkaille? Siinä tapauksessa on aika ottaa käyttöön hreflang-tunnisteet. Hakukoneet käyttävät hreflang-tunnisteita määrittäessään, millä kielellä sisältö näytetään.

Oletetaan esimerkiksi, että menet Netflixin sivuille Espanjassa. Vaikka kirjoittaisit hakukenttään Netflix.com, näet todennäköisesti verkkosivuston sisällön espanjaksi. Juuri näin hreflang-tunnisteet toimivat, kun ne määritetään oikein. Sama koskee verkkosivustosi tai verkkokauppasi sisältöä: jos sivultasi puuttuu hreflang-tunniste, käännettyä sisältöäsi ei välttämättä näytetä oikeille käyttäjille.

Vältä päällekkäistä sisältöä

Hreflangin avulla voit myös estää hakukoneita rekisteröimästä käännettyjen sivujesi sisältöä päällekkäiseksi sisällöksi. Päällekkäisellä sisällöllä tarkoitetaan sisältöä, joka on identtistä muiden sivujen sisällön kanssa. Päällekkäinen sisältö voi oman sivustosi lisäksi löytyä joltakin muulta sivustolta. Päällekkäinen sisältö aiheuttaa ongelmia hakukoneoptimoinnissa, koska päällekkäistä sisältöä sisältävät sivut sijoittuvat huonommin hakukoneissa.

Hreflang-tunnisteet ovat tärkeitä päällekkäiselle sisällölle, koska ne kertovat hakukoneille, että sisällön eri kieliversiot on tarkoitettu käyttäjille useissa maissa tai useilla alueilla. Jos olet esimerkiksi kirjoittanut verkkokaupassasi tuotekuvauksen myymällesi käsintehdylle keraamiselle maljakolle ja kääntänyt sen ruotsiksi, norjaksi ja tanskaksi, hreflang-tunniste estää hakukoneita rekisteröimästä näitä lähes identtisiä tekstejäsi päällekkäiseksi sisällöksi.

  

Miltä hreflang-tunnisteet näyttävät?

Hreflang-tunnisteet koostuvat yksinkertaisesta ja yhtenäisestä syntaksista. Niiden rakenne on hyvä ymmärtää, jotta osaat käyttää oikeita tunnisteita verkkosivustollasi. Seuraavaksi näytämme esimerkit kolmesta hreflang-tunnisteesta, joita käytetään eri tilanteissa.

Hreflang – 3 esimerkkiä

1. Oletetaan, että sinulla on esimerkiksi matkablogi, jossa julkaiset artikkeleita matkoistasi suomeksi, englanniksi ja espanjaksi. Olet käyttänyt paljon aikaa blogisi artikkeleiden kirjoittamiseen ja kääntämiseen, joten haluat olla varma, että ne näkyvät oikein hakukoneissa. Käytä tässä tapauksessa seuraavia hreflang-tunnisteita:
   
   <link rel=”alternate” href=”https://example.com/fi/page” hreflang=”fi”>
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”>
   <link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”>  
   
2. Toinen esimerkkimme on espanjalainen hammasklinikka, joka on äskettäin kääntänyt verkkosivustonsa sisällön portugaliksi saadakseen portugalilaisia asiakkaita. Jos hammasklinikalla on lisäksi myös englanninkielisiä sivuja, sen hreflang-tunnisteiden pitäisi näyttää tältä:
   
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”>
   <link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”>
   <link rel=”alternate” href=”https://example.com/pt/page” hreflang=”pt”>  
   
3. Lopuksi tarkastelemme esimerkkiä, jossa tarvitaan tunnisteita saman kielen eri muodoille. Kyseessä voisi olla esimerkiksi suuri verkkouutisalusta, joka julkaisee artikkeleita brittienglanniksi, amerikanenglanniksi ja intianenglanniksi. Näillä englannin eri muodoilla on seuraavat alueelliset kielikoodit: EN-GB, EN-US ja EN-IN.
   
   Uutisalustan hreflang-tunnisteiden pitäisi näyttää tältä:
    
   <link rel=”alternate” href=”https://example.com/en-gb/page” hreflang=”en-gb”> 
   <link rel=”alternate” href=”https://example.com/en-us/page” hreflang=”en-us”>
   <link rel=”alternate” href=”https://example.com/en-in/page” hreflang=”en-in”> 

Miten hreflang-tunnisteet muodostetaan?

Yllä esitimme kolme esimerkkiä siitä, miltä hreflang-tunnisteet voivat näyttää. Seuraavaksi jaamme yhden niistä pienempiin osiin, jotta näemme, mitä yksittäiset osat tarkoittavat.

Katsotaan matkablogin tunnistetta edellisen osion esimerkistä.

<link rel=”alternate” href=”https://example.com/es/page” hreflang=”es”>

link rel=”alternate”: Tämän tunnisteen sisältämä linkki on sivun vaihtoehtoinen versio.

hreflang=”es”: Se on vaihtoehtoinen, koska sivun sisältö on käännetty toiselle kielelle, joka on tässä tapauksessa espanja.

href=”https://example.com/es/page”: Vaihtoehtoinen sivu löytyy tästä URL-osoitteesta

Hreflang-kielikoodit

Kun luot hreflang-tunnisteita omalle sivustollesi tai verkkokauppaasi, voit käyttää samoja tunnisteita kuin esimerkeissämme. Sinun on muutettava niissä vain kielikoodi, eli ne kaksi kirjainta, jotka ilmaisevat sisällön kielen. Kielikoodit noudattavat ISO-standardia 639-1, jota käytetään maailmanlaajuisesti.

Kielikoodeja ovat esimerkiksi nämä:

• suomi: FI
• tanska: DA
• ruotsi: SE
• norja: EI
• arabia: AR
• englanti: EN
• englanti (Iso-Britannia): EN-GB
• amerikanenglanti: EN-US
• japani: JA

Löydät helposti kaikkien kielten kielikoodit verkosta.

 Hreflang-tag generaattori

Hreflang-tunnisteiden luominen on melko yksinkertaista, mutta se voi viedä paljon aikaa, jos tarvitset tunnisteita monille eri kielille ja sivuille. Voit säästää aikaa käyttämällä esimerkiksi tätä hreflang-tunnistegeneraattoria.

Muista nämä 3 ohjetta, ennen kuin otat käyttöön hreflang-tunnisteet

Ennen kuin perehdymme siihen, miten voit lisätä hreflang-tunnisteita sivustollesi, kerromme kolme nyrkkisääntöä, joilla voit välttää virheitä. Vaikka nämä tunnisteet itsessään ovat melko yksinkertaisia, niiden lisäämisessä sivustolle voi helposti sattua virheitä.

1. Hreflang-tunnisteet ovat kaksisuuntaisia: Tunnisteiden on aina osoitettava molempiin suuntiin. Jos esimerkiksi suomenkielisen sivusi tunniste osoittaa ranskankieliselle sivullesi, ranskankielisen sivusi tunnisteen on vastaavasti osoitettava takaisin suomenkieliselle sivullesi. Tällä tavalla kerrot hakukoneille, että hallinnoit molempia sivuja ja että nämä kaksi sivua on linkitetty toisiinsa.
    

2. Itseensä viittaavat hreflang-tunnisteet ovat hyödyllisiä: Hreflang-tunnisteiden ei pitäisi osoittaa vain muihin kieliin, vaan myös itseensä. Oletetaan, että sinulla on sama kategoriasivu englanniksi (https://example.com/cat-food) ja ruotsiksi. (https://example.com/kattmat). Tässä tapauksessa kummallakin sivulla on oltava seuraavat hreflang-tunnisteet:
    
   <link rel=”alternate” hreflang=”en” href=”https://example.com/cat-food”/> 
   <link rel=”alternate” hreflang=”se” href=”https://example.com/kattmat”/> 
    

3. Hreflang x-default -tunnisteet parantavat käyttökokemusta: Tämä tunniste on hyödyllinen, jos sinulla on esimerkiksi verkkosivusto, jonka sisältö on suomeksi, ruotsiksi ja englanniksi, mutta jolla vierailee säännöllisesti kävijöitä esimerkiksi Saksasta.
   
   Tässä tapauksessa voit käyttää hreflang x-default -tunnisteita varmistaaksesi, että saksankieliset kävijäsi ohjataan englanninkieliselle sivulle, jota he todennäköisesti ymmärtävät paremmin kuin suomen- tai ruotsinkielistä sivuasi.
   
   Hreflang x-default -tunnisteet antavat käyttäjille paremman kokemuksen sivustostasi, koska he eivät päädy vahingossa sivulle, jonka sisältöä he eivät ymmärrä.
   
   Tämä tunniste näyttää tältä: <link rel=”alternate” hreflang=”x-default” href=”https://example.com/” /> 
   

Miten hreflang-tunnisteet lisätään sivuille?

Tässä osiossa tarkastelemme, miten hreflang-tunnisteet lisätään sivuille. Se voidaan tehdä kolmella tavalla kontekstista ja sisältötyypistä riippuen:

HTML

Yksinkertaisin tapa ilmoittaa hakukoneille, että sivusi on saatavilla useilla kielillä, on lisätä hreflang-tunniste sivun HTML-koodiin. Tunniste on lisättävä koodin yläosan <head>-tunnisteeseen.

<head>-tunniste sisältää erilaisia metatietoja ja se sijoitetaan <html>- ja <body>-tunnisteiden väliin.

Tässä on esimerkki sivusta, joka on saatavilla suomeksi, ruotsiksi ja englanniksi:

<!DOCTYPE html>
<head> 
  <title>Sivun otsikko tulee tähän</title> 

<link rel=”alternate” href=”https://example.com/fi/page” hreflang=”fi”> 

<link rel=”alternate” href=”https://example.com/se/page” hreflang=”se”> 

<link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”> 

 
</head> 
<body> 
 
Sivun sisältö tulee tähän
 
</body> 
</html> 

Aina kun käännät sivun, kaikkiin sen versioihin on lisättävä uusi hreflang-tunniste. Jos sinulla on jo sivu suomeksi, ruotsiksi ja englanniksi, mutta päätät kääntää sen saksaksi, saksankielinen hreflang-tunniste on lisättävä kaikkien sivujen HTML-koodiin. Tällöin jokaisella sivulla on yhteensä neljä tunnistetta, koska kaikkien versioiden on oltava kaksisuuntaisia ja osoitettava sekä toisiinsa että itseensä.

Tämä menetelmä voi olla aikaa vievä, varsinkin jos verkkosivustollasi on useita sivuja ja monia kieliä. Silloin voi olla hyödyllistä käyttää edellä mainitsemaamme hreflang-generaattoria.

HTTP-header

Jos sinulla on sivuja, joiden sisältö ei ole HTML-muodossa, voit lisätä hreflang-tunnisteet sivun HTTP-header. Näitä tapauksia ovat esimerkiksi PDF-tiedostot.

HTTP-otsikko sisältää tietoa niistä tiedoista, jotka lähetetään palvelimelta asiakkaalle. Niitä ovat esimerkiksi päivämäärä ja ensisijainen kieli.

Oletetaan, että sinulla on sama PDF-tiedosto kolmella eri kielellä, englanniksi, saksaksi ja ruotsiksi. Silloin kunkin tiedoston HTTP-otsikon pitäisi näyttää tältä:

HTTP/1.1 200 OK

Content-Type: application/pdf

Link: <https://example.com/en/doc.pdf>; rel=”alternate”; hreflang=”en”  

<https://example.com/de/doc.pdf>; rel=”alternate”; hreflang=”de”  

<https://example.com/se/doc.pdf>; rel=”alternate”; hreflang=”se” 

XML-sitemap

Kolmas tapa käyttää hreflang-tunnisteita on lisätä ne sivustosi XML-sivukarttaan. XML-sivukartta on tiedosto, joka tarjoaa hakukoneille tietoja verkkosivustosi yksittäisistä sivuista.

Tämän menetelmän etu on se, että voit muokata kaikkia hreflang-tunnisteitasi yhdessä ja samassa paikassa. Käyttäessäsi kahta edellistä menetelmää sinun on lisättävä uusi tunniste jokaiselle sivulle aina, kun käännät sisältöäsi uudelle kielelle. Siihen voi kulua paljon aikaa.

Jos valitset tämän menetelmän, lisää <loc>-elementti kullekin URL-osoitteelle ja lisää <xhtml:link> jokaiselle kielelle, jolla sivu on saatavilla.

Voit lukea Googlen ohjeet ja nähdä esimerkin tästä menetelmästä täältä.

HTML lang vs. hreflang

Myös HTML-lang on tunniste, jolla voidaan optimoida monikielisiä sivustoja. Nämä kaksi tunnistetta eroavat toisistaan seuraavalla tavalla:

Suurin ero on, että HTML-lang on HTML-koodiin lisätty tunniste, joka ilmoittaa hakukoneille ja käyttäjille koko sivuston kielen.

Hreflang (hreflang tag) antaa yksityiskohtaisempaa tietoa määrittämällä sivuston kaikkien yksittäisten sivujen kielet. Tämä helpottaa sisällön suunnittelua useille maille ja kielille.

Google-haku ei huomioi HTML-lang-tunnistetta, ja siksi Google suositteleekin monikielisiä sivustoja käyttämään hreflang-tunnistetta. Kuitenkin Microsoft Bing ja tietyt näytönlukuohjelmat käyttävät HTML-kieltä. Siksi voikin olla järkevää käyttää molempia tunnisteita, jos haluat optimoida verkkosivustosi useille hakukoneille ja näytönlukuohjelmille.

Yhteenveto

Jos haluat parantaa sivustosi käyttäjäkokemusta ja lisätä liikennettä julkaisemalla sisältöä useilla kielillä, on tärkeää, että käytät hreflang-tunnisteita. Monikielinen sivusto voi tuoda sinulle uusia mahdollisuuksia, käyttäjiä, lukijoita ja enemmän konversiota. Toivomme, että tämä opas auttaa sinua pääsemään alkuun hreflang-tunnisteiden käyttämisessä!