INHALTSVERZEICHNIS:

Strategische SEO Beratung vom erfahrenen Freelancer:

Mobile SEO bezieht sich auf die Suchmaschinenoptimierung von Websites, um eine optimale Leistung und Usability auf mobilen Geräten zu gewährleisten.

Robert Goese – SEO Beratung: Tel. 030 / 53 00 56 01

Mobile First Index

Mobile-First-Indexierung ist ein Ansatz von Google, bei dem die mobile Version einer Website für die Indexierung und das Ranking in den Suchergebnissen primär gegenüber Desktop-Version berücksichtigt wird. Diese Methode stellt sicher, dass die mobile Benutzererfahrung im Mittelpunkt steht, da mittlerweile mehr Nutzer über mobile Geräte als über einen Desktop-Computer auf das Internet zugreifen. 

Es wird zuerst die mobile Version verwendet um den Inhalt zu durchsuchen und indexieren. Falls keine mobile Version zur Verfügung steht, wird weiterhin die Desktop Variante indexiert, aber aufgrund einer schlechten User-Experience im Ranking abgewertet.

Achtung: Update vom Juni 2024
Google hat erklärt, dass ab dem 5. Juli 2024 der Crawler für Desktopseiten seinen Dienst einstellt. Ab dann werden alle Seiten nur noch vom Google Smartphone-Crawler gecrawlt: Sind Seiten nicht mobilfähig, werden diese nicht mehr indexiert!

Von Google wird gefordert, dass die Inhalte der mobilen Versionen mit den Inhalten der Desktop-Versionen identisch bzw. möglichst inhaltsgleich sind. Die Konsistenz der Inhalte verbessert die Nutzererfahrung, vermeidet technische Probleme wie inkonsistente Verlinkungen und Weiterleitungen und sorgt dafür, dass unabhängig vom Device alle wichtigen Informationen dem Benutzer zugänglich sind. Die Konsistenz bezieht sich nicht nur auf den Inhalt selbst, sondern auch auf die Metaangaben, strukturierten Daten, Alt-Tags und URLs der Bilder etc.:

Der oft fälschlicherweise erteilte Rat, mobile Inhalte zu verkürzen, da die Bildschirmgröße kleiner ist oder weniger Zeit auf einer mobilen Webseite verbracht wird, ist also falsch! Die Inhaltsrelevanz muss auch für den mobilen Nutzer gewährleistet bleiben. Google geht hier gewisse Kompromisse beim mobilen Design ein: So können z.B. auch vorher von Google verschmähte Accordeons (siehe Google Crawl: kein Crawling für Inhalte, die erst nach Userinteraktion sichtbar werden) für das Design verwendet werden, um mehr Content auf der mobilen Website unterbringen zu können.

Natürlich gilt es auch die technischen Voraussetzungen von mobilen Endgeräten zu erfüllen: Videos und Bilder müssen den unterstützten Formaten entsprechen, Bilder sollten in den entsprechenden Skalierungen geladen werden und die Seiten sollten generell technisch für Pagespeed gerüstet sein, um die langsameren mobilen Netze auszugleichen (bei den Pagespeed Insights Berichten sollte mindestens ein mobiler Wert von 70 erreicht werden).

Auch die Bedienbarkeit der mobilen Devices spielt eine Rolle. Generell sollte eine Schriftgröße von mindestens 16px benutzt werden und Navigationselemente ausreichend Abstand voneinander haben (mindestens 50 Pixel). Bei der Entwicklung von mobilen Versionen gilt der Mobile First Ansatz: Es wird erst die die mobile Version entwickelt und dann erst die Desktop-Version.

Mobile SEO - Mobile Indexing
Anteil der mobilen Internetnutzer in Deutschland bis 2023 - Quelle: Statista 2024

Mobile SEO: Konfiguration der mobilen Inhalte

Responsives Web Design (RWD)

Ein responsives Webdesign sorgt dafür, dass sich das Layout und die Inhalte einer Website automatisch an die Bildschirmgröße des verwendeten Geräts anpassen. Dies verbessert die Benutzererfahrung und ist die von Google bevorzugte Konfiguration.

Die Anpassung des Layouts erfolgt in der Regel durch flexible Layouts bzw. Raster (Grids), Bilderskalierung und CSS-Media Queries. Hier werden also anstatt festen Pixel-Angaben, dynamische Anpassungen durch Prozent- und em- und rem- Angaben ermöglicht, wobei die CSS-Media-Queries den Rahmen für die jeweiligen Bildschirmgrößen bzw. des Viewports bilden.

Unter einer einzigen URL passen sich also die Elemente wie Größe des Fonts, der Bilder, der Spalten etc. an die jeweilige Bildschirmbreite dynamisch an.

Der große Vorteil einer solchen Konfiguration für die mobile SEO ist, dass eine einheitliche URL für alle Endgeräte existiert, was die Verwaltung und Pflege enorm erleichtert. Weiterhin ist es die von Google empfohlene Methode der Darstellung, da auch für die Suchmaschinen die Analyse und das Handling erleichtert wird.

Viewport-Meta-Tag

