Wenn Sie schon einmal eine atemberaubende, interaktive Website besucht haben, die bei Ihnen gleichzeitig den Wunsch weckt, Konfetti in die Luft zu werfen und es mit Ihren Freunden zu teilen, besteht eine gute Chance, dass sie mit JavaScript erstellt wurde.

Eigentlich jede Website, die Google Analytics (und andere Tracking-Tools) verwendet oder interaktive Elemente oder Webanwendungen bietet ebenfalls verwendet JavaScript, eine nahezu allgegenwärtige Programmiersprache. Die Möglichkeiten sind grenzenlos.

Der Nachteil? Wenn es falsch gemacht wird, kann es Ihre SEO beeinträchtigen. Wie können Sie also JavaScript SEO zu Ihrem Vorteil nutzen und Ihre Suchleistung steigern? Lass uns eintauchen.

Was ist JavaScript SEO?

So machen Sie Ihr JavaScript SEO-freundlich

Best Practices für JavaScript-SEO

Probieren Sie es aus

Was ist JavaScript SEO?

Bevor wir JavaScript-SEO definieren, sprechen wir über die häufigsten Anwendungsfälle für JavaScript. Neben der Website-Entwicklung JavaScript ist eine hervorragende Option für Spiele, Computerprogramme und mehr.

In der Webentwicklung wird es hauptsächlich für interaktive Websites, Web- und mobile Apps sowie dynamische Inhalte verwendet.

Sobald Sie wissen, wie die Programmiersprache verwendet wird, geht es bei JavaScript SEO lediglich darum, sicherzustellen, dass Suchmaschinen jede mit JavaScript erstellte Website leicht finden können.

Wenn sich Ihr Verständnis von SEO in erster Linie auf die Keyword-Optimierung beschränkt, sind Sie bei weitem nicht allein. Letztendlich gibt es drei Arten von SEO: On-Page, Off-Page und technisches SEO.

On-Page-SEO konzentriert sich auf den Inhalt Ihrer Website (Keyword-Optimierung). Beim Off-Page-SEO geht es um den Ruf, die Beliebtheit und den Nutzen Ihrer Website – und liegt größtenteils außerhalb Ihrer Kontrolle.

JavaScript-SEO fällt in die dritte Kategorie – technische SEO – Der Schwerpunkt liegt darauf, sicherzustellen, dass Ihre Website durchsuchbar, indizierbar und crawlbar ist, damit Nutzer nach den von Ihnen angebotenen Informationen suchen kann es finden.

Möchten Sie mehr über On Page und technisches SEO erfahren? Holen Sie sich hier unser kostenloses Tutorial!

So machen Sie Ihr JavaScript SEO-freundlich

Der Großteil des auf Websites verwendeten JavaScripts, einschließlich deiner und Bergwerk, wird sich nicht wesentlich auf die Suchmaschinenoptimierung auswirken. Die größte Herausforderung entsteht, wenn Ihr Entwickler JavaScript verwendet, um Abschnitte mit vielen wichtigen Informationen oder ganze Seiten zu erstellen.

Der Grund ist einfach: JavaScript kann es für Suchmaschinen schwieriger machen, Ihre Website zu lesen.

1. Verwenden Sie dynamisches Rendering (sparsam) als Workaround.

Eines der größten Probleme bei JavaScript-SEO und -Indexierung betrifft die Art und Weise, wie Ihr Code gerendert wird – oder wie Google Ihre Website indiziert (oder nicht indiziert).

Das bedeutet, dass Sie verstehen müssen, wie Ihre Website gerendert werden kann – serverseitiges Rendering, clientseitiges Rendering und dynamisches Rendering.

Serverseitiges Rendern (SSR)

Was es ist: Wenn JavaScript auf dem Server gerendert wird, bevor es in Ihrem Browser oder den Crawlern von Google angezeigt wird.

Wie es sich auf SEO auswirkt: Es reduziert die Ladezeit für die wichtigsten Inhalte Ihrer Seite, was die SEO-Leistung steigert.

Der Nachteil von SSR: SSR kann den Zeitaufwand drastisch erhöhen, wenn Sie Benutzereingaben benötigen.

Clientseitiges Rendering (CSR)

Was es ist: CSR liegt vor, wenn JavaScript in Ihrem Browser nur mit einer Basisversion von HTML gerendert wird und der Rest des Inhalts über JavaScript bereitgestellt wird.

Wie es sich auf SEO auswirkt: Es verringert die Indexierbarkeit, da die meisten Ihrer Inhalte über JavaScript bereitgestellt werden.

Die Kehrseite von CSR: Während das Rendern schneller ist, ist die Suchleistung viel geringer. Daher müssen Sie sich darauf konzentrieren, Google so viele Informationen wie möglich zur Verfügung zu stellen, damit Ihr Inhalt entsprechend indiziert werden kann.

