Hvad er hreflang?

Hreflang er et vigtigt HTML-tag for hjemmesider med indhold på flere sprog. Tagget gør det muligt for søgemaskinerne at vise din hjemmesides indhold på brugerens fortrukne sprog. Implementering af hreflang er derfor afgørende for brugeroplevelsen og for din hjemmesides synlighed.  

I denne begynderguide gennemgår vi fordelene ved hreflang-tags, og viser dig, hvordan du indsætter dem på din hjemmeside.  

  

Hvorfor er hreflang-tags vigtige for SEO?

Hreflang-tags spiller en afgørende rolle for søgemaskineoptimering SEO, hvis du vil nå ud til brugere i flere lande. Det skyldes, at tagget sikrer, at søgemaskinerne viser indholdet på det korrekte sprog, samt at du undgår duplicate content. Vi ser nærmere på begge dele nedenfor.   

Vis indhold på flere sprog

Overvejer du at oprette en flersproget webshop, hvor du vil sælge produkter eller tjenester til kunder i flere lande? Så er det nødvendigt, at du implementerer hreflang-tags. Søgemaskinerne gør brug af hreflang-tags, når de skal analysere sig frem til, hvilket sprog indholdet skal vises på.  

Lad os antage, at du besøger Netflix fra Danmark. Selvom du indtaster Netflix.com i søgefeltet, vil du sandsynligvis se hjemmesidens indhold på dansk. Det er sådan hreflang-tags skal fungere, når de er indsat korrekt. Det samme gør sig gældende for indholdet på din hjemmeside eller i din webshop. Mangler din side hreflang-tags risikerer du, at dit oversatte indhold ikke bliver vist til de rigtige brugere. 

Undgå duplicate content

Hreflang kan også hjælpe dig med at forhindre søgemaskinerne i at registrere indholdet på dine oversatte sider som duplicate content. Duplicate content, eller dubletindhold, som det også kaldes på dansk, er indhold der er identisk med indhold, der allerede eksisterer på andre sider. Det gælder både indhold, der er er identisk med indholdet på din egen hjemmeside og med indholdet på andre hjemmesider. Duplicate content er et problem, fordi hjemmesider med indhold, der ikke er unikt, risikerer at få en dårligere rangering i søgeresultaterne.  

Hreflang-tags er vigtige i forbindelse med duplicate content, fordi de sender et signal til søgemaskinerne om, at de forskellige sprogversioner af indholdet er målrettet brugere i flere lande eller regioner. Har du fx skrevet en produktbeskrivelse af en håndlavet keramikvase, du sælger i din webshop, og fået oversat beskrivelsen til svensk, norsk og finsk, forhindrer hreflang-tagget, at dine næsten identiske tekster registreres som dubletindhold.  

  

Hvordan ser hreflang-tags ud?

Hreflang-tags består af en simpel og ensformig syntaks. En god forståelse af hreflang-strukturen er afgørende, når du skal implementere de korrekte tags på din hjemmeside. Nedenfor ser vi nærmere på tre konkrete eksempler på hreflang-tags, der kan bruges i forskellige sammenhænge.  

Hreflang-tags – 3 eksempler

1. Lad os antage, at du har en rejseblog, hvor du skriver spændende indlæg om alle dine rejser på engelsk, spansk og dansk. Du har brugt lang tid på at skrive og oversætte, og du vil derfor være sikker på, at dine blogindlæg vises korrekt i søgemaskinerne. I dette tilfælde skal du bruge disse hreflang-tags:  
   
   <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/da/page” hreflang=”da”> 
   
2. Et andet eksempel kan være en tandlægeklinik i Malmø, der har oversat indholdet på sin hjemmeside til dansk, i håb om at lokke flere kunder fra København over Øresundsbroen.  Tandklinikkens hreflang-tags skal se sådan ud:  
   
   <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. Lad os til sidst se på et eksempel, hvor der er behov for forskellige tags til flere varianter af samme sprog. Forestil dig en stor nyhedsplatform online, der skriver artikler på både britisk engelsk, amerikansk engelsk og indisk engelsk. Disse varianter af engelsk har følgende regionale sprogkoder: EN-GB, EN-IN og EN-US.
   
   Nyhedsplatformens hreflang-tags skal derfor se sådan ud:  
    
   <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 sammensættes hreflang-tags?

