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

Google verwendet für die Indexierung und das Ranking 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 die 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 URL-Fragmente enthält. Der Fragmentteil der URL befindet sich an ihrem Ende und beginnt mit #. In den meisten Fällen sind URL-Fragmente 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.