Hoppa till innehåll
Meirra

Bemästra Hreflang-taggar för Internationell SEO

Komplett teknisk guide för att implementera hreflang-taggar korrekt på flerspråkiga webbplatser. Lär dig bästa praxis, undvik vanliga misstag och förbättra din internationella SEO.

Updated: 2024-12-20
20 minuters läsning
Teknisk Guide
M

Meirra

SEO- och Webbutvecklingsexpert, Meirra

Den Kompletta Hreflang-guiden

Bemästra flerspråkig SEO med självförtroende

Förstå Hreflang

Hreflang-attributet berättar för sökmotorer vilket språk du använder på en specifik sida, så att de kan visa rätt version för användare som söker på det språket.

Introducerat av Google 2011 är hreflang nu en kritisk komponent i internationell SEO, som hjälper till att undvika problem med duplicerat innehåll och säkerställer att användare ser innehåll på sitt föredragna språk.

Attributet använder ISO-språkkoder (som 'en' för engelska eller 'sv' för svenska) och valfria regionala undertaggar (som 'sv-SE' för svenska i Sverige eller 'sv-FI' för svenska i Finland).

Denna omfattande guide täcker allt du behöver för att korrekt implementera hreflang-taggar för internationella webbplatser. Hreflang-implementering är en av de mest tekniskt utmanande aspekterna av flerspråkig SEO, men när det görs korrekt säkerställer det att sökmotorer visar rätt språkversion för rätt användare. Vår plattform spårar hreflang-prestanda i realtid.

Vi går igenom flera implementeringsmetoder, tillhandahåller testade kodexempel, erbjuder specifik vägledning för internationell expansion och hjälper dig att felsöka vanliga fel. Allt med live-instrumentpanelövervakning.

Grundläggande Exempel

Grundläggande Hreflang-implementering

HTML-länkelement i head-sektionen

HTML
<head>
  <!-- Other meta tags, title, etc. -->

  <!-- English page (example.com/page) would have these tags: -->
  &lt;link rel="alternate" hreflang="en" href="https://example.com/page/" /&gt;
  &lt;link rel="alternate" hreflang="es" href="https://example.com/es/page/" /&gt;
  &lt;link rel="alternate" hreflang="x-default" href="https://example.com/page/" /&gt;

  <!-- Spanish page (example.com/es/page) would have these same tags: -->
  &lt;link rel="alternate" hreflang="en" href="https://example.com/page/" /&gt;
  &lt;link rel="alternate" hreflang="es" href="https://example.com/es/page/" /&gt;
  &lt;link rel="alternate" hreflang="x-default" href="https://example.com/page/" /&gt;
</head>

Varför Det Är Viktigt

  • Förhindrar problem med duplicerat innehåll mellan språkversioner
  • Säkerställer att sökmotorer visar rätt språk för användare
  • Hjälper till att upprätthålla separata indexrankningar för varje språkversion
  • Förbättrar användarupplevelsen genom att visa innehåll på användarnas föredragna språk
  • Kritiskt för företag som expanderar till internationella marknader

Vanliga Misstag

  • Saknade returlänkar (inte skapa dubbelriktade referenser)
  • Felaktiga språk- eller landkoder
  • Blanda relativa och absoluta URL:er
  • Motsägande canonical- och hreflang-signaler
  • Felaktig nästning i XML-sitemaps
  • Saknade självrefererande taggar

Hreflang-språkkoder

Utforska giltiga språkkoder att använda i dina hreflang-taggar.

en
Vanlig

Engelska

en-US
Vanlig

Engelska (USA)

en-GB
Vanlig

Engelska (Storbritannien)

en-CA
Vanlig

Engelska (Kanada)

en-AU
Vanlig

Engelska (Australien)

es
Vanlig

Spanska

es-ES
Vanlig

Spanska (Spanien)

es-MX
Vanlig

Spanska (Mexiko)

es-CO
Vanlig

Spanska (Colombia)

es-AR
Vanlig

Spanska (Argentina)

fr
Vanlig

Franska

fr-FR
Vanlig

Franska (Frankrike)

fr-CA
Vanlig

Franska (Kanada)

pt
Vanlig

Portugisiska

pt-BR
Vanlig

Portugisiska (Brasilien)

pt-PT
Vanlig

Portugisiska (Portugal)

zh
Vanlig

Kinesiska

zh-CN
Vanlig

Kinesiska (Kina)

zh-TW
Vanlig

Kinesiska (Taiwan)

de
Vanlig

Tyska

de-DE
Vanlig

Tyska (Tyskland)

it
Vanlig

Italienska

it-IT
Vanlig

Italienska (Italien)

ja
Vanlig

Japanska

ja-JP
Vanlig

Japanska (Japan)

ko
Vanlig

Koreanska

ko-KR
Vanlig

Koreanska (Sydkorea)

ru
Vanlig

Ryska

ru-RU
Vanlig

Ryska (Ryssland)

ar
Vanlig

Arabiska

Kodformat