Um responsives Webdesign zu ermöglichen muss als erstes ein Viewport-Meta-Tag im Header des HTML-Codes untergebracht werden, um die Skalierung und Dimensionierung des Renderings zu steuern. Ohne dieses Tag würde, wie zu Anfangszeiten des Smartphones, die Webseite einfach nur sehr klein auf den Bildschirm skaliert werden, ohne dass User die Schrift lesen könnten (es musste immer wieder rein- und rausgezoomt werden).

Der Viewport-Meta-Tag wird herkömmlich mit den Werten "width=device-width, initial-scale=1.0" verwendet.

				
					// Beispiel Viewport-Meta-Tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">



				
			
  • „width=device-width“ passt die Seite dynamisch an die verfügbare Breite des Bildschirms auf dem Gerät der Nutzer an (das Scrollen entfällt)
  •  „initial-scale=1.0“ wiederum sorgt dafür, dass der Seiteninhalt auf dem Bildschirm eben nicht verkleinert bzw. vergrößert dargestellt wird. Bei Wechsel zwischen Hoch- und Querformat behalten viele Browser die Seitenbreite gleich und zoomen dann den Inhalt – dies wird durch diese Angabe verhindert: der Inhalt passt sich immer neu an (das Zoomen entfällt). 

CSS-Media-Queries

In Kombination mit dem Viewport-Meta-Tag werden normalerweise auch CSS-Media-Queries verwendet, um das Layout und Design der Webseite weiter bzw. spezieller an die verschiedenen Bildschirmgrößen anzupassen: 

				
					// Beispiel CSS Anpassungen an Bildschirmbreite durch CSS-Media-Queries f&uuml;r Desktop (Basis), Tablets, Smartphones:

/* Basis-Styles */
body {
    font-size: 16px;
}

/* Anpassung f&uuml;r Tablets */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
}

/* Anpassung f&uuml;r Smartphones */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
}

				
			
  • @media (max-width: XXXpx) gibt die jeweiligen Brüche in dem Design an. Hierdurch werden für Desktop, Smartphone und Tablet jeweils ein eigenes Design ermöglicht, indem das CSS für die entsprechenden Brüche angepasst wird.

Vorteile RWD:

  • Einheitliche URL: Erleichtert die mobile SEO Verwaltung (vermeidet Duplicate Content, zeitraubendes User-Agent-Sniffing und Weiterleitungen, erleichtert Analysen und Reportings, konsistente Bild- und Video- URLs, Meta-Tags, Überschriften etc.)
  • Bietet eine konsistente Nutzererfahrung und konsistente Relevanzbeurteilung seitens Google
  • Langfristig durch größtmögliche Flexibilität: Es kommen immer neue Geräte mit verschiedenen Bildschirmgrößen auf den Markt – durch ein responsives Design werden Änderungen hier fast nie notwendig
  • Google empfiehlt ausdrücklich RWD

Nachteil:

  • Komplexität der Gestaltung: Erstmaliges Erstellen eines Designs, welches auf allen Geräten funktioniert kann herausfordernd sein und benötigt mehr Fachwissen.
  • Schlechte Leistung durch Komplexität (z.B. Pagespeed-Performance): Bei schlechter Implementation oder bei zu großer Komplexität kann sich das Datenvolumen durch Laden vieler CSS- bzw. JS-Dateien drastisch erhöhen. Große Desktopversionen können also schlechte Mobilversionen darstellen…

Aufwand:

  • Mittlerer Aufwand: Die initiale Einrichtung kann sehr zeitaufwendig sein, aber die langfristige Wartung ist viel einfacher
Mobile SEO - Responsives Design
Abb.1: Responsives Design: Eine URL für alle Inhalte - Desgin passt sich der Bildschirmbreite an

Dynamic Serving für die mobile SEO

Dynamic Serving ist eine Methode zur Bereitstellung von Webseiteninhalten, bei der der Webserver basierend auf dem User-Agent-Header des anfragenden Geräts unterschiedliche HTML- und CSS-Versionen der Seite ausliefert. Dies bedeutet, dass die URL der Seite für alle Geräte gleich bleibt, der Inhalt jedoch je nach Gerätetyp variiert.

Dynamic Serving erkennt also den Gerätetyp (z.B. Smartphone, Tablet, Desktop) anhand des User-Agent-Headers in der HTTP-Anfrage und liefert daraufhin gerätespezifische HTML- und CSS-Inhalte aus.

Die User-Agent-Erkennung (Sniffing)

Der Webserver überprüft also den User-Agent-Header der Anfrage, um das Gerät zu identifizieren. Dies kann auf mehreren Wegen passieren:

// Ein einfaches Beispiel für die User-Agent-Erkennung mit PHP und die Bereitstellung unterschiedlicher Inhalte:

				
					// User-Agent-Erkennung mit PHP (einfache Weiche)

<?php $user_agent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/Mobile|Android|BlackBerry|iPhone|Windows Phone/', $user_agent)) {
    // Inhalte f&uuml;r mobile Ger&auml;te
    include('mobile-version.html');
} else {
    // Inhalte f&uuml;r Desktop-Ger&auml;te
    include('desktop-version.html');
}
?>



				
			

