Sie sind hier:

Mobile Webseiten optimieren: Auf diese Ranking-Faktoren sollten Sie achten

02 Mär
Illustration zum Thema SEO
Bild: Simon - Pixabay.com

(02.03.2016) In der Fachliteratur ist man sich einig: Das mobile Internet gehört heute zum digitalen Alltag und Lifestyle. Laut einer Studie des Branchendienstes Bitkom ist das Smartphone für die meisten bereits der Hauptzugang zum Internet und nur noch 16 % der Befragten nennen den Desktop-PC als Hauptzugang zum Internet (Quelle: Bitkom Befragung zu Smartphone-Nutzung).

In diesem Artikel zeige ich Ihnen, wie wichtig es ist, eine mobile Webseite zu erstellen und zu optimieren. Ich werde zunächst die technischen Voraussetzungen für eine saubere Umsetzung der mobilen Webseite erläutern, um anschließend auf die Optimierung der wichtigsten mobil-spezifischen Rankingfaktoren einzugehen. Dazu zählen auch die Usability und die lokale Optimierung der Seite.                                                  

Damit Sie Ihre Webseite auch optimal für Mobilgeräte optimieren und von allen mobilen Ranking-Faktoren bestmöglich profitieren, liefert dieser Beitrag eine Art „umfangreiche Checkliste“ mit den wichtigsten Themen der Mobiloptimierung, die gleichzeitig die wichtigsten mobilen Rankingfaktoren abdecken.

Welche Möglichkeiten zur Umsetzung gibt es?

Es gibt zwei verschiedene Möglichkeiten, eine mobile Webseite zu erstellen. Für welche Variante Sie sich entscheiden, ist Geschmackssache.

Responsive Webdesign

Es besteht die Möglichkeit, eine Webseite so abzuändern, dass sie sich in der Darstellung immer dynamisch an das verwendete Gerät und dessen Auflösung anpasst. Diese Methode nennt man „Responsive Webdesign“ und wird mithilfe von HTML5 und CSS3 Media-Queries umgesetzt. Der Vorteil an einem responsiven Webdesign liegt darin, dass sowohl für den Desktop als auch für mobile Geräte nur eine Seitenversion existiert. So spart man sich die Pflege zweier separater Webseiten.

Eine separate mobile Webseite aufbauen

Kann ein responsives Webdesign nicht umgesetzt werden oder wird eine klare Trennung von mobiler Webseite und Desktop-Seite favorisiert, kann eine separate mobile Webseite unter einer anderen URL-Struktur aufgebaut werden. In der Regel erstellt man diese mobile Version der Webseite dann auf Subdomains wie z.B. mobile.example.com oder m.example.com.

In diesem Fall ist es wichtig, dass Sie saubere Weiterleitungen einrichten, die den Nutzer, der Ihre Webseite mit einem mobilen Endgerät aufruft, auch immer eins zu eins auf die passende mobile Unterseite weiterleiten.

Google unterstützt zwar beide Varianten, jedoch wird das responsive Webdesign empfohlen.

Design und Aufbau der mobiloptimierten Webseite

Es ist wichtig, dass Sie dem User ein perfektes und vollständig an das mobile Endgerät angepasstes Layout anbieten. Achten Sie insbesondere darauf, dass alle Inhalte problemlos und ohne Zoom-Gesten lesbar und auch erreichbar sind.

Auf Software bzw. technische Implementierungen, die beispielsweise auf Flash oder Java basieren, sollten Sie verzichten, da die meisten Geräte diese schlichtweg nicht ausgeben können und der Googlebot sie nicht „versteht“.

Setzen Sie Ihr mobiloptimiertes Layout wenn möglich mit HTML5 und CSS3 um.

Beispiele für ein gelungenes mobiloptimiertes Layout




Die Performance

Die Performance ist ein sehr wichtiges Thema und darf bei der Umsetzung einer mobiloptimierten Webseite nicht unter den Tisch fallen. Leider ist es noch immer so, dass es nicht überall ein schnelles Netz wie LTE gibt oder der User sein Highspeedvolumen aufgebraucht hat. Ich denke, jeder weiß, wie langsam der Verbindungsaufbau zu einer Webseite unter diesen Umständen sein kann.

