Best Practices für mobile Websites und die Mobile-First-Indexierung

Google verwendet für die Indexierung und das Ranking hauptsächlich die mobile Version des Website-Inhalts, der mit dem Smartphone-Agent gecrawlt wurde. Dies wird als Mobile-First-Indexierung bezeichnet.

Eine mobile Version deiner Seiten ist deshalb zwar nicht zwingend erforderlich, damit deine Inhalte in die Ergebnisse der Google Suche aufgenommen werden können. Aber wir empfehlen sie trotzdem dringend. Diese Best Practices gelten für mobile Websites im Allgemeinen und, wie der Titel schon sagt, für die Mobile-First-Indexierung.

Damit deine Website für Nutzer optimal funktioniert, solltest du dich an den Best Practices orientieren, die wir in diesem Leitfaden erklären.

Für Mobilgeräte optimierte Website erstellen

Falls noch nicht geschehen, erstelle eine für Mobilgeräte optimierte Website, damit Nutzern, die deine Website über ein Smartphone besuchen, eine optimale Nutzerfreundlichkeit geboten wird. Es gibt drei Konfigurationen, mit denen du eine für Mobilgeräte optimierte Website erstellen kannst:

• Responsives Webdesign: stellt unabhängig vom verwendeten Gerät – Computer, Tablet, Mobilgerät oder nicht visueller Browser – denselben HTML-Code bereit, kann den Inhalt jedoch je nach Bildschirmgröße unterschiedlich anzeigen. Google empfiehlt responsives Webdesign, weil dieser Ansatz am einfachsten zu implementieren und zu verwalten ist.
• Dynamische Bereitstellung: greift unabhängig vom Gerät auf die gleiche URL zurück. Diese Konfiguration nutzt user-agent-Sniffing und den Vary: user-agent-HTTP-Antwortheader, um je nach Gerät unterschiedliche Versionen des HTML-Codes anzubieten.
• Separate URLs: stellt je nach Gerät unter verschiedenen URLs unterschiedlichen HTML-Code bereit. Wie bei der dynamischen Bereitstellung benötigt diese Konfiguration die HTTP-Header user-agent und Vary für die Weiterleitung der Nutzer zu der für das Gerät geeigneten Version der Website.

Die Informationen in diesem Leitfaden gelten nur für die Konfigurationen mit dynamischer Bereitstellung bzw. separaten URLs. Beim responsiven Webdesign sind die Inhalte und die Metadaten der mobilen und der Desktopversion der Seiten identisch.

Google muss auf deine Inhalte zugreifen und sie rendern können

Prüfe, ob Google auf die Inhalte und Ressourcen deiner mobilen Website zugreifen und diese rendern kann.

• Du solltest auf der mobilen Website und der Desktopwebsite dieselben robots-meta-Tags verwenden. Wird auf der mobilen Website ein anderes robots-meta-Tag verwendet (insbesondere noindex oder nofollow), kann Google deine Website unter Umständen nicht crawlen und indexieren, wenn für sie die Mobile-First-Indexierung aktiviert ist.
• Verwende für Hauptinhalte kein Lazy Loading nach Nutzerinteraktion. Google lädt keine Inhalte, die erst nach einer Nutzerinteraktion (z. B. Wischen, Klicken oder Tippen) geladen werden können. Stelle deshalb sicher, dass Lazy-Loading-Inhalte für Google sichtbar sind.
• Google muss deine Ressourcen crawlen können. Einige Ressourcen haben auf der mobilen Website eine andere URL als auf der Desktopwebsite. Wenn Google deine URLs crawlen soll, dann blockiere sie nicht mit der disallow-Regel.

Deine mobile Website und deine Website für Computer sollten inhaltsgleich sein

Selbst wenn eine Desktopseite und die entsprechende mobile Seite die gleichen Inhalte haben, können Unterschiede im DOM oder Layout dazu führen, dass Google die Inhalte als anders versteht. Wenn die Inhalte der Desktop- und der mobilen Version gleich sind, können aber beide Versionen anhand derselben Keywords eingestuft werden.

