Flerspråkiga webbplatser och hreflang

Modul 3: Den tekniska grunden för en sida · Lästid: 12 minuter

Lärandemål: Efter den här lektionen kan du konfigurera hreflang korrekt för en webbplats på flera språk eller för flera länder och kontrollera att hänvisningarna är ömsesidiga.

Nyckelbegrepp: språkversion, hreflang, språkkod (ISO 639-1), landskod (ISO 3166-1 alpha-2), skriftkod (ISO 15924), x-default, ömsesidighet (hänvisning tillbaka), hänvisning till sig själv, HTML, HTTP-huvud eller webbplatskarta, separata adresser per språk, ingen automatisk vidarebefordran efter språk, lang-attribut

Problemet: vilken version ska visas?

Bloemenatelier Lotte växer. Det kommer en engelsk version av webbplatsen för turister och utlandsboende, och en tysk för kunder precis på andra sidan gränsen. Samma sida med brudbuketter finns nu i tre exemplar:

https://www.example.com/bruidsboeketten          (nederländska)
https://www.example.com/en/bridal-bouquets       (engelska)
https://www.example.com/de/brautstraeusse        (tyska)

En sökmotor måste vid varje sökning välja vilken av de tre den ska visa. Någon i Köln som söker på tyska ska få den tyska versionen, inte den nederländska. Med hreflang talar du om för sökmotorn vilka sidor som är språkversioner av varandra och för vilket språk eller land varje version är avsedd.

hreflang är inget rankningstrick. Det ser bara till att rätt version visas på rätt ställe. Det är inte heller språkigenkänning: Google skriver att den inte använder hreflang eller HTML:s lang-attribut för att avgöra vilket språk en sida har; det gör Google själv, utifrån texten. Ställ ändå in lang-attributet (<html lang="nl">) rätt, för webbläsare, översättningsprogram och skärmläsare.

Först grunden: separata adresser

Google rekommenderar en egen adress per språkversion och avråder från att byta språk med cookies eller webbläsarinställningar på samma adress. Skälet är praktiskt: Googlebot crawlar oftast från USA. Om innehållet på en adress ändras beroende på vem som tittar, ser Googlebot kanske bara en version.

Av samma skäl: skicka inte besökare automatiskt vidare till en annan språkversion utifrån deras språk eller plats. Google avråder uttryckligen från det. En nederländare på semester i Tyskland vill ha den nederländska webbplatsen; sätt hellre ett tydligt språkval på sidan och låt alla nå alla versioner.

Använder du länder i stället för språk, med separata domäner som example.de och example.nl, gäller samma sak. Versionerna behöver inte ligga på samma domän.

Så ser hreflang ut

I <head> på varje språkversion står samma uppsättning rader:

<link rel="alternate" hreflang="nl" href="https://www.example.com/bruidsboeketten">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/bridal-bouquets">
<link rel="alternate" hreflang="de" href="https://www.example.com/de/brautstraeusse">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/bruidsboeketten">

Fyra regler du behöver kunna:

1. Varje version nämner sig själv och alla andra. Den engelska sidan har alltså exakt samma fyra rader, inklusive raden för en som pekar på sig själv.
2. Hänvisningarna måste vara ömsesidiga. Pekar den nederländska sidan på den tyska, måste den tyska peka tillbaka på den nederländska. Google säger: om två sidor inte båda pekar på varandra ignoreras hänvisningarna. Det är det vanligaste felet, och därför kontrollerar uppgiften i den här lektionen just det.
3. Fullständiga adresser. Med https://. En sökväg som /en/bridal-bouquets eller //www.example.com/en/... räknas inte.
4. I ett korrekt <head>. Raderna står i HTML-sidans <head>. Om något bryter av tidigare i head, till exempel en lös <img> eller <div> som inte hör hemma där, kan en sökmotor se head som avslutat och missa resten.

Koderna

Värdet för hreflang är en språkkod, eventuellt följd av en landskod:

Språkkoden kommer från ISO 639-1 (två bokstäver), landskoden från ISO 3166-1 alpha-2. Versaler eller gemener spelar ingen roll, men brukligt är språk med små bokstäver och land med stora. Tre fallgropar:

