Mobile SEO © William Iven

Mobile Commerce Boom: Wie Sie Ihren Shop jetzt mobil optimieren

Am 21. April 2015 hat Google das Mobile Update ausgerollt. Im Kern zielte es auf die mobile Nutzerfreundlichkeit von Websites ab: Online-Shops, die eine optimierte und gut funktionierende mobile Website haben, werden in den mobilen Suchergebnissen besser gerankt als nicht-mobile Websites. Spätestens seit dem Mobile Update sind Online-Händler gezwungen, sich mit der mobilen Suche auseinanderzusetzen und eine geeignete Mobile-Strategie für ihr Unternehmen zu entwickeln. Erfahren Sie im zweiten Teil unserer Mobile-Serie, wie Sie Ihren Online-Shop mobil optimieren und mögliche Fehler identifizieren und beheben.

Mobile boomt im Online-Handel

Bereits 64 Prozent der Deutschen nutzten 2015 mobile Geräte zum Einkaufen. Deals.com prognostizierte in seiner E-Commerce-Studie für 2015 einen Umsatz von 14,6 Milliarden EUR im M-Commerce. Zum Vergleich: 2014 waren es noch 7,2 Milliarden EUR Umsatz über mobile Endgeräte – das entspricht einem Wachstum von 108 Prozent. Auch im europäischen Vergleich liegt der deutsche M-Commerce-Anteil im oberen Bereich, auf Platz 3 knapp hinter Großbritannien und Schweden.

Wachstumsprognose des deutschen M-Commerce
Wachstumsprognose des deutschen M-Commerce | ©deals.com

Online-Shops müssen sich auf diese Entwicklung einstellen und ihre Seite dahingehend optimieren, dass der Kunde auch auf seinem Mobilgerät eine positive User Experience erfährt. Übrigens belohnen viele Nutzer nur den Shop mit einer Rückkehr, der mobil am besten funktioniert hat.

Die wichtigsten Herausforderungen für die mobile Optimierung

Bei der Mobil-Optimierung Ihres Shops haben Sie vor allem zwei Herausforderungen zu meistern: die technische Optimierung und die Optimierung der Mobile User Experience, die über die rein technischen Aspekte hinausgeht. Im Folgenden geben wir Ihnen Tipps, wie Sie die mobile Optimierung Ihres Shops erfolgreich umsetzen können.

Wie Sie Probleme mit der mobilen Nutzerfreundlichkeit erkennen

Wenn keine mobile Version einer Website existiert oder die mobile Site nicht ausreichend optimiert ist, so ist sie nicht benutzerfreundlich. Besucher, die schlechte mobile Websites aufrufen, springen im Regelfall direkt wieder ab und wechseln zum nächsten Suchergebnis. Wenn Ihre mobile Website dagegen für eine gute User Experience sorgt und dem Suchenden schnell und direkt die passende Antwort zu seiner Suchanfrage liefert , ist das ein Zeichen für eine hohe mobile Nutzerfreundlichkeit. Google möchte auch bei Suchanfragen über Mobilgeräte die bestmöglichen Suchergebnisse für jeden Nutzer liefern. Aus diesem Grund werden Websites mit einer hohen mobilen Nutzerfreundlichkeit gut gerankt.

Die folgende Grafik zeigt die häufigsten Fehler, die laut Google beim Aufrufen einer mobilen Website auftreten.

Eine Übersicht der häufigsten Fehler, die auf mobilen Websites auftreten

VOTUM gibt Ihnen praktische Tipps, wie Sie Probleme mit der mobilen Nutzerfreundlichkeit identifizieren. Das PDF können Sie sich hier direkt herunterladen: Zum Download.

Technische Herausforderungen

Es bieten sich drei Möglichkeiten für Shopbetreiber, ihre Website mobil auszuliefern:

Responsive Design

Beim Responsive Design handelt es sich um eine automatische, dynamische Anpassung der Website-Elemente an die verfügbare Display-Größe. Es wird hierbei nur eine URL für alle Endgeräte (Desktop, Tablet, Smartphone) verwendet, was den Vorteil hat, dass der Crawling-Aufwand sinkt. Grundsätzlich wird beim Responsive Design bei einer Anfrage durch den mobilen Browser derselbe HTML-Code vom Server ausgeliefert wie bspw. bei einer Desktop-Abfrage. Einzig unterschiedliche CSS-Angaben ermöglichen, dass sich der Inhalte der jeweiligen Bildschirmgröße anpasst. Damit sich die Website-Inhalte anpassen, muss das Viewport-Metatag verwendet werden:

