Kompatibilität:

WebSite X5 Pro

Google erlaubt ausdrücklich die Konfiguration mit separaten URLs für die Desktop- und die mobile Version derselben Website, es wird aber empfohlen, einige Notationen zu verwenden, damit die Algorithmen diese richtig interpretieren. 

Insbesondere verlangt Google, dass:

  • Auf der Seite für die Desktop-Version der Tag link rel="alternate" hinzugefügt wird, der zur URL für das entsprechende Mobilgerät weiterleitet.
  • Auf der Seite für die mobile Version wird der Tag link rel="canonical" hinzugefügt wird, der zur URL für die entsprechende Desktop-Version weiterleitet.


Diese Art von Notation zeigt den Algorithmen von Google an, dass zwei URLs gleiche Inhalte haben und als eine Seite betrachtet werden müssen und nicht als zwei unterschiedliche Seiten. Dies ist ein sehr wichtiger Aspekt, denn sollten die Desktop- und die Mobil-Version der Seite als zwei unterschiedliche Seiten betrachtet werden, werden für mobile Geräte sowohl die Desktop-URL als auch die URL für mobile Geräte angezeigt. In diesem Fall kann das Ranking für beide Seiten fallen, denn der sogenannte Duplicate Content („Doppelter Inhalt“) wird von Google beim Seitenranking bestraft.


Bei der Einstellung dieser Notationen muss auf Folgendes geachtet werden:

  • Es muss ein Verhältnis von 1:1 zwischen den Seiten für den Desktop und den Seiten für Mobilgeräte beibehalten werden. Insbesondere muss vermieden werden, Notationen in vielen Desktop-Seiten einzufügen, die sich auf die gleiche Seite für Mobilgeräte beziehen (oder umgekehrt).
  • Eine Weiterleitung darf nur zwischen tatsächlich auf einander bezogenen Seiten eingerichtet werden.


Bei WebSite X5 ist es am einfachsten, die Website für die mobile Version als eine identische Kopie der Website für den Desktop zu erstellen: Auf diese Weise haben beide Websites genau dieselben Seiten (Dateien mit dem selben Namen) und es ist einfach eine exakte 1: 1-Entsprechung einzurichten.

Wenn wir das vorhergehende Beispiel wieder aufnehmen und einmal annehmen, dass wir die von Google verlangten Notationen einfügen wollen, um die Versionen für Desktop, Tablet und Smartphone zu verwalten, ist Folgendes zu tun:

  • Öffnen Sie das Projekt für die Website für die Desktop-Version. Greifen Sie bei Schritt 1 - Website-Einstellungen auf das Fenster Statistiken und Code zu und öffnen Sie den Abschnitt Code.
  • Wählen Sie im Feld Benutzerdefinierter Code die Option Vor dem </HEAD> Tagund schreiben Sie die folgenden Notationen:
<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mysite.com/smartphone/[CURPAGE]">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mysite.com/tablet/[CURPAGE]">


Nachdem die erfolgten Änderungen gespeichert wurden, kann man an der Website für die Tablet-Version arbeiten:

  • Öffnen Sie das Projekt für die Website für die Tablet-Version. Greifen Sie bei Schritt 1 - Website-Einstellungen auf das Fenster Statistiken und Code zu und öffnen Sie den Abschnitt Code.
  • Wählen Sie im Feld Benutzerdefinierter Code die Option Vor dem </HEAD> Tagund schreiben Sie die folgenden Notationen:
<link rel="canonical" href="http//www.mysite.com/[CURPAGE]">
  • Wiederholen Sie diese Schritte, die für die Tablet-Version erfolgt sind, nun für die Smartphone-Version: Die Notation, die eingefügt werden muss, bleibt unverändert. 


Um die Funktionsweise des eben beschriebenen Verfahrens besser zu verstehen, beachten Sie bitte Folgendes:

  • Wenn Sie die Notationen über das Fenster Statistiken und Code einfügen, werden diese automatisch in den Code aller Seiten der Website übernommen.
  • Bei den Notationen muss als Attribut href die URL der Seite eingegeben werden, an der man arbeitet: Wenn man den String [CURPAGE] verwendet, wird die Datei, die zur Seite gehört identifiziert und automatisch vom Programm eingefügt.
  • Auf den Seiten der Desktop-Version der Website muss der Tag link rel="alternate" verwendet werden, um alle alternativen Möglichkeiten anzuzeigen: Im spezifischen Fall wurde er zweimal wiederholt, um sowohl die Tablet-Version als auch die Smartphone-Version zu verbinden.
  • In der Notation des Tag link rel="alternate" muss auch angegeben werden, wann die Smartphone- oder Tablet-Version einer Website anstelle der Desktop-Version angeboten werden. Im angegebenen Beispielcode definieren die Strings der Medienabfragen (Media query), dass bei Auflösungen unter 480px Google die URL der Smartphone-Version anbieten muss, während für Auflösungen zwischen 481px und 1024px die Tablet-Version der Website angeboten wird.


Wenn die Websites der Versionen für Desktop, Tablet und Smartphone nicht genau dieselben Seiten enthalten und/oder Seiten enthalten, die einander entsprechen, aber unterschiedliche Namen haben, muss manuell auf den Code jeder einzelnen Seite eingegriffen werden, um die erforderlichen Notationen korrekt einzufügen.

  • Öffnen Sie das Projekt für die Website für die Desktop-Version und wählen Sie im Schritt 3 - Sitemap die Seite, an der Sie arbeiten wollen. Klicken Sie dann auf die Schaltfläche Eigenschaften.
  • Öffnen Sie im aufgerufenen Fenster Eigenschaften der Seite den Bereich Erweitert und positionieren Sie sich im Feld Benutzerdefinierter Code.
  • Wählen Sie die Option Vor dem </HEAD> Tag und schreiben Sie die folgenden Notationen:
<link rel="alternate" media="only screen and (max-width: 480px)" href="http//www.mysite.com/smartphone/page-1.html">

<link rel="alternate" media="only screen and (min-width: 481px) and (max-width: 1024px)" href="http//www.mysite.com/tablet/page-1.html">

Wobei Folgendes gilt: http//www.meinewebsite.de/smartphone/page-1.html e http//www.meinewebsite.de/tablet/page-1.html sind die URLs der Seiten der Website für die Smartphone- und Tablet-Version, die der Website für die Desktop-Version entsprechen, an der man gerade arbeitet.

  • Wiederholen Sie den letzten Schritt für alle Seiten der Website, sodass in jede die Notationen mit den URLs der Seiten für die entsprechende Smartphone- und Tablet-Version eingefügt werden.


Entsprechend ist auch für die Seiten der Website in der Smartphone- und Tablet-Version vorzugehen. In diesen Fällen muss die folgende Notation eingefügt: 

<link rel="canonical" href="http//www.mysite.com/desktop/page-1.html">

Wobei Folgendes gilt: http//www.meinewebsite.de/desktop/page-1.html ist die URL der Seite der Website für die Desktop-Version, die der der Website für die Smartphone- oder Tablet-Version entspricht, an der man gerade arbeitet.