Expertentipp: Kristina Asarenko, ein führender technischer SEO-Experte, sagt: „Die Verwendung von clientseitigem Rendering bedeutet, dass Googlebot nicht auf Inhalte zugreifen kann.

Ein viel besserer und erfolgreicherer Ansatz ist die Verwendung von serverseitigem Rendering, sodass der Googlebot die Inhalte auch vom Server aus bereitstellt.“

Dynamisches Rendering

Was es ist: Dynamisches Rendering identifiziert Bots, die kein JavaScript rendern können, und liefert eine SSR-Version.

Wie es sich auf SEO auswirkt: Es ermöglicht Bots, eine Version Ihres Inhalts zu indizieren, wodurch er leichter auffindbar wird.

Der Nachteil des dynamischen Renderings: Letztendlich ist dynamisches Rendering eine Problemumgehung, die laut Google keine langfristige Lösung sein sollte, da „es zusätzliche Komplexität und Ressourcenanforderungen schafft“.

Dynamisches Rendering kann von Websites verwendet werden, bei denen sich der Inhalt schnell ändert oder deren Inhalt JavaScript verwendet, das mit Browsern nicht kompatibel ist. Es ist für die meisten Websites nicht optimal geeignet und muss nicht auf jeder Website-Seite verwendet werden.

2. Verwenden Sie einzigartige, beschreibende Metainhalte.

Stellen Sie sicher, dass Google leicht herausfinden kann, was jede Seite enthält Metainhalte, Seitentitel und Meta-Beschreibungen. Das beinhaltet

• Titel-Tags.
• Meta-Beschreibungen.
• Alternativtext und Attribute für Bilder.

Durch das Hinzufügen von Metainhalten kann Google herausfinden, worum es auf Ihrer Website oder Seite geht, wodurch die Indexierung Ihrer Website und Ihrer Seiten einfacher und genauer wird.

3. Implementieren Sie Lazy Loading.

Faules Laden Beschleunigt das Laden von Seiten, indem Inhalte nur dann bereitgestellt werden, wenn sie benötigt werden oder kurz vor dem Lesen stehen. Dies ist besonders hilfreich beim Laden großer Bilder oder Inhalte, die viele Ressourcen erfordern.

Ihre Bilder und ressourcenintensiven Inhalte und Elemente werden nicht mit dem Rest des Top-of-Page-Inhalts geladen, aber wenn Benutzer den Inhalt durchlesen, werden sie geladen.

Und wenn Ihr Benutzer nicht bis zum Ende der Seite liest, laden Sie keine unnötigen Bilder.

Der Nachteil besteht darin, dass jemand, der schnell scrollt, möglicherweise darauf wartet, dass die Bilder geladen werden. Darüber hinaus kann es Auswirkungen darauf haben, wie Google Ihre Webseite sieht. Wenn Sie diese Praxis befolgen, gehen Sie daher vorsichtig vor.

4. Stellen Sie sicher, dass Ihr JavaScript mit Google kompatibel ist.

Geh in deine Suche Console und fügen Sie die URL Ihrer spezifischen Seite in das ein URL-Überprüfung Tool, um zu sehen, wie Google es rendert.

Möchten Sie ein anderes Tool testen? Sie können auch den Google Rich Results Test und den Google Mobile Friendly Test verwenden, um den gerenderten HTML-Code anzuzeigen.

Expertentipp: David Zimmermann von Reliable Acorn empfiehlt die Verwendung von Tools wie dem Google Mobile Friendly Test, da diese Ihnen zeigen, was der Google Spider sieht.

Zimmerman fügt hinzu: Nur weil „Ihr Entwickler irgendwo gelesen hat, dass Google JavaScript lesen kann“, heißt das nicht, dass er versteht, wie man eine SEO-freundliche JavaScript-Website schreibt.“

Das Endergebnis hier? Es ist eine gute Idee, den Überblick zu behalten.

5. Beheben Sie alle suchbezogenen Fehler.

Sie können eine Vorschau der getesteten Seite anzeigen, sobald Sie bestätigt haben, dass Google die Seite indexiert hat. Google rendert nur den Inhalt, den es sehen kann. Wenn die getestete Seite also nicht korrekt angezeigt wird, kann Google sie nicht indizieren.

Das Beste daran ist, dass Sie herausfinden können, was passiert und warum, und Maßnahmen zur Lösung des Problems ergreifen können.

6. Korrigieren und erneut testen.

Sobald Sie alle Fehler im Zusammenhang mit der JavaScript-Wiedergabe und -Kompatibilität behoben haben, können Sie mit dem URL-Inspektionstool sicherstellen, dass Ihr JavaScript im Live-Modus korrekt funktioniert, und Google auffordern, den aktualisierten Code zu indizieren.

