Vad betyder hreflang?

Hreflang är en HTML-tagg som beskriver språket för en hemsida. Hreflang används av sökmotorer för att leverera resultat som passar användares preferenser och för att rikta hemsidor till rätt användare. Du som har en hemsida kan använda hreflang för att nå din tänkta publik och få bättre synlighet på Google.

I denna artikel ska vi berätta hur du kan använda hreflang på din hemsida.

Varför är hreflang viktigt för SEO?

Hreflang kan spela en viktig roll för sökmotoroptimering om du vill nå användare, läsare eller kunder i flera olika länder. Sökmotorer försöker nämligen alltid visa innehåll i det språk som användare föredrar.

För innehåll i flera språk

Om du planerar att skapa en flerspråkig webshop för kunder i flera olika länder, bör du använda hreflang för att se till att alla användare kommer till den del av din webshop som visas i deras språk.

Säg till exempel att du besöker netflix.com från Sverige via Google. Även om domänen inte indikerar att du vill se en svensk hemsida, kan Google använda en hreflang-tagg från Netflix för att dirigera dig till en version av netflix.com som är på svenska.

På samma sätt kan du skapa en hemsida med flera olika språk och se till att dina besökare alltid hittar rätt version av din hemsida, med rätt innehåll.

Undvik duplicerat innehåll

Hreflang kan också förhindra att dina översatta sidor tolkas som duplicerat innehåll. En sökmotor som misstänker att du har duplicerat en sida, kan tro att din hemsida försöker fuska sig till bra sökresultat. Risken är då att sidorna inte längre visas för användare. När du använder hreflang indikerar du att innehållet visserligen är liknande men att det presenteras i flera olika språk.

Hur ser hreflang-taggar ut?

En hreflang-tagg är en enkel syntax. Det är ändå viktigt att du förstår hur den ska användas för att fungera som tänkt. Nedan följer ett antal exempel på hur hreflang kan användas, med exempel och kod.

Tre exempel på användning av hreflang

1. Du har skrivit ett blogginlägg på svenska, danska och engelska. Du vill såklart se till att alla läsare kan ta del av ditt inlägg och att det visas korrekt av sökmotorer. Då kan du använda dessa tre taggar.

<link rel=”alternate” href=”https://exempel.se/sv/sida” hreflang=”sv”>   
<link rel=”alternate” href=”https://exempel.se/da/page” hreflang=”da”>   
<link rel=”alternate” href=”https://exempel.se/en/page” hreflang=”en”>

2. Säg istället att du driver en tandvårdsklinik i Jämtland och vill locka kunder från Norge. Då kan du erbjuda din hemsida i tre olika språk, svenska, norska och engelska.

<link rel=”alternate” href=”https://exempel.se/sv/sida” hreflang=”sv”>  
<link rel=”alternate” href=”https://exempel.se/no/page” hreflang=”no”>   
<link rel=”alternate” href=”https://exempel.se/en/page” hreflang=”en”>

3. Säg slutligen att du har en hemsida med underhållning för barn. Hemsidan är gjord på svenska men har anpassningar för finlandssvenska. Då kan du specificera olika varianter av svenska. Denna typ av kodning används också ofta för att skilja på till exempel amerikansk och brittisk engelska.

<link rel=”alternate” href=”https://exempel.se/sv-se/sida” hreflang=”sv-se”> 
<link rel=”alternate” href=”https://exempel.se/sv-fi/sida” hreflang=”sv-fi”>

Vad består hreflang av?

Nu har vi gett tre exempel på hur hreflang kan användas men frågan kvarstår: varför ser koden ut som den gör?

Vi ska ta en närmare titt på vårt första exempel:

<link rel=”alternate” href=”https://exempel.se/sv/sida” hreflang=”sv”>

link rel=“alternate”: Alternate betyder att länken i denna tagg är en alternativ URL för sidan.

hreflang=“da”: I denna del av taggen specificeras språket enligt ett schema. Det går också att specificera land, som i exempel 3.

href=“https://exempel.se/da/page”: Här definieras den URL som gäller för språket.

Språkkoder för hreflang

När du använder hreflang är det viktigt att du vet vilka förkortningar som används för vilka språk. Vi har sammanställt de 20 mest vanliga språkkoderna på webben.

• Engelska: en
• Spanska: es
• Franska: fr
• Tyska: de
• Portugisiska: pt
• Ryska: ru
• Japanska: ja
• Italienska: it
• Nederländska: nl
• Kinesiska (Förenklad): zh-Hans
• Arabiska: ar
• Koreanska: ko
• Turkiska: tr
• Polska: pl
• Svenska: sv
• Danska: da
• Norska: no
• Finska: fi
• Grekiska: el
• Tjeckiska: cs

Du kan såklart hitta fler språk på webben eller få hjälp att generera din hreflang-kod med ett verktyg som detta.

3 tips innan du använder hreflang-taggar

