Bis vor einigen Jahren wurde JavaScript nur für Animationen oder zur Validierung von Formulareingaben verwendet. Heute verzeichnen wir einen deutlichen Aufwärtstrend bei Webseiten, welche komplett auf JavaScript basieren. Zwar gibt es das AJAX-Konzept, mit welcher Content dynamisch via JavaScript geladen wird, bereits seit längerem, doch erst die modernen Frameworks wie React, Angular und Vue.js machen das Ganze wettbewerbsfähig. Mit JavaScript entwickelte Single-Page-Applications, kurz SPA, sorgen für ein besseres Nutzererlebnis ohne Ladezeiten. Inzwischen wird die vorwiegend von Facebook, Google und Twitter entwickelte SPA-Technik immer mehr in Webseiten und WordPress-Themes verwendet.
Doch One-Pager und SPAs bringen nicht nur Vorteile. Notwendige Funktionen für die Barrierefreiheit und die Suchmaschinenoptimierung sind weitaus komplexer umzusetzen. Die wichtigsten Grundregeln für die Suchmaschinenoptimierung von JavaScript-basierten Webseiten erklären wir in diesem Artikel.
Wer mit React, Angular oder Vue.js entwickelt, wird feststellen, dass sich der Umgang mit JS wesentlich verändert hat. Hat man JS-Bibliotheken wie jQuery noch in ein HTML-Dokument eingebunden und JS-Code nur partiell im Code verwendet, wird mit den neuen JS-Frameworks komplett in JavaScript entwickelt. Die JS-Anwendungen der letzten Generation funktionieren eher wie PHP oder andere serverseitige Sprachen, generieren aber keine lesbaren HTML-Dokumente.
Deshalb muss für eine SEO-konforme Entwicklung darauf geachtet werden, dass unter der schicken Oberfläche einer Webseite oder Webanwendung auch maschinenlesbarer Code generiert wird.
Progressive Enhancement
Das Konzept des Progressive Enhancement basiert auf der Annahme, dass die Anwendung oder Webseite auch ohne JavaScript lesbar und bedienbar sein kann.
Die maschinenlesbare Version der Webseite wird in reinem HTML entwickelt. Der Inhalt befindet sich innerhalb des -Tags oder des Container-Tags dessen Inhalt durch das Framework ersetzt wird. Wird der Besucher als Suchmaschine oder Browser ohne aktiviertes JavaScript identifiziert, ist der Inhalt in der HTML-Version zwar nicht so schick verpackt, dafür perfekt lesbar. Der grosse Vorteil von Progressive Enhancement: alle Suchmaschinen, Spider, Bots und elektronische Sehhilfen wie Braille-Leser können die Inhalte lesen und indexieren.
URL-Routing ohne JavaScript
Während die Generierung von reinem HTML für JS-Frameworks unproblematisch ist, muss für Suchmaschinen auch eine funktionierende URL generiert werden. Der URL-Pfad kann für einfache Projekte mit simplen Ankerlinks versehen werden, eine komplexe hierarchische URL-Struktur lässt dagegen nur mit zusätzlichen Frameworks wie Next.js und Nuxt.js abbilden. Werden alle JS-Routen konsequent durch generierte URLs übersetzt und in der maschinenlesbaren Version als herkömmliche A-Tags generiert, sind alle Suchmaschinen bestens bedient. Die Übertragung einer XML-Sitemap und die Überprüfung der Indexierbarkeit eines Projektes kann wie gewohnt über die Google Search Console erfolgen.
Reine JavaScript Webseiten
Wird die Webseite oder das Theme ausschliesslich mit JavaScript entwickelt ist die Gefahr weitaus grösser, dass Suchmaschinen sie nicht indexieren können. Google und Bing haben zwar bereits einige Fortschritte bei der Indexierung von reinen JS-Webseiten bekanntgegeben, die Erfahrungen im SEO-Bereich sind trotzdem noch sehr dünn. Wer ein JS-basiertes Theme ohne Fallback-Version einsetzt, muss damit rechnen, sein Suchmaschinen-Ranking einzubüssen.