Als einer der Väter für Responsive Content gilt hier mal wieder +Karl Kratz von → Karl Kratz Online Marketing, der dieses Thema auf der SMX 2014 in München ideal darstellte und hier sozusagen der ausschlaggebende Ideenpate ist.
Gehen wir also die einzelnen Punkte durch: Was ist Responsive Content, welche Vorteile und Nachteile haben wir dabei und wie kann man die Nachteile wieder beseitigen? Außerdem: Ist Responsive Content kein Cloaking und wie setze ich es technisch um?
Inhaltsverzeichnis
Responsive Content ≠ Responsive Design
Beim Responsive Design gilt der Augenmerk auf die optimale Ausgabe des Designs einer Website auf verschiedenen Plattformen, wie etwa Desktop PCs, iPads oder Smartphones. Dabei ändert sich der Content in der Regel aber nicht. Das bedeutet, dass ewig lange Texte sowohl auf dem Desktop PC ausgegeben werden, genauso wie auf dem Smartphone. Responsive Content ist also mitnichten mit Responsive Design gleichzusetzen.
Das Problem: Viele Smartphone-Nutzer wollen keine ewig langen Texte lesen. Sie wollen Informationen ggf. sehr kompakt erhalten, um relativ schnell Entscheidungen zu treffen, wie sie weiter vorgehen.
Responsive Content: Unterschiedliche Textausgabe auf verschiedenen Devices
Die Lösung: Auf Smartphones und anderen Geräten, die nur kleinere Auflösungen zulassen, geben wir auf der gleichen URL komprimierten Inhalt aus. Das bedeutet, dass wir die gleiche Menge an Informationen weitergeben, aber mit (deutlich) weniger Content für beispielsweise Smartphone-Nutzer. Das ist die Idee hinter Responsive Content.
An einem Beispiel: Die Idee hinter Responsive Content
Stellen wir uns vor, wir sind auf der Suche nach einem Hotel in einer Stadt. Und wir sind gerade unterwegs. Da wollen wir auf einem Samsung oder iPhone nicht wirklich alle Informationen lesen, sondern nur den wichtigen Teil erfahren. Während wir vielleicht auf dem PC alle Infos leserhaft und „blumig“ dargestellt bekommen wollen, interessieren uns auf dem Smartphone unterwegs nur harte Fakten.
Damit wir diese Infos erhalten, ist Responsive Content in dem Fall ideal geeignet. Denn wir lesen als User genau die gleichen Infos, müssen uns aber nicht durch blumige Textwüsten durchkämpfen (, die wir auf einem Desktop Rechner aber sehr wohl gerne lesen würden). Genau hier setzt Responsive Content an.
Vorteile des Responsive Content
- Der User auf dem Smartphone erhält die exakt gleichen Informationen wie auf dem PC. Nur halt in abgespeckter Version.
- Wenn „gut“ umgesetzt, kann es auf Smartphones deutlich weniger Ladezeit erwirken.
- Die exakt gleiche URL kann bei Suchmaschinen auch dann zu einem zweiten oder dritten Keyword sehr gut ranken, wenn sie für das aktuelle Device eigentlich nicht optimiert wurde.
- Das Linkbuilding für mehrere Keywords konzentiert sich auf eine Unterseite, nicht auf drei; bzw:
- es sind weniger SEO-Landingpages nötig
- Wir langweilen den Besucher nicht mit Textwüsten.
Nachteile von Responsive Content
- Der Smartphone-Benutzer sieht nicht sofort den gesamten Content, auch wenn er diesen gerne lesen wollte.
- Es sind gewisse Kniffe an HTML und CSS bzw. anderen technischen Raffinessen nötig, um Responsive Content umzusetzen.
- Es werden deutlich mehr redaktionelle Ressourcen benötigt, um auf mindestens 3 Devices anständige Ergebnisse zu liefern: Desktop PCs, Pads und Smartphones.
So kann man die technischen Nachteile des Responsive Content ausmerzen
Im Textbereich kann man auf unterschiedlichen Devices eine Art Schalter oder Dropdown-Liste zu Beginn des jeweiligen Inhalts anlegen, welche entweder die vollen Informationen anzeigt oder nur noch die komprimierte Version erscheinen lässt. So hat der Leser immer noch die Wahl, ob er auf einem Smartphone den vollen Desktop-PC-Inhalt oder auf dem PC nur die Kurzfassung lesen will.
Responsive Content ist kein Cloaking
In dem Artikel → Was ist Cloaking von @Matt Cutts aus dem Jahr 2011 wird ganz genau beschrieben, dass Responsive Content kein Cloaking sein kann. In dem Artikel heißt es:
[…] Ähnlich ist es, wenn jemand eure Webseite über ein Mobiltelefon abruft, zum Beispiel mit einem iPhone oder Android-Gerät. Dann stellt eure Webseite fest, dass es sich um einen ganz anderen User Agent handelt. Er besitzt ganz andere Funktionen. Es ist völlig in Ordnung, auf diesen User Agent zu reagieren und ihm eine kompaktere Version eurer Website zu liefern, die für den kleinen Bildschirm besser geeignet ist. […]
– Matt Cutts, 2011 –
Beim Cloaking ist es wichtig darauf zu achten, dass der Googlebot alleine eben keine anderen Inhalte erhält. Also dass man nicht speziell den Googlebot austricksen will. Und das ist nicht der Fall, denn alle mobilen User Agents erhalten ja kompaktere Inhalte.
Technische Umsetzung von Responsive Content
Mir fallen spontan zwei Wege ein, um Responsive Content umsetzen zu können.
- Per CSS und JavasciptSprich: Es wird geprüft, um welches Ausgabergerät (User Agent) es sich handelt. Alle Inhalte werden dabei mit geladen und lediglich mit CSS per display:none; ausgeblendet. Das hat den Vorteil, dass die Inhalte bei einem Schalter „Lass mich alle Inhalte sehen“ sofort sichtbar werden. Der Nachteil: Die Ladezeit für die jeweilige Unterseite wird länger, weil ja im Prinzip alle Inhalte (PC, Pads und Smartphone) geladen werden müssen.
- Per Media/jQuery oder AjaxSprich: Sobald sich die Auflösung ändert oder ich die entsprechende Auswahl ändere, werden die Inhalte entsprechend „nachgeladen“. Vorteil: Die Ladezeit ist ggf. deutlich schneller. Nachteil: Die sonstigen Inhalte werden nicht automatisch mitgeliefert.
Was ist besser? CSS und Javascript oder doch die Media Query (PHP) bzw. Ajax?
Nun, rein aus meiner Logik heraus wäre folgende Möglichkeit wohl die beste – für Google und den Google Bot und für unsere Rankings:
Alle Inhalte werden komplett geladen und per CSS und Javascript automatisch angepasst. Mit einer Art Dropdown-Option oder anderweitigen Einstellung kann der Besucher jederzeit den aktuellen Inhalt durch den jeweils anderen ersetzen. Also dass man die Bereiche per CSS display:none; zu einem diplay:block; umwandelt. Dabei müssen wir dem Gerät angeben, welche Inhalte es für dieses Device als erstes ausgeben soll.
Das hätte in diesem Beispiel m. M. nach den Vorteil, dass man z. B. den Inhalt des Desktop PCs so auf das eine Keyword trimmen kann und die Smartphone-Version auf eben auf ein weiteres Keyword optimiert. Und beide Inhalte könnten theoretisch zu beiden Keywords zu einer URL ranken, auch wenn es in der direkten Ansicht des jeweiligen Devices erst einmal nicht sichtlich erscheint.
Aus User-Sicht wäre die Frage by the way völlig unrelevant, da sie sich ihre „Inhalte“ selbst bestimmen können. Nach dem Motto: „Möchte ich die Kurzversion oder die Langversion lesen?“
Allerdings habe ich dazu noch keine realen Erfahrungswerte und auch noch keine Erfahrungswerte im Netz gefunden. Von dem her ist das natürlich reine Spekulation. Aber das Thema an sich finde ich so spannend, dass es sich lohnt es ausprobieren zu wollen. Und vielleicht gibt dieser Artikel einen kleinen Impuls an euch, es ebenfalls zu testen und eure Erfahrungen später hier zu posten. 🙂
Fazit: Responsive Content könnte in sehr geiles Thema für SEO werden
Da diese Session von Karl Kratz auf der SMX München 2014 ein absolutes Highlight war, ist es auch nicht verwunderlich, dass ich so positiv darüber berichte. Aber die Idee hat schon etwas an sich. Und es könnte die SEO Inhalte an sich revolutionieren. Ich würde und werde das Thema Responsive Content auf jeden Fall gerne testen, sobald ich kann. 🙂
Seit dem viele User mit einem Smartphone unsere Internetseite besuchen müssen wir alsbald reagieren. Mir macht eine vernünftige Navigation die größten Schwierigkeiten. Ein weiters Problem habe ich mit PHP. Leider sind meine Erfahrungen darin sehr begrenzt.
Ich fand Ihre Artikel sehr passend und Stimmig .Vor allen die aufgezeigten Vor und Nachteile einer respositiven Seite. Es bleibt schon eine Herausforderung alles unter einen Hut zu bekommen. Vor allen muss es ja auch schnell sein . Daher finde ich es unumgänglich ein das auf einem Mobiltelefon halt auch nicht alles sehen kann .Es kommt doch in erster Lnie auf die Information an
Pingback: Responsive Content im Responsive Design oder separate Mobil-URL?