Wie macht man eine Website „Mobile Friendly“?

Google hat am 21. April 2015 seinen Ranking Algorithmus geändert (siehe unsere News zum mobile friendly Google Update) mit dem Ziel, Websites, die für mobile Endgeräte passende Inhalte liefern, höher in den Suchergebnissen zu ranken.
Das heißt, Webseiten, die für Smartphones optimiert sind, werden in Zukunft bei mobilen Suchanfragen in Google besser positioniert sein, als Webseiten, die nicht optimiert sind!

Aber wie bekommt eine Seite den Titel “Mobile Friendly”?

Dafür muss die Website die folgenden Anforderungen erfüllen:

• Inhalte werden gut auf einem Smartphone dargestellt
• man muss nicht zoomen
• Inhalte sind auf einem kleinen Bildschirm gut lesbar
• Navigieren mit dem Finger ist einfach
• Nutzern wird eine gute Sucherfahrung geboten
• Google kann die Konfiguration der Seite verstehen

Um das umzusetzen, gibt es drei verschiedene Konfigurationen:

1. Responsive Webdesign
2. Dynamische Bereitstellung
3. Unterschiedliche URLs

Die Konfigurationen unterscheiden sich in der Art, wie URL und HTML-Code verwendet bzw. bereitgestellt werden:

1. Responsive Webdesign (RWD)

Von Google empfohlen! Unabhängig vom verwendeten Gerät (Desktop, Tablet, Smartphone) wird der gleiche HTML-Code bereitgestellt, der Inhalt variiert jedoch auf Grundlage der Bildschirmgröße (mit Hilfe von CSS). Mehr Infos zu Responsive Webdesign

Wichtig:

Signalisiert dem Browser, dass sich die Webseite an Geräte anpasst, indem ihr dem Header des Dokuments den folgenden Meta-Tag hinzufügt:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ohne diesen Tag würde der mobile Browser auf die Desktop-Breite ausweichen und die Seite so klein skalieren, dass sie auf den Bildschirm passt. Das führt dazu, dass Schriftgrößen zu klein oder unverhältnismäßig groß sind, nur ein Teil der Inhalte angezeigt wird usw.

Außerdem ist es wichtig, keine Assets (CSS, JavaScript und Bilder) der Seite für den Googlebot über die robots.txt oder anderweitig zu blockieren. Google Algorithmen müssen vollen Zugriff auf diese externen Dateien haben, damit sie die Konfiguration der Website hinsichtlich Responsive Webdesign besser erkennen und entsprechend behandeln können.

2. Dynamische Bereitstellung

Bei der dynamischen Bereitstellung wird unabhängig vom Gerät auf die gleiche URL zurückgegriffen. Für unterschiedliche Gerätetypen werden jedoch verschiedene HTML-Versionen generiert (je nachdem, was der Server über den Browsertyp des Nutzers herausfindet).

Wichtig:

Bei dieser Konfiguration ist für Google nicht sofort erkennbar, dass die Website den HTML-Code für mobile User-Agents verändert (beim Crawl mit einem Desktop-User-Agent werden mobile Inhalte versteckt). Deswegen muss man den Server einen Hinweis senden lassen, damit der Googlebot für Smartphones dazu aufgefordert wird, sie Seite auch zu crawlen und so die mobilen Inhalte zu erfassen. Für diesen Hinweis verwendet man den Vary-HTTP Header.

Für Apache fügt man diesen in die .htaccess Datei ein:

Header append Vary User-Agent

3. Unterschiedliche URLs

Bei der Konfiguration unterschiedlicher URLs werden unterschiedliche HTML-Codes bereitgestellt. Für jede Desktop-URL gibt es eine zugehörige URL, über die für Mobilgeräte optimierte Inhalte bereitgestellt werden.

Die häufigste Variante, wie das umgesetzt wird, ist dass Seiten unter www.beispiel-seite.de Desktop-Nutzern bereitgestellt werden und entsprechende Seiten für mobile Nutzer unter m.beispiel-seite.de verfügbar sind. Von Google wird dabei kein bestimmtes URL-Format bevorzugt, solange alle URLs für alle Googlebot-User-Agents verfügbar sind.

Wichtig:

Damit Google Algorithmen unterschiedliche URLs besser auswerten können:

Annotation im HTML-Code

Auf der Desktop-Seite http://www.beispiel-seite.de/seite-1 folgendes hinzufügen:

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

Auf der mobilen Seite http://m.beispiel-seite.de/seite-1 lautet die erforderliche Annotation (obligatorisch):

<link rel="canonical" href="http://www.beispiel-seite.de/seite-1" > 

Annotation in Sitemaps

Die Annotation rel=“alternate“ für die Desktop-Seiten kann folgendermaßen in Sitemaps aufgenommen werden:

<?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.beispiel-seite.de/seite-1/</loc> 
<xhtml:link
   rel="alternate"
   media="only screen and (max-width: 640px)"
   href="http://m.beispiel-seite.de/seite-1" />
</url>
</urlset>

Das erforderliche Tag rel=“canonical“ unter der mobilen URL sollte dem HTML-Code der mobilen Seite trotzdem hinzugefügt werden.

Fazit

Auch wir empfehlen Responsive Webdesign, weil:

• es dem Nutzer erleichtert, Website-Inhalte über eine einzelne URL zu teilen und zu verlinken
• die Google Algorithmen hier präzise Indexierungseigenschaften zuordnen können und es nicht erforderlich ist, das Vorhandensein von Desktop und mobile Seiten zu signalisieren
• es weniger Aufwand für die Pflege von Website-Inhalten bedeutet (es müssen Inhalte nicht doppelt gepflegt werden)
• es die Wahrscheinlichkeit von häufig gemachten Fehlern im Zusammenhang mit mobilen Webseiten reduziert
• die Ladezeiten geringer sind, da keine Weiterleitung der User erforderlich ist, um zu einer für ihr Gerät optimierten Ansicht zu gelangen
• es nutzerfreundlicher ist, da auf User-Agents basierende Weiterleitungen fehleranfälliger sind
• es Ressourcen beim Crawlen der Website durch Googlebot spart, da nicht mehrere Versionen der Inhalte vorhanden sind. Dadurch kann Google ggf. mehr Webseiten Inhalte indexieren und entsprechend aktuell halten