Alles, was Sie über Hreflang und Shopify wissen müssen

Da immer mehr Shopify-Shops international werden, war es noch nie so wichtig, sich um Ihre Suchmaschinen-Rankings zu kümmern. Während die Expansion in neue Regionen aufregende neue Marktchancen schafft, kann sie auch ernsthafte SEO-Herausforderungen mit sich bringen.

Die wichtigsten SEO-Probleme, die die internationale Expansion mit sich bringt, sind:

• Suchmaschinen dabei zu helfen, zu verstehen, welche Seite für welche Region/Sprache eingestuft werden sollte
• Verhindern, dass durch regions- oder sprachspezifische Seiten Probleme mit doppeltem Inhalt entstehen

In diesem Artikel stellen wir Ihnen eine Funktion namens Hreflang vor, die zur Lösung dieser internationalen SEO-Probleme verwendet wird.

Warum brauchen wir Hreflang?

Zunächst einmal, warum brauchen wir überhaupt hreflang?

Wenn eine Marke mehrere Websites für verschiedene Regionen hat, woher wissen Suchmaschinen, welche Website für welche Region bestimmt ist?

Lassen Sie mich dies anhand der Fitnessmarke Gymshark veranschaulichen. Gymshark verwendet Shopify und hat verschiedene Websites für unterschiedliche Zielgruppen:

Großbritannien - https://uk.gymshark.com

Deutschland - https://de.gymshark.com

Frankreich - https://fr.gymshark.com

Diese Websites werden in ihre Muttersprache übersetzt, was Google einen massiven Hinweis darauf gibt, zu welcher Region jede Website gehört. Aber Gymshark hat auch eine USA-Website und eine kanadische Website:

USA - https://www.gymshark.com Kanada - https://ca.gymshark.com/

Der Inhalt dieser beiden Websites ist in englischer Sprache. Wie also unterscheiden Suchmaschinen diese von der englischsprachigen britischen Website und stellen sicher, dass jede Website in der richtigen Region rangiert?

Hier kommt hreflang ins Spiel.

Was ist Hreflang?

Hreflang ist ein HTML-Attribut, das Suchmaschinen anzeigt, wenn es alternative Versionen einer Seite gibt, die für ein Publikum in einer anderen Region/Sprache bestimmt sind.

Hreflang kann auf verschiedene Arten implementiert werden, aber am gebräuchlichsten ist ein einfaches Meta-Tag, das auf jeder Seite mit alternativen Versionen eingefügt wird. Hier ist ein Beispiel von Gymshark:

 <link rel="alternate" href="https://www.gymshark.com/" hreflang="en-us" />

Dieses hreflang-Tag befindet sich auf der britischen Gymshark-Homepage „https://uk.gymshark.com/“.

Es teilt Suchmaschinen mit, dass die US-Version dieser Seite unter „https://www.gymshark.com/“ zu finden ist.

Das hreflang-Tag enthält zwei Schlüsselattribute:

1 - Href Das Href ist ein Link zur alternativen Seite. Es muss die vollständige URL-Adresse und eine Arbeitsseite sein. 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 optional, der Sprachcode ist jedoch erforderlich.

Einige Beispiele für hreflang-Attribute, die unterschiedliche Sprach-/Länder-Targeting-Kombinationen verwenden:

• de - Englischsprachige
• en-GB - Englischsprachige in Großbritannien
• fr-FR - Französischsprachige in Frankreich
• en-US - Englischsprachige in den USA
• it - Italienisch sprechende Personen
• it-CH - Italienischsprachige in der Schweiz.

Durch das Zusammenfügen von „href“ und „hreflang“ wissen Suchmaschinen, dass diese alternative URL (das „href“) für diese spezifische Zielgruppe (das „hreflang“) bestimmt ist.

Alternative Seiten

Denken Sie daran, dass hreflang auf Seitenebene und nicht auf Domänenebene funktioniert. Hreflang-Tags deklarieren „alternative Seiten“, nicht „alternative Websites“. Viele Websites verwenden hreflang-Tags, um alternative sprach-/regionsspezifische Seiten auf derselben Domain zu deklarieren.

Beispielsweise können Sie Unterordner verwenden, um alternative Sprach-/Regionsversionen Ihrer Website zu hosten. So richtet Apple seine internationalen Websites mithilfe von Ordnern ein:

• Großbritannien: https://www.apple.com/uk/
• ES: https://www.apple.com/es/
• FR: https://www.apple.com/fr/

X-Standard

Es gibt einen speziellen hreflang-Fallback-Wert namens „x-default“. Stellen Sie sich „x-default“ vor, da die Webseiten-Suchmaschinen einen Rang einnehmen sollten, wenn kein anderer hreflang-Link mit der Sprache/Region des Suchenden übereinstimmt.

Wieder am Beispiel von Gymshark. Sie haben einen Laden für den Rest der Welt unter row.gymshark.com. Dies wird als x-Standard deklariert.

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

Wenn also jemand in einer Sprache/Ort sucht, die nicht in den hreflang-Tags von Gymshark angegeben ist, zeigt Google höchstwahrscheinlich den RoW-Shop von Gymshark an.

Müssen Sie Hreflang hinzufügen?

Sie müssen Hreflang-Tags nur hinzufügen, wenn Sie zwei nahezu identische Seiten haben, die unterschiedliche sprachliche/regionale Zielgruppen bedienen. Wenn es keine alternative Version einer Seite gibt, müssen Sie keine hreflang-Tags hinzufügen.

Hreflang-Regeln

Damit hreflang-Tags validiert werden können, müssen sie bestimmten Regeln folgen:

1 – Links zurückgeben – Wenn eine Seite hreflang auf eine alternative Seite verlinkt, muss die alternative Seite einen hreflang-Link zurück zur ersten Seite haben. Wenn beispielsweise ein britisches Gymshark einen hreflang-Link hat, der auf eine deutsche Gymshark-Seite verweist, muss die deutsche Seite einen hreflang-Link zurück zur britischen Version haben.

2 - Arbeitsseiten - Jede Seite, auf die Sie mit hreflang verlinken, muss einen 200-Statuscode zurückgeben. Mit anderen Worten, hreflang-Links müssen funktionierende Seiten sein.

3 – Selbstreferenzierendes 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 standardmäßige Sprach-/Länderdeklaration enthalten.

Hreflang-Herausforderungen

Nachdem wir nun festgestellt haben, was hreflang ist und wie es funktioniert, können wir diskutieren, warum es ein so komplexer Teil von SEO ist. Tatsächlich ist hreflang wahrscheinlich einer der schwierigsten Teile von SEO, um es richtig zu machen.

Hier ist ein Tweet von Googles Webmaster Trends Analyst John Mueller, der erklärt, wie schwer hreflang sein kann!

Das Hinzufügen der Tags ist einfach genug, aber das Pflegen von hreflang-Tags, die die 3 oben genannten Regeln erfüllen, kann extrem schwierig sein.

Um immer zu validieren, müssen die hreflang-Tags zwischen verschiedenen Seiten synchron sein. Etwas so Einfaches wie das Ändern einer URL könnte die hreflang-Verbindung zwischen zwei Seiten unterbrechen.

Wenn Sie mehr als eine Website mit dynamischen Seiten haben und von verschiedenen Teams verwaltet werden, können Sie sich vorstellen, wie komplex dies wird. Wenn Sie mehrere Websites haben, müssen Sie sicherstellen, dass Ihre Teams koordinieren, um sicherzustellen, dass Ihre hreflang-Tags nicht beschädigt werden!

Hreflang-Fehler

Wir haben ständig mit defekten hreflang-Setups zu tun. Dies sind die häufigsten hreflang-Probleme, auf die wir stoßen:

Keine Rücklinks

Das bei weitem häufigste Hreflang-Problem, das wir sehen, sind Seiten, auf denen es keine Hreflang-Links gibt. Hier müssen Sie sich organisieren, um sicherzustellen, dass Ihre hreflang-Tags immer funktionieren. Wenn sich der URL-Pfad auf einer Seite ändert, aber nicht auf der anderen, werden die hreflang-Tags nicht mehr synchron sein.

Nicht 200 Seiten

Hreflang-Tags müssen auf funktionierende Seiten verweisen, die eine 200-Serverantwort zurückgeben. Wenn sich Ihre Website weiterentwickelt, ändern sich die URLs. Dadurch werden Ihre hreflang-Tags beschädigt. Wenn Sie also Seiten zurückziehen und umleiten, stellen Sie sicher, dass Sie auch alle hreflang-Tags aktualisieren.

Kein selbstreferenzierendes Hreflang-Tag

