Hreflang-Tags: Wie werden sie verwendet?
Wenn du eine Website hast und sie mehrsprachig gestalten möchtest, um neue Märkte anzusprechen, musst du Google und die anderen Suchmaschinen mit hreflang-Tags „informieren“, damit sie dies berücksichtigen und unter anderem <strong>nicht wegen doppeltem Inhalt bestraft werden</strong>. Das Attribut rel="alternate" hreflang="x" ist nichts anderes als eine Sprachnotiz, die Suchmaschinen hilft zu erkennen, woher jeder Besuch kommt und somit den Inhalt in der Sprache des jeweiligen Landes oder der Region anzuzeigen. Wir zeigen dir, wann und wie sie verwendet werden, sowie die häufigsten Fehler, die du vermeiden solltest.</p> <p><!--more--></p> <h2>Wann sollte das hreflang-Tag verwendet werden?</h2> <p>Die Implementierung von hreflang-Tags ist offensichtlich unerlässlich für Websites, die vollständig in mehrere Sprachen übersetzt sind. Wenn deine Seite auf Englisch, Deutsch und Spanisch ist, dienen diese Attribute dazu, dass <strong>wenn jemand auf Deutsch nach deiner Seite sucht, Google ihm automatisch diese Version auf Deutsch anzeigt.</strong></p> <p>Es ist aber auch nützlich für diejenigen, die einen Service anbieten, obwohl etwas unvollständig, da sie nur in einer Sprache sind und nur die Vorlage übersetzen.</p> <p>Ebenso ist es notwendig für diejenigen, die, wenn sie eine einzige Sprache verwenden, regionale Varianten oder zwischen verschiedenen Ländern haben und die Website so übersetzt wurde, wie es bei dem Spanisch aus Spanien und dem Spanisch eines lateinamerikanischen Landes oder dem Englisch aus den USA und England der Fall sein kann.</p> <h2>Wie werden hreflang-Tags auf einer Website platziert?</h2> <p>Google bietet <strong>bis zu drei Möglichkeiten, diese Attribute auf deiner Website zu platzieren</strong>. Wähle die, die dir am angenehmsten ist.</p> <p>Die erste Möglichkeit besteht darin, die Tags im Kopfbereich des HTML-Codes deiner Seite zu platzieren, konkret im Abschnitt head. Das Format wäre wie folgt, wenn wir angeben wollen, dass wir eine Version auf Deutsch haben (das „de“ steht für Deutschland, das „it“ wäre im Falle von Italien, „es“ für Spanien usw.):</p> <p><link rel="alternate" hreflang="de" href="http://www.ejemplo.de/" /></p> <p>Es sieht jedoch viel besser aus, wenn es auf einen realen Fall angewendet wird, oder? Hier kannst du den Webcode eines Online-Shops mit 11 Sprachen sehen, mit korrekt implementierten hreflang-Tags:</p> <p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-1278" src="https://www.unancor.com/wp-content/uploads/2017/01/hreflang-zelentia.jpg" alt="Hreflang-Tags" width="1342" height="244" srcset="https://www.unancor.com/wp-content/uploads/2017/01/hreflang-zelentia.jpg 1342w, https://www.unancor.com/wp-content/uploads/2017/01/hreflang-zelentia-300x55.jpg 300w, https://www.unancor.com/wp-content/uploads/2017/01/hreflang-zelentia-1024x186.jpg 1024w, https://www.unancor.com/wp-content/uploads/2017/01/hreflang-zelentia-768x140.jpg 768w" sizes="(max-width: 1342px) 100vw, 1342px" /></p> <p>Für die zuvor erwähnten Fälle von Varianten innerhalb derselben Sprache ist das Verfahren dasselbe, aber mit dieser Variablen hinzugefügt.</p> <p>Im folgenden Beispiel sehen wir, wie es aussehen würde, damit die Website zwischen englischsprachigen Nutzern aus Irland (ie), Kanada (ca) und Australien (au) unterscheidet. Letzteres, wo nur der Sprachbezeichner „en“ erscheint, sorgt dafür, dass jeder andere Nutzer, der nicht zu den zuvor genannten gehört, auf die Website in „generischem“ Englisch gelangt.</p> <p><code><link rel="alternate" href="http://example.com/en-ie" hreflang="en-ie" /></code><br /> <code><link rel="alternate" href="http://example.com/en-ca" hreflang="en-ca" /></code><br /> <code><link rel="alternate" href="http://example.com/en-au" hreflang="en-au" /></code><br /> <code><link rel="alternate" href="http://example.com/en" hreflang="en" /></code></p> <p>An diesem Punkt ist es wichtig, eine <strong>kanonische URL</strong> festzulegen, die standardmäßig die der ursprünglichen Sprache der Website ist. Dies ist entscheidend, um die anderen Tags richtig festzulegen.</p> <p>Die zweite Methode zur Platzierung der Tags ist für den Fall, dass wir mit Dateien arbeiten, die keine HTML-Dateien sind, wie z.B. PDFs. In solchen Fällen muss der HTTP-Header wie folgt verwendet werden, wobei wir das vorherige Beispiel fortsetzen:</p> <p>Link: <http://www.ejemplo.de/>; rel="alternate"; hreflang="de"</p> <p>Wenn wir es in mehreren Sprachen hätten, wäre es genau dasselbe, aber wir würden sie mit einem einfachen Komma trennen.</p> <p>Schließlich ist eine sehr einfache Möglichkeit, Google über unsere hreflang-Tags zu informieren, <strong>über die Sitemap</strong>. Wenn sie generiert wird, werden ihre Versionen in den Sprachen, in denen wir unsere Website haben, enthalten sein. Hier ein Beispiel einer Website mit 11 Sprachen und ihrem Abbild in der Sitemap:</p> <p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-1277" src="https://www.unancor.com/wp-content/uploads/2017/01/sitemap-idiomas.jpg" alt="Sitemap einer mehrsprachigen Website" width="1002" height="623" srcset="https://www.unancor.com/wp-content/uploads/2017/01/sitemap-idiomas.jpg 1002w, https://www.unancor.com/wp-content/uploads/2017/01/sitemap-idiomas-300x187.jpg 300w, https://www.unancor.com/wp-content/uploads/2017/01/sitemap-idiomas-768x478.jpg 768w" sizes="(max-width: 1002px) 100vw, 1002px" /></p> <p>Je nachdem, wie du deine Website erstellt hast, gibt es Module oder <strong>Plugins, die diese Tags automatisch installieren</strong>. Das Einzige, was du in diesen Fällen beachten musst, ist, dass sie nicht mit anderen Anwendungen kollidieren oder inkompatibel sind. Überprüfe immer, ob sie ihre Arbeit korrekt erledigen, bevor du sie veröffentlichst.</p> <p>Hier ist der Link zu einem Tool, das dir <a href="https://app.sistrix.com/es/hreflang-generator">automatisch</a> die hreflang-Tags generiert.</p> <h2>Häufige Fehler bei der Verwendung des hreflang-Tags</h2> <p>Google hat eine <a href="https://developers.google.com/search/docs/advanced/crawling/international-overview?hl=es&ref_topic=4598733&visit_id=637861383285047722-3778843399&rd=1">Tutorial-Seite</a> über die Verwendung von hreflang-Tags, die gut ist, aber manchmal möglicherweise zu technisch ist und viele Benutzer an einigen Punkten verwirren könnte.</p> <p>Ein häufiger Fehler unter denen, die sich trauen, dieses Attribut zu verwenden, ist, es im Index der Startseite und auch im Index jeder Seite der Website zu platzieren. Dies führt zu Duplikationen, sodass die Fehler, auf die <a href="https://www.unancor.com/blog/google-search-console-le-pasas-la-itv-a-diario-a-tu-web/">Google Search Console</a> dich in ihrem Abschnitt „Internationale Zielgruppen“ hinweist, sich vervielfachen werden.</p> <p>Nachdem dies korrigiert wurde, werden diese Fehler im Laufe der Tage - manchmal sogar Wochen - abnehmen, bis sie vollständig verschwunden sind. Unser Rat ist, dass du nicht gleichzeitig verschiedene Arten der mehrsprachigen Kennzeichnung verwendest. Wenn du Meta-Tags im Kopfbereich deines Codes verwendest, sende Google nicht gleichzeitig eine mehrsprachige sitemap.xml.</p> <p>Ein weiterer wichtiger Punkt ist zu wissen, dass jede Seite ein <strong>hreflang-Tag enthalten muss, das mit den anderen Sprachen verlinkt</strong>, sowie ein Tag, das auf sich selbst verweist:</p> <p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-1281" src="https://www.unancor.com/wp-content/uploads/2017/01/hreflang-ruso.jpg" alt="Gut implementiertes hreflang-Tag" width="1343" height="154" srcset="https://www.unancor.com/wp-content/uploads/2017/01/hreflang-ruso.jpg 1343w, https://www.unancor.com/wp-content/uploads/2017/01/hreflang-ruso-300x34.jpg 300w, https://www.unancor.com/wp-content/uploads/2017/01/hreflang-ruso-1024x117.jpg 1024w, https://www.unancor.com/wp-content/uploads/2017/01/hreflang-ruso-768x88.jpg 768w" sizes="(max-width: 1343px) 100vw, 1343px" /></p> <p>Wenn wir diese wechselseitigen Links in allen Seiten mit dem Attribut nicht haben, werden wir ein großes Problem bekommen. Wenn Google deine Website crawlt, wirst du müde werden, die Nachricht „Es gibt keine Rückverlinkungen“ zu lesen.</p> <p>Hier ist der Link zu einem kostenlosen Online-Tool, das dir sagt, <a href="https://dejanmarketing.com/flang/">ob du Fehler</a> in deinen hreflang-Tags hast.</p> <p>Auf Websites mit Varianten einer Sprache ist es häufig, einen Fehler zu machen, indem nur der Ländercode eingefügt wird. Der Grund ist einfach: Es gibt Länder, deren Nomenklatur mit der eines Sprachcodes übereinstimmt, die nichts miteinander zu tun haben. Zum Beispiel steht „be“ für die belarussische Sprache, während es auch der Identifikator für das Land Belgien ist. Daher ist es für Google nicht ausreichend, nur das Land oder die Region anzugeben.</p> <p>Dieses vermeintliche Problem wird in Wirklichkeit zu einem Vorteil, da wir beide Variablen nach Belieben kombinieren können. Wenn deine Website beispielsweise spanisch ist, du dich aber auch in deinem eigenen Land an ein deutsches Publikum richtest, kannst du die Variante „de-ES“ einfügen. Das würde deine Seite auf Deutsch für Nutzer in Spanien anzeigen.</p> <p>Denke daran, dass es wichtig ist, <strong>verschiedene URLs für jede Sprache</strong> zu verwenden. Du solltest auch keine Cookies verwenden, um übersetzte Versionen deiner Website anzuzeigen.</p> <p>Die korrekte Verwendung von hreflang kann auch helfen, <strong>das SEO unserer Website zu verbessern</strong>. Schau dir diesen „extremen“ Erfolgsfall an, der von <a href="https://www.analistaseo.es/posicionamiento-buscadores/caso-exito-seo-internacional/">Natzir Turrado</a> erklärt wird. Eine Seite, die nach der korrekten Implementierung der internationalen Segmentierungstags ihren Traffic um 918% steigert:</p> <p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-1284" src="https://www.unancor.com/wp-content/uploads/2017/01/implementacion-hreflang-exitosa.png" alt="Erfolgreiche Implementierung des hreflang-Tags" width="622" height="306" srcset="https://www.unancor.com/wp-content/uploads/2017/01/implementacion-hreflang-exitosa.png 622w, https://www.unancor.com/wp-content/uploads/2017/01/implementacion-hreflang-exitosa-300x148.png 300w" sizes="(max-width: 622px) 100vw, 622px" /></p> <h2>Und der Inhalt, muss er übersetzt werden?</h2> <p>Es ist ganz normal, wenn du eine mehrsprachige Website hast, dass <strong>die Inhalte gleich oder sehr ähnlich</strong> sind. Google deutet an, dass es optimal wäre, unterschiedliche Informationen für jedes Publikum anzubieten. Dennoch ist es sich vollkommen bewusst, dass dies oft oder fast immer nicht machbar ist.</p> <p>Daher empfiehlt es im Allgemeinen, diese doppelten Inhalte nicht zu verstecken, indem man die robots.txt-Dateien verwendet oder auf „noindex“ zurückgreift. Wenn du diese Seiten nicht indexierst, kannst du in diesen anderen Ländern oder Sprachen nicht ranken.</p> <p>Wenn wir jedoch denselben Inhalt für dieselben Nutzer unter verschiedenen Adressen veröffentlichen, müssen wir entscheiden, welche Version wir bevorzugen. Der nächste Schritt besteht darin, die Leute auf diese zu leiten. Dafür dient genau der Link rel=canonical. Niemals, um deiner Sprache mehr Bedeutung zu verleihen als den anderen, denn das könnte dir schaden.</p> <p>Hast du jemals hreflang-Tags verwendet? Hattest du viele Fehler? Welchen Nutzen hast du festgestellt? Erzähl uns in den Kommentaren davon. In der Sprache deiner Wahl!</p>
Paula Guzmán
vor 9 Jahren
Si tienes una web y quieres hacerla multiidioma para dirigirte a nuevos mercados, debes «avisar» a Google y al resto de buscadores mediante las etiquetas hreflang para que lo tengan en cuenta y, entre otras cosas, no te penalicen por contenido duplicado. El atributo rel=»alternate» hreflang=»x» no es ni más ni menos que una anotación de idioma que sirve a los motores de búsqueda para detectar de dónde procede cada visita y mostrarle así el contenido en la lengua correspondiente a su país o región. Te enseñamos cuándo y cómo se usan, así como los errores más habituales que debes evitar.
¿Cuándo hay que usar la etiqueta hreflang?
La implementación de las etiquetas hreflang resulta imprescindible, como es obvio, para las webs que están íntegramente traducidas a varios idiomas. Si tu sitio está en inglés, alemán y español, estos atributos servirán para que si alguien busca algo en alemán sobre tu página, Google le muestre automáticamente esa versión en alemán.
Pero también es útil para aquellas que dan un servicio, aunque algo cojo, al estar en un solo idioma y traducir únicamente la plantilla.
Del mismo modo, es necesaria para las que, usando una única lengua, ésta tiene variedades regionales o entre distintos países y se ha traducido así la web, como puede ocurrir con el castellano de España y el español de un país latinoamericano, o el inglés de Estados Unidos y Inglaterra.
¿Cómo se ponen las etiquetas hreflang en una web?
Google ofrece hasta tres maneras de colocar estos atributos en tu web. Elige la que te resulte más cómoda.
La primera de ellas es ubicar las etiquetas en el encabezado del código HTML de tu página, concretamente en el apartado head. El formato sería el siguiente, si lo que queremos es indicarle que tenemos una versión en alemán (el «de» es por Deutschland, que sería «it» en caso de Italia, «es» para España, etc…):
<link rel=»alternate» hreflang=»de» href=»http://www.ejemplo.de/» />
Pero se ve mucho mejor aplicado a un caso real, ¿verdad? Aquí puedes ver el código web de una tienda online con 11 idiomas, con sus etiquetas hreflang correctamente implementadas:
Para los casos que comentábamos antes de variedades dentro de un mismo idioma, el procedimiento es igual, pero añadiendo esa variable.
En el siguiente ejemplo vemos cómo habría que ponerlo para que la web distinguiera entre los usuarios de habla inglesa de Irlanda (ie), Canadá (ca) y Australia (au). La última, donde solamente aparece el identificador de idioma «en» hace que cualquier otro usuario distinto de los antes citados vaya a parar a la web en idioma inglés «genérico».
<link rel="alternate" href="http://example.com/en-ie" hreflang="en-ie" />
<link rel="alternate" href="http://example.com/en-ca" hreflang="en-ca" />
<link rel="alternate" href="http://example.com/en-au" hreflang="en-au" />
<link rel="alternate" href="http://example.com/en" hreflang="en" />
Llegados a este punto, hay que destacar la importancia de establecer una url canónica, que será por defecto la de la lengua original de la web. Esto es fundamental para establecer bien el resto de las etiquetas.
El segundo método de ubicación de las etiquetas es para cuando trabajamos con archivos que no son HTML, como por ejemplo PDFs. En tales casos se debe usar el encabezado HTTP de la forma siguiente, siguiendo con el ejemplo de antes:
Link: <http://www.ejemplo.de/>; rel=»alternate»; hreflang=»de»
Si lo tuviéramos en más idiomas sería exactamente igual, pero los separaríamos con una simple coma.
Por último, una forma muy sencilla de alertar a Google de nuestras etiquetas hreflang es a través del sitemap. Al generarlo se incluirán sus versiones en los idiomas en que tengamos nuestra web. Aquí un ejemplo de una web con 11 idiomas y su reflejo en el sitemap:
Dependiendo de cómo hayas construido tu web, habrá módulos o plugins específicos para instalar automáticamente estas etiquetas. Lo único a tener en cuenta en estos casos es que no choquen o sean incompatibles con otras aplicaciones. Comprueba siempre que hacen su labor de forma correcta antes de lanzarlo.
Aquí te dejamos el enlace de una utilidad que te genera automáticamente las etiquetas hreflang.
Errores habituales al poner la etiqueta hreflang
Google tiene una página tutorial sobre el uso de las etiquetas hreflang que está bien, pero quizá sea en ocasiones demasiado técnica e induzca a error a muchos usuarios en algunos puntos.
Por ejemplo, un fallo habitual entre quienes se animan a usar este atributo es ubicarlo en el índice de la home y también en el de cada página de la web. Esto va a ocasionar duplicidades, por lo que los errores de los que Google Search Console te avisa en su apartado «Segmentación internacional» se multiplicarán.
Una vez corregido, con el paso de los días -a veces incluso semanas- esos fallos se irán reduciendo hasta su completa extinción. Nuestro consejo es que no utilices al mismo tiempo distintos tipos de etiquetado multiidioma. Si recurres a las etiquetas meta en el código de tu cabecera, no envíes a Google por otro lado un sitemap.xml multiidioma.
Otro punto importante es saber que cada página ha de incluir una etiqueta hreflang que enlace con los otros idiomas, así como una etiqueta que haga referencia a sí misma:
Si no tenemos esos enlaces recíprocos en todas las páginas con el atributo, la liaremos parda. Cuando Google rastree tu web te cansarás de leer el mensaje de «No hay etiquetas de retorno».
Aquí te dejamos el enlace de una herramienta online gratuita que te dice si tienes errores en tus etiquetas hreflang.
En webs con variantes de un idioma es frecuente pifiarla al incluir solamente el código del país. El motivo es sencillo: hay países cuya nomenclatura coincide con el de un idioma que nada tiene que ver. Por ejemplo, «be» corresponde al idioma bielorruso, mientras que también es el identificador del país Bélgica. Por eso a Google no le vale con que pongas solo el país o la región.
Este presunto inconveniente en realidad se transforma en una ventaja, ya que podemos combinar ambas variables a nuestro antojo. Por ejemplo, si tu página web es española, pero también te diriges en tu propio país a un público alemán, puedes incluir la modalidad «de-ES». Eso mostraría tu página en alemán para usuarios de España.
Recuerda que es importante utilizar url distintas para cada idioma. Tampoco deberías usar las cookies para mostrar versiones traducidas de tu web.
El correcto uso del hreflang también puede ayudar a mejorar el SEO de nuestra web. Mira este caso de éxito «extremo» que explica Natzir Turrado. Una página que tras la correcta implementación de las etiquetas de segmentación internacional incrementa su tráfico un 918%:
Brauchen Sie Hilfe bei Ihrer Linkbuilding-Strategie?
Unser Expertenteam ist bereit, Ihr Projekt mit personalisierten Strategien voranzutreiben
Kontaktieren Sie uns jetztY el contenido, ¿hay que traducirlo?
Lo más normal cuando tienes una web multiidioma es que los contenidos sean iguales o muy parecidos. Google deja caer que lo óptimo sería ofrecer distinta información para cada público. No obstante, es plenamente consciente de que eso a menudo, o casi siempre, es algo inviable.
De ahí que recomiende, por regla general, no esconder esos contenidos duplicados usando los archivos robots.txt o recurriendo al «noindex». Si no indexas estas páginas no podrás posicionar en esos otros países o idiomas.
Ahora bien, si publicamos el mismo contenido para los mismos usuarios en distintas direcciones, debemos elegir qué versión preferimos. El siguiente paso es redirigir a la gente a ella. Para eso sirve precisamente el enlace rel=canonical. Nunca para darle más importancia a tu idioma que al resto, que te puede pasar factura.
¿Has usado alguna vez las etiquetas hreflang? ¿Te han salido muchos errores? ¿Qué beneficio has notado? Cuéntanoslo en los comentarios. ¡En el idioma que prefieras!