meta name=“viewport“ content=“width=device-width, initial-scale=1.0″

Dynamic Serving

Dynamic Serving beschreibt die dynamische Bereitstellung von Inhalten auf einem mobilen Endgerät. Auch hier wird insgesamt nur eine URL verwendet. Im Unterschied zum Responsive Design ist der HTML-Quelltext jedoch vom User-Agent (Nutzerkennung eines Endgeräts) abhängig. Für Anfragen verschiedener Endgeräte liefert der Server auf den User-Agent zugeschnittenen HTML- und CSS-Code aus. Auf der Desktop-Version einer Website wird somit anderer Quellcode dargestellt als auf dem Smartphone.

Für die Suchmaschine ist leider nicht direkt erkennbar, ob Dynamic Serving verwendet wird. Deshalb muss der Vary Header implementiert werden. Dazu wird der folgende Code im HTTP-Header integriert:

Content-Type: text/html
Vary: User-Agent

Achtung: Wenn die Suchmaschine nicht darüber informiert wird, dass sich der Seiteninhalt je nach User-Agent unterscheidet, kann es passieren, dass etwa dem Smartphone-Nutzer die Desktop-Version ausgespielt wird. Problematisch ist allerdings, dass viele Content Delivery Networks Probleme mit der Angabe „Vary“ haben. Sie verstehen sie als Hinweis darauf, dass keine gecachten Inhalte ausgeliefert werden sollen. Diese müssen dann direkt vom Server angefragt werden.

Separate Mobile-URL

Neben der Verwendung von Responsive Design ist die Bereitstellung von Inhalten über eine separate Mobile-URL die zweitpopulärste Form im Mobile SEO. Laut der Searchmetrics-Studie zu den mobilen Rankingfaktoren wächst der Anteil an mobilen Websites mit eigenen mobilen URLs stark an. Hier kann entweder eine eigene Domain, z. B. domain.mobi oder eine Subdomain einer bereits bestehenden Domain, z. B. m.domain.de, eingerichtet werden. Anders als bei den anderen mobilen Möglichkeiten steigt hier jedoch der Crawling-Aufwand für die Suchmaschine, da der Inhalt auf unterschiedlichen URLs zur Verfügung steht. Zudem ist für den Crawler nicht direkt ersichtlich, welche URL für welches Endgerät bestimmt ist. Für diese Lösung sollten Sie folgende Verweise anlegen:

Verweisen Sie von der Desktop-Version per rel=“alternate“ auf die mobile Version:
link rel=“alternate“ media=“only screen and (max-width: 640px)“ href=https://m.votum.de

Von der mobilen Website verweisen Sie per Canonical Tag auf die Desktop-Version:
link rel=“canonical“ href=“https://votum.de“

Damit stellen Sie sicher, dass der Nutzer in der mobilen Suche zur richtigen URL verwiesen wird. Außerdem umgehen Sie damit auch Probleme mit Duplicate Content. Darüber hinaus wird die mobile Website schneller, da eine Weiterleitung von der Desktop-Website zur mobilen Website gänzlich entfällt.

Das Element rel=“alternate“ implementieren Sie entweder im-Bereich der Website oder in der XML-Sitemap. Hinweis: Die Auszeichnung muss auf Seitenbasis erfolgen. Das heißt, Sie müssen die korrespondierenden URLs miteinander verknüpfen. Den Canonical Tag können Sie entweder in-Bereich der mobilen Website oder im http-Header der mobilen URL integrieren. Auch hier muss die Setzung des Canonical Tags auf URL-Basis erfolgen, d. h. für jede Seite getrennt. Die Verweise per Canonical Tag und Alternate-Link sind wichtige Hilfsmittel für die Suchmaschine. Dem Nutzer ist damit allerdings noch nicht geholfen. Wenn ein Nutzer mobil direkt auf eine URL zugreifen will, muss eine auf dem User-Agent basierende Weiterleitung greifen. Geschieht das nicht, wird die Suchmaschine die Desktop-Seite ausspielen. Die Weiterleitungen sollten idealerweise bidirektional stattfinden, also zwischen Dektop- und Mobile-Website und andersherum. Google empfiehlt zudem die Angabe „Vary: User-Agent“. Bei Online-Shops kann es häufig vorkommen, dass URLs existieren, die kein Desktop-Pendant haben. Das passiert beispielsweise dann, wenn es mobil mehr paginierte Seiten gibt, weil pro Seite weniger Produkte angezeigt werden können. Wir empfehlen, diese URLs per „noindex“ von der Indexierung auszuschließen, damit sie nicht mit anderen URLs in der Suche konkurrieren. Im Leitfaden für Mobilgeräte hat Google ausführliche Informationen zu allen drei Methoden zur Bereitstellung mobilfreundlicher Websites zusammengestellt. Zudem finden Sie hier Anleitungen für elf CMS.

