Webseiten mobil optimieren, aber wie?

Website mobil optimieren

Inhalt des Artikels

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 nicht sorgen. 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 Inhalte der beiden Seiten nicht unterscheiden. Warum? Nimm 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 dan Duplicate Content. Daher braucht es die Canonisierung. 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 Designresourcen 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 Canonisierung 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 responisve. Sogar mit allem was so dazugehört. Responsive iFrames für YoutubeVideos, 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.
mobile webseite: responsive intenseo

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, was 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:

https://youtu.be/HVQHbfpqXHM

Links:

Das könnte dich auch interessieren:

Das könnte Dich auch interessieren:

Über intenSEO:
Die Webseite intenSEO kann dir dabei helfen, SEO zu lernen. Ich bin wirklich Profi-SEO seit mehr als 10 Jahren, aber ich biete keine SEO-Dienstleistungen für Dritte an. Mein InHouse-SEO-Job genügt mir völlig. Auch ist diese Webseite in erster Linie ein Testprojekt. Ich teste hier diverse SEO-Theorien und vergleiche Ergebnisse mit anderen meiner Webseiten. Ich nutze intenSEO für SEO-Studien und SEO-Tests. Von Backlinks aus diversen Quellen hierher, Pagespeed und seinem Impact, bis hinzu der Frage "Spielt die Rechtschreibung eine Rolle?". Trotzdem kann der Inhalt dir helfen - genauso wie ein paar kostenlose SEO-Tools!