Die wichtigsten SEO-Probleme, die eine internationale Expansion mit sich bringt, sind:
- Suchmaschinen zu helfen, zu verstehen, welche Seite für welche Region/Sprache eingestuft werden sollte
- Verhindern, dass regions- oder sprachspezifische Seiten zu Problemen mit doppeltem Inhalt führen
- In diesem Artikel stellen wir Ihnen eine Funktion namens Hreflang vor, die zur Lösung dieser internationalen SEO-Probleme eingesetzt wird.
Wieso benötigen wir Hreflang?
Zunächst einmal: Warum brauchen wir überhaupt hreflang?
Wenn eine Marke mehrere Websites für verschiedene Regionen hat, woher wissen dann die Suchmaschinen, welche Website für welche Region gedacht ist?
Ich möchte dies am Beispiel der Fitnessmarke Gymshark veranschaulichen. Gymshark verwendet Shopify und hat verschiedene Websites für unterschiedliche Zielgruppen:
UK - https://uk.gymshark.com
Deutschland - https://de.gymshark.com
Frankreich - https://fr.gymshark.com
Diese Websites sind in die jeweiligen Landessprachen übersetzt, was Google einen deutlichen Hinweis darauf gibt, zu welcher Region jede Website gehört. Gymshark hat aber auch eine Website für die USA und eine für Kanada:
USA - https://www.gymshark.com Kanada - https://ca.gymshark.com/
Der Inhalt dieser beiden Websites ist in Englisch. Wie also können Suchmaschinen diese von der englischsprachigen britischen Website unterscheiden und sicherstellen, dass jede Website in der richtigen Region eingestuft wird?
An dieser Stelle kommt Hreflang ins Spiel.
Was ist Hreflang überhaupt?
Hreflang ist ein HTML-Attribut, das den Suchmaschinen anzeigt, wenn es alternative Versionen einer Seite gibt, die für eine andere Region/Sprache bestimmt sind.
Hreflang kann auf verschiedene Weise implementiert werden, aber die häufigste ist ein einfaches Meta-Tag, das auf jeder Seite mit alternativen Versionen erscheint. Hier ist ein Beispiel von Gymshark:
<link rel="alternate" href="https://www.gymshark.com/" hreflang="en-us" />
Dieser hreflang-Tag befindet sich auf der britischen Gymshark-Homepage "https://uk.gymshark.com/".
Er teilt Suchmaschinen mit, dass die USA-Version dieser Seite unter "https://www.gymshark.com/" zu finden ist.
Der hreflang-Tag enthält zwei wichtige Attribute:
1 - Href Das href ist ein Link zu der alternativen Seite. Es muss die vollständige URL-Adresse sein und es muss sich um eine funktionierende Seite handeln. Es teilt den Suchmaschinen mit, dass dies eine alternative Version der Seite ist, die gerade angezeigt wird.
2 - Hreflang Das hreflang-Attribut enthält den Sprachcode (ISO 639-1) und optional den Ländercode (ISO 3166-1) der Zielgruppe der alternativen Seite. Der Ländercode ist fakultativ, aber der Sprachcode ist eine Voraussetzung.
Einige Beispiele für hreflang-Attribute mit verschiedenen Kombinationen aus Sprache und Land:
- en - Englischsprachige
- en-GB - Englischsprachige im Vereinigten Königreich
- fr-FR - Französischsprachige in Frankreich
- en-US - Englischsprachige in den USA
- it - Italienischsprachige
- it-CH - Italienischsprachige in der Schweiz.
Durch die Verknüpfung von "href" und "hreflang" wissen die Suchmaschinen, dass diese alternative URL (die href) für diese spezielle Zielgruppe (den hreflang) bestimmt ist.
Abweichende Seiten
Es ist wichtig, daran zu denken, dass hreflang auf Seitenebene und nicht auf Domainebene funktioniert. Hreflang-Tags deklarieren "alternative Seiten", nicht "alternative Websites". Viele Websites verwenden hreflang-Tags, um alternative sprach-/regionalspezifische Seiten auf derselben Domain zu deklarieren.
Sie können zum Beispiel Unterordner verwenden, um alternative Sprach-/Regionalversionen Ihrer Website zu hosten. So hat Apple seine internationalen Websites mit Ordnern eingerichtet:
UK: https://www.apple.com/uk/
ES: https://www.apple.com/es/
FR: https://www.apple.com/fr/
X-Default
Es gibt einen speziellen hreflang-Fallback-Wert namens 'x-default'. Stellen Sie sich "x-default" als die Webseite vor, die von Suchmaschinen eingestuft werden soll, wenn kein anderer hreflang-Link mit der Sprache/Region des Suchenden übereinstimmt.
Nehmen wir wieder Gymshark als Beispiel. Das Unternehmen hat einen Laden für den Rest der Welt, der sich unter row.gymshark.com befindet. Dieser wird als x-default deklariert.
<link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />
Wenn also jemand in einer Sprache/einem Ort sucht, die/der nicht in den hreflang-Tags von Gymshark angegeben ist, wird Google höchstwahrscheinlich den RoW-Store von Gymshark anzeigen.
Müssen Sie Hreflang hinzufügen?
Sie müssen nur dann Hreflang-Tags hinzufügen, wenn Sie zwei nahezu identische Seiten haben, die unterschiedliche Sprach-/Regionalgruppen ansprechen. Wenn es keine alternative Version einer Seite gibt, brauchen Sie keine Hreflang-Tags hinzuzufügen.
Hreflang Regeln
Damit hreflang-Tags gültig sind, müssen sie bestimmten Regeln folgen:
1 - Rücklinks - Wenn eine Seite hreflang-Links zu einer alternativen Seite enthält, muss die alternative Seite hreflang-Links zurück zur ersten Seite enthalten. Wenn zum Beispiel eine britische Gymshark-Seite einen hreflang-Link hat, der auf eine deutsche Gymshark-Seite zeigt, muss die deutsche Seite einen hreflang-Link zurück zur britischen Version haben.
2 - Funktionierende Seiten - Jede Seite, auf die ein hreflang-Link zeigt, muss einen 200-Statuscode zurückgeben. Mit anderen Worten: hreflang-Links müssen funktionierende Seiten sein.
3 - Selbstreferenzierender Hreflang-Tag - Jede Seite, die hreflang-Links enthält, muss auch einen hreflang-Link zu sich selbst haben. Wir nennen dies einen selbstreferenzierenden hreflang-Link. Der selbstreferenzierende hreflang-Link muss die Standard-Deklaration für Sprache/Land enthalten.
Wie man Hreflang zu Shopify hinzufügt
Wie fügt man nun hreflang-Tags zu Shopify hinzu? Wie bei den meisten Content-Management-Systemen gibt es auch bei Shopify Nuancen, die sich darauf auswirken, was Sie auf der Plattform tun können und was nicht. Es ist zwar möglich, hreflang über die XML-Sitemap oder die HTTP-Header-Methode zu Shopify hinzuzufügen, doch erfordert dies eine umfangreiche technische Konfiguration, weshalb wir dies nicht empfehlen.
Für Shopify-Websites empfehlen wir für die Implementierung von Hreflang immer HTML-Tags. Das physische Hinzufügen von Hreflang-Tags zu Ihrer Website ist relativ einfach, aber Sie müssen dies auf eine Weise tun, die sicherstellt, dass Ihre Hreflang-Tags immer validiert werden. Denken Sie an die drei oben genannten Regeln:
Es muss einen hreflang-Link geben, der von der alternativen Seite zurückführt
Die alternative Seite muss eine funktionierende URL sein
Auf jeder Seite, die hreflang-Tags enthält, muss ein selbstreferenzierendes hreflang-Tag vorhanden sein.
Hinzufügen von Hreflang zu Shopify über eine App
Es gibt einige Shopify-Apps, die Hreflang-Tags für Sie zu Ihren Seiten hinzufügen. Übersetzungs-Apps wie Weglot und Langify generieren automatisch Ihre Hreflang-Tags und fügen sie zu Ihren Seiten hinzu.
Auch wenn Apps Ihrem Shopify-Shop Hreflang-Tags hinzufügen können, ist dies unserer Erfahrung nach nicht die beste Methode. Der App-Ansatz funktioniert nur, wenn Sie einen einzigen Shop haben, der mehrere Sprachen anbietet. Die meisten Apps bieten weder Sprache+Land hreflang-Targeting noch berücksichtigen sie mehrere Shops in unterschiedlichen Domains. Shopify-Apps sind nicht unser empfohlener Ansatz für Hreflang.
Fügen Sie Hreflang-Tags zu Ihrer theme.liquid-Datei hinzu
Wenn Sie zwei Shops mit identischen Seiten und URLs haben (bei denen sich nur die Domain unterscheidet), kann das Hinzufügen gültiger hreflang-Tags recht einfach sein. Da es sich bei den beiden Websites um vollständige Klone handelt, wissen Sie, dass es für jede Seite auf Site A eine Entsprechung auf Site B gibt.
Daher können Sie den Code Ihres Themes so bearbeiten, dass die hreflang-Tags dynamisch anhand des URL-Pfads der angezeigten Seite erstellt werden.
Genau das tut der folgende flüssige Code:
- <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" />
- <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" />
- <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />
Dieser Codeschnipsel kann in den Abschnitt Ihrer theme.liquid-Datei eingefügt werden. Sie müssen die "mystore.com"-Instanzen durch Ihre tatsächlichen Domainnamen ersetzen. Wenn dieses Snippet vorhanden ist, werden Ihre Seiten hreflang-Tags ausgeben, die den kanonischen Pfad der Seite verwenden, um den URL-Pfad zu erstellen.
Da bei dieser Methode der Code Ihrer Website bearbeitet werden muss, empfehlen wir Ihnen dringend, einen Shopify-Experten zu beauftragen, die Änderung für Sie vorzunehmen.
Verwenden Sie ein benutzerdefiniertes Feld (empfohlener Shopify Hreflang-Ansatz)
Wie fügen Sie Hreflang-Tags für mehrere Shopify-Websites mit Tausenden von Produkten hinzu, bei denen die URL-Handles nicht übereinstimmen? Sie werden nicht die Zeit haben, Hreflang-Tags Seite für Seite hinzuzufügen, und eine App kann dies nicht für Sie tun.
In diesem Fall empfehlen wir die Verwendung einer anderen App namens Custom Fields. Mit benutzerdefinierten Feldern können Sie völlig neue Meta-Felder auf Ihrer Website erstellen. Wann immer wir mit komplexen hreflang-Situationen auf Shopify zu tun haben, empfehlen wir unseren Kunden die Verwendung von Custom Fields, um ein hreflang-Metafeld zu erstellen. Der Wert des hreflang-Metafeldes wird in den Abschnitt der Seite ausgegeben.
Mit diesem Ansatz können Sie Ihre eigenen hreflang-Tags in Excel erstellen und sie dann direkt in das benutzerdefinierte Feld auf Seitenbasis einfügen.
Noch besser ist, dass Sie Ihre hreflang-Tags über einen csv-Upload importieren können, wenn Sie den Plan Custom Fields Plus haben. Wir verwenden diesen Ansatz regelmäßig, um Tausende von Produkt-Hreflang-Tags in wenigen Minuten in Shopify hochzuladen.
Obwohl dieser Ansatz nicht der einfachste ist, weil Sie das benutzerdefinierte Metafeld einrichten müssen (wofür ein Shopify-Experte erforderlich ist) und Ihre eigenen hreflang-Tags erstellen müssen, ist er bei weitem der effektivste für die Verwaltung von hreflang-Tags in großem Umfang in Shopify. Wenn Sie eine einfache Möglichkeit suchen, Ihre eigenen hreflang-Tags zu erstellen, empfehlen wir den kostenlosen hreflang-Tag-Generator von Aleyda Solis.