• Auf deiner mobilen Website sollten dieselben Inhalte wie auf deiner Desktopwebsite angezeigt werden. Wenn die mobile Website weniger Inhalte als die Desktopwebsite hat, solltest du die mobile Website so aktualisieren, dass der Hauptinhalt mit der Desktopwebsite übereinstimmt. Auf Mobilgeräten kannst du ein anderes Design wählen, um die Nutzerfreundlichkeit zu optimieren und beispielsweise Inhalte in Akkordeons oder Tabs zu verschieben. Achte nur darauf, dass der Inhalt mit dem der Desktopwebsite übereinstimmt, da fast die gesamte Indexierung auf deiner Website von der mobilen Website stammt.
• Verwende auf der mobilen Website dieselben klaren und aussagekräftigen Überschriften wie auf der Desktopwebsite.

Strukturierte Daten prüfen

Falls du auf deiner Website strukturierte Daten verwendest, solltest du prüfen, ob sie auf beiden Versionen deiner Website vorhanden sind. Folgende Punkte solltest du ebenfalls prüfen:

• Deine mobile Website und deine Desktopwebsite sollten dieselben strukturierten Daten haben. Wenn du priorisieren musst, welche Typen du in deiner mobilen Website einfügst, solltest du mit strukturierten Daten vom Typ Breadcrumb, Product und VideoObject beginnen.
• Verwende in strukturierten Daten die jeweils korrekten URLs. Prüfe, ob die URLs in den strukturierten Daten der mobilen Version auf die mobilen URLs aktualisiert wurden.
• Wenn du Data Highlighter verwendest, dann tagge mit dem Tool die Daten deiner mobilen Website. Wenn du strukturierte Daten mithilfe von Data Highlighter zur Verfügung stellst, überprüfe das Data Highlighter-Dashboard regelmäßig auf Extraktionsfehler.

Beide Versionen deiner Website sollten dieselben Metadaten enthalten

Achte darauf, dass das title-Element und die Meta-Beschreibung bei beiden Versionen deiner Website identisch sind.

Platzierung deiner Werbung prüfen

Wenn du Werbung falsch verwendest, kann sie das Ranking deiner mobilen Website beeinträchtigen. Beachte die Better Ads Standards, wenn du Werbung auf Mobilgeräten auslieferst. Beispielsweise kann Werbung oben auf der Seite zu viel Platz auf einem Mobilgerät einnehmen, was die Nutzung beeinträchtigt.

Visuelle Inhalte prüfen

Bilder prüfen

Die Bilder auf deiner mobilen Website sollten den Best Practices für Bilder entsprechen. Hier einige Empfehlungen:

• Wähle für deine Website Fotos in guter Qualität aus. Verwende auf der mobilen Website keine zu kleinen Bilder oder eine zu geringe Auflösung.
• Achte darauf, nur unterstützte Bildformate zu wählen. Verwende keine Formate oder Tags, die nicht unterstützt werden. Zum Beispiel unterstützt Google Bilder im SVG-Format, aber unsere Systeme können ein JPG-Bild im <image>-Tag innerhalb eines Inline-SVG nicht indexieren.
• Verwende keine URLs, die sich jedes Mal ändern, wenn auf der Seite Bilder geladen werden. Google kann deine Ressourcen nicht richtig verarbeiten und indexieren, wenn du dafür URLs verwendest, die sich ständig ändern.
• Die mobile Website sollte denselben Alt-Text für Bilder wie die Desktopwebsite enthalten. Verwende denselben beschreibenden Alt-Text für die Bilder auf deiner mobilen Website wie auf deiner Desktopwebsite.
• Die mobilen Seiteninhalte sollten dieselbe Qualität wie die Inhalte auf der Desktopwebsite haben. Wähle für die Bilder auf der mobilen Website dieselben Titel, Beschriftungen, Dateinamen und Texte wie auf der Desktopwebsite.

