Hva er Hreflang?

Hreflang er en viktig HTML-tag for nettsider som har innhold på flere språk. Disse taggene gjør det mulig for søkemotorer å vise innholdet på nettsiden på det språket brukeren foretrekker. Å implentere hreflang på nettsiden er derfor en viktig del av å styrke brukeropplevelsen.  

I denne guiden skal vi gå igjennom fordelene med hreflang og vise deg hvordan du implenterer dem på nettsiden din.

Hvorfor er hreflang viktig for SEO?

Hreflang-tagger spiller en viktig rolle for din SEO om du vil nå ut til brukere i flere land. Det er fordi denne taggen forsikrer at søkemotorene viser frem innholdet på riktig språk. Den hjelper deg også med å unngå at søkemotoren misforstår og tror at du har duplikert innhold på siden din. 

Vis innhold på flere språk

Vurderer du å lage en flerspråklig nettbutikk hvor du skal selge til kunder i flere land? Da er det lurt å ha hreflang på nettsiden din, slik at søkemotorene kan bruke dem til å vise riktig språk til brukeren. 

Se for deg at du går inn på Netflix fra Spania. Selv når du søker på Netflix.com i søkefeltet, som indikerer den engelske siden, vil du mest sannsynlig som beboer i Spania få opp Netflix på spansk. Det er fordi hreflang er implentert på Netflix sin nettside. 

Det samme gjelder innholdet på din nettside eller nettbutikk. Om siden din ikke har hreflang, risikerer du at det oversatte innholdet ditt ikke vil vises til de riktige brukerne. 

Unngå kopiert innhold

Hreflang kan også sørge for at søkemotorer ikke misforstår innholdet på siden din, og registrerer det som duplikert innhold. Det vil si innhold som er identisk med annet innhold som allerede eksisterer på andre sider. Dette gjelder både innhold som er identitsk med ditt eget innhold, eller innhold fra andre nettsider. Duplikert innhold er problematisk fordi nettsider med innhold som ikke er unikt risikerer å få en dårligere score i søkeresultatene. 

Hreflang-tagger er viktig i denne sammenhengen. De gir beskjed til søkemotorene at innholdet ikke er duplikert, men det samme innholdet på forskjellige språk, og ment for forskjellige brukere. 

Se for eksempel for deg at har skrevet en produktbeskrivelse for en håndlaget keramikkvase som du selger i nettbutikken din, og har oversatt beskrivelsen til svensk, dansk og finsk. Da vil hreflang forhindre dine nesten identiske beskrivelser til å bli registrert som duplikatinnhold. 

Hvordan ser en hreflang tag ut? 

Hreflang-tagger følger en enkel og lik form. Det er viktig å skjønne oppbygningen av hreflang når du skal implentere dem på nettsiden din. Vi skal ta en nærmere kikk på hva en hreflang-tag er og hvordan de kan brukes i forskjellige situasjoner. Her er tre spesifikke eksempler.

Hreflang-tagger — 3 eksempler

1. Se for deg at du har en reiseblogg hvor du skriver spennende innlegg om alle reisene dine. Innleggene skrives på engelsk, spansk og norsk. Du har brukt mye tid på å skrive og oversette, og vil være helt sikker på at innleggene dine vises riktig i søkemotorene slik at brukerne får opp innleggene på språket de vil lese. I dette tilfeller kan du bruke hreflang-tagger for å skille mellom de tre språkene:
   
   <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/no/page” hreflang=”no”> 
   
2. Et annet eksempel kan være en tannklinikk i Spania som netopp har oversatt innholdet på nettsiden sin til portugisisk, i håp om å tiltrekke seg flere portugisiske kunder. Om tannklinikken i tillegg har sider på engelsk, bør hreflang-taggene se slik ut:
   
   <link rel=”alternate” href=”https://example.com/en/page” hreflang=”en”> 
   <link rel=”alternate” href=”https://example.com/da/page” hreflang=”da”> 
   <link rel=”alternate” href=”https://example.com/se/page” hreflang=”se”> 
   
