SEO konformer Responsive Content: Werden asymmetrisch nachgeladene Texte von Google gefunden?

published 16.01.2014 · updatet 27.02.2014 · Solange man im Responsive Design den Inhalt unverändert für Smallscreen und Bigscreen ausspielt, ist alles in Ordnung. Was aber passiert, wenn ich Content für Smallscreen weglassen und/oder für Bigscreen zusätzlichen Content anzeigen will? Findet Google diesen "asymmetrisch" nachgeladenen Responsive Content? Welche technischen Lösungen kann der Googlebot crawlen? Werden Texte, die ich nur für Smallscreen Devices ausspiele, auch nur in der mobilen Google Suche angezeigt? Weil ich auf diese Fragen keine Antworten finden konnte, hab ich selbst herumgetestet.

Testaufbau

Textblöcke, die ein einzigartiges Keyword enthalten, werden auf verschiedene Arten nachgeladen und ausgeblendet. Ich verwende erfundene Wörter, die Google garantiert noch nicht kennt. Wenn ich diese Wörter bei Google finde, konnte Google meinen Text lesen und die technische Umsetzung ist crawlbar. Natürlich verlinke ich auch nicht mit den Keywords auf die Seiten (auch wenn das so aussehen mag!). Dieser Testaufbau war nicht meine Idee, sondern die von Markus Walter (der viele gute Ideen hat). Danke, Markus!

Wenn es um erfundene Wörter geht, bieten sich Fabelwesen an, deshalb habe ich für den Test einen kleinen Blog über die (in Bayern weitverbreitete) Wolpertinger-Jagd gebaut. Lasst Euch nicht durch die professionelle Niedlichkeit der Test-Seiten ablenken!

Nicht Teil des Tests

Nicht geprüft habe ich die von Google empfohlene Ajax-Lösung und die z.B. von Brad Frost beschriebene Lösung, einen Fallback-Link anzuzeigen, wenn der Content selbst für bestimmte Größen nicht gezeigt wird. Beides ist klar besprochen, prima dokumentiert und muss funktionieren. Mir geht es um einfache Javascript- / jQuery-Lösungen und um die Frage, was passiert, wenn ich für Responsive Content eben keinen Fallback-Link setze.

Ergebnis

Crawlability von nachgeladenen und ausgeblendeten Texten

Google prüft und erkennt Text in allen eingebundenen Javascript-Dateien und per Ajax eingespielten Html-Fragmenten. Der darin enthaltene Text wird zum Text der Originalseite assoziiert. Das heißt, die Seite wird auch unter Keywords gefunden, die in diesen eingebundenen Htmls oder Javascripten stehen. Solange alle angebundenen Dateien für den Bot zugänglich sind (also nicht z.B. per "robots.txt" oder Meta Robots-Tag gesperrt sind), ist es egal, ob auf die Scripte / Fragmente direkt im Dokument verwiesen wird oder über ein externes Javascript. Es war auch egal, ob Scripte direkt im <head> oder asynchron über dem Footer eingebunden waren. (Im extremsten Fall habe ich ein externes Javascript (nicht-sprechend benannt) asynchron per Javascript in die Seite eingebunden und darüber ein Html-Fragment geladen. Google konnte auch den Text aus diesem Fragment lesen.) Alle Details des Tests findet Ihr weiter unten.

Bewertung & Empfehlung

Man kann (aus SEO Crawlability-Sicht) Responsive Content sorgenfrei asymmetrisch (also nur für Smallscreen oder Bigscreen) ausblenden oder nachladen. Das Dogma, wichtige Inhalte nicht per Javascript auszuspielen, scheint veraltet zu sein. Ein Fallback-Link für nachgeladenen Text ist (wenn es um die Crawlability geht) nicht zwingend nötig.

Responsive Content in den Google-Such-Ergebnissen

Ich konnte keinen Fall feststellen, in dem Google die Regeln der Ausspielung auf meinen Testseiten bei der Ausgabe in den Suchergebnissen (für diese Texte) berücksichtigt hat. Scheinbar ist es Google egal, für welche Devices, Auflösungen oder Breiten wir Texte in einer Seite nachladen oder ausblenden. Wenn Google den Text finden kann, wird die Seite für diesen Text in der mobilen Google Suche und in der Desktop-Suche als Ergebnis angezeigt. Google zeigt das Ergebnis auch dann an, wenn der User mit einem Gerät zugreift, das den Textblock sicher nicht sehen kann. (Weil der Text z.B. erst dann nachgeladen wird, wenn die Breite des Browserfensters größer ist als 800px, aber das Device des Users Inhalt maximal in einer Breite von 640px zeigen kann.)

Bewertung & Empfehlung

Weil Google bei der Anzeige seiner Suchergebnisse nicht prüft, welche ausgeblendeten / nachgeladenen Texte aus unseren Seiten für den User auch tatsächlich zu sehen sein werden, sollte man selbst darauf achten, dass wirklich wichtige Texte durchgängig angezeigt werden. (Oder man setzt halt doch wieder einen Fallback-Link.)

Google findet Text aus CSS nicht

Eine Feststellung am Rande ist, dass Google auf der Suche nach Text (und nur dabei!) CSS-Dateien ignoriert. Text, der aus einer CSS-Datei z.B. per #foo:before { content: 'Hier steht wahnsinnig viel Text'; }) in die Seite geschrieben wird (egal, ob direkt im Header oder asynchron per Javascript), war über Google nicht zu finden.

Bewertung & Empfehlung

