SEO: Der optimale JavaScript-Einsatz auf euren Webseiten [Teil 2]
Teil 1 dieses Beitrages fokussierte, was JavaScript ist und welche Rolle es neben HTML und CSS für die Webseiten-Darstellung spielt. In diesem zweiten Teil schildere ich euch, welche SEO-Stolperfallen JavaScript mit sich bringt – und wie ihr sie umgehen könnt.
|
| (Entwicklung / Pixabay-Lizenz) |
Damit Google den kompletten Inhalt einer Webseite inklusive JavaScript-Ressourcen interpretieren kann, muss es diesen so abbilden, wie es der Browser eines Users tut. Dieser Prozess nennt sich "Rendering" (von engl. "to render": "erbringen").
➤ Google kann nur das in seinem Such-Index abbilden, was es rendern kann.
Da äußerst viele Webseiten mit JavaScript-Funktionen arbeiten (z. B. in Form von Kontaktformularen, interaktiven Karten, Dialogfenstern/Live-Chats oder aufklappbaren Menüs), ist es aus SEO-Sicht sehr wichtig, dass Google nicht über diese Webseiten-Bestandteile "stolpert". Dieses Risiko ist bei JavaScript-Inhalten erhöht, da es für Google deutlich aufwendiger ist, JavaScript-Inhalte zu rendern als zum Beispiel HTML-Inhalte.
Doch keine Bange: Wenn ihr die folgenden Tipps beherzigt, könnt ihr JavaScript
bedenkenlos auf euren Webseiten einsetzen.
Die SEO-Checkliste für euren JavaScript-Einsatz
1. JavaScript-Crawling zulassen
Die
robots.txt-Datei eures Online-Auftritts sagt einer Suchmaschine, welche
Bereiche eures Online-Auftritts sie crawlen (erfassen) darf und welche
nicht. Dieses Crawlen ist die Grundvoraussetzung dafür, dass die Suchmaschine eure Webseite rendern und schließlich indexieren kann. Nur dann wird eure Seite in der Google-Suche auffindbar sein.
Um auf Nummer sicher zu gehen, solltet ihr das Crawling von JavaScript-Ressourcen (und auch CSS-Inhalten) ausdrücklich erlauben. Innerhalb eurer robots.txt-Datei müsst ihr dafür folgende Befehle setzen (lassen):
User-Agent: Googlebot
Allow: .js
Allow: .css
2. JavaScript optimal einsetzen
Google will den Dreischritt "Crawlen – Rendern – Indexieren" schlank halten, da dieser Prozess den Google-Servern viel Rechenleistung abverlangt.JavaScript-Ressourcen zu rendern, ist für Googles Server rechenintensiver als es bei HTML-Ressourcen der Fall ist. Je mehr JavaScript-Ressourcen eine Webseite besitzt, desto "anstrengender" ist der Rendering-Prozess für Google.
Google arbeitet bei jedem Online-Auftritt mit einem sogenannten "Crawl-Budget" (auch "Crawling-Budget" genannt): Dieses bemisst, wie viel "Zeit und Mühe" Google investiert, um die Webseiten eines Online-Auftrittes zu erfassen.
Je mehr rechenintensives JavaScript ihr auf euren Seiten einsetzt, desto stärker wird eurer Crawl-Budget belastet. Risiko: Google spart Teile eures Online-Auftritts aus, die dann folglich auch nicht in der Google-Suche auffindbar sind.
Deshalb solltet ihr euren JavaScript-Einsatz optimieren:
➤ JavaScript minifizieren: Minifizierung bedeutet, im JavaScript-Code all das zu entfernen, was für dessen Ausführung nicht notwendig ist (z. B. Zeilenumbrüche, Leerzeichen, Einrückungen). Ein Tool, das euch dabei hilft, ist der JavaScript Minifier.
➤ JavaScript asynchron laden: Dies bedeutet, dass die Suchmaschine zuerst die HTML- und CSS-Dateien rendert, erst anschließend dann die JavaScript-Ressourcen. Umsetzbar ist dies über die Code-Attribute "async" oder "defer".
➤ JavaScript-Ressourcen zusammenfassen: Kleinere JavaScript-Dateien könnt ihr
zu größeren zusammenfassen. Ein Tool, das euch dabei hilft, ist
Webpack.
... und wie erkenne ich, ob meine Seiten ein JavaScript-Problem haben?
Zwei kostenlose, offizielle Google-Tools helfen euch dabei:
1. Google Search Console:
In der Google Search Console könnt ihr jede URL eures Online-Auftritts dahingehend testen, ob es ein JavaScript-Problem gibt.➤ Fügt die URL in die Suchleiste der Google Search Console ein und drückt die Return-Taste (für eine größere Ansicht bitte in das Bild klicken):
|
| URL-Prüfung in der Google Search Console |
➤ Klickt auf "Getestete Seite anzeigen" und anschließend auf "Weitere
Informationen" (für eine größere Ansicht bitte in das Bild klicken):
|
| JavaScript-Prüfung in der Google Search Console |
➤ Gibt es keine Nachrichten in der JavaScript-Konsole, kann Google eure
JS-Inhalte problemlos rendern.
2. PageSpeed Insights:
PageSpeed Insights sagt euch, wie schnell oder langsam eure Webseiten laden (für eine größere Ansicht bitte in das Bild klicken):
|
| JavaScript-Optimierung in Tool "PageSpeed Insights" |
Bei den Optimierungs-Empfehlungen zeigt es euch auch etwaige
JavaScript-Probleme an.
Fazit: Ein optimierter JavaScript-Einsatz lohnt sich
Keine Angst, was sich in diesem Beitrag mitunter sehr technisch anhört, folgt eigentlich einer ganz simplen Logik:
Damit eine Suchmaschine wie Google eine Webseite indexieren und ranken kann, muss sie verstehen, was auf dieser Webseite passiert.
Mit einem optimierten JavaScript-Einsatz stellt ihr zwei Dinge sicher, einmal aus User-Experience-Sicht (UX) und einmal aus SEO-Sicht:
➤ Aus UX-Sicht ermöglicht es euch JavaScript, euren Online-Auftritt für eure Besucher interaktiv zu gestalten (Kontaktformulare, interaktive Karten, Dialogfenster/Live-Chats, aufklappbare Menüs, etc.).
➤ Aus SEO-Sicht stellt ihr durch einen optimierten Einsatz sicher, dass Google eure JavaScript-Ressourcen sauber und schnell verarbeiten kann, um eure Seiten bestmöglich indexieren und ranken zu können.
Ich wünsche euch viel Erfolg beim Optimieren eures JavaScript-Einsatzes. :-)
Link-Tipps:
Kommentare