Es mag seltsam erscheinen, aber wenn eine Seite hreflang-Tags hat, muss sie auch ein selbstreferenzierendes hreflang-Tag für sich selbst enthalten. Dies ist ein häufiger Fehler, den viele Websites machen.

So überprüfen Sie Hreflang-Tags

Hreflang-Tag-Checker

Der einfachste Weg, hreflang-Tags zu prüfen, ist die Verwendung einer Chrome-Erweiterung namens Hreflang Tag Checker. Sobald die Erweiterung installiert ist, besuchen Sie einfach eine beliebige Seite und klicken auf das Symbol in der Symbolleiste. Die Erweiterung prüft dann, ob die aktuelle URL hreflang-Tags enthält.

Das Beste an diesem Tool ist, dass es tatsächlich die hreflang-Links crawlt und bestätigt, dass sie die Validierungsprüfungen bestehen.

Schreiender Frosch

Wenn Sie hreflang-Tags in großem Umfang prüfen möchten, ist Screaming Frog Ihr ideales Tool. Screaming Frog durchsucht eine Website und validiert alle hreflang-Tags, die während des Crawls entdeckt wurden.

Suchkonsole

Im Abschnitt „Legacy Reports“ in der Search Console ist ein internationaler Targeting-Bericht versteckt. Um auf diesen Bericht zuzugreifen, gehen Sie im linken Menü zu "Legacy Tools & Reports > International Targeting".

Dieser Bericht zeigt, wie viele hreflang-Tags sich auf Ihrer Website befinden, und gibt an, wo es irgendwelche hreflang-Fehler gibt.

Verschiedene Möglichkeiten zum Hinzufügen von Hreflang

Es gibt mehr als einen, um Hreflang zu implementieren. Die oben beschriebene HTML-Tag-Methode ist bei weitem der einfachste Weg, um hreflang einzurichten, aber es gibt zwei alternative Ansätze:

XML-Sitemap

Sie sind vielleicht mit XML-Sitemaps vertraut. Ihre XML-Sitemap kann aktualisiert werden, um hreflang-Deklarationen für jede Seite innerhalb der Sitemap einzuschließen. Bei großen Websites mit komplizierten Systemen kann dies oft der einfachste Ansatz sein.

HTTP-Header

Immer wenn ein Webbrowser eine Seite besucht, gibt der Server Informationen über diese Seite an Ihren Webbrowser zurück. Dies wird als HTTP-Antwort bezeichnet. Sie können Ihren Server so konfigurieren, dass hreflang-Informationen in der HTTP-Header-Antwort zurückgegeben werden.

So fügen Sie Hreflang zu Shopify hinzu

Wie fügen Sie eigentlich hreflang-Tags zu Shopify hinzu? Wie die meisten Content-Management-Systeme hat Shopify Nuancen, die sich darauf auswirken, was Sie auf der Plattform tun können und was nicht. Obwohl es möglich ist, hreflang zu Shopify über die XML-Sitemap- oder HTTP-Header-Methoden hinzuzufügen, erfordert dies eine erhebliche technische Konfiguration, sodass wir es nicht empfehlen.

Für Shopify-Websites ist unser empfohlener Ansatz zur Implementierung von Hreflang immer HTML-Tags. Das physische Hinzufügen von hreflang-Tags zu Ihrer Website ist ziemlich einfach, aber Sie müssen dies auf eine Weise tun, die sicherstellt, dass Ihre hreflang-Tags immer gültig sind. Denken Sie an die drei oben genannten Regeln:

• Es muss einen Return-hreflang-Link von der alternativen Seite geben
• Die alternative Seite muss eine funktionierende URL sein
• Auf jeder Seite, die hreflang-Tags enthält, muss ein selbstreferenzierendes hreflang-Tag vorhanden sein

Hreflang über eine App zu Shopify hinzufügen

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 Ihren Seiten hinzu.

Während 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 mehrsprachig ist. Die meisten Apps bieten weder Sprache+Land-Hreflang-Targeting noch berücksichtigen Apps mehrere Stores in verschiedenen Domains. Shopify-Apps sind nicht unser empfohlener Ansatz für hreflang.

Fügen Sie Ihrer theme.liquid-Datei Hreflang-Tags hinzu

Wenn Sie zwei Shops mit identischen Seiten und URLs haben (wobei sich nur die Domain unterscheidet), kann das Hinzufügen gültiger hreflang-Tags ziemlich einfach sein. Da die beiden Websites vollständige Klone sind, wissen Sie, dass es für jede Seite auf Site A ein Äquivalent auf Site B gibt.

