Checkliste

Wie mache ich meine bestehende Webseite mobil?

Niemand kann sich mehr davor drücken:

seine bestehende Webseite mobil zu machen!

Dieser Beitrag vermittelt dir alle nötigen Grundlagen, um deine Webseite mobilfreundlich zu machen und dich an den “Mobile First Index” anzupassen

– und das ohne umfangreiche Programmierkenntnisse.

Bereit? Dann lass uns loslegen!

Smartphone mit Webseite mobil machen

Kapitel 1

Der “Mobile First Index”

Schaut man auf die Statistik, so stellt man schnell fest, dass weltweit mittlerweile jeder zweite Seitenaufruf von einem mobilen Endgerät erfolgt.

Darauf reagiert Google nun mit der Einführung eines neuen Index’.

Was genau das ist und wie genau dich der “Mobile First Index” betrifft, zeige ich dir jetzt.

Handy mit mobiler Webseite

Was ist der “Mobile First Index”?

Jede Webseite, die bei Google zu finden ist, liegt in einem Verzeichnis – dem sogenannten Index. Ganz einfach gesagt: Der Index ist eine Auflistung aller Webseiten, die Google kennt.

Für die Aufnahme in den Index und die Beurteilung der Qualität der Seiten wurde bisher die Desktop-Variante deiner Webseite untersucht. Und genau das ändert sich nun!

Mobile Webseiten verglichen

Mit dem “Mobile First Index” wird die mobile Webseitenversion (also die Version, die auf Smartphone & Co. erscheint) für das Ranking und die Indexierung als Referenz genommen.

Das heißt also: Google gibt Websites, die mobil optimiert sind, in der mobilen Suche einen großen Rankingboost.

Mobile Webseiten im Smartphone
Bei der Google-Suche auf dem Smartphone erhalten mobiloptimierte Webseiten bessere Platzierungen.

Wichtig zu wissen ist aber, dass das neue Update keinen Einfluss auf die Platzierungen am Desktop-PC hat. Sprich: Nur am Smartphone wird es so zu Ranking-Gewinnen oder Verlusten kommen.

Google selbst schreibt dazu, dass das Update:

  • Nur Rankings auf mobilen Geräten beeinflusst
  • Sich auf alle Sprachen weltweit bezieht
  • Nur die einzelne Seite beeinflusst und nicht die komplette Webseite (also nur weil deine Unterseite “www.deine-seite.de/blog” nicht optimiert ist, bestraft Google nicht deine komplette Webseite “www.deine-seite.de”)

Auch wenn sich deine Desktop-Platzierungen also vorerst wohl nicht direkt durch den neuen Index verändern, solltest du unbedingt handeln, wenn deine Webseite noch nicht mobil optimiert ist.

Denn: Willst du, dass dich jeder Zweite nicht mehr findet? 🙂

Aber keine Sorge!
“Mobile” ist nicht alles. Die Suchintention und Nutzersignale sind immer noch ein starker Rankingfaktor. Wenn also eine Webseite mit sehr gutem Content nicht mobil optimiert ist, kann sie trotzdem ganz weit oben mitspielen und sehr gut ranken. Welche weitere SEO-Maßnahmen du ergreifen solltest, erfährst du in meinem Guide „SEO für Anfänger„.

Das war die trockene Theorie!
Jetzt geht’s ans mobil machen deiner bestehenden Webseite!

Kapitel 2

Wie du deine Webseite mobilfreundlich machst!

“Webseiten mobil machen” heißt nichts anderes, als Smartphone-Nutzern eine kleinere Version deiner Webseite zur Verfügung zu stellen.

Dafür zeige ich dir nun drei verschiedene Möglichkeiten und eine klare Empfehlung, was du tun solltest!

Beginnen wir…

Webseite mit Codezeichen

Was heißt “Mobil” überhaupt?

Um deine Webseite mobil zu machen, sollten wir erst einmal kurz klären, was “mobil” überhaupt genau heißt.

Denn du wirst überrascht sein:

Für Google sind mobile Endgeräte nur Smartphones – keine Tablets!

“Wir betrachten Tablets als eigene Geräteklasse, weshalb wir Tablets in der Regel ausschließen, wenn wir von Mobilgeräten sprechen”, so Google im Developers-Blog.