• Bara ett land fungerar inte. hreflang="be" betyder vitryska (språkkoden be), inte Belgien. Ett land står alltid efter ett språk: nl-BE eller fr-BE.
• en-UK finns inte. Landskoden för Storbritannien är GB. Google skriver att koder som EU, UN eller UK inte har någon effekt.
• Använd ett land bara om versionerna verkligen skiljer sig (andra priser, valuta, leverans, stavning). Har du en tysk version för alla, använd helt enkelt de.

x-default

x-default är valfritt. Med det anger du sidan för besökare som ingen av dina versioner passar, till exempel någon som talar franska. Ofta är det ditt huvudspråk eller en sida där besökaren själv väljer språk.

Tre sätt, välj ett

Google känner till tre likvärdiga sätt att ange hreflang:

1. I HTML, med <link>-rader i head, som ovan. Det vanligaste.

2. Som HTTP-huvud Link, praktiskt för filer utan HTML, till exempel en pdf:

   Link: <https://www.example.com/en/price-list.pdf>; rel="alternate"; hreflang="en"

3. I webbplatskartan, med xhtml:link-rader per <url>. Praktiskt för stora webbplatser, eftersom sidorna då inte blir tyngre.

Du behöver inte kombinera dem. Använder du flera måste de säga exakt samma sak.

hreflang och canonical tillsammans

hreflang och canonical (lektion 3.5) samverkar, men blanda inte ihop dem:

• Varje språkversion har en canonical till sig själv. Den engelska sidan är ingen kopia av den nederländska, så den pekar inte på den nederländska som kanonisk adress. Gör du det säger du "den engelska sidan finns egentligen inte", och då faller den ur indexet.
• Adresserna i hreflang är versionernas kanoniska adresser. Pekar hreflang på en adress som vidarebefordrar, ger 404, har noindex eller har en canonical till något annat, går gruppen sönder.

När Google bestämmer den kanoniska adressen föredrar den adresser som ingår i en hreflang-grupp. En korrekt grupp hjälper alltså även din kanonisering.

I praktiken: låt systemet sköta det

Att underhålla hreflang för hand är felbenäget: med tio språk och hundra sidor blir det tusen rader som alla måste stämma. Låt ditt webbplatssystem göra det. WebOkés AI Builder lägger på en flerspråkig webbplats in hreflang-hänvisningar på varje sida till samma sida på de andra språken, plus en x-default till huvudspråket, och utelämnar medvetet en sida utan översatt motsvarighet ur gruppen. I WordPress gör flerspråkiga tillägg samma sak. Hos andra webbplatsbyggare hittar du det under namn som "språk" eller "internationellt". Kontrollera sedan själv att hänvisningarna stämmer åt båda hållen; det gör uppgiften.

Sammanfattning

• hreflang talar om vilka sidor som är språk- eller landsversioner av varandra; det känner inte igen språk och är inget rankningstrick.
• Varje version har en egen adress, ingen automatisk vidarebefordran efter språk eller plats.
• Varje version nämner sig själv och alla andra, med fullständiga adresser, och varje hänvisning måste komma tillbaka; annars ignorerar Google den.
• Koder: språk från ISO 639-1, eventuellt med land från ISO 3166-1 alpha-2 (en-GB, inte en-UK); x-default för resten.
• Varje version har en canonical till sig själv; hreflang pekar bara på kanoniska adresser som ger 200.

Quiz

Uppgift

Uppgift A3.6: Är dina hreflang-hänvisningar ömsesidiga? Fyll i adressen till en sida som finns på flera språk. Programmet samlar in hreflang-hänvisningarna från head och Link-huvudet, kontrollerar koderna och hänvisningen till sig själv, hämtar varje annan språkversion och kontrollerar att den pekar tillbaka, ger 200, saknar noindex och har en canonical till sig själv. Har du ingen egen flerspråkig webbplats? Använd https://european-union.europa.eu/index_nl.

Läs mer

• Google Search Central, Berätta för Google om lokaliserade versioner av din sida: https://developers.google.com/search/docs/specialty/international/localized-versions
• Google Search Central, Hantera flerspråkiga och internationella webbplatser: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites
• Google Search Central, Slå ihop dubbla webbadresser: https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
• ISO 639 språkkoder (Library of Congress): https://www.loc.gov/standards/iso639-2/php/code_list.php