Språkkoder följer ISO 639-1-standarden. Du kan använda endast språkkoder (t.ex. 'sv') eller kombinationer av språk-region (t.ex. 'sv-SE').

Interaktivt Verktyg

Hreflang-kodgenerator

Generera korrekt hreflang-kod för din flerspråkiga webbplats genom att ange dina URL:er nedan.

Instruktioner

  1. Ange din basdomän (example.com)
  2. Lägg till sidorna du vill generera kod för
  3. Ange vilka språk och regioner varje sida är tillgänglig på
  4. Välj din föredragna implementeringsmetod (HTML, HTTP-headers eller XML-sitemap)
  5. Kopiera den genererade koden och implementera den på din webbplats

Hreflang-kodgenerator

Generera korrekt hreflang-kod för din flerspråkiga webbplats genom att ange dina URL:er nedan.

Domäninställningar

Implementeringsmetod

Sidor

/ /
Tillgängliga språk

Kod: 'sv' för svenska, 'en' för engelska, 'sv-SE' för Sverige, 'x-default' för standard

Genererad kod

HTML Head Method

HTML

Implementeringstips

  • Inkludera alltid x-default-taggen för att hantera användare med språkpreferenser som inte matchar någon av dina versioner
  • Se till att varje språkversion inkluderar länkar till alla andra språkversioner, inklusive sig själv
  • Använd absoluta URL:er (som börjar med http:// eller https://) i alla hreflang-taggar
  • Testa din implementering med verktygen som nämns i testsektionen
  • Kom ihåg att hreflang är en antydan, inte ett direktiv - sökmotorer kan fortfarande visa en annan version om de tror att den är mer relevant
  • För konsekvens, använd samma metod (HTML head, HTTP headers eller XML sitemap) över hela din webbplats
Kod

Implementeringsmetoder

Olika sätt att implementera hreflang, var och en med sina egna fördelar

Metoder

HTML Head-Taggar

Bästa alternativet för de flesta webbplatser

Lägg till hreflang-taggar direkt i <head>-sektionen på varje sida

Direkt kontroll över taggar på varje sida

Enkelt att implementera för små webbplatser

Fungerar med alla sökmotorer

Kodexempel

Grundläggande HTML-Implementation

HTML
<link rel="alternate" hreflang="en" href="https://example.com/page" />
<link rel="alternate" hreflang="sv" href="https://example.com/sv/page" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Verkligt Exempel

Här är ett exempel på hur hreflang-implementering ser ut på en riktig webbplats:

Booking.com (HTML head-implementering)

Booking.com-webbplatsen använder hreflang-taggar i head för varje språk/region

HTML
<!DOCTYPE html>
<html lang="es-ES">
<head>
  <meta charset="utf-8">
  <title>Guía de Viajes España | Booking.com</title>
  
  <!-- Self-reference (Spanish - Spain) -->
  <link rel="alternate" hreflang="es-ES" href="https://www.booking.com/destinacione/pais/es.es.html" />
  
  <!-- Other language versions -->
  <link rel="alternate" hreflang="en-GB" href="https://www.booking.com/destinations/country/es.en-gb.html" />
  <link rel="alternate" hreflang="en-US" href="https://www.booking.com/destinations/country/es.html" />
  <link rel="alternate" hreflang="de" href="https://www.booking.com/destinations/country/es.de.html" />
  <link rel="alternate" hreflang="fr" href="https://www.booking.com/destinations/country/es.fr.html" />
  <link rel="alternate" hreflang="it" href="https://www.booking.com/destinations/country/es.it.html" />
  
  <!-- Default version -->
  <link rel="alternate" hreflang="x-default" href="https://www.booking.com/destinations/country/es.html" />
  
  <link rel="canonical" href="https://www.booking.com/destinacione/pais/es.es.html" />
  <!-- Other meta tags... -->
</head>
<body>
  <!-- Page content -->
</body>
</html>

Obs: Detta är ett förenklat exempel baserat på verkliga implementeringar. Faktiska implementeringar kan variera.

Professionella Tips

Inkludera självrefererande taggar

Använd absoluta URL:er

Verifiera dubbelriktade länkar

Svenska Marknadsspecifikationer

Viktiga överväganden vid inriktning mot den svenska marknaden

Regionala Variationer

Svenska används främst i Sverige (sv-SE) och delar av Finland (sv-FI). Överväg att använda sv-SE för den svenska huvudmarknaden.

Lokalt Sökbeteende

Svenska användare söker ofta annorlunda än engelska användare. Nyckelord kanske inte är direkta översättningar, och sökintention kan variera.

Domänstrategi

Överväg att använda ccTLD:er (.se för Sverige) eller underkataloger med korrekt geoinriktning för bättre lokal synlighet.

Innehållslokalisering

Utöver översättning, anpassa innehållet för kulturell relevans, lokala exempel, valuta och måttenheter.

Praktisk Guide

CMS-implementering

Hur man implementerar hreflang i populära innehållshanteringssystem

WordPress

WordPress

Populärt CMS med starkt flerspråkigt stöd genom plugins

1

Installera och aktivera WPML

2

Konfigurera språk och URL-struktur

3

WPML lägger automatiskt till hreflang-taggar

Shopify

Shopify

E-handelsplattform med inbyggda flerspråkiga funktioner

1

Aktivera flera språk i Shopify-admin

2

Konfigurera språkspecifika URL:er

3

Använd appar för avancerad hreflang-kontroll

Rekommenderat Plugin:

Langify eller Weglot
Drupal

Drupal

Kraftfullt CMS med inbyggda flerspråkiga funktioner

1

Aktivera moduler för Språk och Innehållsöversättning

2

Konfigurera språkdetektering och -val

3

Använd Metatag-modulen för hreflang

Rekommenderat Plugin:

Flerspråkiga Kärnmoduler
WooCommerce

WooCommerce

E-handelsplugin för WordPress med flerspråkiga funktioner

1

Installera och aktivera WPML eller Polylang med respektive WooCommerce-tillägg

2

Konfigurera språk och översättningsinställningar

3

Översätt produkter, kategorier och kassasidor

4

Verifiera att hreflang-taggar är korrekt implementerade på produktsidor

5

Konfigurera valuta och betalningsgateways för olika regioner vid behov

Magento

Magento

Företags-e-handelsplattform med inbyggt flerspråkigt stöd

1

Konfigurera butiksvyer för varje språk/lokalkombination i din Magento-admin

2

Konfigurera lokal och språk för varje butiksvy

3

Översätt ditt innehåll, produkter och butiksinformation

4

Aktivera och konfigurera den inbyggda hreflang-tagggeneratorn

5

Verifiera implementeringen genom visa-källa eller webbläsarutvecklingsverktyg

Rekommenderat Plugin:

Inbyggda Butiksvyer
Webflow

Webflow

Visuell webbdesignplattform med anpassade kodfunktioner

1

Skapa separata sidor eller mappar för varje språkversion

2

Lägg till anpassad kodsnutt i head-sektionen på varje sida

3

Se till att varje språkversion har länkar till alla andra språkversioner

4

Använd absoluta URL:er för alla hreflang-referenser

5

Testa implementeringen med webbläsarens utvecklarverktyg

Rekommenderat Plugin:

Weglot eller anpassad kod
Anpassade Ramverk

Anpassade Ramverk

Headless CMS eller specialbyggda lösningar

1

Identifiera din webbplats språk- och regionstruktur

2

Skapa språkdetektering och URL-routinglogik

3

Implementera språkväxlare och korrekta omdirigeringar

4

Lägg till hreflang-taggar i alla sidmallar med din föredragna metod

5

Skapa automatiserade tester för att säkerställa att dubbelriktade länkar bibehålls

Rekommenderat Plugin:

Anpassad implementering
Verifiering

Testning & Validering

Verktyg och tekniker för att validera din hreflang-implementation

Google Search Console

Googles officiella verktyg för att övervaka hreflang-implementering och identifiera problem.

Rapporten Internationell inriktning visar hreflang-fel

Verifiering av språk- och landinriktning

Crawl-täckning för olika språkversioner

Direkt feedback från Googles crawler

Hreflang-taggar Testverktyg

Dedikerat verktyg för att validera hreflang-implementering över hela din webbplats.

Validerar dubbelriktade länkar

Kontrollerar korrekta språkkoder

Identifierar saknade returtaggar

Testar från flera platser

Screaming Frog SEO Spider

Omfattande SEO-crawler som inkluderar funktioner för hreflang-validering.

Crawlar hela webbplatsen efter hreflang-taggar

Exporterar hreflang-data för analys

Identifierar implementeringsfel

Validerar mot XML-sitemaps

Sitebulb

Visuellt webbplatsgranskning-verktyg med kraftfulla hreflang-analysfunktioner.

Visuell hreflang-kartläggning

Identifierar föräldralösa språkversioner

Detaljerade implementeringsrapporter

Integration med Google Analytics

ContentKing

SEO-övervakningsplattform i realtid som spårar hreflang-ändringar.

Hreflang-övervakning i realtid

Varningar för implementeringsproblem

Historisk spårning av ändringar

API-åtkomst för automatisering

Chrome Developer Tools

Inbyggda webbläsarverktyg för snabb hreflang-verifiering.

Visa sidkälla för manuell inspektion

Nätverksfliken för att kontrollera HTTP-headers

Konsol för JavaScript-felsökning

Gratis och alltid tillgänglig

Vad Du Ska Leta Efter Vid Testning

Tekniska Kontroller

  • Alla taggar har fullständiga absoluta URL:er
  • Giltiga språkkoder (sv-SE, en-US, etc.)
  • Alla sidor inkluderar självrefererande taggar
  • XML-sitemap använder korrekt xhtml:link-syntax

Strukturella Kontroller

  • Fullständiga dubbelriktade länkar mellan alla versioner
  • x-default-tagg korrekt konfigurerad
  • Överensstämmelse mellan canonical- och hreflang-taggar
  • Inga omdirigeringar som stör hreflang