Machen Sie es dem User also nicht noch schwerer, als es ohnehin schon ist, weil Sie keinen Wert auf eine vernünftige Performance gelegt haben, und halten Sie Ihre Seite so „leicht“ wie möglich.

Setzen Sie dafür am besten die folgenden Methoden ein:

  • Nutzen Sie ein gut eingestelltes Browser-Caching
  • Komprimieren Sie Ihre Inhalte (Bilder, HTML, CSS und Scripte)

Achten Sie auch darauf, dass Sie nicht übermäßig viele Grafiken oder umfangreiche Scripte verwenden.

Die technischen Aspekte

Neben den Bereichen Design und Performance ist es ebenso wichtig, dass Ihre Seite technisch einwandfrei läuft. Existiert Ihre mobiloptimierte Seite auf einer Subdomain wie z.B. „http://m.example.com“, dann stellen Sie sicher, dass sämtliche Inhalte auch korrekt auf die mobiloptimierte Seite weitergeleitet werden.

example.com/inhalt-a sollte dann korrekterweise auf m.example.com/inhalt-a weiterleiten und nicht etwa auf m.example.com.

Schließen Sie zudem auch keine wichtigen Inhalte wie z.B. Bilder, CSS, HTML oder JavaScript Dateien vom Crawling aus.

Bieten Sie dem Nutzer auch immer die Möglichkeit, die passende Desktop-Version der aktuellen Unterseite zu öffnen. Dazu können Sie beispielsweise im Footer einen Link mit der Beschriftung „Zur Desktop-Version“ setzen. 

Sollte auf Ihrer Desktop-Version eine Unterseite existieren, die in dieser Form nicht als mobile Seite vorhanden ist, dann geben Sie in diesem Fall auf der mobilen Seite bitte keinen 404-Fehler aus, sondern leiten Sie den User direkt auf Ihre Desktop-Seite. Noch besser: Sie legen für diese Unterseite direkt auch eine passende mobile Version an.

Sollten Sie sich dazu entschieden haben, Ihre mobile Version auf einer Subdomain zu hosten, dann achten Sie auch darauf, dass Sie keine Links zur falschen Version setzen. Existieren innerhalb Ihres Contents beispielsweise interne Querverlinkungen zu anderen Inhalten / Unterseiten, dann verlinken Sie diese nicht auf die Desktop-Version.

Interstitials? Bitte nicht!

Sie möchten Ihre User beim Besuch der mobilen Seite auch gleich auf Ihre tolle App aufmerksam machen? Dann benutzen Sie dafür bitte keine Interstitials, also Flächen, die den kompletten sichtbaren Bereich verdecken. Dies stört den User und kann ihn im schlimmsten Fall so frustrieren, dass er die Webseite sofort wieder verlässt.

Was allerdings im Rahmen der Möglichkeiten „erlaubt“ ist, ist der Einsatz eines kleinen Banners, wie er auf diesem Screenshot zu sehen ist.

Dieser ist dezent, nicht störend, aber dennoch auffällig.

Die Usability

Stellen Sie dem User überall schnell erreichbare Kontaktinformationen zur Verfügung und bieten Sie Click-to-Call-Buttons an, mit denen er durch einen einfachen Klick direkt einen Anruf von seinem Smartphone aus starten kann.

Wenn Sie Formulare oder andere Eingabefelder einbauen, denken Sie daran, dass dem User immer das korrekte Tastatur-Layout angezeigt wird. Empfehlenswert ist es auch, dem User durch eine Echtzeitdatenvalidierung oder einer Autofill-Funktion unter die Arme zu greifen. Dies erleichtert die Arbeit auf dem kleinen Display enorm.

Bieten Sie dem User wenn möglich immer eine interne Suchfunktion an, mit der er schnell und einfach nach relevanten Inhalten suchen kann, die sich nicht über die Navigation finden lassen. Platzieren Sie die interne Suche immer prominent im oberen Bereich bzw. direkt am Seitenkopf.

Ordnen Sie Ihre wichtigsten Call-to-Action-Buttons immer prominent auf den jeweiligen Inhalten an, damit sofort klar ist, dass der User hier nicht nur einen Inhalt vorfindet, sondern auch aktiv werden kann. So sollte beispielsweise eine Reservierungsfunktion  in einem Restaurant auf der mobilen Seite nicht ausgeblendet werden.