Innan du skriver in din hreflang på din hemsida har vi några tips att dela med oss av. Det är nämligen lätt att göra fel med hreflang och det ska vi såklart undvika!

1. Använd alltid alla hreflang-taggar på alla sidor. Om du till exempel har publicerat en artikel i tre språk måste alla tre hreflang-taggar finnas i alla tre artiklar. Detta gäller även om du har ett ”standardspråk”. Det ska alltid vara möjligt för en sökmotor att hitta alla språkvarianter från varje sida.
2. Hreflang ska också peka på sig själv. Hreflang pekar inte bara på andra varianter som finns på andra URLer. Det är också viktigt att inkludera en hreflang-tagg på den sida som visas. Om du till exempel har två sidor om kattmat på svenska och engelska, ska båda sidorna inkludera båda taggarna.

<link rel=”alternate” hreflang=”en” href=”https://exempel.se/cat-food”/>

<link rel=”alternate” hreflang=”se” href=”https://exempel.se/kattmat”/>

3. Använd x-default för att förbättra användarupplevelsen. Om det händer att du får besök från användare som inte har något av dina språk som preferens, kan du välja ett standardspråk. En användare i Tyskland kan till exempel besöka din hemsida som erbjuds på svenska och engelska. Då kan du definiera den engelska versionen som standard, så att den visas för tyska besökare.

Du definierar en standardsida med taggen x-default. Den kan se ut såhär:

<link rel=”alternate” hreflang=”x-default” href=”https://exempel.se/page”/>

Hur används hreflang-taggar?

Nu har du lärt dig grunderna för hreflang och det är dags att implementera dem på din hemsida! Det finns tre metoder.

Med HTML

HTML är det enklaste och mest grundläggande sättet att använda hreflang. Taggen läggs in i HTML-koden för din hemsida, inom <head>-taggen.

Här är ett exempel på en HTML-sida som använder hreflang-taggar.

<!DOCTYPE html>  
< >  
<head>  
  <title>Din sidtitel</title>  

<link rel=”alternate” href=”https://exempel.se/sv/sida” hreflang=”sv”>  

<link rel=”alternate” href=”https://exempel.se/en/page” hreflang=”en”>  

<link rel=”alternate” href=”https://exempel.se/es/page” hreflang=”es”>  

  
</head>  
<body>  
  
Din sidas innehåll.
  
</body>  
</html>

Om du översätter din sida till fler språk behöver du lägga till en ny hreflang-tagg för det språket på alla existerande sidor. Om du har många språk kan det vara krångligt att skapa och hantera alla hreflang-taggar. Då kan det underlätta att generera hreflang-taggar med en generator.

Använd en HTTP header

Om din hemsida inte är i HTML-format kan du inkludera en hreflang-tagg i en HTTP header. På det sättet kan hreflang till exempel användas för en PDF.

Som exempel kan vi visa hur en HTTP header kan se ut för en PDF som är skapad i tre språk.

HTTP/1.1 200 OK 

Content-Type: application/pdf 

Link: <https://exempel.se/sv/doc.pdf>; rel=”alternate”; hreflang=”sv“   

<https://exempel.se/en/doc.pdf>; rel=”alternate”; hreflang=”en”   

<https://exempel.se/da/doc.pdf>; rel=”alternate”; hreflang=”da”

XML sitemap

Den tredje och sista metoden använder en XML sitemap för att inkludera hreflang-taggar.

En sitemap är en fil som berättar för sökmotorer vilka sidor som finns på din hemsida. I denna fil kan du alltså också berätta om vilka språk som olika sidor är skrivna i. Fördelen med en sitemap är att du kan redigera alla hreflang-taggar på en plats, istället för att redigera filer på många olika sidor eller delar av din hemsida.

För att lägga till en hreflang i en XML sitemap används <loc>. Här är ett exempel:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://www.exempel.se/sv/sida.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="sv"
               href="https://www.exempel.se/sv/sida.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="de-ch"
               href="https://www.exempel.se/schweiz-deutsch/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="en"
               href="https://www.exempel.se/english/page.html"/>
  </url>
</urlset>

HTML-lang eller hreflang?

Det finns en annan tagg kallad HTML-lang som också kan användas för att förbättra sidor. Det finns en betydande skillnad mellan HTML-lang och hreflang som du behöver känna till.

Skillnaden är att HTML-lang används för att indikera vilket språk en hel hemsida är skriven på medan hreflang specificerar språket för en enskild sida.

HTML-lang används inte av Google för att identifiera språk på hemsidor. Det beror till viss del på att Google ofta kan identifiera språket på en hemsida utan någon tagg alls. HTML-lang används dock av Microsoft Bing och ibland av skärmläsare. Det kan därför ändå vara bra att använda HTML-lang.

Hreflang kan vara avgörande för din hemsida

Nu när du har lärt dig om hreflang hoppas vi att du förstår att hreflang-taggar kan vara avgörande för din hemsida, hur de kan användas av sökmotorer och hur det påverkar dina läsare. Lycka till!