Blog

Die Bedeutung von Responsive Design für SEO

Das beste mobile
Marketing ist zwecklos, wenn die dazugehörige Internetseite nicht
für Mobilgeräte optimiert ist. Responsive Design passt die
Darstellung dem jeweiligen Endgerät automatisch an. Google hat
diese„Reaktionsfähigkeit“
längst zur Bedingung für ein gutes
Ranking gemacht und stellt für diesen Anspruch jetzt verbesserte Tools bereit.


Für Nutzer ist eswahnsinnig frustrierend: Da sucht man unterwegs schnell online nacheinem nahe gelegenen Geschäft und landet auf einer nichtentzifferbaren Internetseite. Ist diese nämlich nicht fürMobilgeräte optimiert, werden einfach die für geräumigeComputerbildschirme ausgelegten Inhalte auf das vergleichsweisewinzige Handydisplay gequetscht und damit nahezu unlesbar. Nicht nurdas: Diese Internetauftritte haben es auch schwerer, überhaupt beiGoogle gefunden zu werden. Denn dessen Suchmaschine pflegt eineVorliebe für Responsive Webdesign (RWD) (oft verkürzt zu ResponsiveDesign) – schon aus purem Eigennutz.

Die an ein flüssigesOnline-Erlebnis gewöhnten Nutzer haben für im Desktop-Zeitalterfeststeckende Internetangebote keine Geduld. Eine Studievon Google hat gezeigt, dass 2012 bereits 61 Prozent derBefragten schnell zu einer anderen Seite wechselten, wenn sie diegesuchten Inhalte nicht sofort fanden. Vermutlich liegt dieser Anteilheute aufgrund gestiegener Ansprüche an das mobile Internet nochhöher. Das gilt auch für den zweiten Wert: Bei 67 Prozent derNutzer lagen die Chancen für einen Einkauf auf einer Seite höher,wenn diese mobilfreundlich gestaltet war.

Google hat mit derZeit der immer größeren Bedeutung von Mobile bei der Suche Rechnunggetragen. Zunächst wurden unter anderem Suchergebnisse mit demPrädikat „mobile-friendly“ versehen. Am 21. April 2015schließlich erhöhten die Algorithmen den Stellenwert derMobiloptimierung weltweit signifikant – mit laut Google deutlichenAuswirkungen auf die Reihenfolge der Treffer.


Wasgenau ist Responsive Design?

image

Bild via design.google.com/resizer


Bei ResponsiveDesign wird unabhängig vom genutzten Gerät stets derselbe HTML-Codevom Server gesendet und anschließend „reaktionsfähig“ auf diejeweilige Bildschirmgröße angepasst. „In der Regel können dieAlgorithmen von Google diese Konfiguration automatisch erkennen, wennalle Googlebot-User-Agents berechtigt sind, die Seite und ihre Assets(CSS, JavaScipt und Bilder) zu crawlen“, heißt es dazu bei Google.

Entscheidend fürSEO ist das Darstellungsbereich-Meta-Elementoder Viewport-Meta-Tag. Es weist den Browser mithilfe vonÜbergangspunkten (Breaking Points) an, wie die Internetseite auf dieBreite des Geräts angepasst werden soll. Das stellt unter anderemsicher, dass Inhalte stets gut erkennbar bleiben, etwa indem ein Fotoaus einem Absatz gelöst und erst unter diesem angezeigt wird, um diegesamte Bildschirmbreite nutzen zu können.

Fehlt diesesElement, zeigen mobile Browser die Seite in Desktop-Bildschirmbreitean und versuchen anschließend, die Darstellung etwa durch größereSchrift zu verbessern. Die Folge: Nutzer müssen oft die Ansichtdurch Tippen verändern, um Inhalte zu sehen und mit ihneninteragieren zu können. Ist dies aufgrund eines fehlendenViewport-Meta-Tags der Fall, sieht Google eine Seite womöglich nichtals für Mobilgeräte optimiert an. Und schon ist die ganze SEO fürdie Katz’.


