Dynamische (Content) Bereitstellung für Mobilgeräte mit dem Vary-Header

Webdesigner stehen heute vor großen Herausforderungen, denn der Aufruf einer Webseite kann über eine unglaublich breite Palette unterschiedlichster Clients erfolgen. Die Bandbreite reicht von großformatigen Smart-TVs, über den klassischen Desktop-PC, bis zu Tablet und Smartphone-Devices sowie Wearables mit Miniatur-Displays. Die bevorzugte Antwort heißt immer öfter: Responsive Webdesigns. Hierbei passt sich die Darstellung der Website automatisch den Anforderungen des jeweiligen Endgeräts an. Doch manchmal ist die „Dynamische Bereitstellung“ von Webseiten-Contents die bessere Alternative.

An Responsive Webdesigns scheint aktuell kaum ein Weg vorbeizuführen, zumal dieser Ansatz auch von Google empfohlenen wird. Derselbe HTML-Code für alle Devices. Das klingt einfach und gut. Doch es gibt auch Ausnahmen. Zum Beispiel:

• Problemfall 1 – mobil nicht darstellbare ContentsVielleicht möchten Sie auf Ihrer Webseite weiterhin Inhalte veröffentlichen, die auf mobilen Endgeräten schlecht oder gar nicht dargestellt werden können, wie Flash-Animationen oder Navigationselemente, die nicht touchfähig sind etc.? Mit Hilfe der dynamischen Bereitstellung können Sie mobilen Besuchern ganz einfach alternative Inhalte ausliefern. Selbstverständlich sollten Sie sich bemühen, auf problematische Content-Elemente möglichst ganz zu verzichten. Snapsvg ist zum Beispiel eine gute Alternative zu Flash, denn mit diesem Open Souce-Tool können Sie Animationen erstellen, die sich auch über mobile Endgeräte abrufen lassen.
• Problemfall 2 – komplexe BestellprozesseUnter Umständen enthält Ihre Webseite komplexe Bestellprozesse, für die Sie – aus Gründen der besseren Usability – eine reduzierte Version für den Aufruf über mobile Endgeräte erstellen wollen. Die komfortablere und übersichtlichere Variante soll aber weiterhin für Desktop-Nutzer breitstellen. Mit Hilfe der dynamischen Bereitstellung können Sie Nutzern von mobilen Endgeräten alternativ mobile optimierte Bestellseiten ausliefern.
• Problemfall 3 – Wenn Sie die Ladezeiten für Mobile Devices optimieren möchtenVerwenden Sie ein Responsive Design wird das Seitendesign und die Darstellung der Abbildungen in der Regel automatisch der Bildschirmgröße des entsprechenden Endgertätes angepasst. Aber was ist mit den Bildgrößen? Haben Sie Ihre Bilder für mobile Endgeräte optimiert, müssen Sie bei der Darstellung auf großformatigen Screens unter Umständen Qualitätsverluste hinnehmen. Verwenden Sie Bildgrößen, die für großformatige Desktop-Darstellungen ausgelegt sind, kann das bei einem Aufruf über mobile Endgeräte unverhältnismäßig lange Ladezeiten zur Folge haben und diese Besucher unter Umständen sogar zum Verlassen Ihrer Seite bringen.

In diesen und ähnlich gelagerten Fällen kann die „Dynamische Bereitstellung“ von Contents eine bessere Lösung sein. Im Gegensatz zu m.Sites, bei denen User von Mobile Devices auf unterschiedliche URLs (zum Beispiel eine separate mobile Version Ihrer Webseite) geleitet werden, liefert der Server bei der dynamischen Bereitstellung unter derselben URL unterschiedlichen HTML- und CSS-Code aus. Das heißt konkret: Unterschiedliche Nutzer können unterschiedliche Inhalte angezeigt bekommen – je nachdem, mit welchem Endgerät die Seite aufgerufen wird.

Wichtige Punkte für die „Dynamische Bereitstellung“

Bei der dynamischen Bereitstellung sollten Sie allerdings auf die folgenden beiden Punkte besonders achten:

