Seit dem 21. April 2015 – dem #mobilegeddon – ist die Optimierung einer Website für Handys, Smartphones und Tablets ein Rankingfaktor bei Google.
Natürlich nur für mobile Suchanfragen. Wer nicht viel Wert auf die mobilen Besucher legt (was bei dem Wachstum sehr komisch wäre), braucht sich keine Sorgen zu machen. Alle anderen dürfen hier lesen, was es mit der mobilen Optimierung von Webseiten auf sich hat, und weitere Tipps zur Mobile-SEO einholen.
Seit 2018 gibt es den Mobile-First-Index und damit ist auch für das Desktopranking deiner Website, ihr mobiles Ranking wichtig! Ohne eine mobile Website geht nichts und Google warnt seit 2012! Nun bitte: Endlich die Website mobil optimieren!
Es gibt genau zwei Möglichkeiten, Webseiten mobil zu optimieren.
Weg Nummer 1: Eine mobile Weiterleitung einrichten
Auch wenn Google Responsive Design vorzieht, es gibt die Möglichkeit der Weiterleitung auf eine andere Domain oder andere Webseite. Ihr fragt also am Anfgang auf Eurer Startseite ab: „Bist du ein Smartphone oder Tablet-PC – bzw. ist deine Auflösung klein?“
Lautet die Antwort nein, dann tut Ihr nix. Lautet die Antwort ja, dann leitet Ihr den Besucher auf eine andere mobil optimierte Domain um.
Zwei Dinge sind zu beachten:
Zum Ersten sollte sich der Inhalt der beiden Seiten nicht unterscheiden. Warum? Nehmen wir an, die Seite wird bei Google zu einem Begriff gefunden, den die mobile Version gar nicht mehr erwähnt…. Das geht nicht!
Daraus ergibt sich Problem Nummer zwei: Es sind zwei Seiten mit sehr identischem Inhalt, klar, das riecht dann nach Duplicate Content. Daher braucht es die Kanonisierung Das bedeutet, die Desktopwebseite sollte dem Google-Bot sagen, dass es eine Version für mobile Geräte gibt, so:
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://mobil.example.com/page-1" >
Auf der mobilen Seite braucht es dann den Canonical-Tag, der dem Bot sagt: Für den Inhalt ist die Desktopwebseite verantwortlich. Das geht so:
<link rel="canonical" href="http://www.example.com/page-1" >
Achtung! Jede einzelne Unterseite benötigt diesen Tag, auf der mobilen und Desktop Version. Sie kommen in den Head Bereich in dem Auch der Title-Tag oder die Meta-Description stehen. In diesem Beipspiel gehen wir also davon aus, dass bei einer Auflösung von mehr als 640 Pixeln, die normale Webseite angezeigt wird (www.example.com). Bei eine niedrigeren Auflösung die mobile Version auf der Subdomain mobile.example.com. Die Weiterleitung und die Tags müssen auf der Startseite und allen Unterseiten eingerichtet werden! Das war Version eins der mobilen SEO, aber Google empfiehlt ein Responsive Design verwenden.
Mobile Weiterleitung? Mobile Sitemap!
Wer sich für die mobile Weiterleitung entschieden hat, der benötigt eine Sitemap mit den Angaben zu den mobilen Versionen einer jeden URL.
Das klingt erstmal sehr aufregend, ist aber gar nicht so schwer. Ihr sucht Eure Sitemap.xml, die sollte so aussehen:
<?xml version="1.0" encoding="utf-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://deinedomain.de/seite1</loc> <lastmod>2015-04-21T19:34:00+01:00</lastmod> <!-- optionale zusätzliche Tags tags --> </url> <url> ... </url> </urlset>
Zu dieser Sitemap fügt Ihr entweder optimale Tags hinzu, um in einer Sitemap beide Versionen anzugeben, das geht so:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://deinedomain.de/seite1</loc> <lastmod>2015-04-21T19:34:00+01:00</lastmod> <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://mobile.deinedomain.de/seite1" /> </url> <url> ... </url> </urlset>
Diese Sitemap speichert Ihr (dort, wo Ihr sie herhabt) im Hauptverzeichnis der Website, wo auch die Indexseite oder die robots.txt liegt.
Nicht vergessen, die Sitemap auch (via Google Search Console) an Google zu senden und zu testen!
Die zweite Möglichkeit: 2 Sitemaps
Zwei Sitemaps zu verwenden ginge auch, aber die zweite Sitemap ist nicht ganz normal. Es muss eine mobile Sitemap sein, die sieht so aus:
<?xml version="1.0" encoding="UTF-8" ?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"> <url> <loc>http://mobile.deinedomain.de/seite1</loc> <mobile:mobile/> </url> </urlset>
Auch diese muss bei der Search Console angemeldet werden!
Weg Nummer 2: Responsive Design
Dieser Blog zum Beispiel ist ein Responsive Design. Der Inhalt meiner Webseite passt sich an Eure Auflösung an. Schiebt das Fenster kleiner, es erscheinen keine Scrollbalken am unteren Rand, weil die Website Eure Bildschirmbreite nie überschreitet Der Inhalt (Text, Bild, Video) bleibt dabei absolut unverändert. Vielleicht ändert sich die Schriftgröße, ab einem bestimmten Punkt ändert sich das Menü – nun müsstet Ihr es „aufklicken“, aber der Inhalt bleibt gleich. Idealerweise wird nichts ausgeblendet, was wichtig ist! Ganz wichtig ist, dass der Google-Bot hier Zugriff auf Eure Designressourcen hat. Also nicht den Zugriff auf die JavaScript- oder CSS-Ressourcen verweigern (also in der robots.txt verbieten), der Google-Bot muss es sehen dürfen. Ob Ihr Ressourcen blockiert, das könnt Ihr hier checken.
Der Vorteil? Es gibt nur eine Quelle – Aktualisierungen sind leichter, Umbauten sind leichter, Änderungen sind leichter. Es ist keine Kanonisierung nötig und Fehler wegen des möglichen Duplicate Contents entstehen nicht – zumindest nicht aus diesem Grund.
Wie bekomme ich ein responsive Design
Hier ist viel Wissen in HTML, PHP und JavaScript nötig, aber ich habe auch eine gute Nachricht: Für die meisten Content-Management-Systeme (CMS), also WordPress, Joomla und Co., gibt es responsive Themes, sogar kostenfrei! Bei WordPress sind fast alle aktuellen Themes responsive Sogar mit allem, was so dazugehört. Responsive iFrames für YouTube-Videos, Google-Maps-Snippets und und und. Testet es einfach in Eurer Theme-Vorschau!
Teste deine mobile Optimierung
Am Ende (ob Responsive Design oder Weiterleitung) kannst du deine mobile Optimierung natürlich auch testen lassen. Wo ginge das besser als bei Google? Daher bietet Google hier den passenden Test.
Fazit: Willst du mobil gefunden werden, dann solltest du mobil optimiert sein.
Entweder mithilfe der Abfrage des Screens, der Weiterleitung auf eine andere Domain mit eigener CSS und der passenden Canonisierung. Oder, wie es Google vorschlägt, mit einem Responsive Design, das mehrere Vorteile bietet. Aber man muss ein wikrlich gutes Responsive Design verwenden, eine mobile Version für den Besucher, denn sonst ist dieser unzufrieden und es bringt nicht den gewünschten Effekt.
Matt Cutts zur mobilen Optimierung:
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Links:
- Google Mobile Friendly Test (Google)
- #mobilegeddon (Searchengineland)
- Blockierte Ressourcen Checken: in der Search Console (Google)
- Mobile SEO 2.0 (intern)