Best Practices für JavaScript-SEO

Ich habe mich mit mehreren JavaScript-SEO-Experten getroffen, um mehr über ihre Best Practices zu erfahren, und dazu kommen wir gleich. Stellen Sie jedoch zuallererst sicher, dass Sie auf dem neuesten Stand sind.

1. Holen Sie sich eine Einführung in JavaScript-SEO.

Es steckt viel in JavaScript-SEO, und da die Browser regelmäßig aktualisiert werden, benötigen Sie möglicherweise eine Einführung, wenn Sie sich längere Zeit nicht mit JavaScript-SEO beschäftigt haben.

Wenn Sie noch einmal darüber nachdenken möchten, wonach Suchmaschinen in Bezug auf JavaScript suchen, oder detaillierte Anweisungen dazu erhalten möchten, was und wie behoben werden muss, schlüsselt Google alles auf, was Sie wissen müssen Google-Suchzentrale.

Es ist die Geheimwaffe eines jeden, der eine Website hat, denn es erklärt Ihnen genau, wie Sie Ihre Website SEO-freundlich gestalten können – und es enthält einen ganzen Abschnitt, der JavaScript gewidmet ist.

2. Fügen Sie alle wichtigen Inhalte in den Quellcode ein.

Erinnern Sie sich, wie ich erwähnt habe, dass Google nur das indizieren kann, was es sieht? Um sicherzustellen, dass Ihre Website indexierbar ist, befolgen Sie die folgenden Schritte AsarenkoDer Ratschlag lautet: „Stellen Sie sicher, dass JavaScript-Probleme Ihre SEO-Bemühungen nicht beeinträchtigen.“

Sie empfiehlt, „sicherzustellen, dass alle wichtigen Inhalte im Quellcode verfügbar sind (dh bevor JavaScript ausgeführt wird). Dadurch kann Google Ihre Informationen „lesen“, ohne auf JavaScript angewiesen zu sein.

Schließen Sie alle Metadaten (Titel, Meta-Robots, kanonische Tags usw.), den Fließtext und strukturierte Daten ein.“

3. Testen Sie Ihre Website regelmäßig auf JavaScript-SEO-Freundlichkeit.

Selbst kleine Änderungen an Ihrem JavaScript-Code oder Inhalt können die Art und Weise verändern, wie Google Ihre Website sieht. Und das beschränkt sich nicht nur auf Ihr JavaScript – die Verwendung von Tools wie der Google Search Console zur Überwachung der Seitenleistung kann dazu beitragen, dass Ihre Website in den Suchergebnissen ganz oben bleibt.

Expertentipp: Tristan Harris empfiehlt die Verwendung von Tools wie Google PageSpeed ​​Insights und Lighthouse, um die SEO-Leistung zu testen und Verbesserungsmöglichkeiten zu identifizieren.

Best Practice Nr. 4. Bleiben Sie über die Richtlinien von Google auf dem Laufenden.

Google aktualisiert regelmäßig seine Algorithmen – und damit auch seine Best Practices. Vor diesem Hintergrund ist es eine gute Idee, auf der Google-Seite nach Updates Ausschau zu halten.

Zimmerman empfiehlt die Verwendung eines Seitenmonitors wie Hexomatic, um auf dem Laufenden zu bleiben Googles Richtlinien für JavaScript SEO, „Wenn mir der Seitenmonitor anzeigt, dass Google ein Update durchgeführt hat, schaue ich mir das an, um zu sehen, ob es meine Prozesse in irgendeiner Weise ändern sollte.“

Best Practice Nr. 5. Befolgen Sie die besten On-Page-SEO-Praktiken.

Sicher, ich konzentriere mich hier speziell auf JavaScript-SEO, aber das Schlüsselprinzipien von SEO immer noch gelten. Obwohl JavaScript die Menge an Inhalten reduzieren kann, die Suchmaschinen sehen, ist es dennoch wichtig, sicherzustellen, dass Ihre Inhalte für die besten SEO-Praktiken optimiert sind.

Expertentipp: Dave Ver Meer empfiehlt, JavaScript zu deaktivieren.

„Es ist der schnellste Weg, eine Reihe größerer Probleme zu identifizieren. Wenn Sie Seiten auf Ihrer Website besuchen, können Warnsignale wie fehlende Inhalte auftauchen, weil diese vor dem Laden der Seite nicht gerendert werden und einige Links nicht funktionieren.“ Sagt Ver Meer.

Probieren Sie es aus

Um meine neuen Fähigkeiten in einer relativ (sprich: völlig) sicheren Umgebung zu testen, ging ich zu meinem manchmal Freund, manchmal Erzfeind ChatGPT.