Videos prüfen

Die Videos auf deiner mobilen Website sollten den Best Practices für Videos entsprechen. Hier einige Empfehlungen:

• Verwende keine URLs, die sich jedes Mal ändern, wenn auf der Seite Videos geladen werden. Google kann deine Ressourcen nicht richtig verarbeiten und indexieren, wenn du dafür URLs verwendest, die sich ständig ändern.
• Wähle nur unterstützte Videoformate und versieh die Videos mit unterstützten Tags. Videos werden auf der Seite durch HTML-Tags identifiziert, z. B. <video>, <embed> oder <object>.
• Du solltest für deine mobile Website und deine Desktopwebsite dieselben strukturierten Videodaten verwenden. Weitere Informationen findest du im Abschnitt Strukturierte Daten prüfen.
• Platziere das Video an einer Stelle auf der Seite, die leicht zu finden ist, wenn du die Website auf einem Mobilgerät ansiehst. Beispielsweise kann es das Ranking des Videos beeinträchtigen, wenn Nutzer zu lange nach unten scrollen müssen, um das Video auf der mobilen Website zu finden.

Zusätzliche Best Practices für separate URLs

Wenn deine Website separate URLs für die Computer- und die Mobilversion einer Seite hat (auch als M-Dot-Website bezeichnet), kannst du dich an den folgenden zusätzlichen Best Practices orientieren:

• Der Status der Fehlerseite sollte sowohl auf der Desktopwebsite als auch auf der mobilen Website identisch sein. Wenn deine Desktopwebsite normale Inhalte bereitstellt und die mobile Website eine Fehlerseite ist, fehlt diese Seite im Index.
• Achte darauf, dass die mobile Version keine Fragment-URLs enthält. Der Fragmentteil der URL befindet sich an ihrem Ende und beginnt mit #. In den meisten Fällen sind Fragment-URLs nicht indexierbar. Diese Seiten fehlen im Index, nachdem für deine Domain die Mobile-First-Indexierung aktiviert wurde.
• Achte darauf, dass jede Desktopversion, die unterschiedliche Inhalte bietet, eine gleichwertige mobile Version hat. Wenn die URLs unterschiedlicher Desktopversionen zur selben URL für Mobilgeräte weiterleiten, z. B. auf die Startseite, fehlen alle diese Seiten im Index, nachdem für die Domain die Mobile-First-Indexierung aktiviert wurde.
• Überprüfe beide Versionen deiner Website in der Search Console und achte darauf, dass du bei beiden Zugriff auf Daten und Nachrichten hast. Es kann für deine Website zu einer Datenverschiebung kommen, wenn Google für sie zur Mobile-First-Indexierung wechselt.

• Prüfe hreflang-Links für separate URLs. Wenn du rel=hreflang-link-Elemente für die Internationalisierung verwendest, solltest du die Verknüpfungen zu mobilen und zu Computer-URLs separat herstellen. Das heißt: Das hreflang-Element deiner mobilen URLs muss auf mobile URLs und das hreflang-Element deiner Computer-URL auf Computer-URLs verweisen.

  Hier siehst du ein Beispiel für die Verwendung von hreflang für die Startseite einer Website mit separaten URLs für Mobilgeräte und Computer.

  Mobilgeräte

  In diesem Beispiel lautet die URL der mobilen Website https://m.example.com/.

  <link rel="canonical" href="https://example.com/">
  <link rel="alternate" hreflang="es" href="https://m.example.com/es/">
  <link rel="alternate" hreflang="fr" href="https://m.example.com/fr/">
  <link rel="alternate" hreflang="de" href="https://m.example.com/de/">
  <link rel="alternate" hreflang="th" href="https://m.example.com/th/">

  Computer

  In diesem Beispiel lautet die URL der Desktopwebsite https://example.com/.

  <link rel="canonical" href="https://example.com/">
  <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">
  <link rel="alternate" hreflang="es" href="https://example.com/es/">
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/">
  <link rel="alternate" hreflang="de" href="https://example.com/de/">
  <link rel="alternate" hreflang="th" href="https://example.com/th/">