Das macht auch Sinn, denn Tablets haben nun mal einen größeren Bildschirm, wodurch man die Webseite auch so darstellen kann, wie sie auf dem Desktop aussieht.

Desktop, Tablet und Smartphone im Vergleich
Für Google sind „mobile Endgeräte“ nur Smartphones. Webseiten auf Tablets werden versucht in der Desktop-Version anzuzeigen.

Die Empfehlungen zur Umsetzung von mobilen Webseiten beziehen sich also zwar stets auf Smartphones, aber Sinn und Ziel einer Optimierung ist natürlich, dass die Webseite auf jedem Gerät super und innovativ genutzt werden kann.

Und diese 3 Wege gibt es dafür!

1. Eine separate URL

Die erste Möglichkeit ist eine eigene URL nur für die mobilen Geräte zu verwenden. Das hast du vielleicht schon mal gesehen, wenn du beispielsweise Facebook im Browser deines Smartphones aufrufst.

In der URL taucht dann ein “m.” auf.

Grafik von Laptop und Smartphone mit mobiler Webseite nebeneinander
Eine separate URL für die mobile Darstellung ist häufig durch ein vorgestelltes „m.“ zu erkennen.

Kommt also ein Nutzer auf deine Webseite, wird direkt versucht das Gerät zu erkennen und die entsprechende URL mittels Weiterleitung anzuzeigen.

Klingt gut?
Nein, eher weniger.

Da du mit dieser Variante nun zwei Versionen deiner Webseite hast, hast du auch doppelt so viel Arbeit. Du musst nämlich den Content für jede Seite aufbereiten und Google dann mittels “rel=canonical” und “rel=alternate” sagen, welche Version nun jeweils ausgespielt werden soll.

Lass uns also mal die zweite Möglichkeit ansehen.

2. Dynamische Bereitstellung

Bei der Dynamischen Bereitstellung wird es schon besser, denn wir verwenden nur noch eine URL.

Kommt ein Nutzer auf deine dynamisch bereitgestellte Webseite, so übermitteln die Server verschiedene Versionen deiner Seite an den jeweiligen Besucher. Die Endgeräte bekommen also unter der gleichen URL die jeweilige Webseite zugeschickt.

Funktionsweise von dynamischer Bereitstellung von mobilen Webseiten
Rufen Nutzer deiner Webseite auf, so erhalten sie unter derselben URL unterschiedliche Webseiten-Versionen ausgespielt.

Klingt gut?
Nein, immer noch nicht.

Denn zum einen ist der technische Aufwand dahinter komplexer als wirklich nötig.
Zum Anderen musst du theoretisch für jedes neue Endgerät eine neue Version der Darstellung implementieren. Ansonsten wird die Webseite nicht korrekt dargestellt.

Also kommen wir jetzt zur besten Lösung und meiner Empfehlung!

3. Responsive Design

Davon hast du sicher schon mal gehört. Nicht ohne Grund – es ist die beste Möglichkeit, deine Webseite mobil zu machen.

Beim Responsive Design passt sich deine Webseite an den Bildschirm deiner Besucher an (responsive = reagierend).

Beispiele von responsive Webseiten in Bildschirm und Smartphone
Eine „Responsive Webseite“ passt sich dem Bildschirm der Endgeräte automatisch an.

Der große SEO-Vorteil liegt klar auf der Hand: Dadurch, dass es nur eine URL gibt, benötigt es keine Weiterleitungen, keinen Mehraufwand durch doppelten Content und die Nutzererfahrung ist auch deutlich besser.

Als weiteres (Totschlag-) Argument: Google selbst empfiehlt die Darstellung der mobilen Webseite im responsive Design.

Nochmal alle drei Möglichkeiten der mobilen Darstellung im Vergleich:

MöglichkeitURL bleibt gleich?Eine Webseiten-Variation?
Separate URL
Dynamische Bereitstellung
Responsive Design

Wie du deine Webseite “responsive” machst!

Auch wenn das Folgende eher in Richtung Webdesign und Webentwicklung geht, möchte ich dir trotzdem kurz erklären, wie du deine Seite responsive machst.

Denn es ist auch wirklich nicht schwer. Pass auf!

Wenn deine Webseite nicht gerade eine Eigenentwicklung ist, machst “du” sie auch gar nicht responsive: sondern der Programmierer deines “Themes”.