Meine Aufforderung: „Ich möchte ein Javascript-Code-Formular erstellen, um Leads zu sammeln. Bitte verwenden Sie lustige Platzhalter für Name, E-Mail, Budget und Nachricht.“

Antwort von GPT: „Auf jeden Fall! Unten finden Sie ein einfaches Beispiel für ein JavaScript-Formular, das Leads sammelt. Dieses Formular enthält Felder für Name, E-Mail, Budget und eine Nachricht. Ich habe, wie Sie es gewünscht haben, lustige Platzhalter hinzugefügt.

Das Formular umfasst auch eine grundlegende Validierung, um sicherzustellen, dass die Felder „Name“, „E-Mail“ und „Nachricht“ nicht leer bleiben.“

Hier ist der HTML-Code für das Formular.

Was die lustigen Platzhalter betrifft? Nun, GPT dachte, Iron Man würde Spaß machen. So sieht der vollständige Code in HTML aus:

Und hier ist das JavaScript:

Natürlich hatte ChatGPT einen Haftungsausschluss:

Nun zum spaßigen Teil. Sehen wir uns an, wie ChatGPT dieses JavaScript für SEO optimiert.

Es überrascht nicht, dass die HTML-Version des Codes wesentlich robuster war. Ich habe es in zwei Abschnitte unterteilt, damit Sie die Unterschiede vergleichen können. (Ich werde sie weiter unten näher erläutern.)

Der Textkörper sieht ziemlich ähnlich aus, wobei die meisten Änderungen mit dem hypothetischen Inhalt der Lead-Gen-Seite zusammenhängen.

Schauen wir uns nun das aktualisierte JavaScript an.

Kommt es Ihnen bekannt vor? Vergleichen wir den Code nebeneinander.

Sie sind identisch. Überrascht?

Hier ist der Grund.

Mein brandneuer JavaScript-Code ist für die Funktionalität meines brandneuen Lead-Gen-Formulars verantwortlich.

Und nur die Funktionalität.

Es ist nicht verantwortlich für die Struktur oder den Inhalt der „Seite“. Hier kommt das HTML ins Spiel. Und hier gelten auch Empfehlungen zur SEO-Optimierung.

Wie ich ChatGPT zur Optimierung von JavaScript-SEO verwendet habe

Fragen Sie sich, welche spezifischen Änderungen ChatGPT zur Optimierung der JavaScript-SEO empfohlen hat?

Änderung 1. Fügen Sie einen Seitentitel und eine Meta-Beschreibung hinzu.

Änderung 2. Verwenden Sie Überschriften-Tags.

Änderung 3. Beschriften Sie Formularfelder für SEO und Barrierefreiheit.

Änderung 4. Fügen Sie Alt-Text zu Bildern hinzu.

Änderung 5. Verwenden Sie Responsive Design, um die Seite mobilfreundlich zu gestalten.

Änderung 6. Fügen Sie Schema-Markup hinzu, um Suchmaschinen dabei zu helfen, den Inhalt Ihrer Seite zu verstehen.

Das Endergebnis von JavaScript SEO

Wenn Sie sich für die Verwendung von JavaScript auf Ihrer Website entscheiden, müssen Sie die Auswirkungen auf SEO verstehen und entsprechend planen, um sicherzustellen, dass Ihre Website SEO-freundlich bleibt – oder für Suchmaschinen auffindbar, crawlbar und indizierbar ist.

Dies soll Sie nicht vor JavaScript warnen. Im Gegenteil: Um das Beste aus Ihren interaktiven Funktionen herauszuholen, ist es notwendig, Entwickler zu finden und einzustellen, die sich mit JavaScript und SEO auskennen und Ihnen helfen können, sich abzuheben und gleichzeitig gefunden zu werden.

Der größte Imbiss? Das Wichtigste, was Sie tun können, um Ihr JavaScript SEO-freundlich zu gestalten, besteht darin, sicherzustellen, dass es korrekt gerendert wird und dass der HTML-Code Ihrer Seite so strukturiert ist, dass er so viele Informationen wie möglich über den Inhalt der Seite bereitstellt.

Es überrascht vielleicht (und vielleicht auch nicht), dass die Regeln der On-Page-SEO auch für JavaScript-SEO gelten – der Schlüssel liegt darin, sicherzustellen, dass Suchmaschinen Ihre Inhalte „sehen“ können.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoData.Network Vertikale generative KI. Motiviere dich selbst. Hier zugreifen.
• PlatoAiStream. Web3-Intelligenz. Wissen verstärkt. Hier zugreifen.
• PlatoESG. Kohlenstoff, CleanTech, Energie, Umwelt, Solar, Abfallwirtschaft. Hier zugreifen.
• PlatoHealth. Informationen zu Biotechnologie und klinischen Studien. Hier zugreifen.
• Quelle: https://blog.hubspot.com/marketing/javascript-seo