Als ich wusste, dass Google Text im CSS nicht erkennt, habe ich die Link-Texte auf die Testseiten per CSS eingespielt. (Eignet sich also irgendwie zum Maskieren.) Ich habe die Crawlbarkeit von CSS nur mitgetestet, weil man z.B. für Bigscreen Button-Text aus dem CSS anzeigen könnte. Große Textmengen per CSS in eine Seite zu schreiben, geht zwar (und kann per Media Query gemacht werden), ist aber eine blöde Idee, weil der eingefügte Text auch sonst nicht zugänglich ist (z.B. im Browser nicht markiert werden kann).

Der Test im Detail

BigScreen-Content per Javascript aus html-Fragment nachladen

Aufbau

Text mit dem Keyword wird per jQuery (Script steht voll lesebar im Html der Seite) aus einer (sonst nicht verlinkten) Html-Datei (in einen leeren <div>)geladen, wenn die Breite des Browserfensters größer ist als 800px:

<script type="text/javascript">
if( $(window).width() >= 800) { $("#more").load("wolpertinger-fangen-2b.htm") }
</script>

Ergebnis

Google hat den Text aus dem externen wolpertinger-fangen-2b.htm gelesen, ordnet ihn der eigentlichen Seite /wolpertinger-fangen-2.htm zu und zeigt in der mobilen und Desktop-Suche die Seite als Ergebnis für das Keyword an. Google zeigt das Ergebnis auch dann an, wenn mit einem Gerät zugegriffen wird, das den Textblock sicher nicht sehen kann (weil die Breite des Browserfensters kleiner ist als 800px). Nicht getestet: Man sollte vielleicht noch testen ob Angaben in <meta name="viewport"> eine Rolle spielen.

Variante

Das Html-Fragment wird in einem externen Javascript referenziert, das asynchron per Javascript eingebunden ist. Gleiches Ergebnis.

BigScreen-Content aus einem externem Javascript nachladen

Aufbau

Text mit dem Keyword wird per jQuery aus einem externen Javascript (in einen leeren <div>) geladen, wenn die Breite des Browserfensters größer ist als 800px:
if ($(window).width() >= 800) { $("#more").text("Hier steht der Text mit dem Keyword") }
Das Script liegt extern und ist absichtlich nicht sprechend benannt:
<script type="text/javascript" src="js/beatify.js"></script>

Ergebnis

Google hat den Text aus dem externen Javascript /js/beatify.js gelesen, ordnet ihn der eigentlichen Seite /wolpertinger-fangen-4.htm zu und zeigt in der mobilen und Desktop-Suche die Seite als Ergebnis für das Keyword an. Google zeigt das Ergebnis auch dann an, wenn mit einem Gerät zugegriffen wird, das den Textblock sicher nicht sehen kann (weil die Breite des Browserfensters kleiner ist als 800px).

Small Screen- Content per Javascript ausblenden

Aufbau

Text mit dem Keyword steht in der Seite und wird per jQuery (Script steht voll lesebar im Html der Seite) ausgeblendet, wenn die Breite des Browserfensters kleiner ist als 460px:
<script type="text/javascript">if( $(window).width() <= 460) { $("#more").remove() }</script>

Ergebnis

Google kann den ausgeblendeten Text lesen und zeigt ihn in der mobilen und Desktop-Suche die Seite als Ergebnis für das Keyword an. Google zeigt das Ergebnis auch dann an, wenn mit einem Gerät zugegriffen wird, das den Textblock sicher nicht sehen kann (weil die Breite des Browserfensters kleiner ist als 460px).

Text per CSS in die Seite schreiben

Aufbau

Text mit dem Keyword wird per externes CSS in die Seite eingefügt:
#second:before { content: 'Hier steht der Text mit dem Keyword'; }
Das externe CSS wird asynchron per jQuery geladen:

<script type="text/javascript">
(function () {
var stylesheet = document.createElement('link');
stylesheet.type = 'text/css';
stylesheet.href = 'css/screen.css';
stylesheet.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
})();
</script>

Auf eine zusätzliche Noscript-Einbindung wird verzichtet.

Ergebnis

Das Test-Keyword wurde bei Google nicht gefunden.

Variante

Das externe CSS wird "ganz normal" im <head> direkt referenziert. Gleiches Ergebnis.

Text per JSON in die Seite schreiben

Aufbau

Text mit dem Keyword wird per externem Javascript /acessery.js aus der (sonst nicht verlinkten) externen JSON-Datei /acessery.json (in einen leeren <div>) geladen, wenn die Breite des Browserfensters größer ist als 800px:

$.getJSON("js/acessery.json", function(json) {
if ($(window).width() >= 800) { $('#more').append(json.wolpertinger) }});

Das Script liegt extern und wird asynchron per jQuery geladen:

<script type="text/javascript">
(function () {
var resource = document.createElement('script');
resource.src = "js/acessery.js";
var script = document.getElementsByTagName('script')[0];
script.parentNode.insertBefore(resource, script);
})();
</script>

Ergebnis

Obwohl John Mueller auf Stackoverflow warnt "If all of the content is only accessible through JSON feeds, then I think you will have to make some bigger changes if you want that content to be accessible through search results." konnte Google den Text aus der externen JSON-Datei /acessery.js lesen und zeigt ihn in der mobilen und Desktop-Suche die Seite als Ergebnis für das Keyword an. Google zeigt das Ergebnis auch dann an, wenn mit einem Gerät zugegriffen wird, das den Textblock sicher nicht sehen kann (weil die Breite des Browserfensters kleiner ist als 800px).



Der Autor :

Mein Name ist Stefan Weiss. Seit 2002 entwickle und optimiere ich CMS-basierte high-performance Portale und Online Produkte. In dieser Zeit habe ich viele Aspekte der Online Produktentwicklung kennengelernt. Ich lebe und arbeite in München. In meinem UX Blog schreibe ich über die Online Produktentwicklung mit Schwerpunkten auf Design, Informationsarchitektur und Online Werbung.