Das Theme ist eine Vorlage deiner Webseite. Alle Elemente, die dir in deinem Content-Management-System (also zum Beispiel WordPress) zur Verfügung stehen, gehören zu deinem Theme.

Die meisten aktuellen Themes unterstützen das responsive Design und sind somit für Mobilgeräte optimiert. Die größten Thememärkte sind Themeforest oder Templatemonster.

Themeshop Beispiel
Kaufe ein entsprechendes Theme, das sich auch an mobile Endgeräte anpasst. (Quelle: Screenshot Templatemonster.com)

Mein Theme ist nicht Responsive!

Solltest du bereits ein Theme verwenden, dass aber die responsive Darstellung nicht unterstützt, würde ich dir empfehlen über einen Themewechsel nachzudenken.

Falls das für dich aufgrund des Aufwands nicht in Frage kommt, kannst du alternativ auch Plug-Ins, wie zum Beispiel “WPtouch”, ausprobieren. Aber empfehlen würde ich dir in diesem Fall lieber einen Themewechsel. ????

Wie du herausfindest, ob dein Theme “mobilefriendly” ist und wie du deine Seite so optimierst, dass deine Nutzer auch gerne mit Ihrem Smartphone bei dir unterwegs sind, folgt im nächsten Kapitel.

Kapitel 3

So werden deine Nutzer deine mobile Webseite lieben!

Die Technik hinter der Mobiloptimierung steht und wir haben uns für das Responsive Design entschieden.

Jetzt geht es darum, Google von deiner Webseite zu überzeugen und deinen Besuchern eine super Nutzungserfahrung zu bieten.

Keine Sorge – ich zeige dir Schritt für Schritt, wie’s geht. 🙂

Tablet mit Schriftzug

Überprüfe, ob deine Webseite mobil ist!

Um deine bestehende Webseite mobil zu machen, beginne damit zu überprüfen, wie deine Webseite momentan angezeigt wird.

1. Testing Tool

Schauen wir uns also deine Webseite mal an.

Gehe dafür auf das Testingtool von Google für Mobilgeräte und gib deine URL ein.

Google Testing Tool
Gib die URL in das Testing Tool ein. (Quelle: Screenshot search.google.com/test/mobile-friendly)
Nun überprüft Google, ob die Darstellung deiner Seite bereits für Smartphones und Co. optimiert ist.
Bestehende Webseite mobil optimiert
Ergebnis des Tests für Mobilgeräte. (Quelle: Screenshot search.google.com/test/mobile-friendly)

Sollten hierbei Fehler gefunden werden, erhältst du direkt eine Liste mit weiterführenden Informationen zu den Problemen.

2. Schau, wie Google deine Seite sieht

Mit einem einfachen Trick kannst du auch direkt schauen, wie deine Webseite aus dem Auge von Google aussieht.

Gehe dafür in dein Konto der “Google Search Console”.

Google App Menü
Öffne die Google Search Console. (Quelle: Screenshot Google.de)

Anschließend öffnest du unter “Crawling” den Punkt “Abruf wie durch Google” und gibst die entsprechende URL ein. Danach klickst du auf “Abrufen und Rendern”.

Screenshot Abruf-wie-durch-Google
Lasse deine Webseite von Google „rendern“, um die mobile Ansicht zu prüfen. (Quelle: Screenshot Google.de)

Nun hast du zwei Darstellungen deiner Webseite. Eine davon zeigt dir an, wie deine Webseite von einem Googlebot gesehen wurde.

Vergleich - Webseite mobil machen
Zwei Fenster zeigen dir, wie Google die Webseite sieht und das reale Abbild. (Quelle: Screenshot Google.de)

3. Überprüfe die Darstellung direkt im Browser

Tools ersetzen leider nicht das menschliche Auge. Darum solltest du deine Webseite auch mal direkt im Browser testen. Ich verwende dafür Chrome.

Öffne also deine Webseite und drücke “F12” auf deiner Tastatur.
Nun erscheint ein Kasten mit vielen Codeschnipseln, die du aber ignorieren kannst.

Mobile Ansicht in Chrome
Aktiviere mit F12 die Entwicklerconsole in Chrome.