// User-Agent Erkennung mit Apache mod_rewrite: Eine etwas einfachere und schnellere Methode ist die Umleitung per .htaccess-Datei und dem Apache-Server mod_rewrite-Modul:

				
					// User-Agent-Erkennung mit PHP (einfache Weiche)

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|BlackBerry|iPhone|Windows Phone" [NC]
RewriteRule ^$ /mobile/index.html [L]




				
			

Dies wird dem Inhalt der .htaccess-Datei im Stammverzeichnis der Domain hinzugefügt. Durch den Punkt wird sie zu einer „versteckten“ Datei die sich nicht normal über http aufrufen lässt (sie besteht lediglich aus Serveranweisungen).

Hier wird jeder gelistete User-Agent an die entsprechende Seite und Ordner weitergeleitet. Es ist also theoretisch möglich für jeden einzelnen User-Agent individuell zugeschnittenes Design zu liefern (wie schon erwähnt, muss der Maincontent bei allen Versionen aber übereinstimmen).

Vary-HTTP-Header

Es gibt immer wieder die Spammethode des Cloaking. Auch hier wird der User-Agent vom Server ausgelesen und angepasste Inhalte angezeigt: So wurden dem Googlebot durch Weiterleitung andere, wertvollere Inhalte für die Indexierung angezeigt als dem User (selbst BMW hat mal so gearbeitet und ist deshalb massiv von Google abgestraft worden1). Um hier nicht in die Nähe eines solchen Vorwurfes zu kommen und Google mitzuteilen, dass der Inhalt basierend auf dem User-Agent variieren kann, ist es notwendig den entsprechenden Vary-HTTP-Header zu verwenden:

				
					// Beispielhafte Vary-HTTP-Header Apache-Einstellung

<filesmatch>
    Header set Vary "User-Agent"
</filesmatch>





				
			

Nun kann Google die entsprechenden Inhalte finden und zugleich wird mitgeteilt, dass nur der Cache für den entsprechenden User-Agent benutzt werden soll, womit wiederum gesichert ist, dass Suchende bei Google auf die Seiten verwiesen wird, welche z.B. für mobile Endgeräte geeignet ist. Der Vary-HTTP-Header sollte wirklich nur im Zusammenhang mit Dynamic Serving benutzt werden.

Beim User-Agent-Sniffing nicht den Googlebot einbeziehen!
Um dem Verdacht des Cloakings (dem Googlebot werden andere, wertvollere Inhalte als dem User gezeigt) weiterhin vorzubeugen, gilt es unbedingt den Googlebot bei der User-Agent-Erkennung nicht explizit anzusprechen bzw. einzubeziehen.

Bei einer WordPress Installation kann der Vary-HTTP-Header durch Hinzufügung einer Funktion in der functions.php (Unter Design > Theme-Datei-Editor > functions.php) einfach hinzugefügt werden:

				
					// Beispielhafte Vary-HTTP-Header Hinzuf&uuml;gung bei WordPress

function add_vary_header ($headers)
{
$headers[&lsquo;Vary&rsquo;] = &lsquo;User-Agent&rsquo;;
Return $headers;
}

add_filter(&lsquo;wp_headers&rsquo;, &lsquo;add_vary_header&rsquo;);





				
			

Vorteile Dynamic Serving

  • Einheitliche URL (siehe auch RWD): Erleichtert die mobile SEO Verwaltung (Vermeidung Duplicate Content, erleichtert Analysen und Reportings…)
  • Optimierte Leistung (Design wird speziell auf den User-Agent ausgerichtet und muss nicht CSS- bzw. JS- Inhalte von anderen Designs mitladen)
  • Gerätespezifische Anpassungen: Inhalte und Ressourcen können bis auf die Fähigkeiten eines einzelnen User-Agent heruntergebrochen bzw. individualisiert werden

Nachteile

  • Die Einrichtung von Dynamic Serving erfordert eine präzise User-Agent-Erkennung. Da ständig neue Geräte mit unterschiedlichen User-Agents auf den Markt kommen, stellt es eine Herausforderung dar, ständig aktualisierte User-Agent-Listen zu erstellen.
  • Es müssen mehrere Versionen einer Website erstellt werden. Die Erstellung ist also komplexer als bei RWD und die Verwaltung bzw. Anpassungen aufwendiger.
  • Fehlerhafte User-Agent-erkennung bzw. bei der Bereitstellung der Inhalte für den einzelnen User-Agents können zu einer sehr schlechten Usability führen
  • Höhere Serverbelastung, da der Server die unterschiedlichen Inhalte dynamisch generieren bzw. ausliefern muss

Aufwand

  • Hoher Aufwand durch Erstellung mehrer Seiten-Versionen und hohen Verwaltungaufwand durch ständige Anpassungen
Mobile SEO - Dynamic Serving
Abb.2: Dynamic Serving: Nach der User-Agent-Abfrage wird der Nutzer auf passende Inhalte für die verschiedenen Geräte unter einer URL weitergeleitet.

Mobile SEO: Seperate Mobile Webseiten

