Separate URLs

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

Ein häufig eingesetztes Modell ist, dass Seiten unter www.example.com für Desktopnutzer bereitgestellt werden und entsprechende Seiten für mobile Nutzer unter m.example.com verfügbar sind. Google bevorzugt kein bestimmtes URL-Format, solange alle URLs für alle Googlebot-User-Agents verfügbar sind.

TL;DR

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

  • Identifizieren Sie User-Agent-Strings und leiten Sie sie richtig weiter.

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ügt auf der Desktopseite ein rel="alternate"-Tag hinzu, das auf die entsprechende mobile URL verweist. Dadurch findet der Googlebot den Speicherort der mobilen Seiten deiner Website.
  2. Fügt auf der mobilen Seite ein rel="canonical"-Tag hinzu, das auf die entsprechende Computer-URL verweist.

Wir unterstützen zwei Methoden für diese Annotation: im HTML-Code der Seiten selbst und in Sitemaps. Nehmen wir zum Beispiel an, dass die Desktop-URL http://example.com/page-1 und die entsprechende mobile URL http://m.example.com/page-1 lautet. Die Annotationen in diesem Beispiel wären wie folgt:

Annotationen im HTML-Code

Fügen Sie 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 sieht die erforderliche Annotation so aus:

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

Dieses Tag rel="canonical" auf der mobilen Seite, das auf die Desktopseite verweist, ist obligatorisch.

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 Markups rel="alternate" und rel="canonical" verwenden. Achten Sie in diesem Fall vor allem darauf, nicht mehrere Desktopseiten so zu annotieren, dass sie auf eine einzelne mobile Website verweisen oder umgekehrt.
  • Überprüfen Sie Ihre Weiterleitungen mehrfach – sorgen Sie dafür, dass Desktopseiten nicht versehentlich auf eine einzelne mobile Seite ohne Bezug zur Desktopseite verweisen.
Wenn Sie sich dafür entscheiden sollten, eine separate mobile Website zu implementieren, achten Sie 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 können Sie auch die Medienabfragen, die Ihre 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.