Klicke nun auf den Button mit den zwei mobilen Endgeräten und wähle oben ein Beispielgerät aus. Nun simuliert Chrome die Darstellung zum Beispiel auf dem Smartphone und du kannst direkt durch deine Webseite klicken.

Mobiles Endgerät in Chrome auswählen
Wähle das mobile Endgerät aus.

Verbessere die User Experience!

Nutzersignale (wie Absprungrate oder Verweildauer) sind nicht nur ein entscheidender Rankingfaktor für Google, sondern beeinflussen natürlich auch deine Conversion oder Verkäufe.

Schauen wir uns also an, wie du die Nutzererfahrung deiner Besucher verbessern kannst.

1. Verwende keine Popups!

Jeder Nutzer im Internet hasst Popups – und genau darum mag Google sie auch nicht.
Erst recht nicht auf mobilen Endgeräten. Dort verdecken sie nur Content und machen die Seite total instabil. Darum lasse diesen SEO-Fehler unbedingt!

Ganz musst du aber nicht auf sie verzichten, denn es gibt durchaus Popups, die in Ordnung sind.

Smartphones zeigen gute Popups
Beispiele für Popups, die sich nicht negativ auf das Ranking auswirken. (Quelle: Screenshot webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html)

Diese solltest du aber laut Google unbedingt auch im Hinblick auf den “Mobile First Index” vermeiden.

Smartphones zeigen schlechte Popups
Beispiele für schlechte Popups, die du vermeiden sollest. (Quelle: Screenshot webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html)

2. Verstecke keinen Content!

Für Google ist es sehr wichtig, dass du sowohl auf der Desktop-Version, als auch auf der mobilen Variante den gleichen Content zur Verfügung stellst.

Verstecke also keinen Text oder Bilder auf der mobilen Ansicht. Denn es wird schließlich durch den neuen Index die “Hauptansicht”.

Nicht vergessen. 😉

3. Mache den Content ansehnlich!

Auch, wenn es komisch klingt: der Webseitenbesucher soll sich auf deiner Seite wohlfühlen. Dazu gehören folgende Quick-Tipps:

  • Verwende größere Schrift (z.B. 14 – 16px).
  • Verwende nur kurze Absätze (z.B. alle 2-3 Zeilen einen neuen Absatz).
  • Verwende kontrastreiche Bilder und Farben.
  • Verwende viele Aufzählungen, Boxen oder Nummerierungen.
  • Implementiere großzügig Bildmaterial.
  • Bette Videos über YouTube ein (und nicht über Flash).

Gerade zu Beginn deiner Seite solltest du darauf achten, dem Nutzer einen guten Einstieg zu bieten. Das gelingt mit kurzen, knackigen Sätzen und vielen Absätzen. Außerdem solltest du deine Beitragsbilder eher klein halten.

4. Verbessere die Ladezeiten deiner Webseite!

Die Ladezeit ist ebenso ein entscheidender Faktor für Google und deine Besucher. Schließlich wartet niemand lange auf seinem Smartphone, bis eine Webseite geladen hat.

Im schlimmsten Fall kehrt der Nutzer zurück zur Suchergebnisliste und sucht sich eine andere Seite, die seine Frage beantwortet. Dieses Verhalten sieht Google überhaupt nicht gerne und wird dich so in Form von Rankingverlusten bestrafen.

Kontrolliere also direkt die Ladezeit deiner Webseite.
Gehe dafür auf das Pingdom-Tool, gib deine URL ein und wähle den schwedischen Server aus.

Speedtest bei Pingdom
Gib deine URL ein, von der du die Ladezeit testen willst. (Quelle: Screenshot tools.pingdom.com)

Deine angezeigt Ladezeit sollte hier nun unter 2 Sekunden sein.

Seitenladezeit auf Pingdom geprüft
Die Ladezeit sollte unter 2 Sekunden sein. (Quelle: Screenshot tools.pingdom.com)

Wenn deine Webseite länger als 2 Sekunden benötigt, solltest du folgende Maßnahmen ergreifen:

  • Aktiviere das Caching
  • Nutze einen Premium-Hoster (z.B. Domainfactory oder allinkl.)
  • Minimiere Skripte
  • Aktiviere “Lazy Load”
  • Verwende so wenige Plugins wie möglich