Separate mobile Websites sind eigenständige Versionen Ihrer Hauptwebsite, die speziell für mobile Geräte optimiert sind. Nach der User-Agent- Erkennung wie beim Dynamic Serving wird der Nutzer auf die entsprechenden mobilen- bzw. Desktop-Inhalte weitergeleitet. Diese mobile Version wird häufig auf einer Subdomain gehostet, beispielsweise „m.example.com“ (auch „m-dot-URLs“ genannt). Auf dieser sind die Inhalte dann spezifisch auf mobile Benutzer ausgerichtet (siehe auch Abb.5).

Die mobilen Inhalte haben somit eine andere URL als der Desktop-Content. Die Methode ist ein wenig veraltet, aber noch sehr oft anzutreffen: So ergibt die Sucheingabe „inurl:https:m.“ bei Google ungefähr 2.810.000.000 Suchergebnisse. Auch hier gilt es zu beachten, dass keine wesentlichen inhaltlichen Unterschiede zwischen der Mobilen Seite und der Desktop-Variante existieren (konsistente Inhalte).

Die Implementierung separater mobiler Webseiten in der mobilen SEO ist ähnlich der Implementierung des Dynamic Serving unterscheidet sich aber ein klein wenig. 

Ein Beispiel mit PHP:

				
					// User-Agent-Erkennung mit PHP und Weiterleitung auf Mobil- bzw. Desktop-Inhalte

<?php $user_agent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/Mobile|Android|BlackBerry|iPhone|Windows Phone/', $user_agent)) {
    header('Location: http://m.example.com');
    exit();
} else {
    header('Location: http://www.example.com');
    exit();
}
?>




				
			

Beispiel mit Apache mod_rewrite:

				
					// User-Agent-Erkennung mit Apache mod_rewrite-Modul und Weiterleitung auf Mobil-Inhalte

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "Mobile|Android|BlackBerry|iPhone|Windows Phone" [NC]
RewriteRule ^$ http://m.example.com [L,R=302]




				
			

Bei beiden Versionen werden mobile Nutzer auf die m.example.com Subdomain weitergeleitet. Wie bei Dynamic Serving gilt es auch hier den Googlebot als User-Agent nicht direkt anzusprechen. 

Canonical-Tag bei separaten mobilen Webseiten

Da für beide Versionen verschiedene URLs mit annähernd gleichem Inhalt bereitgestellt werden, kommt es zu Duplicate Content. Hier muss für die mobile Version ein Canonical-Tag auf die URL der normalen der Desktopversion gesetzt werden (dies gilt für jede einzelne URL auf die spezifische Desktop-URL):

				
					// Beispiel Canonical-Tag der Mobilversion http://m.example.com/seite1.html auf Desktop-Versions-URL




    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile-Version</title>
    <link rel="canonical" href="http://www.example.com/seite1.html">


    <h1>Willkommen auf unserer mobilen Seite!</h1>
    <p>Dies ist die f&uuml;r mobile Ger&auml;te optimierte Version unserer Webseite.</p>







				
			

Vorteile

  • Inhalte und Navigation sind speziell für mobile Nutzer entwickelt und bieten eine gute Nutzererfahrung
  • Gezieltere Optimierungsmöglichkeiten für die einzelnen Versionen (z.B. bei der Conversionsoptimierung)
  • Optimierte Leistung da CSS- und JS- Inhalte von dem jeweils anderen Design nicht geladen werden müssen

Nachteile von separaten mobilen Webseiten

  • Inhalte und Updates müssen auf beiden Versionen der Website durchgeführt werden, was zu einem hohen Verwaltungsaufwand führt.
  • Komplexe Implementierung: Die Implementierung von Weiterleitungen und Canonical-Tags zwischen der Desktop- und der mobilen Version kann komplex sein und zu Fehlern führen, wenn sie nicht ordnungsgemäß durchgeführt wird.
  • Hoher SEO-Aufwand: Zwei verschiedene SEO Strategien, erweiterte SEO Analyse & Reporting, verschiedene XML Sitemaps, erweitertes Testing in der Search Console etc.)

Vor- und Nachteile, Aufwand der einzelnen Konfigurationen:

KonfigurationVorteileNachteileAufwand
Responsive Web DesignEinheitliche URL, konsistente Benutzererfahrung, einfache Verwaltung, SEO-freundlichKomplexität bei der Gestaltung, mögliche LeistungsproblemeMittel: Einmalige Implementierung und laufende Pflege
Dynamic ServingOptimierte Leistung, gerätespezifische AnpassungenKomplexere Implementierung, erhöhte ServerbelastungHoch: Komplexe Implementierung und kontinuierliche Anpassung
Separate Mobile SitesVollständig optimiert für mobile Benutzer, spezifische Inhalte und FunktionenDoppelte Verwaltung, SEO-KomplexitätHoch: Separate Entwicklung und Pflege der mobilen und Desktop-Versionen
Mobile SEO - Seperate Mobile Webseiten
Abb.4: Mobile SEO - Seperate Mobile Webseiten: Nach User-Agent-Erkennung wird der mobile Nutzer auf die m. Subdomain weitergeleitet
Mobile SEO - Mobile Subdomain bei wetterdienst.de
Abb.5: Mobile SEO - Mobile Subdomain bei wetterdienst.de