Ovenfor fik du tre eksempler på, hvordan hreflang-tags kan se ud. Nu piller vi et tag fra hinanden, og ser på, hvad de enkelte dele betyder. 

Lad os se på et hreflang-tag fra rejsebloggen fra eksemplet i forrige afsnit. 

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

link rel=“alternate”: Linket i dette tag er en alternativ version af denne side. 

hreflang=“da”: Det er alternativt, fordi indholdet er skrevet på et andet sprog, og det sprog er dansk. 

href=“https://example.com/da/page”: Den alternative side kan findes på denne URL 

Hreflang sprogkoder

Når du sammensætter hreflang-tags til din egen hjemmeside eller webshop, skal du bruge sammen syntaks, som vi har brugt i eksemplerne. Det eneste du skal ændre, er sprogkoden, dvs. de to bogstaver, der indikerer, hvilke sprog indholdet er tilgængeligt på. Sprogkoderne følger ISO-standarden 639-1, som bruges i hele verden. 

Her har du en liste over nogle af dem:  

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

Du kan nemt finde sprogkoder for alle sprog online.

Hreflang-tag generator

Selve processen med at sammensætte hreflang-tags er ganske simpel, men hvis du skal bruge tags til mange sprog og sider, kan processen være tidskrævende. Her kan du spare tid ved at bruge en hreflang-tag generator som fx denne.  

3 tips før du implementerer hreflang-tags

Før vi dykker ned i, hvordan du indsætter hreflang-tags på din hjemmeside, tager vi et kig på tre tommelfingerregler, der minimerer risikoen for fejl. For selvom disse tags i sig selv er ret så simple, kan der nemt opstå fejl, hvis man indsætter dem forkert.  

1. Hreflang-tags er dobbeltrettede: Det betyder, at de altid skal pege begge veje. Helt konkret indebærer det, at hvis tagget på din danske side peger på den franske, så skal tagget på den franske pege tilbage på den danske. På den måde signalerer du til søgemaskinerne, at du administrerer begge sider, samt at de to sider er knyttet til hinanden. 
    