Bei diesen Optimierungen bewirkt das Plugin “wpRocket” wirklich wahre Wunder und zählt zu meinen besten WordPress SEO Tipps. Wenn du keine großen Technikkenntnisse hast und mit nur wenigen Klicks die technische Optimierung bei deiner Seite erledigen willst, schaue dir das mal an.

Und natürlich einer der wichtigsten Möglichkeiten, die Seitengeschwindigkeit zu erhöhen: Bilder komprimieren.

Dafür musst du einfach vor jedem Hochladen eines Bildes ins CMS das Bild mittels TinyPNG oder Compressor.io verkleinern.

Ein ausführlicher Artikel zur Ladegeschwindigkeit folgt demnächst. Wenn du direkt informiert werden und stets auf dem aktuellen Stand sein möchtest, komm einfach in unsere kostenlose Facebook-Gruppe.

Kapitel 4

Das FAQ der mobilen Suche!

Die häufigst gestellten Fragen zur mobilen Webseitengestaltung habe ich dir einmal mit den entsprechenden Antworten aufbereitet.

Fehlt dir eine Frage?

Dann schreibe sie mir gerne in die Kommentare!

Person mit Glühbirne im Kopf
Ab wann kommt der “Mobile First Index?

Der “Mobile First Index” wurde bereits ausgerollt und wird nun schrittweise eingeführt.

Hat der “Mobile First Index” einen Einfluss auf meine Google-Positionen?

Ja und Nein!
Wie der Name schon sagt, werden die Ergebnisse der mobilen Suche (also auf dem Smartphone) schon beeinflusst und Webseiten bevorzugt, die mobil optimiert sind. Dennoch kann eine Webseite mit richtig gutem Content weiterhin oben ranken, wenn sie die Suchintention erfüllt und das “beste” Ergebnis ist.

Die Positionen in der Desktop- und Tablet-Suche werden durch das Update hingegen nicht beeinflusst.

(Quelle: https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html)

Gibt es nun mehrere Indexe?

Nein, es gibt weiterhin nur einen Index. Anstatt der Desktop-Version deiner Seite überprüft Google nun deine mobile Version und schätzt sie entsprechend ihrer Qualität ein.

(Quelle: https://developers.google.com/search/mobile-sites/mobile-first-indexing#mobile)

Wann muss ich handeln?

Du solltest deine bestehende Webseite mobil machen, wenn du entweder kein responsive Design verwendest oder noch gar nicht optimiert hast. Scrolle dafür gerne nochmal hoch. 😉

Wie teste ich, ob meine Webseite mobil optimiert ist?

Verwende dafür einfach dieses Tool von Google.
Es sagt dir genau, ob du eine gute mobile Darstellung hast und was es für Probleme gibt.

Betrifft es meine komplette Domain oder nur einzelne Seiten?

Das Update betrifft immer nur die einzelnen Unterseiten deiner Webseite. Wenn du also zum Beispiel 20 Seiten hast, die mobil optimiert sind, aber zwei Seiten sind es nicht, dann bekommen die 20 Seiten trotzdem einen “Rankingboost”.
Die schlechteren Seiten “ziehen” die Guten nicht herunter.

(Quelle: https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html)

Gratis

BONUS: Den SEO-Guide für Anfänger als Checkliste!

Seo Gründer Kit - Cover
Diese Checkliste fasst den kompletten Guide als Infografik zusammen.

Drucke die Checkliste aus und lege sie neben dich, wenn du das nächste Mal an deiner Seite arbeitest!

✓ Komplett kostenlos!
✓ Geprüftes SEO-Wissen in nur 5 Minuten!
✓ Schritt-für-Schritt zum direkten Umsetzen!

Jetzt bist du dran!

Ich hoffe, ich konnte dir die Thematik einfach und verständlich aufzeigen.
Es ist gar nicht so schwer, wie man vielleicht im ersten Moment glaubt.

Hast du Fragen oder Wünsche?
Weißt du nicht genau, was du als nächstes tun sollst?

Lass es mich gerne in den Kommentaren wissen – ich freue mich drauf!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

YouTube aktivieren?

Auf dieser Seite gibt es mind. ein YouTube Video. Cookies für diese Website wurden abgelehnt. Dadurch können keine YouTube Videos mehr angezeigt werden, weil YouTube ohne Cookies und Tracking Mechanismen nicht funktioniert. Willst du YouTube dennoch freischalten?