Wechseln auf responsives Design

Die bei weitem häufigste Methode der Konfiguration von mobilen Inhalten ist die Verwendung von Responsivem Webdesign: Die aufwendige Bereitstellung von separaten mobilen Webseiten wird zwar noch oft genutzt, ist aber hoffnungslos veraltet.

Bei Relaunch und Redesign bzw. Rebrush wird also fast immer auf responsives Webdesign (eben der von Google stark empfohlenen Konfiguration) gewechselt. Bei einem Wechsel gilt es einige Dinge zu berücksichtigen, um Rankingverluste zu vermeiden.

Unter der Voraussetzung, dass sich die URLs der bisherigen Desktopversion sich bei der Umstellung auf responsives Design nicht ändern, kann die Umstellung relativ einfach erfolgen und ähneln den Maßnahmen von einem gewöhnlichen SEO Relaunch:

  • Bereitstellung der responsiven Webseite
  • Einrichtung von 301-Redirects der mobilen alten URLs auf die einzelnen neuen responsiven URLs
  • Beseitigung aller Konfigurationen für mobile Seiten (Weiterleitungen und Vary-HTTP-Header)
  • Festlegung eines Canonical-Tags für die responsiven URLs auf sich selbst.

Durch die Umstellung wird die SEO Verwaltung erheblich vereinfacht und Google gerecht umgesetzt.

Sollten sich die URLs (z.B. durch die Verwendung eines anderen CMS) zwischen der alten Desktopversion und den neuen responsiven URLs unterscheiden, müssen auch diese durch einen 301-Redirect auf die neuen URLs weitergeleitet werden. 

Dies gilt auch bei der Umsetzung vom Dynamischen Serving auf Responsives Webdesign. Wenn sich diese URLs allerdings nicht ändern, ist hier kein Redirect-Management erforderlich.

Technische mobile SEO: Umsetzung Redirect
Redirectmanagement bei Umsetzung von responsivem Design: Alte Desktop-URLs bleiben bestehen und alte mobile URLs werden auf die neuen responsiven URLs weitergeleitet

Spielt AMP heute noch eine Rolle für die mobile SEO?

AMP (Accelerated Mobile Pages) ist eine Opensource Lösung die u.a. von Google und Adobe 2015 entwickelt wurde, um schnelle mobile Webseiten erstellen zu können.

Bei AMP handelt es sich um ein Framework, dass reduzierte HTML-, JavaScript- und CSS- Anwendungen ermöglichte. Zusätzlich wurden die Inhalte über ein Google CDN ausgeliefert. Es handelt sich also um eine auf Schnelligkeit ausgerichtete reduzierte Entwicklungsumgebung. Dies machte Sinn, da mobile Flatrates noch teurer als heute waren und auch nicht das heute übliche Datenvolumen besaßen.

AMP hat sich dann bei Publishern sehr schnell verbreitet, da Suchmaschinen ab 2016 in dem Google Feature „Schlagzeilen“ bzw. „Top stories“ nur AMP Seiten ausspielte. Zusätzlich wurden alle AMP-Seiten in den mobilen Suchergebnissen mit einem Blitz gekennzeichnet und bei Google Discover größere Bilder angezeigt. Die ausschließliche Ausspielung von AMP in den Google Schlagzeilen endete durch die Einführung des Page Experience Updates 2021 und auch die Bevorzugung der sonstigen Darstellung wurde beigelegt. 

Eine Fokussierung auf schnelle Webseiten ist zurecht immer noch vorhanden, es muss aber nicht mehr AMP sein – hier wurden weitere Metriken hinzugefügt um die Nutzererfahrung zu verbessern: Die Schnelligkeit der Webseite wurde konkretisiert (Core Web Vitals – LCP, FID, CLS), die Sicherheit (SSL) wurde integriert, die Mobilfreundlichkeit des Designs und der Verzicht auf massiv störende Werbung (Verzicht auf Interstitials) werden nun honoriert.

Auch ohne AMP ist es möglich sehr schnelle optimierte Seiten anzubieten, die auch den erweiterten Kriterien der Nutzerfreundlichkeit entsprechen. Eine Bevorzugung von AMP Inhalten ist nicht mehr vorhanden und Inhalte können ohne die lästige Reduzierung der AMP-Restriktionen erstellt werden.

Seitdem haben sehr viele Anbieter aufgehört AMP- Inhalte anzubieten (Washington Post, Twitter, Chefkoch.de, Search Engine Land und viele andere). Auch Google selbst legt wohl keinen Wert auf die Weiterentwicklung von AMP: der letzte Eintrag auf der Entwicklerseite von AMP stammt vom Februar 2022! Tipps zur Abschaltung finden sich bei Google.

Technische SEO - Mobile SEO - Abschaltung AMP
Sistrix Sichtbarkeitsindex: Die Abschaltung von 600.000 AMP Seiten im November 2021 führte bei Chefkoch.de zu keinen Rankingverlusten
Technische SEO - Mobile SEO: AMP
Darstellung von AMP Seiten vor Page Experience Update 2021 bei Google Schlagzeilen Feature