3. La oss til slutt se på et eksempel hvor forskjellige tagger trengs for flere varianter av det samme språket. Se for eksempel for deg et stort mediehus som skriver nyhetsartikler på Britisk-engelsk, Amerikansk-engelsk og Indisk-engelsk. Disse variantene av engelsk har følgende regionale språkkoder: EN-GB, EN-US og EN-IN.
   
   Mediehuset sine hreflang-tagger bør se slik ut:  
    
   <link rel=”alternate” href=”https://example.com/en-gb/page” hreflang=”en-gb”> 
   <link rel=”alternate” href=”https://example.com/en-in/page” hreflang=”en-in”> 
   <link rel=”alternate” href=”https://example.com/en-us/page” hreflang=”en-us”> 

Hvordan er hreflang-tagger satt opp? 

Vi har sett på tre eksempler på hvordan hreflang-tagger kan se ut. Nå skal vi bryte ned en i mindre biter og se på hva hver individuelle del er for noe.

La oss ta en av taggene fra eksemplet i forrige avsnitt: 

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

link rel=“alternate”: linken i denne taggen er en alternativ versjon av siden

hreflang=“da”: Den er alternativ fordi den er skrevet på et annet språk, og det språket er spansk.

href=“https://example.com/da/page”: den alternative siden kan bli funnet på denne URL-en.

Hreflang språkkoder

Når du lager hreflang-tagger for din egen nettside eller nettbutikk, kan du bruke den samme formen som du så i eksemplene over. Det eneste du kanskje trenger å endre på er språkkodene, altså de to bokstavene i koden som indikerer hvilke språk innholdet er tilgjengelig på. Språkkodene følger ISO standard 639-1 som er brukt over hele verden.

Her er en liste over noen av dem:

• Dansk: DA 
• Svensk: SE 
• Norsk: NO  
• Arabisk: AR 
• Engelsk: EN 
• Britisk engelsk: EN-GB 
• Amerikansk engelsk: EN-US 
• Japansk: JA 

Om det er noen andre enn disse du behøver er de enkle å finne frem til ved et raskt søk. 

Hreflang-tag generator

Den faktiske prosessen ved å lage hreflang-tagger er ganske enkel, men om du skal lage tagger for mange språk og sider kan prosessen bli en aldri så liten tidstyv. En litt raskere måte å gjøre det på da kan være å bruke en tag-generator slik som denne her. 

3 tips før du implementerer hreflang

Før vi ser videre på hvordan man setter inn hreflang-tagger på nettsiden skal vi se på tre tommelfingerregler som minsker risikoen for å gjøre feil. Selv om taggene i seg selv er ganske enkel, kan det skje noen feil dersom de ikke blir satt inn riktig. 

1. Hreflang-tagger er toveis: Det betyr at de alltid må peke begge veier. Mer spesifikt betyr det at hvis taggen på din norske side peker mot den franske, må taggen på den franske siden peke tilbake til den norske. På denne måten signaliserer du til søkemotorene at begge sidene er dine og at sidene har noe med hverandre å gjøre.

