{"id":31587,"date":"2024-11-12T12:40:21","date_gmt":"2024-11-12T12:40:21","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31587"},"modified":"2025-03-21T16:26:01","modified_gmt":"2025-03-21T16:26:01","slug":"Mobile_Optimierung","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Mobile_Optimierung","title":{"rendered":"Mobile Optimierung"},"content":{"rendered":"

Allgemeine Informationen<\/span><\/h2>\n

Die Nutzung von mobilen Endger\u00e4ten (z.B. Smartphones oder Tablets) zum Surfen im Internet hat in den letzten Jahren enorm zugenommen und steigt weiterhin kontinuierlich. So erfolgten im Jahr 2017 bereits 51,47% aller Seitenaufrufe weltweit \u00fcber mobile Endger\u00e4te <\/a>. Zahlen wie diese verdeutlichen, dass die Optimierung einer Webseite f\u00fcr mobile Endger\u00e4te inzwischen zum Pflichtprogramm eines jeden Webmasters geh\u00f6rt. Das Ziel ist dabei eine angemessene Darstellung der Webseite sowie ihre vollst\u00e4ndige Nutzbarkeit auf mobilen Endger\u00e4ten.\n<\/p>\n

Die \u201cmobile friendliness\u201d einer Website ist mittlerweile auch f\u00fcr Google ein wichtiger Rankingfaktor und der Suchmaschinenkonzern hat sogar angek\u00fcndigt, dass der mobile Suchindex zum Hauptindex von Google werden soll<\/a>. Durch diesen \u201cMobile First\u201d Index gewinnt die mobile Version einer Website erheblich an Bedeutung, da diese prim\u00e4r zur Indexierung<\/a> herangezogen werden soll.\n<\/p>\n

F\u00fcr bestimmte Seiten (z.B. Restaurants, lokale Gesch\u00e4fte, etc.) ist die Optimierung f\u00fcr mobile Endger\u00e4te besonders wichtig, da Google beispielsweise f\u00fcr lokale Suchanfragen Seiten bevorzugt, die mobil gut funktionieren (da solche Suchanfragen h\u00e4ufig \u00fcber mobile Endger\u00e4te erfolgen).\n<\/p>\n

\n
\n

Mobile SEO Check<\/h3>\n

Pr\u00fcfe, ob Deine Seite f\u00fcr mobile Endger\u00e4te optimiert ist<\/p>\n<\/div>\n

\n
\n<\/form>\n<\/div>\n

Besonderheiten des Nutzerverhaltens an mobilen Endger\u00e4ten<\/span><\/h2>\n

Bevor man sich mit den spezifischen Aspekten der mobilen Optimierung befasst, sollte man zun\u00e4chst die Besonderheiten des Nutzerverhaltens an mobilen Endger\u00e4ten verstehen, da diese die Grundlage f\u00fcr die mobile Optimierung bilden.\n<\/p>\n

Eine wichtige Besonderheit liegt zum Beispiel darin, dass die Navigation an mobilen Endger\u00e4ten nicht mit der Maus, sondern per Touchscreen oder Sprachsteuerung erfolgt. Zudem besitzen solche Ger\u00e4te in den meisten F\u00e4llen ein wesentlich kleineres Display, wodurch die Darstellungsm\u00f6glichkeiten stark eingeschr\u00e4nkt werden. Au\u00dferdem ist in der Regel keine Darstellung von Java oder Flash m\u00f6glich und die Nutzer verf\u00fcgen meist \u00fcber eine langsamere Internetverbindung. Hinzu kommt, dass die User beim mobilen Surfen sehr ungeduldig sind und die gew\u00fcnschten Informationen deshalb schnell und in pr\u00e4gnanter Form verf\u00fcgbar sein m\u00fcssen, um den Nutzer zufrieden zu stellen.\n<\/p>\n

Anforderungen an die Darstellung einer \u201cmobile friendly\u201d Website<\/span><\/h2>\n

Bevor die technischen Aspekte der mobilen Optimierung erl\u00e4utert werden, soll zun\u00e4chst auf solche Kriterien eingegangen werden, die eine Website bez\u00fcglich ihrer Darstellung erf\u00fcllen sollte, um als \u201cmobile friendly\u201d zu gelten.\n<\/p>\n

So sollte zum einen die Lesbarkeit der Texte einer Website (ohne Zoom) auf allen Ger\u00e4ten sichergestellt werden. Auch die \u00fcbrigen Elemente einer Seite m\u00fcssen an die unterschiedlichen Displaygr\u00f6\u00dfen angepasst werden, um zu vermeiden, dass der User zoomen oder horizontal scrollen muss. Weiterhin sollte auf einen ausreichenden Abstand zwischen Links oder Schaltfl\u00e4chen geachtet werden, sodass diese leicht mit dem Finger angetippt werden k\u00f6nnen, ohne beispielsweise einen falschen Link zu ber\u00fchren. Auch auf die Verwendung von Software, die nicht auf allen Ger\u00e4ten verf\u00fcgbar ist (z.B. Flash) sollte aus Gr\u00fcnden der Nutzerfreundlichkeit verzichtet werden.\n<\/p>\n

Aspekte der mobilen Optimierung<\/span><\/h2>\n

Grunds\u00e4tzlich existieren drei wesentliche M\u00f6glichkeiten f\u00fcr die Konfiguration einer mobilen Website. Diese sind Responsive Webdesign, die Erstellung einer separaten mobilen Website und Dynamic Serving.\n<\/p>\n

Responsive Webdesign<\/span><\/h3>\n
\n
\"Responsive<\/a> <\/p>\n
Abbildung:<\/b> Responsive Design – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Beim Responsive Webdesign<\/a> bleiben der HTML-Code und die URL<\/a> der Website f\u00fcr alle Ger\u00e4te gleich, allerdings passen sich die Inhalte automatisch an die jeweilige Bildschirmgr\u00f6\u00dfe an. Diese Variante stellt auch den von Google empfohlenen Ansatz dar und zeichnet sich lediglich durch den Nachteil aus, dass nicht alle Inhalte beliebig an verschiedene Displaygr\u00f6\u00dfen angepasst werden k\u00f6nnen. Im Rahmen von Responsive Webdesign wird der Darstellungsbereich einer Seite durch den Viewport<\/a> Meta Tag konfiguriert, welcher Angaben \u00fcber die Skalierung der Seitenbreite macht:\n<\/p>\n

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/><\/pre>\n
Dar\u00fcber hinaus kann mithilfe von Media Queries<\/a> in CSS die Darstellung der Seite in Abh\u00e4ngigkeit von der Bildschirmgr\u00f6\u00dfe festgelegt werden.\n<\/p>\n
Mobile Version der Website<\/span><\/h3>\n
\n
\"Mobile<\/a>  <\/p>\n
Abbildung:<\/b> Mobile Version – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n
Die zweite der oben genannten Varianten ist die Erstellung einer separaten mobilen Version der Website, welche eine eigene URL besitzt. Wenn in einem solchen Fall der User von einem mobilen Endger\u00e4t aus auf die Website zugreift, wird er mit Hilfe von HTTP-Weiterleitungen auf die mobile Version der Seite weitergeleitet. Der Nachteil dieser Alternative ist jedoch, dass sie Probleme mit Duplicate Content<\/a> verursachen kann.\n<\/p>\n
Damit die unterschiedlichen URLs von Google besser ausgewertet werden k\u00f6nnen, sollte im HTML-Code der Desktop-Version der URL ein rel=\u201dalternate\u201d Tag hinzugef\u00fcgt werden<\/a>, welcher auf die mobile Version der URL verweist:\n<\/p>\n
<link rel=\"alternate\" media=\"only screen and (max-width: 640px)\"\r\n\r\nhref=\"https:\/\/m.example.com\/\"><\/pre>\n
Dar\u00fcber hinaus sollte auf der mobilen Version der Seite ein Canonical Tag<\/a> eingef\u00fcgt werden, der auf die Desktop-Version verweist, um besagten Problemen mit Duplicate Content vorzubeugen:\n<\/p>\n
<link rel=\"canonical\" href=\"https:\/\/www.example.com\/\"><\/pre>\n
Dynamic Serving<\/span><\/h3>\n
\n
\"Dynamic<\/a>  <\/p>\n
Abbildung:<\/b> Dynamic Serving – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n
Die dritte und letzte Alternative f\u00fcr die Konfiguration einer mobilen Website stellt das Dynamic Serving (dynamische Bereitstellung) dar. Hierbei werden unterschiedliche HTML- und CSS-Codes geliefert, je nachdem welcher User Agent erkannt wird. Die mobile Website ist in diesem Fall eine reduzierte Version der eigentlichen Website. Der wesentliche Nachteil dieser Alternative ist die hohe Fehleranf\u00e4lligkeit bei der Identifikation des User Agents.\n<\/p>\n
Ein wichtiges Element bei dieser Herangehensweise ist der Vary-HTTP-Header. Durch diesen sendet der Server den Hinweis, dass der Googlebot<\/a> f\u00fcr Smartphones die entsprechende Seite ebenfalls crawlen soll. Ohne den Vary-HTTP-Header w\u00e4re es f\u00fcr Google n\u00e4mlich nicht erkennbar, dass der HTML-Code f\u00fcr mobile User Agents ver\u00e4ndert wird. Der Header kann zum Beispiel folgenderma\u00dfen aussehen:\n<\/p>\n
GET \/page-1 HTTP\/1.1\r\n\r\nHost: www.example.com\r\n\r\n(...Rest des HTTP Request Headers...)<\/pre>\n
\n<\/p>\n
HTTP\/1.1 200 OK\r\n\r\nContent-Type: text\/html\r\n\r\nVary: User-Agent\r\n\r\nContent-Length: 5710\r\n\r\n(... Rest des HTTP Response Headers...)<\/pre>\n
Weitere Aspekte der mobilen Optimierung<\/span><\/h3>\n
Ein wichtiger Teil der mobilen Optimierung ist die Geschwindigkeitsoptimierung<\/b> der Website durch die Verringerung der zu \u00fcbertragenden Datenmengen. Dies ist beispielsweise m\u00f6glich durch die Minimierung von CSS- und JavaScript<\/a>-Dateien, indem einerseits der Code der jeweiligen Dateien minimiert wird (z.B. durch die Entfernung von Zeilenumbr\u00fcchen) und andererseits mehrere einzelne Dateien eines Dateityps zu einer Gesamtdatei zusammengefasst werden, sodass insgesamt weniger Aufrufe notwendig sind, um eine Seite zu laden. Weiterhin sollten f\u00fcr mobile Websites m\u00f6glichst wenige Bilder verwendet werden, da diese eine deutlich l\u00e4ngere Ladezeit mit sich ziehen. L\u00e4sst sich auf ein bestimmtes Bild dennoch nicht verzichten, sollte dieses komprimiert werden bzw. ein separates Bild f\u00fcr die mobile Version der Seite bereitgestellt werden (dies ist auch f\u00fcr Responsive Webdesign m\u00f6glich). Dar\u00fcber hinaus sollten Videos, Tondateien und andere multimediale Elemente auf das N\u00f6tigste begrenzt werden.\n<\/p>\n
Neben der Geschwindigkeitsoptimierung ist auch die Anpassung des Seitenmen\u00fcs<\/b> an kleinere Bildschirmgr\u00f6\u00dfen ein wichtiger Aspekt der Optimierung f\u00fcr mobile Endger\u00e4te. Hierbei sollte zum Beispiel auch auf sogenannte Hero Header verzichtet werden. Weiterhin ist auch die Schriftgr\u00f6\u00dfe<\/b> so anzupassen, dass sie auch auf kleineren Bildschirmen ohne Zoom lesbar ist.\n<\/p>\n
Weiterhin bietet der Meta Tag<\/a> \u201crel=icon\u201d die M\u00f6glichkeit, ein Icon<\/b> festzulegen, welches angezeigt wird, wenn der User die Seite zum Homescreen seines mobilen Endger\u00e4tes hinzuf\u00fcgt. Dieser sieht folgenderma\u00dfen aus:\n<\/p>\n
<link rel=\"icon\" sizes=\"192x192\" href=\"\/icon.png\"><\/pre>\n
F\u00fcr das Touch Icon f\u00fcr Apple Ger\u00e4te gibt es einen eigenen Meta Tag:\n<\/p>\n
<link rel=\"apple-touch-icon\" href=\"\/apple-touch-icon.png\" \/><\/pre>\n
Zudem sollte man im Zuge der mobilen Optimierung Google stets mitteilen<\/b>, dass eine Website f\u00fcr mobile Endger\u00e4te optimiert ist bzw. eine separate mobile Website vorhanden ist. Dies geschieht durch den rel=alternate Tag bzw. Canonical-Link bei mobilen Versionen einer Website oder durch den Vary-HTTP-Header bei Dynamic Serving.\n<\/p>\n
Zu guter Letzt sollte man sich neben all diesen technischen Aspekten im Rahmen der mobilen Optimierung immer bewusst machen, in welcher Situation<\/b> die User auf die eigenen Inhalte zugreifen und welche Funktionen<\/b> f\u00fcr sie relevant sind, und sich diese Aspekte bei der Gestaltung der Webseite stets vor Augen halten.\n<\/p>\n
H\u00e4ufige Fehler<\/span><\/h2>\n
Folgende h\u00e4ufig auftretende Fehler sollten im Rahmen der Optimierung f\u00fcr mobile Endger\u00e4te vermieden werden:\n<\/p>\n