In diesem Beitrag
Hreflang-Tags und Canonical-Tags sind Indikatoren für Google und andere Suchmaschinen, welche Webseiten sie indexieren und bestimmten Suchenden anzeigen sollen. Sie sind beide wichtige Faktoren für Mehrsprachige SEO.
Die beiden Tag-Typen haben jedoch unterschiedliche Funktionen. Deshalb ist es wichtig, sie nicht zu verwechseln oder synonym zu verwenden. Andernfalls könnte dies zu unbeabsichtigten Folgen und schlechten Ergebnissen für Ihre Website führen.
Um das zu vermeiden, beschäftigen wir uns in diesem Beitrag eingehend mit Hreflang- und Canonical-Tags. Wir besprechen, was sie sind, Best Practices und häufige Fehler bei ihrer Verwendung sowie die korrekte Einrichtung sowohl manuell als auch mithilfe von WordPress-Plugins.
Was sind Hreflang- und Canonical-Tags (und warum sind sie wichtig?)
Um dieses Thema gut zu verstehen, definieren wir zunächst die beiden Arten von Tags. .
hreflang-Tags erklärt
Hreflang-Tags sind 2011 von Google eingeführte Code-Schnipsel, die internationalen Websites helfen sollen. Ihre Funktion besteht darin, Suchcrawlern die Sprache und den geografischen Standort mitzuteilen, für die eine Webseite bestimmt ist. Ein für Frankreich und die Schweiz bestimmter Hreflang-Tag sieht beispielsweise so aus.
<link rel="alternate" href="https://yoursite.com/ch" hreflang="fr-ch" />Es besteht aus zwei Teilen, dem rel="alternate", das besagt, dass dies eine alternative Version zu einer bestehenden Webseite ist, und das hreflang="fr-ch" Teil, der sein Ziel angibt. Fr steht für die Sprache und Schweiz für das Land, basierend auf dem ISO-Sprache und Ländercodes.
Dies ist besonders wichtig für internationale Webseiten, die möglicherweise Seiten mit praktisch demselben Inhalt haben, sich aber an verschiedene Sprachmärkte richten. Hreflang-Tags ermöglichen es Ihnen, Suchmaschinen zu signalisieren, dass Sie lokalisierte Versionen für Suchende aus diesen Märkten haben.
Darüber hinaus können Sie nicht nur eine andere Sprache anvisieren, sondern auch eine bestimmte Region. Während es beispielsweise weltweit mehrere spanischsprachige Länder gibt, unterscheiden sie sich trotz der gemeinsamen Sprache in Dialekt, Kultur und dem Geschmack der Verbraucher.
Durch die Verwendung von hreflang-Attributen ist es möglich, Webseiten für jeden Markt zu erstellen und entsprechend zu kennzeichnen. Auf diese Weise können Sie lokalisieren Sie sie für das Publikum, für das sie bestimmt sind, und dabei dieselbe Sprache zu verwenden.
Canonical-Tags auf den Punkt gebracht
Canonical-Tags erfüllen eine ähnliche Funktion wie Hreflang-Tags. Sie sind ebenfalls HTML-Snippets, die Suchmaschinen signalisieren, welche URL für Suchende am relevantesten ist. So sehen sie aus:
<link rel="canonical" href="https://yoursite.com" />Statt jedoch zwischen Sprachvarianten zu unterscheiden, zeigen Canonical-Tags an, dass eine Webseite bei Inhalten, die gleich oder sehr ähnlich sind, als offizielle Version oder Hauptkopie angesehen werden soll.
Warum sollte man denselben Inhalt auf mehreren Webseiten haben? Dafür gibt es verschiedene Gründe:
- Eine Seite hat http:// davor, das andere https://
- Sie veröffentlichen einen Artikel, der bereits auf einer anderen Website existiert (natürlich mit Erlaubnis). Oder Sie veröffentlichen denselben Inhalt auf einer anderen Plattform wie Medium für mehr Reichweite.
- Parameter in der URL, die kleine Änderungen auf einer Webseite signalisieren, wie zum Beispiel Filter in E-Commerce-Websites (z. B. https://www.yourwebsite.com/Camping-Hiking/b?ie=UTF8&node=16435151)
In all diesen Fällen kann ein Canonical-Tag Suchmaschinen mitteilen, welche Version der betreffenden Seite sie als Hauptversion ansehen sollen und dass sie diese anstelle der anderen indexieren sollen.
SEO-Vorteile von Hreflang- und Canonical-Tags
Warum sollten Sie sich die Mühe machen, diese Tags zu Ihrer Website hinzuzufügen? Weil sie zahlreiche SEO-Vorteile bieten:
- Probleme mit doppeltem Inhalt vermeiden — Wenn Sie Ihre Inhalte entsprechend kennzeichnen, verhindern Sie ausdrücklich, dass Suchmaschinen Ihre Seiten als Duplikate betrachten. Auf diese Weise ist es weniger wahrscheinlich, dass sie Suchenden die falsche URL anzeigen oder Sie wegen minderwertiger Inhalte abstrafen.
- Ranking-Signale übertragen — Autorität von eingehenden Links und anderen Ranking-Signalen wird an die kanonische Seite weitergegeben und von allen Sprachversionen gemeinsam genutzt.
- Verbesserte Nutzerbindung — Besucher auf die korrekte Version Ihrer Seiten zu leiten, z. B. auf deren bevorzugte Sprache, ist gut für Conversions, Verweildauer, Nutzer-Engagement usw. Dies sind alles Faktoren, von denen man annimmt, dass sie sich positiv auf die Suchmaschinen-Rankings auswirken.
- Verschwendung von Crawl-Zeit verhindern Mit Canonical-Tags können Sie Suchmaschinen daran hindern, bestimmte Seiten zu indexieren. Das bedeutet, dass sie das Crawl-Budget nicht für unwichtige Inhalte verschwenden, anstatt für das, was Sie indexiert haben möchten.
Wichtig ist zu erkennen, dass diese Tags Signale und keine verbindlichen Anweisungen sind. Man verwendet sie, um Suchmaschinen um etwas zu bitten (bitte, bitte), aber es liegt an ihnen und ihrem Algorithmus, ob sie Ihrer Bitte nachkommen.
Hreflang- und Canonical-Tags: Best Practices und häufige Fehler
Nun da wir wissen, was diese Tags sind, wollen wir untersuchen, wie man sie richtig verwendet.
Platziere sie an den richtigen Orten
Ihre erste Frage betrifft höchstwahrscheinlich den Ort, an dem diese Links erscheinen sollen. Die hreflang- und Canonical-Tags sind üblicherweise im <head> Abschnitt des HTML-Markups einer Webseite.
Tatsächlich ist das bei Canonical Tags die einzige Option. Ihre Hreflang-Pendants können auch in HTTP-Headern oder in einem XML-Sitemap. Wir werden unten im Detail besprechen, wie Sie sie dorthin bringen.
Formatieren Sie Ihre Tags richtig
Eines der wichtigsten Dinge, die man wissen muss, ist, dass die beiden Tags nicht kombiniert werden können. Etwas wie das folgende Beispiel wird von Suchmaschinen nicht verstanden.
<link rel="canonical" rel="alternate" href="https://yoursite.com" hreflang="fr-ch" />Stattdessen müssen Sie beide Arten von Tags separat anzeigen, etwa so:
Von den beiden Signalen sind Canonical-Tags die einfacher zu implementieren. Sie müssen im Grunde nur Folgendes enthalten rel="canonical" sowie das Ziel.
Hreflang-Tags sind etwas wählerischer. Das Erste, was hier zu beachten ist, ist, dass Sie nicht unbedingt sowohl einen Sprach- als auch einen Ländercode einfügen müssen. Nur die Sprache reicht aus. Dies ermöglicht es Ihnen, eher eine Auffangseite für Menschen aus der ganzen Welt einzurichten, die Suchen darin durchführen.
Gleichzeitig ermöglicht Ihnen die Verwendung eines Ländercodes die Erstellung sehr gezielt ausgerichteter Seiten. Darauf sind wir oben bereits im Zusammenhang mit Spanisch eingegangen. Wichtig: Wenn Sie einen regionalen Code verwenden, achten Sie darauf, dass dieser im hreflang-Tag an zweiter Stelle steht und nicht an erster. Überprüfen Sie außerdem, ob die richtige Sprache und Ländercodes.
Beachten Sie dabei jedoch, dass die verschiedenen Sprachversionen nicht unbedingt auf derselben Domain liegen müssen. Wenn Sie für Ihre verschiedenen Sprachversionen separate Webadressen verwenden, können Sie dennoch mithilfe von „hreflang“ deutlich machen, dass diese zusammengehören.
Außerdem sollten Sie für beide Arten von Tags die vollständigen URLs Ihrer Seiten angeben, keine relativen. Hier ist der Unterschied:
- Vollständige URL: https://yoursite.com/shop/pants
- Relative URL /shop/hosen
Durch die Verwendung absoluter URLs machen Sie absolut klar, welche Seiten Sie meinen, und vermeiden Unklarheiten und Fehler. Wenn Sie Schwierigkeiten haben, Ihre Tags zu erstellen, können Sie auch eine Hreflang-Tag-Generator oder Generator für Canonical-Tags.
Machen Sie sie bidirektional und selbstreferenziell
Der nächste wichtige Punkt ist, auf welchen Seiten Ihre Tags platziert werden sollen. Beginnen wir mit den hreflang-Tags.
Ein wichtiger Teil dabei ist, Alle Sprachversionen müssen „hreflang“-Verweise auf jede verfügbare Alternative enthalten.. Anders ausgedrückt müssen alle Ihre Seiten auf einander verweisen. Tun sie das nicht und ein hreflang-Tag geht nur in eine Richtung, wird Google es ignorieren.
Wenn Sie beispielsweise eine Seite auf Englisch, Spanisch und Französisch haben, die auf die USA, Kanada, Spanien, Kolumbien und Frankreich ausgerichtet ist, würden Ihre hreflang-Tags wie folgt aussehen:
Genau dieser Code muss auf jede der darin genannten Seiten eingefügt werden.
Dies ist wichtig, da dadurch eine Verbindung zwischen diesen Seiten hergestellt wird und Google darüber informiert wird, dass es sich um verschiedene Versionen desselben Inhalts in unterschiedlichen Sprachen und für unterschiedliche Nutzergruppen handelt.
Das bedeutet auch, dass ein hreflang-Tag immer auf die Seite verweist, auf der es sich befindet. Dies wird als “Selbstreferenzierung” bezeichnet und ist sowohl für hreflang- als auch für Canonical-Tags eine bewährte Praxis.
Ein Canonical-Tag auf einer Webseite, das auf sich selbst verweist, ist ein Signal dafür, dass dies die offizielle Version ist. Es verstärkt die Botschaft von Tags, die von anderen Standorten aus auf dieselbe Seite verweisen. Wenn beispielsweise Seite A die Hauptseite und Seite B ein Duplikat ist, würden beide unten denselben Canonical-Tag haben.
<link rel="canonical" href="https://yoursite.com/page-a" />Widersprüchliche Aussagen vermeiden
Es ist wirklich wichtig, die richtigen URLs sowohl für hreflang- als auch für canonical-Tags auszuwählen, insbesondere wenn man sie gemeinsam verwendet. Denn obwohl sie in ihrer Funktion ähnlich sind, vermitteln sie den Suchmaschinen doch ganz unterschiedliche Signale.
Hreflang-Tags sind inklusiv, während Canonical-Tags exklusiv sind. Erstere sagen: “Indiziere mich“ und die andere Seite, aber für andere Regionen”, während die zweite besagt: “Indexiere mich nicht, indexiere die andere Seite”.
Wenn Sie also eine Seite mit Hreflang-Tags haben, die zudem über ein Canonical-Tag verfügt, das auf eine andere Seite als sich selbst verweist, sendet dies zwei sehr verwirrende Signale. Im Grunde heißt das: “Indexiere mich und diese andere Seite und indexiere mich gleichzeitig nicht, sondern indexiere stattdessen die andere Seite.”.
In diesem Fall könnten Suchmaschinen eigene Entscheidungen treffen, die möglicherweise nicht Ihren Wünschen entsprechen. Seien Sie daher sehr vorsichtig damit. Abgesehen davon spielt die Reihenfolge der tatsächlichen Tags keine Rolle, solange sie vorhanden und korrekt sind.
Verwendung von hreflang="x-default"”
Schließlich ist hier noch das x-default-Tag zu erwähnen. Dies können Sie verwenden, um eine Standardseite unter verschiedenen Sprachversionen festzulegen. Wenn Sie dies tun, greifen Suchmaschinen darauf zurück, wenn es keine spezifischere Version für die Sprache und/oder Region des Suchenden gibt.
Dadurch können Sie auch eine bevorzugte Version festlegen, wenn Sie Seiten in derselben Sprache, aber für verschiedene Regionen haben (z. B. US- und UK-Englisch). Dies hilft, wenn jemand in dieser Sprache sucht, aber aus keiner dieser Regionen stammt.
So sieht der x-default-Tag aus:
<link rel="alternate" href="https://yoursite.com" hreflang="x-default" />Note that it doesn’t have any language or locale information. Also, using the x-default tag is not mandatory but good practice.
So richten Sie hreflang- und Canonical-Tags manuell ein
If you have followed along so far, you should theoretically be ready to implement hreflang and canonical tags on your own website.
The only question that remains is, how do you do that?
Let’s go over that now, starting with how to do it manually. Here, you basically have two options to place them:
- The aforementioned HTML
<head>Abschnitt - Your website’s XML sitemap
(Another options are HTTP headers but those are only important for content like PDF documents.)
Using the <head> section
This option is most feasible for small sites with few and mostly static pages where you edit the HTML files directly. It’s not very practical for larger websites that are created dynamically (like in WordPress).
Once you have created your tags using the tips and/or generators above, open your HTML files with a code editor and copy and paste them between the <head> und </head> tags, preferably toward the top.
Save and you are done. If in doubt or if doesn’t seem to work, run your pages through an HTML validator.
This method is relatively easy, however, it can also be annoying if you ever make changes to your site structure or URLs. In that case you would have to edit each page individually again.
Including hreflang Tags in the Sitemap
If you are going to implement your tags manually, the sitemap might actually be the best choice. It allows you to make changes all in one place, which is easier to manage should there be any URL changes or simply new language versions to add to it. The format looks like this:
<url>
<loc>https://yoursite.com</loc>
<xhtml:link rel="alternate" hreflang="en-us" href="https://yoursite.com" />
<xhtml:link rel="alternate" hreflang="en-gb" href="https://yoursite.com/uk" />
<xhtml:link rel="alternate" hreflang="es-es" href="https://yoursite.es" />
<xhtml:link rel="alternate" hreflang="es-co" href="https://yoursite.es/col" />
<xhtml:link rel="alternate" hreflang="fr-fr" href="https://yoursite.fr" />
</url>Each page with different languages versions has to be wrapped in <url> brackets. The <loc> element at the top defines the original URL, while the <xhtml: link> element defines each language alternative. It basically use the same format as the HTML version.
Here, too, you can use the aforementioned generator tools to create the hreflang tags. As explained before, canonical tags have to go in the <head> section, you can not define them in the sitemap. Finally, if you don’t know how to create an XML sitemap for your website to begin with, Google has an explanation.
Implementieren von Schlagwörtern mithilfe von WordPress-Plugins
We can probably agree that the methods above seem a bit time-consuming. Therefore, if you are running a website based on WordPress an easier way to implement hreflang and canonical tags is using plugins.
For canonical tags, you can use an SEO-Plugin. Pretty much all of them come with options to define canonical URLs and also generate canonical tags automatically.
Zum Beispiel, Yoast SEO adds self-referential canonical tag to all your pages by default.
On the other hand, a great option to implement hreflang tags is TranslatePress.
Why is that?
Because the plugin literally does it for you. All you have to do is configure which languages you want to add to your site under Einstellungen → TranslatePress.
Once you have done so and saved your choices, TranslatePress takes care of the rest. It adds relevant hreflang tags to the HTML of all language versions of your web pages as well as your XML sitemap.
Plus, TranslatePress can differentiate between regional versions of languages, such as Brazilian Portuguese, Mexican Spanish, or Swiss French. When you pick the respective options in the settings, it sets up your hreflang tags so that they reflect both the language and locale.
Other TranslatePress Benefits
If you like the above, you might be interested to hear what else TranslatePress has to offer. It’s not just good for hreflang tags but also has many more features that make it a perfect solution for creating international and multilingual websites.
First of all, there is the super simple translation interface.
Use the preview on the right to navigate your website and pick text to translate directly from the screen or the list in the upper left corner.
Then, add the translation in the appropriate field and save.
After that, the translated content automatically appears on your website, where visitors can use the built-in Sprachumschalter to pick their preferred language.
That’s it. You can also use the same method to show language-specific images and, to make things faster, use automatic maschinelle Übersetzung via Google Translate.
This is all part of the free plugin, which lets you add one additional language to your website. If you want more than that, there is TranslatePress Pro, which also comes with these additional features:
- Automatische Übersetzung mit DeepL — Instead of Google Translate, use the more accurate DeepL translation software.
- Mehrsprachiges SEO-Paket — Translate other important SEO markers such as URL slugs, SEO titles, meta descriptions, ALT tags, and more.
- Benutzerspezifische Navigation – Display different menus depending on the language of your visitors.
- Automatische Benutzer-Spracherkennung – Automatically reroute visitors to their preferred language version (via browser settings or location).
- Übersetzerkonten — Make working with Übersetzungsagenturen und Freiberufler easier by giving them direct access to your site.
- Als Benutzerrolle stöbern – Sehen Sie sich Ihre Website aus der Perspektive einer bestimmten Benutzerrolle im Übersetzungstool an.
TranslatePress Pro comes with three different Preistarifen so you can choose one that fits your needs.
Bereit, hreflang und Canonicals zu meistern?
The two tags we talked about in this post are useful signals for search engines on how they should index and rank your web pages. Hreflang tags allow you to define page versions for particular languages and countries. Canonical tags, on the other hand, denote the official version among similar content pieces.
Here are the most important points to remember:
- Hreflang tags are inclusive, while canonical tags are exclusive
- Include hreflang links to every language version on each localized page as well as links to the page itself
- Don’t try to combine both tags into one statement
- Any web page with an hreflang tag can not have a canonical tag pointing anywhere else but itself
- Use x-default statements to define default and fallback language versions
When you first learn about these tags, it can seem a bit scary and technical. However, as you have hopefully seen, they are not all that hard to implement, especially if you have a tool that can do it automatically like TranslatePress. It not only helps you translate your WordPress website, but also set up hreflang tags without you having to lift a finger. Give it a try now!
TranslatePress Mehrsprachig
Do you have any questions concerning the usage of hreflang and canonical tags? Please ask them in the comments below!