• Deine mobile Website sollte genügend Kapazität haben, um einen möglichen Anstieg der Crawling-Frequenz auf der mobilen Version deiner Website verarbeiten zu können.
• Deine robots.txt-Regeln sollten für beide Versionen deiner Website wie beabsichtigt funktionieren. In der robots.txt-Datei kannst du angeben, welche Teile einer Website gecrawlt werden dürfen und welche nicht. In den meisten Fällen empfiehlt es sich, die gleichen robots.txt-Regeln für die mobile und die Desktopversion einer Website zu verwenden.

• Verwende die richtigen rel=canonical- und rel=alternate-link-Elemente auf deiner mobilen Website und deiner Desktopwebsite. Die Desktop-URL ist immer die kanonische URL und die mobile Version die alternative URL.

  Hier ist ein Beispiel für rel=canonical und rel=alternate bei einer Website mit separaten URLs.

  Mobilgeräte

  In diesem Beispiel lautet die URL der mobilen Website https://m.example.com/ und enthält ein link-Element, das auf die Desktop-URL als kanonische URL verweist.

  <link rel="canonical" href="https://example.com/">

  Computer

  In diesem Beispiel lautet die URL der Desktopwebsite https://example.com/ und enthält ein link-Element, das auf sich selbst als kanonische URL verweist, gefolgt von einem weiteren link-Element, das auf die mobile Version als alternative Version dieser URL verweist.

  <link rel="canonical" href="https://example.com/">
  <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">

Fehlerbehebung

Im Folgenden findest du eine Liste der häufigsten Fehler, die verhindern können, dass für Websites die Mobile-First-Indexierung aktiviert wird, oder dazu führen, dass eine Website im Ranking zurückfällt, nachdem die Mobile-First-Indexierung aktiviert wurde. Falls a) für deine Website die Mobile-First-Indexierung noch nicht aktiviert wurde oder b) deine Website seit der Aktivierung der Mobile-First-Indexierung im Ranking zurückgefallen ist oder c) in der Search Console eine Nachricht für dich erscheint, dann kannst du in der nachfolgenden Liste häufiger Fehler nachsehen und eventuell vorhandene Fehler beheben.