Mobile SEO: Pagespeed

Was genau ist der Pagespeed?

Als PageSpeed wird oft die Ladezeit verstanden, die eine Seite vom ersten Aufruf bis zum vollständigen Rendering benötigt. In der mobilen SEO werden hierunter die gemessenen Leistungs-Werte des PageSpeed Insights-Tools (PSI) von Google verstanden.

Dort werden neben der reinen Ladezeit auch andere Messwerte zur Bewertung der Page Experience herangezogen. Das PSI-Tool von Google kann kostenlos zur eigenen Analyse einzelner URLs verwendet werden. Hierbei werden auch Tips zur Optimierung der Werte gegeben.

Die gemessenen Werte

Es werden also nicht nur die Ladezeiten gemessen, sondern auch andere Faktoren der Seitenleistung wie mögliche Interaktiviät, visuelle Stabilität während des Renderns etc. spielen bei der Beurteilung der wichtigen Page Experience eine Rolle. Das Herzstück der gemessenen Werte stellen die rankingrelevanten Core Web Vitals dar:

Mobile SEO: Die Core Web Vitals
Mobile SEO: Core Web Vitals neben anderen Werten zur Bewertung der Page Experience

Die Core Web Vitals (Stand Juli 2024):

  • LCP – Largest Contentful Paint: Wann ist das größte Text- bzw. Bildelement im Above-The-Fold Bereich (Bereich ohne Scrollen) gerendert?
  • INP – Interaction To Next Paint: Zeitdauer, bis ein Nutzer das Ergebnis seiner Interaktion durch Maus, Tastatur oder Touch sieht. Im gegensatz zu FIP zähltt hier das Ergebnis und nicht die erste Reaktion. Ersetzt den FIP seit März 2024 (wird in schon in der Search Console angezeigt)
  • CLS – Cumulate Layout Shift: Finden auf der Seite während der Ladung
    größere Layoutverschiebungen statt (z.B. durch störende nachladene Werbebanner)?
Mobile SEO: Core Web Vitals
Mobile SEO: Gute und schlechte Werte der Core Web Vitals - Quelle Google web.dev

Pagespeed Optimierung

Der schnelle Aufbau von Webseiten hat viel Einfluß auf die Indexierung, Userexperience und ist auch Rankingfaktor

Die Mobile Leistungsbewertung durch PSI als Rankingfaktor

Die Core Web Vitals von PSI gelten seit 2021 indirekt als Rankingfaktor (indirekt, weil Teil der rankingrelevanten Nutzerfreundlichkeit von Seiten). Hierbei wird die Rolle aber oft übertrieben – natürlich sollten die Werte möglichst gut sein um eine gute Page Experience auch für mobile Nutzer zu gewährleisten (zumal die mobile Seite für das Ranking ausschlaggebend ist).

Mitarbeiter von Google selbst sagen immer wieder, das PageSpeed kein großer Rankingfaktor ist (so Matt Cutts in einem Video von 2013 und Martin Splitt 2021).

Hierbei wird die Contentrelevanz gegenüber Pagepeed hervorgehoben, denn langsame relevantere Seiten bieten eine bessere Page Experience als schnelle, nicht relevantere Seiten. Matt Cutts meint auch, dass ja überall verschieden schnelle Netze vorhanden sind und generelle Aussagen wie ein PageSpeed von so und so viel Sekunden nicht möglich sind – hier sollte auf die unmittelbare Nachbarschaft bzw. auf den unmittelbaren Wettbewerb geschaut werden.

Nur bei sehr langsamen Websites, die ähnlich relevant wie andere Wettbewerber- Websites sind, kann mangelnder PageSpeed zur Abwertung gegenüber diesen führen!

Warum ist PageSpeed SEO dennoch so wichtig?

Kurz gesagt: die User Interaktionen bzw. die Conversionen sinken drastisch bei langsamen Websites!

Der PageSpeed ist wesentlicher Bestandteil der Page Experience: Der Stresslevel gleicht dem Schauen eines Horrorfilms und ist höher als beim Schlangestehen an der Kasse.

Wie weit die Ladezeit das Nutzerverhalten beeinträchtigt, zeigen vielfältige Studien:

Dies sind nur einige wenige Beispiele, die die Wichtigkeit der Ladezeit bei der Page Experience veranschaulichen…

Mehr zur Pagespeed Optimierung findet sich in unserem Hauptartikel.

PageSpeed Optimierung ist weniger wichtig für das Ranking selbst, es lassen sich aber die User Interaktionen und Conversionen nachweislich erheblich steigern.
Pagespeed Werte der Top 100 Onlineshops
Die PageSpeed Werte der wichtigsten Online Shops sind bestenfalls durchschnittlich - Quelle: Websiteboosting 34/2015

Mobile XML-Sitemap

Mobile-First-Indexierung ist ein Ansatz von Google, bei dem die mobile Version einer Website für die Indexierung und das Ranking in den Suchergebnissen primär gegenüber Desktop-Version berücksichtigt wird. Diese Methode stellt sicher, dass die mobile Benutzererfahrung im Mittelpunkt steht, da mittlerweile mehr Nutzer über mobile Geräte als über einen Desktop-Computer auf das Internet zugreifen.