Daher können Sie Ihren Themencode bearbeiten, um Ihre hreflang-Tags mithilfe des URL-Pfads der angezeigten Seite dynamisch zu erstellen.

Das macht der folgende Liquid-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" />

Dieses Code-Snippet kann in die hinzugefügt werden Abschnitt Ihrer theme.liquid-Datei. Sie müssen die „mystore.com“-Instanzen durch Ihre tatsächlichen Domainnamen ersetzen. Wenn dieses Snippet vorhanden ist, geben Ihre Seiten hreflang-Tags aus, wobei der Seiten-Canonical verwendet wird, um den URL-Pfad zu erstellen.

Da diese Methode die Bearbeitung Ihres Website-Codes beinhaltet, empfehlen wir Ihnen dringend, einen Shopify-Experten zu beauftragen, wenn Sie sich für diesen Ansatz entscheiden, um die Änderung für Sie vorzunehmen.

Verwenden Sie ein benutzerdefiniertes Feld (empfohlener Shopify Hreflang-Ansatz)

Wie fügen Sie Hreflang-Tags über 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 Szenario empfehlen wir die Verwendung einer anderen App namens Benutzerdefinierte Felder. Mit benutzerdefinierten Feldern können Sie völlig neue Metafelder auf Ihrer Website erstellen. Wann immer wir uns mit komplexen Hreflang-Situationen auf Shopify befassen, empfehlen wir unseren Kunden, benutzerdefinierte Felder zu verwenden, um ein Hreflang-Metafeld zu erstellen. Der Wert des Metafelds hreflang wird in die ausgegeben Abschnitt der Seite.

Mit diesem Ansatz können Sie Ihre eigenen hreflang-Tags in Excel erstellen und sie dann Seite für Seite direkt in das benutzerdefinierte Feld einfügen.

Noch besser, wenn Sie den Custom Fields Plus-Plan haben, können Sie Ihre Produkt-hreflang-Tags über einen CSV-Upload importieren. Wir verwenden diesen Ansatz regelmäßig, um innerhalb von Minuten Tausende von Produkt-Hreflang-Tags in Shopify hochzuladen.

Obwohl dieser Ansatz nicht der einfachste ist, da Sie das benutzerdefinierte Metafeld (für das ein Shopify-Experte erforderlich ist) einrichten und Ihre eigenen hreflang-Tags erstellen müssen, ist er bei weitem der effektivste für die groß angelegte Shopify-Hreflang-Verwaltung. Wenn Sie auf einfache Weise Ihre eigenen hreflang-Tags erstellen möchten, empfehlen wir den kostenlosen hreflang-Tag-Generator von Aleyda Solis.

Internationale Domains (neu)

Shopify hat kürzlich eine neue Funktion namens International Domains angekündigt. Diese Entwicklung ermöglicht es Shopify-Händlern, ihren Shop auf einer alternativen Domain/Subdomain anzuzeigen, die auf eine andere Sprache/ein anderes Land ausgerichtet ist.

Bei internationalen Domains registrieren Sie eine alternative Domain/Subdomain unter Verwendung des 2-Buchstaben-ISO-Codes des Ziellandes (z. B. gb.ihredomain.com). Shopify konfiguriert dann automatisch hreflang-Tags für jede Domain/Subdomain. Eine vollständige Anleitung dazu finden Sie auf Shopify.

Internationale Domains haben einige Nachteile. Sie müssen genau die gleichen Seiten und Produkte auf Ihren Domains hosten, was nicht für jeden Händler geeignet ist. Sie können Ihre Inhalte auch nicht über verschiedene Domains hinweg bearbeiten (mit Ausnahme von Übersetzungen).

Davon abgesehen ist dies ein großer Schritt nach vorne und zeigt, dass Shopify auf Händler gehört hat. Wir sind sicher, dass internationale Domains mit der Zeit unsere empfohlene hreflang-Lösung für Shopify werden.

Benötigen Sie Hilfe bei Hreflang?

Die Verwaltung von hreflang ist einer der komplexesten Teile von SEO. Unser SEO-Team verwaltet erfolgreich internationales SEO für Dutzende von Websites. Wenn Sie Hilfe bei der Optimierung Ihrer internationalen SEO benötigen, lassen Sie es uns wissen.