Fehler
Fehlende strukturierte Daten	error Ursache des Problems: Die mobile Seite verfügt nicht über das gleiche Markup für strukturierte Daten wie die Desktopseite. done Problem beheben Prüfe, ob beide Versionen deiner Website – Desktop und mobil – strukturierte Daten enthalten. Deine mobile Website und deine Desktopwebsite sollten dieselben strukturierten Daten haben. Verwende in strukturierten Daten die jeweils korrekten URLs. Prüfe, ob die URLs in den strukturierten Daten der mobilen Version auf die mobilen URLs aktualisiert wurden. Prüfe deine strukturierten Daten auf Extraktionsfehler. Wenn du strukturierte Daten mithilfe von Data Highlighter zur Verfügung stellst, dann prüfe das Data Highlighter-Dashboard regelmäßig auf Extraktionsfehler. Teste mit dem URL-Prüftool, ob der Inhalt auf der gerenderten Seite sichtbar ist. Die gerenderte Seite ist die Version, die auch Google sieht.
noindex-Tag auf Seiten	error Ursache des Problems: Ein noindex-Tag verhindert das Indexieren einer mobilen Seite. done Problem beheben: Du solltest auf der mobilen Website und der Desktopwebsite dieselben robots-meta-Tags verwenden. Auf der mobilen Seite solltest du nicht das noindex-Tag verwenden. Andernfalls indexiert Google die Seite nicht, wenn für deine Website die Mobile-First-Indexierung aktiviert wird.
Fehlendes Bild	error Ursache des Problems: Auf der mobilen Seite fehlen wichtige Bilder der Desktopwebsite. done Problem beheben Auf deiner mobilen Website sollten dieselben Inhalte wie auf deiner Desktopwebsite angezeigt werden. Wenn die mobile Website weniger Inhalte als die Desktopwebsite hat, solltest du die mobile Website so aktualisieren, dass der Hauptinhalt mit der Desktopwebsite übereinstimmt. Nur die Inhalte, die auf der mobilen Website angezeigt werden, werden für die Indexierung verwendet. Du solltest auf der mobilen Website und der Desktopwebsite dieselben robots-meta-Tags verwenden. Auf der mobilen Seite solltest du nicht das nofollow-Tag verwenden. Andernfalls crawlt und indexiert Google die Bilder auf deiner Seite nicht, wenn für deine Website die Mobile-First-Indexierung aktiviert wird. Wähle nur unterstützte Bildformate und Tags für die Bilder. Zum Beispiel unterstützt Google Bilder im SVG-Format, aber unsere Systeme können ein JPG-Bild im <image>-Tag innerhalb eines Inline-SVG nicht indexieren. Verwende für Hauptinhalte kein Lazy Loading nach Nutzerinteraktion. Google lädt keine Inhalte, die erst nach einer Nutzerinteraktion (z. B. Wischen, Klicken oder Tippen) geladen werden können. Stelle deshalb sicher, dass Lazy-Loading-Inhalte für Google sichtbar sind.
Blockiertes Bild	error Ursache des Problems: robots.txt blockiert ein wichtiges Bild auf der mobilen Seite. done Problem beheben: Erlaube Google, deine Ressourcen zu crawlen. Einige Bilder haben auf der mobilen Website andere URLs als auf der Desktopwebsite. Wenn Google deine URLs crawlen soll, dann blockiere sie nicht mit der disallow-Regel.
Schlechte Bildqualität	error Ursache des Problems: Ein wichtiges Bild erscheint auf der mobilen Seite zu klein oder in zu geringer Auflösung. done Problem beheben: Verwende Bilder in hoher Qualität. Verwende auf der mobilen Website keine zu kleinen Bilder oder eine zu geringe Auflösung.
Fehlender Alt-Text	error Ursache des Problems: Bei einem wichtigen Bild auf der mobilen Seite fehlt der Alt-Text. done Problem beheben: Verwende für die Bilder auf deiner mobilen Website denselben Alt-Text wie auf deiner Desktopwebsite.
Fehlender Seitentitel	error Ursache des Problems: Bei einer mobilen Seite fehlt der Titel. done Problem beheben: Die Titel und Meta-Beschreibungen beider Websiteversionen müssen übereinstimmen.
Fehlende Meta-Beschreibung	error Ursache des Problems: Auf einer mobilen Webseite fehlt die Meta-Beschreibung. done Problem beheben: Die Titel und Meta-Beschreibungen beider Websiteversionen müssen übereinstimmen.
Mobile URL ist eine Fehlerseite	error Ursache des Problems: Die mobile Website ist eine Fehlerseite. done Problem beheben: Der Status der Fehlerseite auf der Desktopwebsite und auf der mobilen Website sollte identisch sein. Wenn deine Desktopwebsite normale Inhalte bereitstellt und die mobile Website eine Fehlerseite ist, fehlt diese Seite im Index.
Mobile URL enthält ein Anchor-Fragment	error Ursache des Problems: Die mobile URL enthält ein Anchor-Fragment. Google kann URLs mit Anchor-Fragmenten nicht indexieren. done Problem beheben: Die mobile Version darf keine Fragment-URLs enthalten. In den meisten Fällen sind Fragment-URLs nicht indexierbar. Diese Seiten fehlen im Index, nachdem für deine Domain die Mobile-First-Indexierung aktiviert wurde.
Mobile Seite von robots.txt blockiert	error Ursache des Problems: Eine robots.txt-Regel blockiert die mobile Seite. done Problem beheben: Prüfe, ob die robots.txt-Regeln und robots-meta-Tags für beide Versionen deiner Website wie beabsichtigt funktionieren. Verwende dieselben robots.txt-Regeln für die mobile und die Desktopversion deiner Website.
Duplizierte Verweise auf eine mobile Zielseite	error Ursache des Problems: Mehrere Desktopseiten verweisen auf dieselbe mobile Seite. done Problem beheben: Achte darauf, dass Desktopseiten, die unterschiedliche Inhalte bereitstellen, gleichwertige mobile Versionen haben. Wenn verschiedene URLs der Desktopversion zur selben URL für Mobilgeräte weiterleiten, z. B. auf die Startseite, fehlen alle diese Seiten im Index, nachdem für die Domain die Mobile-First-Indexierung aktiviert wurde.
Website für Computer leitet auf mobile Startseite weiter	error Ursache des Problems: Die meisten oder alle Seiten deiner Website für Computer leiten auf die mobile Startseite weiter. done Problem beheben: Prüfe, ob die Desktopversion eine gleichwertige mobile Version hat. Wenn verschiedene URLs der Desktopversion zur Startseite für Mobilgeräte weiterleiten, fehlen alle diese Seiten im Index, nachdem für die Domain die Mobile First-Indexierung aktiviert wurde.
Probleme mit der Qualität der Seite	error Ursache des Problems: Bei der mobilen Seite treten Probleme mit Werbung, fehlendem Inhalt, Titeln oder Beschreibungen von Bildern auf. done Problem beheben: Wenn du Werbung falsch verwendest, kann sie das Ranking deiner mobilen Website beeinträchtigen. Beachte die Better Ads Standards, wenn du Werbung auf Mobilgeräten auslieferst. Auf deiner mobilen Website sollten dieselben Inhalte wie auf deiner Desktopwebsite angezeigt werden. Wenn die mobile Website weniger Inhalte als die Desktopwebsite hat, solltest du die mobile Website so aktualisieren, dass der Hauptinhalt mit der Desktopwebsite übereinstimmt. Nur die Inhalte, die auf der mobilen Website angezeigt werden, werden für die Indexierung verwendet. Verwende auf der mobilen Website dieselben klaren und aussagekräftigen Überschriften wie auf der Desktopwebsite. Wähle für die Bilder auf der mobilen Website dieselben Titel, Beschriftungen, Dateinamen und Texte wie auf der Desktopwebsite.
Videoprobleme	error Ursache des Problems: Die mobile Seite enthält ein Video, das nur sehr langsam lädt, dessen Format nicht unterstützt wird, das sich an einer schwer zu findenden Position befindet oder für das keine Meta-Beschreibungen existieren. done Problem beheben: Verwende nur unterstützte Videoformate und versieh die Videos mit unterstützten Tags. Videos werden auf der Seite durch HTML-Tags identifiziert, z. B. <video>, <embed> oder <object>. Verwende für Hauptinhalte kein Lazy Loading nach Nutzerinteraktion. Google lädt keine Inhalte, die erst nach einer Nutzerinteraktion (z. B. Wischen, Klicken oder Tippen) geladen werden können. Sorge daher dafür, dass Google Lazy-Load-Inhalte sehen kann. Platziere das Video an einer Stelle auf deiner mobilen Website, an der es leicht zu finden ist. Beispielsweise kann es das Ranking des Videos beeinträchtigen, wenn Nutzer zu lange nach unten scrollen müssen, um das Video auf der mobilen Website zu finden.
Probleme mit der Hostlast	error Ursache des Problems: Einige Hosts haben nicht genügend Hostlast. done Problem beheben: Die mobile Version deiner Website sollte genügend Kapazität haben, um einen möglichen Anstieg der Crawling-Frequenz verarbeiten zu können.