Es wird zuerst die mobile Version verwendet um den Inhalt zu durchsuchen und indexieren. Falls keine mobile Version zur Verfügung steht, wird weiterhin die Desktop Variante indexiert, aber aufgrund einer schlechten User-Experience im Ranking abgewertet.

Von Google wird gefordert, dass die Inhalte der mobilen Versionen mit den Inhalten der Desktop-Versionen identisch bzw. möglichst inhaltsgleich sind. Die Konsistenz der Inhalte verbessert die Nutzererfahrung, vermeidet technische Probleme wie inkonsistente Verlinkungen und Weiterleitungen und sorgt dafür, dass unabhängig vom Device alle wichtigen Informationen dem Benutzer zugänglich sind. Die Konsistenz bezieht sich nicht nur auf den Inhalt selbst, sondern auch auf die Metaangaben, strukturierten Daten, Alt-Tags und URLs der Bilder etc.:

Der oft fälschlicherweise erteilte Rat, mobile Inhalte zu verkürzen, da die Bildschirmgröße kleiner ist oder weniger Zeit auf einer mobilen Webseite verbracht wird, ist also falsch! Die Inhaltsrelevanz muss auch für den mobilen Nutzer gewährleistet bleiben. Google geht hier gewisse Kompromisse beim mobilen Design ein: So können z.B. auch vorher von Google verschmähte Accordeons (siehe Google Crawl: kein Crawling für Inhalte, die erst nach Userinteraktion sichtbar werden) für das Design verwendet werden, um mehr Content auf der mobilen Website unterbringen zu können.

Natürlich gilt es auch die technischen Voraussetzungen von mobilen Endgeräten zu erfüllen: Videos und Bilder müssen den unterstützten Formaten entsprechen, Bilder sollten in den entsprechenden Skalierungen geladen werden und die Seiten sollten generell technisch für Pagespeed gerüstet sein, um die langsameren mobilen Netze auszugleichen (bei den Pagespeed Insights Berichten sollte mindestens ein mobiler Wert von 70 erreicht werden).

Auch die Bedienbarkeit der mobilen Devices spielt eine Rolle. Generell sollte eine Schriftgröße von mindestens 16px benutzt werden und Navigationselemente ausreichend Abstand voneinander haben (mindestens 50 Pixel). Bei der Entwicklung von mobilen Versionen gilt der Mobile First Ansatz: Es wird erst die die mobile Version entwickelt und dann erst die Desktop-Version.

Technische SEO

Die technische SEO als Grundvoraussetzung der Crawlbarkeit und Indexierbarkeit von optimierten Content

Mobile SEO meets Local SEO

Mobile SEO - Local SEO
Quelle: thinkwithgoogle.com 2016

Mobile-First-Indexierung ist ein Ansatz von Google, bei dem die mobile Version einer Website für die Indexierung und das Ranking in den Suchergebnissen primär gegenüber Desktop-Version berücksichtigt wird. Diese Methode stellt sicher, dass die mobile Benutzererfahrung im Mittelpunkt steht, da mittlerweile mehr Nutzer über mobile Geräte als über einen Desktop-Computer auf das Internet zugreifen.

Es wird zuerst die mobile Version verwendet um den Inhalt zu durchsuchen und indexieren. Falls keine mobile Version zur Verfügung steht, wird weiterhin die Desktop Variante indexiert, aber aufgrund einer schlechten User-Experience im Ranking abgewertet.

Von Google wird gefordert, dass die Inhalte der mobilen Versionen mit den Inhalten der Desktop-Versionen identisch bzw. möglichst inhaltsgleich sind. Die Konsistenz der Inhalte verbessert die Nutzererfahrung, vermeidet technische Probleme wie inkonsistente Verlinkungen und Weiterleitungen und sorgt dafür, dass unabhängig vom Device alle wichtigen Informationen dem Benutzer zugänglich sind. Die Konsistenz bezieht sich nicht nur auf den Inhalt selbst, sondern auch auf die Metaangaben, strukturierten Daten, Alt-Tags und URLs der Bilder etc.:

Der oft fälschlicherweise erteilte Rat, mobile Inhalte zu verkürzen, da die Bildschirmgröße kleiner ist oder weniger Zeit auf einer mobilen Webseite verbracht wird, ist also falsch! Die Inhaltsrelevanz muss auch für den mobilen Nutzer gewährleistet bleiben. Google geht hier gewisse Kompromisse beim mobilen Design ein: So können z.B. auch vorher von Google verschmähte Accordeons (siehe Google Crawl: kein Crawling für Inhalte, die erst nach Userinteraktion sichtbar werden) für das Design verwendet werden, um mehr Content auf der mobilen Website unterbringen zu können.