Mobile User Experience

Für eine gute Mobile User Experience ist allerdings mehr notwendig als die technischen Voraussetzungen zu schaffen. Diese fokussieren in erster Linie eine vernünftige Infrastruktur. Die Mobile User Experience umfasst jedoch außerdem die Wahrnehmung, die der User während und nach der Nutzung eines mobilen Angebots hat. Google rät in den Richtlinien für Webmaster:

Überlegen Sie, was Ihre Website einzigartig, wertvoll oder einnehmend macht. Gestalten Sie Ihre Website so, dass sie sich von anderen in Ihrem Bereich abhebt.

In der Mobile UX müssen gänzlich andere Aspekte berücksichtigt werden als bei der UX für Desktop-Websites. So verfügen die mobilen Devices über andere Bildschirmgrößen und Funktionen wie Wischgesten, Daten-Eingabe und Display-Ausrichtung.
Designer und Webentwickler müssen bedenken, dass Nutzer, die eine App oder eine mobile Website besuchen, eine ganz andere Intention verfolgen und sich auch anders verhalten als Besucher einer Desktop-Variante. Die mobile Funktionalität muss viel stärker am Nutzer orientieren, als es bei Desktop-Websites derzeit noch der Fall ist. Im Folgenden listen wir Ihnen einige Maßnahmen auf, um dies zu erreichen.

Wie Sie die Mobile Experience in Ihrem Online-Shop verbessern:

  • Bieten Sie Funktionen an, die nur mobilen Nutzern helfen, z. B. Barcode-Scanner
  • Fokussieren Sie Kernfunktionen, die Ihren mobilen Besuchern wirklich helfen, z. B. In-Store-Shopping inkl. Zugang zu Produktreviews
  • Strukturieren Sie alle Funktionen und Inhalte sinnvoll
  • Verlinken Sie direkt von der Startseite auf alle wichtigen Funktionen wie z. B. Warenkorb, Merkliste bzw. Wunschzettel, Menü, Login zum Kundenkonto usw.
  • Sorgen Sie für kurze Klickwege (maximal 3 Klicks)
  • Sorgen Sie für mobilfreundliche und kurze Bestellvorgänge
  • Alle Navigationselemente und Buttons müssen problemlos und präzise drückbar sein, sie dürfen also nicht zu nah beieinander liegen
  • Komprimieren Sie Ihre Bilder und minimieren Sie so die Dateigröße
  • Berücksichtigen Sie die horizontale und auch die vertikale Ausrichtung des Displays
  • Integrieren Sie einen Zurück-Button auf der mobile Website, damit der Nutzer leichter zu seinem Ausgangspunkt gelangt, und verwenden Sie auch Home-Icons
  • Verwenden Sie ein einfaches und verständliches Wording für die Benennung der einzelnen Buttons, Menüpunkte und Links
  • Passen Sie die Schriftgrößen auf die mobile Umgebung an. Als Ausgangsschriftgröße sollten 16 Pixel verwendet werden, verwenden Sie weitere Schriftgrößen relativ dazu
  • Vereinfachen Sie die Eingabe von Daten, z. B. bei der Registrierung als Neukunde im Bestellvorgang, indem Sie die Formulare reduzieren
  • Bieten sie Autovervollständigung an
  • Integrieren Sie channelübergreifende Features wie das Merken von persönlichen Einstellungen des Nutzers
  • Verzichten Sie auf nicht-mobilfreundliche Technologien wie JavaScript, Flash, Frames usw.
  • Achten Sie auf nutzerfreundliche Ladezeiten

Folgende Weblinks führen zu weiteren nützlichen Informationen rund um das Thema Mobile User Experience:

The Elements Of The Mobile User Experience
Mobile User Experience Guidelines and Recommendations
Ten Tips for Designing Mobile UX