2. Selvrefererende hreflang-tags er en god idé: Det betyder kort fortalt, at hreflang-tags ikke bare skal pege på andre sprog, men også på sig selv. Antag du i din webshop har samme kategoriside på dansk (https://example.com/kattemad) og på svensk. (https://example.com/kattmat). Så skal hver af siderne have disse hreflang-tags: 
    
   <link rel=”alternate” hreflang=”se” href=”https://example.com/kattmat”/> 
   
   <link rel=”alternate” hreflang=”da” href=”https://example.com/kattemad”/> 
    

3. Hreflang x-default tags forbedrer brugeroplevelsen: Dette tag er yderst brugbart, hvis du har en hjemmeside med indhold på dansk, svensk og engelsk, men jævnligt har besøgende fra fx Tyskland.  
    
   Her kan du bruge hreflang x-default tags for at sikre, at dine tysktalende besøgende bliver dirigeret til den engelske side, som de sandsynligvis vil forstå bedre end den danske. Hreflang x-default tags giver dermed brugerne en bedre oplevelse på din hjemmeside, fordi de ikke havner på en side med indhold de ikke kan forstå. Dette tag ser sådan ud: 
    
   <link rel=”alternate” hreflang=”x-default” href=”https://example.com/”/> 
   

Hvordan indsættes hreflang-tags?

I dette afsnit ser vi nærmere på, hvordan hreflang-tags implementeres. Det kan gøres ved hjælp af tre metoder, der anvendes i forskellige sammenhænge.

HTML

Den mest grundlæggende måde at sende signal til søgemaskinerne om, at din side findes på flere sprog, er at indsætte hreflang-tagget i sidens HTML-kode. Tagget skal indsættes øverst i koden i <head>-elementet.  

<head>- er en container for metadata og der placeres mellem <html>-tagget og <body>-tagget.  

Her er et eksempel på en side, der er tilgængelig på engelsk, spansk og dansk.  

<!DOCTYPE html> 
< > 
<head> 
  <title>Din fængende sidetitel</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/da/page” hreflang=”da”> 

</head> 
<body> 
 
Din sides indhold 
 
</body> 
</html> 

Hver gang du oversætter en side, skal der tilføjes et nyt hreflang-tag til alle versioner af siden. Har du fx allerede siden på dansk, engelsk og spansk, men beslutter dig for at oversætte den til tysk, skal det tyske hreflang-tag indsættes I HTML-koden på alle siderne. Det betyder at du nu har fire tags totalt på hver side, fordi alle versioner skal være dobbeltrettede og pege på hinanden.  

Denne metode kan ende med at blive tidskrævende, særligt, hvis du har mange sider og mange sprog på din hjemmeside. Her kan det være en fordel at bruge den hreflang-generator, vi nævnte ovenfor.  

HTTP-header

Hvis du har sider med indhold, der ikke er i HTML-format, kan du med fordel indsætte dit hreflang-tag i sidens http-header. Et eksempel på denne type af indhold, er bl.a. PDF-filer. 

HTTP-headerkoder indeholder information, om de data, der sendes fra en server til en klient, som fx dato og det foretrukne sprog.  

Lad os antage, at du har samme PDF på tre forskellige sprog, dansk, svensk og tysk. Så skal http-headeren i hver af filerne se sådan her ud: 

HTTP/1.1 200 OK

Content-Type: application/pdf

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

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

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

XML-sitemap

Den tredje metode, du kan anvende til implementering af dine hreflang-tags, er at indsætte dem i din sides XML-sitemap. Sitemaps kan du i øvrigt læse mere om lige her.  
 
Kort fortalt, er et XML-sitemap en fil, der giver søgemaskinerne information om de individuelle sider på dit websted.  

Den største fordel ved denne metode er, at du kan redigere alle dine hreflang-tags samme sted. Når du bruger HTML-metoden eller HTTP- header-metoden skal du tilføje et nyt tag på hver eneste side, hver gang du oversætter eksisterende indhold til et nyt sprog. Det kan blive ganske tidskrævende. 

Hvis du vælger denne metode, skal du tilføje et <loc> element for hver URL og indsætte <xhtml:link> for hvert af sprogene siden er tilgængelig på. 

Du kan læse Googles anvisninger og se et eksempel her  

HTML lang og hreflang – hvad er forskellen? 

HTML-lang er også et tag, der kan implementeres for at optimere hjemmesider med indhold på flere sprog. Der er dog forskel på de to tags.  
 
Hovedforskellen er, at HTML-lang er et tag, der indsættes i HTML for at sende signal til søgemaskiner og brugere om sproget på hele webstedet 

Hreflang sender mere detaljerede signaler, ved at specificere sprog på alle de individuelle sider på dit websted. Det gør det nemmere at målrette indholdet til flere lande og sprog. 
 
Googles søgemaskine bruger ikke HTML-lang. Derfor anbefaler de, at hjemmesider med indhold på flere sprog, benytter hreflang-tagget. Microsoft Bing og visse skærmlæsere bruger dog HTML-lang. Det kan derfor give mening at bruge begge, hvis du ønsker at optimere din hjemmeside til flere søgemaskiner og skærmlæsere. 

Sammenfatning

Ønsker du at forbedre brugeroplevelsen og øge trafikken til din hjemmeside ved at udgive indhold på flere sprog, er det afgørende, at du ved, hvordan man sammensætter og implementerer hreflang-tags. En flersproget hjemmeside åbner op for nye muligheder, nye brugere, nye læsere og flere konverteringer. Vi håber, at denne guide hjælper dig med at komme godt i gang.