Die lokale Optimierung

Gerade für Unternehmen, die ihren Fokus auf lokale Dienstleistungen legen, ist es ziemlich wichtig, in Googles mobilen Suchergebnissen sichtbar zu sein.

Dazu optimieren Sie erst einmal Ihre einzelnen Inhalte mit relevanten lokalen Keywords und legen anschließend ein Google My Business Profil an. Füllen Sie es, so gut es geht, am besten vollständig, aus.

Informationen wie Adressdaten, Telefonnummern oder Bewertungen werden dann aus Ihrem Google My Business Profil gezogen und die Darstellung in den lokalen Suchergebnissen positiv beeinflussen.

Wie ein lokales Suchergebnis aussehen kann, sehen Sie in diesem Screenshot:




Hilfreiches für die Umsetzung

Wenn Sie eine mobile Webseite erstellen oder Ihre bestehende Webseite so effektiv wie möglich responsiv gestalten wollen, dann empfehlen wir Ihnen, sich die folgenden Frameworks und Tools anzuschauen:

Bootstrap von Twitter:
http://www.getbootstrap.com

Bootstrap ist ein umfangreiches Framework zur effektiven Gestaltung und Umsetzung von responsiven Webseiten. Das Paket enthält neben einigen interessanten Demoseiten (auf die man natürlich aufbauen kann) auch eine umfangreiche Dokumentation.

Skeleton: Responsive CSS Boilerplate:
http://getskeleton.com/

Ähnlich wie Bootstrap von Twitter ist Skeleton eine CSS Boilerplate für die effiziente Erstellung von responsiven Themes. Auch Skeleton verfügt über zahlreiche vordefinierte Elemente und einer Demoseite.

Jetpack by Wordpress.com:
http://jetpack.me/

Falls Sie WordPress als CMS einsetzen, können Sie mit dem kostenlosen Plugin „Jetpack“ ein angepasstes mobile Theme in den Einstellungen aktivieren.

Google PageSpeed Insights / Pingdom Website Speed Test:
https://developers.google.com/speed/pagespeed/insights/
http://tools.pingdom.com/fpt/

Mit diesen Tools können Sie die Performance Ihrer Webseite analysieren und sich konkrete Verbesserungsvorschläge ausgeben lassen.

Googles PageSpeed Insights enthält sogar eine Überprüfung der mobilen Performance.

Fazit

Auch wenn die Aufgabe „Mobiloptimierung“ erst einmal komplex erscheint, sollte man sich des Themas annehmen und die Webseite für die mobile Nutzung optimieren.

Setzen Sie alle nötigen Schritte wie im Artikel beschrieben um, dann werden Sie  bestmöglich von allen mobilen Rankingfaktoren profitieren.

Zum Schluss noch einmal in aller Kürze die wichtigsten Punkte, die zu einer erfolgreichen und gelungenen Optimierung führen:

  • Sorgen Sie für ein klares, strukturiertes und barrierefreies Layout
  • Bauen Sie keine technischen Hindernisse ein
  • Achten Sie auf eine gute Performance
  • Vermeiden Sie Interstitials und sorgen Sie für eine gute Usability
  • Optimieren Sie Ihre Seite für die lokalen Suchergebnisse

Ich hoffe, dass ich Ihnen mit diesem Beitrag weiterhelfen konnte und Sie nun bestens für die Erstellung und Optimierung Ihrer mobilen Webseite vorbereitet sind. Falls Sie noch Fragen haben sollten, dann stellen Sie mir diese am besten via Google Plus im Kommentarbereich.

Gastautor

Florian Wirths

Florian Wirths ist SEO Consultant bei der Kölner Online-Marketing-Agentur rankingCHECK. Wenn er sich nicht gerade mit seinen Lieblingsthemen SEO, und Social Media beschäftigt, bloggt er in seiner Freizeit über aktuelle Technikthemen und beschäftigt sich mit gutem Journalismus.

http://www.ranking-check.de

Archiv

Der BIEG Newsletter

Immer auf dem Laufenden bleiben Sie mit unserem monatlichen Newsletter. Wir informieren Sie über aktuelle Veranstaltungen und unsere neuesten Leitfäden!