Sorgen Sie für eine eindeutige User-Agent-Erkennung

1. Nur wenn die unterschiedlichen Clients korrekt definiert sind, erhalten die User auf ihren Endgeräten auch die passende Website-Version bzw. die passenden Contents ausgeliefert. Fehlerhafte oder überalterte Client-Definitionen können dazu führen, dass der falsche Content ausgeliefert wird. Das kann die Usability Ihrer Seite nachhaltig einschränken. Nutzer erhalten einen schlechten Eindruck und werden Ihre Seite gegebenenfalls sogar direkt verlassen. Sorgen Sie also für eine eindeutige User-Agent-Erkennung und aktualisieren Sie diese Angaben regelmäßig.

Vermeiden Sie den Anschein von Cloaking
Wenn Sie unter der gleichen URL unterschiedliche Inhalte ausliefern, laufen Sie Gefahr, dass Ihre Seite von Suchmaschinen wegen Cloakings abgestraft wird. Deshalb müssen Sie die Crawler von Suchmaschinen darüber informieren, für welchen Client die entsprechenden Inhalte bestimmt sind, zum Beispiel, dass es neben Contents für den Aufruf über Desktop-PCs auch mobile optimierte Inhalte gibt.

Weiter Informationen zu Cloaking

• Zum Wikipedia-Artikel Cloaking
• Video – Matt Cutts erklärt: Was ist Cloaking? (in Englisch)

„Dynamische Bereitstellung“ mit dem Vary Header (Vary-Reponse/Vary-HTTP-Header)

Die (auch von Google) empfohlene Lösung für die dynamische (Content) Bereitstellung ist der Vary-Reponse/Vary-HTTP-Header, denn dieser erfüllt zwei wichtige Funktionen:

1. Suchmaschinen können schneller festzustellen, ob mobil-optimierte Inhalte vorhanden sind
   Mit Hilfe des Vary-Header (Vary-Reponse/Vary-HTTP-Header) geben Sie Webcrawlern die Möglichkeit, mobile Inhalte schneller zu erfassen und richtig zu indexieren. Wenn Sie den HTML-Code einer Webseite für mobile User-Agents verändern, können Sie mobile Inhalte verstecken, sobald die entsprechende Seite von einem Desktop-User-Agent gecrawlt wird. Über den Vary-Header weisen Sie Webcrawler, die sich zum Beispiel für ein Smartphone ausgeben, an, die Seite speziell nach mobilen Inhalten zu crawlen. Das ist umso wichtiger, da mit dem Google Mobile Update (April 2015) die Mobil-Optimierung zu einem wichtigen Ranking-Faktor geworden ist.
2. Sie verbessern die Usability Ihrer Webseite, wenn diese über unterschiedliche Clients aufgerufen wirdMit der im Vary-Header hinterlegten User-Agent-Definition informieren Sie den Cache-Server bei der Abfrage des Caches darüber, welcher User-Agent beachtet werden muss. Die jeweiligen Seiteninhalte werden abhängig davon ausgeliefert, von welchem User-Agent Ihre Seite angefragt wird. So können Sie zum Beispiel Ihre Bilddaten in unterschiedlichen Auflösungen zur Verfügungen stellen und die Dateien entsprechend flaggen. Beim Seitenaufruf wird somit immer die optimale Bildauflösung ausgeliefert. Auf diese Weise lassen sich insbesondere die Ladezeit und damit auch die Usability von „bildlastigen“ Webseiten für Mobilgeräte deutlich verbessern.

Weiter Informationen zum Vary-Header sowie zur dynamischen Content-Bereitstellung

• Zur Verwendung des Vary Response Header

Weitere Informationen zur Konfiguration für mobile Websites

• Häufige Fehler vermeiden

Haben Sie Ihre Webseite schon für Mobilgeräte optimiert? Für welche Konfiguration haben Sie sich entschieden: Für das responsive Webdesign, für die „Dynamische Bereitstellung“ oder für unterschiedliche URLs? Schicken Sie uns einen Kommentar. Wir freuen uns auf Ihr Feedback.

Bildnachweis: Fotolia, Lizenz: Host Europe