Natürlich gilt es auch die technischen Voraussetzungen von mobilen Endgeräten zu erfüllen: Videos und Bilder müssen den unterstützten Formaten entsprechen, Bilder sollten in den entsprechenden Skalierungen geladen werden und die Seiten sollten generell technisch für Pagespeed gerüstet sein, um die langsameren mobilen Netze auszugleichen (bei den Pagespeed Insights Berichten sollte mindestens ein mobiler Wert von 70 erreicht werden).

Auch die Bedienbarkeit der mobilen Devices spielt eine Rolle. Generell sollte eine Schriftgröße von mindestens 16px benutzt werden und Navigationselemente ausreichend Abstand voneinander haben (mindestens 20 px). Bei der Entwicklung von mobilen Versionen gilt „Mobile First Ansatz„: Es wird erst die die mobile Version entwickelt und dann erst die Desktop-Version.

Technische Mobile SEO: Local SEO
Mobile SEO - Local SEO

Local SEO

Mobile Nutzer suchen lokal: Nach Restaurants, Geschäften, Ärzten und vieles mehr. Hier mehr zur lokalen Positionierung bei Google
Technische Mobile SEO: Local SEO
Quelle: thinkwithgoogle.com 2016

Best ADs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

FAQs zu Mobile SEO

Die Unterschiede zwischen mobiler und klassischer (Desktop) SEO sind vielfältig und betreffen verschiedene Aspekte der Suchmaschinenoptimierung:

  • Nutzerverhalten: Mobile Nutzer sind oft unterwegs, suchen schnelle Antworten auf spezielle Fragen, haben eine höhere lokale Suchintention und nutzen Sprachsuche häufiger.
  • Bildschirmgröße & Design: Erfordert ein responsives Design, das sich an verschiedene Bildschirmgrößen anpasst. Inhalte müssen gut lesbar sein. Wichtig sind auch klickbare Schaltflächen bzw. Navigation und gut platzierte CTAs (Call-to-Actions).
  • Pagespeed: Schnelle Ladezeiten sind entscheidend, da mobile Nutzer oft langsamere Netzwerke mit Datenmengen-Limitierung nutzen. Optimierung von Bildern und Minimierung von CSS/JavaScript sind wichtig.
  • Sehr starke lokale Suchintention: Lokale Suchanfragen sind häufiger und dominanter, daher ist lokales SEO (z.B. Google My Business) besonders wichtig.
  • Tools und Analyse: Spezielle Tools zur Überprüfung der Mobilfreundlichkeit und Ladegeschwindigkeit, wie Google’s Mobile-Friendly Test und PageSpeed Insights.

Es gibt mehrere Möglichkeiten, die Mobilfreundlichkeit Ihrer Website zu überprüfen:

  • Google Search Console: Hier finden Sie einen Bericht zur Mobilfreundlichkeit, der Probleme auf Ihrer gesamten Website aufzeigt.
  • Browser-Entwicklertools: Nutzen Sie die integrierten Entwicklertools moderner Browser, um Ihre Website in verschiedenen mobilen Ansichten zu testen.
  • PageSpeed Insights: Dieses Tool von Google bewertet nicht nur die Geschwindigkeit, sondern auch die Mobilfreundlichkeit Ihrer Seite

Zur Optimierung der mobilen Ladegeschwindigkeit können Sie folgende Maßnahmen ergreifen:

  • Bilder komprimieren und in modernen Formaten wie WebP bereitstellen.
  • Browser-Caching nutzen, um wiederholte Downloads zu reduzieren.
  • Minimieren von CSS, JavaScript und HTML
  • Lazy Loading für Bilder und Videos implementieren.
  • Content Delivery Network (CDN) verwenden.
  • Serverantwortzeit optimieren.
  • Kritisches CSS inline einbinden.
  • JavaScript asynchron laden.
  • Redirects reduzieren.

Im Durchschnitt dauert es drei Tage bis Google eine aktualisierte oder neue Seite crawlt. Hierbei spielen aber auch die Qualität, Aktualität, Schnelligkeit, Verlinkung der Website eine Rolle. Nachrichtenseiten werden übrigens häufiger gecrawlt.

SEO Beratung: Technische SEO

Internationales SEO ist Tei der Kategorie SEO Beratung Themen
SEO Beratung

Quellen und weiterführende Artikel

Der Autor: Robert Goese - SEO Beratung aus Berlin
Der Autor: Robert Goese - SEO Beratung aus Berlin

Über 19 Jahre SEO-Erfahrung in Agenturen wie IBM iX, bei Scholz & Friends, beim Bauer Verlag und als selbstständiger SEM-Agentur Inhaber. Von der lokalen Rechtsanwaltsseite über mittelständische Unternehmen bis zu hin zu Airbus, Siemens, VW Nutzfahrzeuge, Hyundai, AOK und viele deutsche Ministerien etc.

SEO ist für mich immer ganzheitlich und userzentriert. Sie spielt somit in allen digitalen Bereichen eine große Rolle. Von der Strategie, beim Design, im technischen Development und im Marketing. Hierdurch wird SEO nie langweilig und ich lerne jeden Tag noch etwas hinzu.

Mehr Infos
KAPAZITÄTEN ANFRAGEN
Sie wollen SEO-Beratung von einem langjährigen SEO-Experten?

Mehr Mobile SEO