Separate URLs

In dieser Konfiguration haben die Desktop- und mobilen Seiten unterschiedliche URLs.

Häufig eingesetzt wird ein Modell, bei dem Seiten für Desktopnutzer unter www.example.com und entsprechende Seiten für mobile Nutzer unter m.example.com verfügbar gemacht werden. Google bevorzugt kein bestimmtes URL-Format, solange alle URLs für alle Googlebot-User-Agents verfügbar sind.

Grafische Darstellung von separaten URLs

TL;DR

  • Stellen Sie die Beziehung zwischen zwei URLs mithilfe des Tags <link> und der Elemente rel="canonical" und rel="alternate" dar.

  • Suchen Sie nach User-Agent-Strings und korrigieren Sie die Weiterleitung wie erforderlich.

Annotationen für Desktop-URLs und mobile URLs

Wir empfehlen die folgenden Annotationen, damit unterschiedliche mobile URLs von unseren Algorithmen besser ausgewertet werden können:

  1. Fügen Sie auf der Desktopseite ein rel="alternate"-Tag hinzu, das auf die entsprechende mobile URL verweist. Dies hilft dem Googlebot dabei, die mobilen Seiten deiner Website zu finden.
  2. Auf der mobilen Seite fügen Sie das Tag rel="canonical" hinzu, das auf die entsprechende Desktop-URL verweist.

Wir unterstützen zwei Methoden für diese Annotation: im HTML-Code der Seiten selbst und in Sitemaps. Angenommen, die Desktop-URL lautet http://example.com/page-1 und die entsprechende mobile URL http://m.example.com/page-1. In diesem Beispiel würden die Annotationen so aussehen:

Annotationen im HTML-Code

Füge auf der Desktopseite http://www.example.com/page-1 die folgende Annotation hinzu:

<link rel="alternate" media="only screen and (max-width: 640px)"
 href="http://m.example.com/page-1">

Auf der mobilen Seite http://m.example.com/page-1 lautet die erforderliche Annotation:

<link rel="canonical" href="http://www.example.com/page-1">

Das auf die Desktopseite verweisende rel="canonical"-Tag in der mobilen URL ist erforderlich.

Annotationen in Sitemaps

Die Annotation rel="alternate" für die Desktopseiten wird in Sitemaps so konfiguriert:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>http://www.example.com/page-1/</loc>
    <xhtml:link rel="alternate" media="only screen and (max-width: 640px)"
    href="http://m.example.com/page-1" />
  </url>
</urlset>

Das erforderliche Tag rel="canonical" sollte auch in diesem Fall zum HTML-Code der mobilen Seiten hinzugefügt werden.

Annotationen im Detail

Beachten Sie die Attribute des Link-Tags auf der Desktopseite:

  • Das Attribut rel="alternate" signalisiert, dass dieses Tag eine alternative URL zur Desktopseite angibt.
  • Der Wert des Medienattributs ist ein CSS-Medienabfragestring, mit dem die Medienfunktionen angegeben werden, die wiederum beschreiben, wann Google die alternative URL verwenden soll. In diesem Fall verwenden wir eine Medienabfrage, die in der Regel bei einer Optimierung für Mobilgeräte zum Einsatz kommt.
  • Das "href"-Attribut gibt die Adresse der alternativen URL an, also die Seite m.example.com.

Diese bidirektionale Annotation erleichtert dem Googlebot das Auffinden Ihrer Inhalte. Außerdem können unsere Algorithmen die Beziehung zwischen Ihren Desktopseiten und mobilen Seiten leichter nachvollziehen und entsprechend behandeln. Wenn Sie unterschiedliche URLs verwenden, um denselben Inhalt in verschiedenen Formaten bereitzustellen, werden die Google-Algorithmen mithilfe dieser Annotation darauf hingewiesen, dass die Inhalte der beiden URLs sich entsprechen und nicht als zwei verschiedene Entitäten, sondern als eine Entität behandelt werden sollen. Wenn andererseits die Desktop- und die mobile Variante der Seite als unterschiedliche Entitäten behandelt werden, können sowohl die Desktop- als auch die mobilen URLs in den Desktop-Suchergebnissen erscheinen. Dabei fällt die Platzierung möglicherweise niedriger aus, als es der Fall wäre, wenn Google ihre Beziehung verstehen würde. Häufige Fehler bei dieser Konfiguration:

  • Behalten Sie ein 1-zu-1-Verhältnis zwischen der mobilen und der entsprechenden Desktopseite bei, wenn Sie die Markup-Elemente rel="alternate" und rel="canonical" verwenden. Achte in diesem Fall vor allem darauf, nicht mehrere Desktopseiten so zu annotieren, dass sie auf eine einzelne mobile Website verweisen oder umgekehrt.
  • Überprüfe deine Weiterleitungen mehrfach und achte dabei darauf, dass Desktopseiten nicht versehentlich auf eine einzelne mobile Seite ohne Bezug zur Desktopseite verweisen.