2. Hreflang-tagger som refererer til seg selv er smart: Kort fortalt vil dette si at hreflang-tagger ikke bare skal peke mot andre språk, men også tilbake til seg selv. La oss si at du har den samme kategorisiden på nettsiden din både på engelsk (https://example.com/cat-food) og på norsk (https://example.com/kattemat). Hver av sidene må da ha disse hreflang-taggene:
    
   <link rel=”alternate” hreflang=”en” href=”https://example.com/cat-food”/> 
   
   <link rel=”alternate” hreflang=”se” href=”https://example.com/kattemat”/> 
    

3. Bruk «X-default»-tagger for å forbedre brukeropplevelsen: Denne taggen er veldig nyttig dersom du har en nettside med innhold på norsk, svensk og engelsk — men også får besøk på nettsiden din fra for eksempel Tyskland.
    
   Da kan du bruke hreflang x-default tagger for å forsikre deg om at dine tyske brukere blir dirigert til den engelske siden, som de sannsynligvis vil forstå bedre enn den norske.
    
   Hreflang x-default tagger bidrar derfor til en bedre opplevelse på nettsiden din fordi brukerne ikke havner på en side med innhold de ikke forstår.
   
   Taggen bør se slik ut:
   
   <link rel=”alternate” hreflang=”x-default” href=”https://example.com/”/> 

Hvordan implenterer man hreflang-tagger?

Nå som vi har sett hvordan en hreflang-tag ser ut er det på tide å se på hvordan de blir implementert. Dette kan gjøres på tre forskjellige måter, avhengig av hva de skal brukes til og hvilket innhold de skal brukes på. 

Ved å bruke HTML

Den vanligste måten å signalisere til søkemotorene at siden finnes på forskjellige språk er å sette inn hreflang-taggen i nettsidens HTML-kode. Taggen må settes inn øverst i koden, i <head> seksjonen.

<head> er en beholder for metadata og er plassert mellom <html> taggen og <body> taggen.

Her er et eksempel på en side som er tilgjengelig på engelsk, spansk og norsk: 

<!DOCTYPE html>  

< >  

<head>  

  <title>Din fantastiske sidetittel</title>  

<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/no/page” hreflang=”no”>  

</head>  

<body>  

Ditt magiske sideinnhold 

</body>  

</html> 

Hver gang du oversetter en side må du legge til en ny hreflang på alle versjoner av siden. Om du for eksempel allerede har en side på norsk, engelsk og spansk, men har bestemt deg for at du også vil ha siden på tysk, bør den tyske hreflang-taggen settes inn i HTML-koden på alle sidene. Dette betyr at du nå totalt har fire hreflang-tagger på hver side, fordi alle versjonene må peke mot hverandre i tillegg til seg selv. 

Om du synes det går litt for mye tid på dette, særlig om du har mange sider og mange språk på nettsiden, så går det som nevnt an å bruke en hreflang-generator til å gjøre denne jobben. 

Å bruke HTTP-headeren

Om du har sider med innhold som ikke er i et HTML-format, kan du med fordel sette inn hreflang-taggen i sidens http-header. Et eksempel på slikt innhold er PDF-filer.

HTTP-header koden inneholder informasjon om data som er sendt fra en server til en klient, slik som dato og foretrukket språk. 

Se for deg at du har den samme PFD-en på tre forskjellige språk: Engelsk, tysk og norsk. HTTP-headeren i hver av filene bør da se slik ut: 

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/no/doc.pdf>; rel=”alternate”; hreflang=”no”  

XML sitemap

Den tredje metoden du kan bruke for å implementere hreflang-tagger er å sette dem inn i din nettsides XML Sitemap. Du kan lese mer om sidekart her.

Kort forklart er et XML-sidekart er en fil som gir søkemotorer informasjon om hver individuelle side på nettsiden din.

Den største fordelen med denne metoden er at du kan redigere alt av hreflang-tagger på ett sted. Når du bruker HTML-metoden eller http-header metoden må du legge til en ny tag for hver side hver gang du oversetter eksisterende innhold til et nytt språk. Det kan være ganske tidkrevende.

Om du velger denne metoden kan du legge til et <loc> element for hver URL og sette inn <xhtml:link> for hvert av språkene som siden er tilgjengelig på.

Du kan lese Google sine instruksjoner og se et eksempel på dette her.

HTML-lang versus Hreflang

HTML-lang er også en tag som kan implementeres for å optimalisere nettsider med innhold på flere språk. Men, det er en forskjell mellom disse to taggene.

Hovedforskjellen er at en HTML-lang tag plasseres inn i HTML for å fortelle søkemotorer og brukere om språket på hele nettsiden. 

Hreflang sender et mer detaljert signal ved å spesifisere språket på hver individuelle side av nettsiden din. Det gjør det lettere å justere på innholdet for flere land og språk. 

Googles søkemotor bruker ikke HTML-lang. Derfor anbefales det at nettsider med innhold på flere språk bruker hreflang. Microsoft Bing og noen skjermlesere bruker HTML-språk. Det er derfor kanskje ikke så dumt å bruke begge dersom du vil optimalisere nettsiden din for flere søkemotorer og skjermlesere. 

Hreflang tags er viktig for flerspråklige sider

Om du vil forbedre brukeropplevelsen og øke trafikken til nettsiden din ved å publisere innhold på flere språk, er det viktig å vite hvordan du lager og implementerer hreflang-tagger. En flerspråklig nettside åpner opp for nye muligheter, nye brukere, nye lesere og flere konverteringer. Vi håper denne guiden hjelper deg å komme i gang!