Warumist Responsive Design Google bei SEO wichtig?

image

Bild via search.google.com


DerSuchmaschinenkonzern redet nicht drum herum: „Responsive Webdesignist der von Google empfohlene Ansatz“, heißt es in fetten Letternauf der Entwicklerseitezur Konfiguration von Mobilgeräten. Schließlich verspricht Googleseinen Nutzern schnelle und relevante Informationen. Da ist es nurnaheliegend, dass SEO mit Blick auf ein verbessertes Nutzererlebnisauf Mobilgeräten belohnt wird.

Unter den dreigrundlegenden Konfigurationen im mobilen Bereich liegen beimResponsive Design die Vorzüge für Google auf der Hand. Hier bleibennämlich URL und HTML-Code unabhängig vom verwendeten Gerät gleich.Bei der dynamischenBereitstellung hingegen verändert sich zwar die URL unabhängigvom Gerät nicht, je nachdem, was der Server über den verwendetenBrowser erfährt, werden aber unterschiedliche HTML- und CSS-Codesübermittelt. Noch mehr Arbeit verursachen mobileWebsites. Sie haben eine andere URL als die Desktop-Hauptseite(etwa mit dem vorangestellten Zusatz „mobil.“ beziehungsweise„m.“).

Die beidenalternativen Konfigurationen führen schnell zu Duplicate Content,also identischen oder sehr ähnlichen Inhalten unter verschiedenenURLs, einem der Hauptprobleme von SEO. Google identifiziert doppelteInhalte und filtert sie heraus, was allerdings die Arbeit derSuchmaschine erschwert und zu einer Abwertung der duplizierendenWebseite führt.


Toolsfür die mobile Optimierung

image

Bild via developers.google.com


Google stellt Entwicklern und Nutzern Hilfsmittel zur Verfügung, umInhalte über mehrere Plattformen hinweg zu optimieren und responsivezu gestalten. Mitte Mai hat hierzu der „Testauf Optimierung für Mobilgeräte“ ein Updateerhalten. Bei dem nun unter Google Search Console angesiedelten Testmuss nur eine URL eingegeben werden, um zu prüfen, ob die Websitefür Mobilgeräte optimiert ist. Das neue Tool wird seinen Vorgängermit der Zeit vermutlich ersetzen.

Erst einen Monatzuvor hatte Google sein neues Tool Resizer vorgestellt. Es soll Entwickler und Designer dabei unterstützen, diejeweils besten Layouts für Desktop, Tablet und Smartphone zuermitteln. Dazu lassen sich Übergangspunkte und responsive Raster inden unterschiedlichen Auflösungen nebeneinander anzeigen. Auch hiermuss lediglich die URL eingegeben werden, um die Darstellung auf dendrei verschiedenen Gerätetypen zu demonstrieren.

Brandneu und sehr aufschlussreich ist „Testmy Site“. Bei diesem Google-Tool wird nicht nur dieMobilfreundlichkeit der Seite geprüft, sondern auch dieGeschwindigkeit der Seite auf mobilen und Desktop-Geräten gemessen. Beieinigen Aufgaben wie Flugbuchungen oder Finanzen wechseln 9 von 10Nutzern nämlich zwischen den Geräten, weshalb eine gute Performanceder Seite auf beiden Typen nötig ist. Hierfür erstellt das Tooleinen detaillierten Bericht mit Verbesserungsvorschlägen zu jedembemängelten Unterpunkt.

image

Bild via thinkwithgoogle.com


Mit diesen gratis ools lässt sich schnell überprüfen, wie fit die eigene Websitebereits für das mobile Zeitalter ist. Bei der Umstellung aufResponsive Design Seite ist dabei meist kein kompletter Relaunchnötig. Der Lohn: Effektives Mobile Marketing, mehr Conversions undnicht zuletzt zufriedenere Kunden.


Titelbild via thinkwithgoogle.com