I en alltmer globaliserad och digitaliserad värld är det viktigt för webbplatser att effektivt nå och kommunicera med en internationell publik.
Här spelar hreflang, ett enkelt men kraftfullt attribut till HTML-länkar, en avgörande roll.
I den här artikeln kommer vi att utforska hreflang från grunden – dess definition, funktion och hur man implementerar det korrekt för att undvika vanliga fallgropar.
Vad Är Hreflang?
Hreflang är ett HTML-attribut som används för att tydliggöra vilket språk och geografisk inriktning en specifik webbsida har.
Detta attribut blir särskilt viktigt för webbplatser som erbjuder innehåll på flera språk.
Genom att använda hreflang kan webbplatsägare instruera sökmotorer som Google om de olika språkversionerna av en sida.
Denna information är avgörande för sökmotorerna för att kunna visa den mest relevanta versionen av sidan till användare baserat på deras språk och geografiska plats.
Hreflang Och Dess Betydelse För SEO
Hreflang är en kritisk komponent för att optimera webbplatser för en global publik.
Dess betydelse för SEO kan inte nog understrykas, särskilt för webbplatser som innehåller flerspråkigt innehåll.
Här är hur hreflang-attribut kan hjälpa din webbnplats:
Ökad Relevans I Sökmotorresultat
När innehåll finns tillgängligt på flera språk är hreflang-attraktet ovärderligt.
Det hjälper sökmotorer som Google och Yandex att visa den mest lämpliga språkversionen av en sida för användare.
Genom att använda hreflang säkerställs att rätt språkversion visas i sökresultaten, vilket ger en bättre användarupplevelse.
Påverkan På Rankning
Gary Illyes från Google har antytt att hreflang-taggar kan ha en direkt inverkan på en sidas rankning.
Sidorna i ett hreflang-kluster delar rankningssignaler, där den bäst matchade sidan kan påverka rankningspositionen.
Det innebär att sidan som är mest relevant för användaren kommer att visas i sökresultaten, vilket förbättrar den totala SEO-prestandan.
Hantering Av Duplicerat Innehåll
Hreflang är en viktig lösning för problemet med duplicerat innehåll.
Om du har flera språkversioner av samma sida kan Google uppfatta dem som duplicerat innehåll.
Hreflang-taggar hjälper till att identifiera dessa sidor som distinkta, baserat på språk och region, vilket minskar risken för att sökmotorer ska indexera endast en version.
Strukturen Hos En Hreflang-Tagg
Hreflang-taggen är enkel och följer en tydlig struktur för att indikera alternativa språkversioner av en webbsida.
Dess grundläggande uppbyggnad ser ut så här:
<link rel="alternate" href="url_av_sida" hreflang="sprak_kod" />
Låt oss bryta ner vad varje del av denna syntax innebär:
- Link rel=”alternate”:
Detta element anger att länken leder till en alternativ version av den aktuella sidan. Det är en indikation till sökmotorer att sidan finns i flera versioner, var och en anpassad för olika språk eller regioner. Href=”url_av_sida”:
Här specificerar du URLen till den alternativa sidan. Detta är adressen till sidan som innehåller den önskade språkversionen.- hreflang=”sprak_kod”:
Detta är själva kärnan i hreflang-taggen. Här anger du språkkoden för den alternativa sidan. Språkkoden följer vanligtvis standarden ISO 639-1, och den kan inkludera en regionkod (till exempel ‘en-GB’ för brittisk engelska eller ‘es-ES’ för spanska i Spanien).
Hreflang-taggen är en signal till sökmotorer, inte ett strikt direktiv.
Det betyder att även om du använder hreflang, kan sökmotorer välja att följa eller ignorera denna signal baserat på deras algoritmer.
Medan Google och Yandex använder hreflang-attributet för att förstå och presentera språk- eller regionanpassat innehåll, använder Baidu och Bing HTML-attributet content-language för att skilja sidans språk.
Hur Skapar Man En Hreflang-Tag?
Att skapa en hreflang är så enkelt som att ladda upp en kort bit kod till din hemsida, men i praktiken kan det ofta innebära mer arbete än vad man tror.
Det första du behöver är att bestämma vilket språk och landskod du vill installera med din hreflang-attribut.
Hreflang stödjer användningen av ISO 639-1 språkkoder med två bokstäver, samt ISO 3166-a alpha-2 lands- och regionskoder.
Om du till exempel har en e-handelsbutik där du vill börja sälja till Norge, utöver Sverige. vill implementera ett hreflang-attribut som visar på att innehållet är för den svenska delen av din e-handel, kan hreflang-koden att se ut så här:
- <link rel=”alternate” href=”https://hemsida.com” hreflang=”en” />
- <link rel=”alternate” href=”https://hemsida.com/se/” hreflang=”se” />
- <link rel=”alternate” href=”https://hemsida.com/no/” hreflang=”no” />
Varje enskild sida bör referera till alla sidor som den har som alternativ, vilket innebär att ovan hreflang-kod bör implementeras på samtliga tre sidor – inkluderat den självrefererade attributet.
Detta innebär att hreflang-attribut är bidirektionella, ett fint ord för att påvisa dess beroende av varandra.
Om du har en hreflang-tag installerad på din svenska sida som pekar mot din engelska version, behöver du också en omvänd tagg på den engelska sidan som pekar mot den svenska.
Genom att implementera det på båda sidor visar du för Google och andra sökmotorer att du har kontroll över båda sidor, och att denna uppsättning är okej från alla parter.
Om du missar eller struntar i att lägga till alla dina referenslänkar kan du förvirra sökmotorernas sökspindlar vilket kan leda till negativa konsekvenser för din SEO.
Specialfall Med Landskod
Men vad händer om du du vill ha flera olika sidor som alla serverar innehåll i samma språk, men som riktar sig in på olika marknader?
Låt oss till exempel säga att du bedriver en e-handelssida som är verksamma i Sverige sedan ett år tillbaka. Ert mål har nu blivit att utöka eran verksamhet till två nya marknader, i Norge och i Danmark.
Eftersom att din webbplats för tillfället är på svenska kommer du att behöva en översatt version som du kan visa för dina nya norska och danska kunder.
Innan du väljer att spendera allt för mycket pengar på att skapa lokaliserat innehåll översätter du dina viktigaste sidor till engelska.
Däremot vill du visa olika sidor för norska och danska kunder, då du vill ha möjligheten att sätta ett något högre pris i Norge för att kompensera för högre fraktkostnader.
För att kunna visa rätt pris för rätt kund kommer du då att behöva en alternativ sida för de olika marknaderna, vilket du uppnår genom att modifiera hreflangtaggen med språkkoden följt av landskoden.
I detta fall skulle koden inkludera “en” som språkkod och “no” eller “dk” som landskod.
<link rel=”alternate” href=”https://hemsida.com/no/” hreflang=”en-no” />
<link rel=”alternate” href=”https://hemsida.com/no/” hreflang=”en-dk” />
X-Path & Standardsida
För att ge en extra dimension till din webbplats SEO, överväg att använda x-default taggar i dina hreflang-implementationer.
Dessa taggar fungerar som en reserv för användare vars språk inte stöds av din webbplats.
De är inte obligatoriska men rekommenderas starkt för en mer heltäckande och användarvänlig upplevelse.
Implementera x-default genom att lägga till en tagg som pekar på din standardsida, vilket är den sida du vill att användare ska landa på om deras specifika språk eller region inte är tillgänglig.
Till exempel, för att ställa in en x-default tagg, skulle din kod se ut så här:
<link rel="alternate" href="<https://hemsida.se>" hreflang="x-default" />Denna tagg bör listas sist i din serie av hreflang-taggar.
Implementering Av Hreflang-Taggar
Hreflang-attributet kan implementeras på flera olika sätt, men en vanlig metod är att använda HTML-taggar.
Detta är särskilt effektivt och lämpligt för de som är nya på hreflang.
Förutom HTML-taggar finns det andra metoder för att implementera hreflang, såsom genom HTTP-rubriker och i webbplatskartor.
Dessa metoder kan vara mer effektiva för större webbplatser eller när du hanterar många olika språkversioner.
1. Implementering Med HTML
För att använda HTML-taggar för hreflang, bör du lägga till relevanta hreflang-taggar i <head>-delen av din webbsida.
Detta innebär att varje sida som har en motsvarande version på ett annat språk bör ha en hreflang-tagg som pekar på den versionen.
Exempel:
Låt oss säga att du har en blogg som är tillgänglig på engelska, svenska och norska.
Här är ett exempel på hur du kan strukturera hreflang-taggar för dessa språkvarianter:
Svensk version:
<link rel="alternate" hreflang="en" href="<https://hemsida.se/artiklar/seo-guide/>" />
Norsk version:
<link rel="alternate" hreflang="en" href="<https://hemsida.se/no/artiklar/seo-guide/>" />Engelsk version:
<link rel="alternate" hreflang="en" href="<https://hemsida.se/en/articles/seo-guide/>" />För en standard eller fall-back version, använd x-default:
<link rel="alternate" hreflang="x-default" href="<https://hemsida.se/artiklar/seo-guide/>" />
Dessa taggar bör läggas till i <head>-delen av var och en av de ovannämnda sidorna.
Att använda HTML-taggar för hreflang kan bli tidskrävande, särskilt för webbplatser med många sidor eller språkversioner.
Om du till exempel lägger till en ny språkversion av en sida, måste du uppdatera hreflang-taggar på alla befintliga språkversioner för att inkludera den nya versionen.
2. Implementering Av Hreflang Via HTTP-Rubriker
För innehåll som inte är i HTML-format, till exempel PDF-filer, är HTTP-rubriker ett effektivt sätt att implementera hreflang-attribut.
HTTP-rubriker, som överför information mellan en server och en klient, kan innehålla diverse data inklusive önskat språk och relaterade URL:er.
HTTP-rubriker är särskilt användbara för filer som PDF, där du inte kan lägga till HTML-taggar direkt i innehållet.
Det gör det möjligt för dig att kommunicera sidans språk och regioninställningar till sökmotorer.
Formatet för hreflang i en HTTP-rubrik ser ut som följande:
Link: <url 1>; rel="alternate"; hreflang="språkkod 1",
<url 2>; rel="alternate"; hreflang="språkkod 2", ...
Förklaring av syntaxen:
- <url x> representerar URL:en till den alternativa sidan. Denna URL måste omslutas av
<och>. language code x är språk- eller regionkoden för den specifika sidan.
För varje språkversion av ditt innehåll måste du ange en uppsättning <url>, rel="alternate", och hreflang-värden, separerade med kommatecken.
Exempel:
Om du har ett PDF-dokument tillgängligt på engelska, spanska och portugisiska, skulle din HTTP-header för varje version av dokumentet se ut så här:
Link: <https://example.com/doc.pdf>; rel="alternate"; hreflang="en",
<https://example.com/es/doc.pdf>; rel="alternate"; hreflang="es",
<https://example.com/pt/doc.pdf>; rel="alternate"; hreflang="pt"
Även om du kan använda denna metod för HTML-innehåll, kan det leda till en ökad belastning på servern i form av fler förfrågningar.
Därför rekommenderas det att använda HTTP-rubriker endast när det är absolut nödvändigt, som med icke-HTML-innehåll.
3. Implementering Av Hreflang I XML-Webbplatskartor
Att använda XML-webbplatskartor för att implementera hreflang-taggar är ett effektivt sätt att hjälpa sökmotorer att förstå och indexera flerspråkiga versioner av din webbplats.
Detta är särskilt användbart för större webbplatser med många sidor och språkversioner.
Steg-för-Steg Process
- Förbered URL, Språk och Land: Börja med att definiera URL:erna för varje språkversion av dina sidor samt specificera språk- och landskoden för varje version.
- Använd Hreflang-generator: För att förenkla processen kan du använda en hreflang-generator. Ange URL, språk och land för varje version och välj alternativet att skapa hreflang-taggar för en XML-webbplatskarta.
- Generera Taggar: Klicka på “GENERERA HREFLANG-taggarna” för att skapa den nödvändiga koden.
- Modifiera din XML-webbplatskarta: Den genererade koden ska sedan kopieras och infogas i din webbplats XML-webbplatskarta.
Exempel på XML-webbplatskarta med hreflang
För en webbplats med innehåll på engelska, spanska och portugisiska, skulle XML-webbplatskartan se ut så här:
<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>"
xmlns:xhtml="<http://www.w3.org/1999/xhtml>">
<url>
<loc><https://example.com></loc>
<xhtml:link rel="alternate" hreflang="en-us" href="<https://example.com>" />
<xhtml:link rel="alternate" hreflang="es-es" href="<https://example.com/es/>" />
<xhtml:link rel="alternate" hreflang="pt-br" href="<https://example.com/pt/>" />
</url>
<url>
<loc><https://example.com/es/></loc>
<xhtml:link rel="alternate" hreflang="en-us" href="<https://example.com>" />
<xhtml:link rel="alternate" hreflang="es-es" href="<https://example.com/es/>" />
<xhtml:link rel="alternate" hreflang="pt-br" href="<https://example.com/pt/>" />
</url>
<url>
<loc><https://example.com/pt/></loc>
<xhtml:link rel="alternate" hreflang="en-us" href="<https://example.com>" />
<xhtml:link rel="alternate" hreflang="es-es" href="<https://example.com/es/>" />
<xhtml:link rel="alternate" hreflang="pt-br" href="<https://example.com/pt/>" />
</url>
</urlset>
I detta exempel innehåller varje <url>-element en <loc>-tagg för sidans URL samt <xhtml:link>-taggar för varje språkversion, komplett med hreflang-attribut och motsvarande URL.
Granskning Av Hreflang På Din Webbplats
Att regelbundet granska din webbplats för hreflang-relaterade problem är avgörande för att upprätthålla effektiv SEO och användarupplevelse.
Misstag med hreflang är vanliga och kan negativt påverka hur din webbplats visas i sökmotorresultat.
Ahrefs Site Audit är ett praktiskt verktyg för att granska din webbplats. Det kan identifiera olika SEO-problem, inklusive de relaterade till hreflang.
Vanliga Hreflang-Problem Och Lösningar
Hreflang-attribut är som sagt enkla att installera, men det är inte ovanligt att stöta på lite problem.
Här är några av de vanligaste problemen och hur du kan lösa de.
Självrefererande Hreflang-Tagg Saknas
Varje språkversion måste lista sig själv samt alla andra språkversioner.
Lösning: Lägg till självrefererande hreflang-taggar på varje sida.
Ogiltiga Hreflang-Taggar
Ogiltiga hreflang-taggar ignoreras av sökmotorer, vilket kan leda till att de missar alternativa sidversioner.
Lösning: Granska och ersätt ogiltiga hreflang-taggar med korrekta språk- och regionkoder.
Sidor Refererade För Fler Än Ett Språk
Att ha flera hreflang-referenser för samma sida skapar förvirring.
Lösning: Se till att varje sida endast refereras en gång per språk i hreflang-taggar.
Saknas Ömsesidig Hreflang (Returlänkar)
Hreflang-taggar kräver reciproka länkar mellan språkversioner.
Lösning: Lägg till ömsesidiga hreflang-taggar på relevanta sidor.
Hreflang Refererar Till Icke-Kanoniska URL:er
Hreflang-taggar som pekar på icke-kanoniska URL:er skapar motsägelser.
Lösning: Uppdatera hreflang-taggar för att endast peka på kanoniska URL:er.
Hreflang Och HTML-Språk Matchar Inte
Inkonsistens mellan hreflang och HTML-språkattribut kan skapa förvirring.
Lösning: Justera HTML-språkattributet för att matcha hreflang.
Hreflang Refererar Till Ofullständiga URL:er
Sökmotorer kan inte visa innehåll som inte finns.
Lösning: Korrigera hreflang-anteckningar för att peka på fungerande sidor.
Fler Än En Sida För Samma Språk
Flera sidor refererade för samma språk i hreflang kan förvirra sökmotorer.
Lösning: Ta bort överflödiga hreflang-referenser.
X-Default Hreflang-Tagg Saknas
X-default taggar rekommenderas för att hantera fall där inget språk matchar användarens preferenser.
Lösning: Lägg till en “x-default” hreflang-tag för att peka på en allmän sida.
För att effektivt hantera hreflang-problem, bör du schemalägga regelbundna genomsökningar av din webbplats med ett verktyg som Ahrefs Site Audit.
Detta säkerställer att nya problem upptäcks och åtgärdas i tid, och hjälper till att upprätthålla en stark SEO-position för din flerspråkiga webbplats.
Var Försiktig Med Automatiska IP-Baserade Omdirigeringar
Automatiska omdirigeringar baserade på användarens IP-adress, cookies eller webbläsarspråk är vanliga på flerspråkiga webbplatser.
Men denna praktik kan orsaka problem, både för användarupplevelsen och för sökmotoroptimering (SEO).
Negativ Användarupplevelse
Automatiska omdirigeringar kan skapa en frustrerande upplevelse för användare som föredrar en annan version än den de automatiskt omdirigeras till.
Detta gäller särskilt för användare som reser eller använder VPN-tjänster, vilka kan leda dem till en irrelevant språkversion av webbplatsen.
Problem För Sökmotorer
Från ett SEO-perspektiv kan automatiska IP-baserade omdirigeringar störa sökmotorernas förmåga att korrekt indexera ditt innehåll.
Google och andra sökmotorer kan ha svårigheter att upptäcka och förstå alla språkvarianter av din webbplats om de ständigt omdirigeras baserat på deras tänkta plats.
Google råder specifikt mot användning av IP-analys för innehållsanpassning.
De betonar att IP-platsanalys inte är tillförlitligt och att det kan förhindra korrekt genomsökning av webbplatsvarianter.
Googles crawler är oftast baserad i USA och varierar inte sin plats för att upptäcka lokala variationer på en webbplats.
Att behandla sökmotorsrobotar annorlunda än vanliga användare kan uppfattas som cloaking, vilket strider mot Googles riktlinjer för webbansvariga.
Cloaking innebär att visa olika innehåll till sökmotorer än till användare, vilket kan leda till straff från sökmotorer.
Alternativ Lösning: Geolocation Banners
Istället för automatiska omdirigeringar kan du använda samma logik för att föreslå en bättre version av sidan via en diskret banner.
Denna banner kan föreslå en språk- eller regionanpassad version av webbplatsen utan att tvinga användaren till den.
- Se till att bannern är liten och diskret. En stor banner kan uppfattas som en interstitiell annons och störa användarupplevelsen.
- Bannern bör erbjuda, inte tvinga, en språkändring eller regional omdirigering baserat på användarens troliga plats.