Wenn du dich dafür entscheiden solltest, eine separate mobile Website zu implementieren, achte auf häufig gemachte Fehler wie die Konfiguration fehlerhafter Weiterleitungen für mobile Nutzer.

Automatische Weiterleitung

Wenn eine Website unterschiedliche URLs für Desktop-Browser und mobile Browser verwendet, kann es sinnvoll sein, die Nutzer automatisch zur passenden URL weiterzuleiten. Wenn Sie für Ihre Website die automatische Weiterleitung verwenden, achten Sie darauf, dass alle Googlebots wie alle anderen User-Agents behandelt und entsprechend weitergeleitet werden.

Unterstützte Weiterleitungstechniken

Der Googlebot unterstützt die folgenden beiden Weiterleitungstypen:

  • HTTP-Weiterleitungen
  • JavaScript-Weiterleitungen

HTTP-Weiterleitungen verwenden

HTTP ist eine häufig verwendete Methode zur Weiterleitung von Clients an gerätespezifische URLs. In der Regel erfolgt die Weiterleitung abhängig vom User-Agent, der im HTTP-Anfrage-Header angegeben ist. Es ist wichtig, dass die Weiterleitung mit der alternativen URL konsistent ist, die im rel="alternate"-Tag der Seite oder in der Sitemap angegeben ist.

Hierbei spielt es keine Rolle, ob der Server die Weiterleitung mit dem HTTP-Statuscode 301 oder 302 ausführt. Es wird aber empfohlen, nach Möglichkeit den Code 302 zu verwenden.

JavaScript-Weiterleitungen

Ist die HTTP-Weiterleitung schwierig zu implementieren, kannst du die Nutzer mithilfe von JavaScript zu den URLs weiterleiten, die im rel="alternate"-Tag angegeben sind. Wenn du diese Methode verwenden möchtest, beachte die auf der Client-Seite der Weiterleitung auftretende Latenz. Sie entsteht, weil die Seite zuerst heruntergeladen und das JavaScript dann geparst und ausgeführt werden muss, bevor die Weiterleitung erfolgen kann.

Es gibt viele Ansätze zur Implementierung einer JavaScript-basierten Weiterleitung. Beispielsweise kannst du auch die Medienabfragen, die deine Website bereits in den Linkannotationen der Seite verwendet, mithilfe von JavaScript ausführen. Dabei kommt die JavaScript-Funktion matchMedia() zum Einsatz.

Bidirektionale und unidirektionale Weiterleitungen

Verschiedene Websites implementieren bei der Weiterleitung unterschiedliche Ansätze. Bei einigen Websites werden lediglich mobile Nutzer, die eine Desktopseite besuchen, auf eine mobile Seite umgeleitet; dies ist eine unidirektionale Weiterleitung. Bei anderen Websites werden sowohl mobile Nutzer als auch Desktopnutzer umgeleitet, wenn sie eine für die jeweils andere Umgebung vorgesehene Seite aufrufen; das ist eine bidirektionale Weiterleitung.

Beim Googlebot gibt es diesbezüglich keinen bevorzugten Ansatz: Wir empfehlen Webmastern, bei der Entscheidung über einen Weiterleitungsansatz die Anforderungen der Nutzer zu berücksichtigen. Wichtig ist vor allem, dass die Weiterleitungen korrekt und konsistent sind, also die Nutzer zum jeweils passenden Inhalt auf der Desktopwebsite oder der mobilen Website geführt werden. Wenn die Konfiguration falsch ist, sind Ihre Inhalte für manche Nutzer womöglich überhaupt nicht sichtbar.

Außerdem empfehlen wir, den Nutzern eine Möglichkeit zu geben, den Weiterleitungsmechanismus bei Bedarf aufzuheben. Mobile Nutzer sollten auch die Desktopseite und Desktopnutzer die mobile Seite aufrufen können, sofern sie dies wünschen.