AJAX-gestützte Websites mit guter Zugänglichkeit entwerfen

Viele Websiteinhaber haben die Vorteile von AJAX zur Verbesserung ihrer Websites für Nutzer entdeckt und erstellen dynamische Seiten, die als funktionsreiche Webanwendungen agieren. Aber wie durch Flash kann auch durch AJAX bei fehlerhafter Implementierung die Indexierung einer Website durch Suchmaschinen erschwert werden. Es muss sichergestellt werden, dass der Inhalt von Suchmaschinen-Robots gesehen wird und dass die Robots die Navigation erkennen und dieser folgen können.

Die Struktur von HTML-Links bereitet dem Googlebot keinerlei Probleme. Auf Seiten, die JavaScript zur Navigation verwenden, kann es aber ein wenig komplizierter werden. Wir arbeiten an der besseren Verarbeitung von JavaScript. Wenn du eine Website entwickeln möchtest, die problemlos von Google und anderen Suchmaschinen gecrawlt werden kann, sind HTML-Links zu deinen Inhalten aber immer noch die sicherste Methode.

Zugänglichkeit bei der Websiteentwicklung berücksichtigen

Wir empfehlen Websiteinhabern, Seiten für Nutzer zu erstellen, nicht nur für Suchmaschinen. Berücksichtige beim Entwerfen deiner AJAX-Website die Bedürfnisse der Nutzer. Eventuell verwenden nicht alle einen JavaScript-fähigen Browser, wie beispielsweise Nutzer mit Screenreadern oder Mobilgeräten. Du kannst die Zugänglichkeit deiner Website ganz einfach testen: Deaktiviere dazu JavaScript und sieh dir dann eine Vorschau in deinem Browser an oder verwende einen ausschließlich textbasierten Browser wie Lynx. Wenn du dir eine Website nur als Text ansiehst, fallen dir auch eher andere Inhalte auf, die für den Googlebot möglicherweise schwer zu sehen sind, wie in Bilder oder Flash-Elemente eingebetteter Text.

iFrames vermeiden oder deren Inhalte separat verlinken

In iFrames angezeigte Inhalte können nicht indexiert werden und erscheinen nicht in den Suchergebnissen von Google. Wir empfehlen, Inhalte nicht mithilfe von iFrames anzuzeigen. Falls du iFrames verwendest, achte darauf, dass du zusätzliche textbasierte Links zu den dort angezeigten Inhalten angibst, damit der Googlebot diese Inhalte crawlen und indexieren kann.

Progressive Verbesserung bei der Entwicklung berücksichtigen

Wenn du ganz von vorn anfängst, empfiehlt es sich, für Struktur und Navigation der Website nur HTML zu verwenden. Sobald du die Seiten, Links und Inhalte der Website erstellt hast, kannst du die Darstellung und Oberfläche mit AJAX aufwerten. Nutzer mit modernen Browsern kommen so in den Genuss der Vorteile von AJAX und der Googlebot muss nur den HTML-Code analysieren.

Natürlich ist für Links dann höchstwahrscheinlich JavaScript erforderlich. Der Webentwickler Jeremy Keith bezeichnet diese Technik, durch die AJAX und statische Links nebeneinander existieren können, als Hijax.

Dazu formatierst du die Links beim Erstellen so, dass sowohl ein statischer Link als auch eine JavaScript-Funktion aufgerufen werden kann. So haben Sie beides: Für JavaScript-Nutzer bieten Sie die AJAX-Funktionen, Nutzer ohne JavaScript ignorieren das Skript und folgen dem Link. Beispiel:

<a href="ajax.htm?foo=32" onClick="navigate('ajax.html#foo=32');
 return false">foo 32</a>

In diesem Beispiel siehst du, dass die URL des statischen Links einen Parameter (?foo=32) anstelle des vom AJAX-Code verwendeten Fragments (#foo=32) enthält. Suchmaschinen erkennen URL-Parameter, Fragmente hingegen werden häufig von ihnen ignoriert. Durch die Verwendung statischer Links können Nutzer und Suchmaschinen auf genau den Inhalt verweisen, den sie freigeben oder auf den sie verweisen möchten.

Wir optimieren unser Crawling immer weiter. Trotzdem helfen uns HTML-Links genau wie anderen Suchmaschinen, Mobilgeräten und Nutzern sehr dabei, die Struktur deiner Website besser zu verstehen.

Richtlinien beachten

Zusätzlich zu den hier beschriebenen Tipps solltest du unsere Richtlinien für Webmaster lesen, um mehr darüber zu erfahren, wie du deine Website für Google und die Nutzer verbessern kannst. Darin werden auch einige Verfahren beschrieben, die du vermeiden solltest, etwa irreführende JavaScript-Weiterleitungen. Allgemein gilt, dass du Nutzern zwar verschiedene Darstellungsoptionen anbieten kannst, der Inhalt sollte aber identisch sein. Stellen Sie sich einmal vor, wir hätten eine Seite für den WYS-Hamsterhof erstellt. Oben auf der Seite wird die Überschrift "WYS-Hamsterhof" angezeigt. Darunter befindet sich eine AJAX-Diashow mit den jüngst eingetroffenen Hamstern. Bei deaktiviertem JavaScript sollte diese Seite den Nutzer nicht mit zusätzlichem Text wie diesem überraschen:

WYS-Hamsterhof – Hamster, die besten Hamster, günstige Hamster, kostenlose Hamster, Haustiere, Bauernhöfe, Hamsterzüchter, tanzende Hamster, Nagetiere, die besten Infomaterialien zu Hamstern, Spielzeug, Stofftiere, Tanzstunden, niedlich, Hamstertricks, Haustierfutter, Hamsterhabitat, Hamsterhotels, Hamster-Geburtstagsgeschenkideen und mehr!

Wesentlich besser ist es, wenn bei deaktiviertem und aktiviertem JavaScript derselbe Text angezeigt wird. Im Idealfall sehen Nutzer ohne JavaScript eine HTML-Version der Diashow. Weitere Informationen zu verborgenem Text