SEO-Optimierung für Mobile-Shops
Nachfolgend geben wir einige Hinweise und Umsetzungsvorschläge zur Optimierung von Mobile-Shops, die mit dem SEO-Beauftragten Ihres Shops abgeklärt werden sollten.
Inhalt
1.Test auf Optimierung für Mobilgeräte
2.Darstellungsbereich konfigurieren (viewport)
3.Canonical-Anpassung für Mobile-Subshops
1. Test auf Optimierung für Mobilgeräte
Ist Ihr Shop für die Ansicht auf mobilen Geräten geeignet? Ein guter erster Anhaltspunkt ist der Test auf Optimierung für Mobilgeräte, der von Google bereitgestellt wird. Hier listet Google Fehler auf und gibt Ihnen Ratschläge, wie Sie diese beseitigen können. Im Developers-Bereich von Google finden sich zusätzliche Leitfäden, die Ihnen eine nützliche Hilfestellung bieten.
Quelle: Google Developers: Test auf Optimierung für Mobilgeräte
Um für Mobilgeräte optimiert zu sein, sollte Ihr Shop insbesondere die folgenden Bedingungen erfüllen:
•Der Text ist ausreichend groß und gut lesbar.
•Der Inhalt ist an die Breite des Bildschirms angepasst, so dass der Benutzer nicht horizontal scrollen muss.
•Die Links liegen ausreichend weit auseinander, so dass der Benutzer beim Berühren eines Links nicht versehentlich einen anderen mit auswählt.
•Häufig ausgewählte Buttons (z. B. Bestellen oder In den Warenkorb) sind ausreichend groß.
•Der mobile Darstellungsbereich ist festgelegt.
•Verzicht auf Interstitials (eingeblendete Werbebanner) und Vollbild-Overlays.
Sollten Sie nach dem Test feststellen, dass Ihr Shop für eine Ansicht auf mobilen Geräten laut Google ungeeignet ist, setzen Sie sich mit Ihrem Ansprechpartner bei der WEBSALE AG in Verbindung.
2. Darstellungsbereich konfigurieren (viewport)
Ein Darstellungsbereich bestimmt, wie eine Webseite auf einem Mobilgerät angezeigt wird. Wenn kein Darstellungsbereich vorhanden ist, rendern Mobilgeräte die Seite mit einer typischen Desktop-Bildschirmbreite, die an den Bildschirm angepasst wird. Mithilfe eines Darstellungsbereichs können Sie die Seitenbreite festlegen und auf verschiedenen Geräten skalieren.
Seiten, die für die Anzeige auf Mobilgeräten optimiert sind, sollten im Dokument-Header einen Meta-Darstellungsbereich mit folgender Angabe enthalten: width=device-width, initial-scale=1.
Quelle: Google Developers: Darstellungsbereich konfigurieren
Beispiel:
<head>
...
<meta name=viewport content="width=device-width, initial-scale=1">
...
</head>
3. Canonical-Anpassung für Mobile-Subshops
Mit dem Subshop-Konzept gibt es für jede Desktop-URL eine zugehörige mobile URL, über die Ihre Shopinhalte für Mobilgeräte optimiert bereitgestellt werden.
Ein häufig eingesetztes Modell ist, dass Seiten unter www.example.de Desktop-Nutzern bereitgestellt werden und entsprechende Seiten für mobile Nutzer unter m.example.de verfügbar sind. Google bevorzugt kein bestimmtes URL-Format, solange alle URLs für alle Googlebot-User-Agents verfügbar sind.
(Bildquelle: developers.google.com)
Google empfiehlt die folgenden Anpassungen, damit die unterschiedliche URLs besser ausgewertet werden können:
Quelle: Google Developers: Unterschiedliche URLs
Notwendige Anpassung Ihres Desktop-Subshops
Fügen Sie auf der Desktop-Seite das spezielle Element <link rel="alternate" ...> hinzu, das auf die entsprechende mobile URL verweist. Dies hilft dem Googlebot dabei, die mobilen Seiten Ihrer Website zu finden.
Setzen Sie <link rel="alternate" ...> zur mobilen URL:
<head>
...
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com" >
...
</head>
Anpassung Ihres Mobile-Subshops
Fügen Sie auf der mobilen Seite das Element <link rel="canonical" ...> hinzu, das auf die entsprechende Desktop-URL verweist. Diese Anpassung ist laut Google vorgeschrieben.
Um auf die entsprechende Desktop-URL zu verweisen, ersetzen Sie <link rel="canonical" href="~WS-RobotCanonical~"> durch die folgende Zeilen:
<head>
...
~DC-FP1_reset~
~DC-FP1_set($WS-RobotCanonical$)~ <!-- Erzeugt den Canonical-Link des MobileShops mit mobiler URL & mobiler SubshopID -->
~DC-FP1_replace(m.example.de,www.example.de)~ <!-- Ersetzt im Canonical-Link die Domain m.example.de durch www.example.de -->
~DC-FP1_replace(deutsch-m,deutsch)~ <!-- Ersetzt im Canonical-Link die Mobile-SubshopID deutsch-m durch die Desktop-SubshopID deutsch -->
~WS-DisableXSSProtectionOnce~ <!-- Verhindert die HTML-codierte Ausgabe des DC-Tags -->
<link rel="canonical" href="~DC-FP1~"> <!-- Ausgabe des WS-RobotCanonical mit den Desktop-Informationen -->
...
</head>
Referenz: DC-FP1…5
Referenz: DC-FP1…5_replace()
Referenz: WS-DisableXSSProtectionOnce