Mobile Content: Inhalte schaffen, die auf dem Smartphone relevant sind

Nicht nur die Mobile User Experience orientiert sich an spezifischen Rahmenbedingungen. Auch für die Content-Produktion müssen Sie andere Aspekte beachten als bei Desktop-Angeboten. Das beginnt bereits bei der Content-Erstellung. Bevor Sie damit beginnen, sollten Sie sich eine gute mobile Content-Strategie zurechtlegen – übrigens müssen Sie nicht für jedes Mobilgerät eine eigene Strategie erstellen. Wenn möglich, sollten Sie mit Content Models arbeiten. Überlegen Sie genau, welche Content-Typen zur Verfügung stehen, welche für Ihre mobile Content-Strategie relevant sind und wie sie sich integrieren lassen. Zudem sollten Sie bedenken, wie Ihr mobiler Content am Ende vom User konsumiert wird. Auf smashingmagazine.com erhalten Sie eine ausführliche Beschreibung zur Entwicklung von Content Models anhand einer Beispiel-Website.

Mobile Texte sind wesentlich kürzer als Content auf Desktop-Websites. Das heißt, Ihre mobilen Texte müssen präziser und kürzer sein, damit der Nutzer sie schnell konsumieren kann. Es wird vermutet, dass der Nutzer den Content mobil nicht von links nach rechts überfliegt und an bestimmten Stellen ausführlicher liest. Stattdessen geht der Blick des Nutzers häufig direkt auf die Mitte des Bildschirms und nur teilweise nach oben, unten, links oder rechts.
Mobile Inhalte sollten daher einfach und kurz dargestellt werden. Strukturelemente wie Listen und Aufzählungen helfen dem Nutzer, wichtige Inhalte schneller zu finden und besser zu verstehen. Vermeiden Sie unnötige und zu lange Einleitungen, und versuchen Sie so schnell wie möglich zum Kern des Textes zu kommen. Verzichten Sie zudem auf das ausführliche Erklären von Statistiken. Es reicht, wenn Sie die Ergebnisse in einer leicht zu erfassenden Grafik darstellen und schreiben Sie wenige erklärende Worte dazu.

Auch mobil kann der Content mit Rich Media (Bilder, Videos, Animationen, Grafiken usw.) angereichert werden. Achten Sie hier aber darauf, dass Sie diese Media Assets in Hinblick auf ein geringes Datenvolumen optimieren und auszeichnen. Zudem sollten Sie Ihre mobile Website nicht mit Content überladen, da Sie sonst die Ladezeit negativ beeinflussen. Wenn Sie Werbemittel mobil integrieren möchten, achten Sie darauf, dass diese Ihre Nutzer nicht stören und die Interaktion nicht negativ beeinflussen.

Wenn Sie neben Ihrem Online Shop stationäre Geschäfte betreiben, sollten Sie das für Ihren mobilen Content nutzen. Optimieren Sie Ihre Inhalte auf lokale Suchbegriffe. Verfügt Ihre mobile Website beispielsweise über einen Filialfinder, so sollten Sie sicherstellen, dass die Ergebnisse relevante lokale Suchbegriffe enthalten.

Fazit: Mobil optimieren und monitoren

Sollte Ihr Online-Shop noch nicht über keine mobile Website verfügen, empfehlen wir das nachholen. Wenn Sie bereits einen mobilen Shop haben, so monitoren Sie stets dessen Performance und passen Sie Ihren Shop jederzeit an die mobilen Nutzerbedürfnisse an. Mobile Optimierungen sind keine einmaligen Geschehnisse, sondern sollten als langfristiger, dauerhafter Prozess betrachtet werden.

Welche Hintergründe das Google Mobile Update hat und auf welche Rankingfaktoren Sie mobil besonders achten sollten, erfahren Sie im ersten Teil unserer Mobile-Reihe.

25. Januar 2016

Über den Autor

Nicole Krake ist SEO Managerin bei VOTUM. Ihr Schwerpunkt liegt vor allem auf dem Offpage-Bereich. Seit 2015 jongliert sie bei VOTUM nicht nur mit Links, sondern schreibt im Fokus E-Commerce regelmäßig über aktuelle SEO- und Online Marketing-Themen aus der Branche.
Alle Artikel des Autors

  • Nicole Krake
  • SEO-Managerin
  • 030-284-726400