JavaScript

Anstatt eine statische HTML-Seite zu haben, interagiert JS mit dem Benutzer und konzentriert sich auch auf sog. „Client-Side“ der Webseite. Dies ist sein Hauptzweck und der Grund für eine sehr dominante Verwendung.

JS-Entwickler sind auf dem heutigen Arbeitsmarkt sehr gefragt. Das Erstellen von Webseiten ist für den Betrieb fast aller Unternehmen in der heutigen Gesellschaft unerlässlich. Ist es schwer, JavaScript zu erlernen? Nicht wirklich, wenn du die erforderliche Zeit und Mühe investierst, können auch schwierigere Dinge erreicht werden. Der Schlüssel liegt hier darin, den Programmierzustand zu erreichen. Sobald du dein Gehirn dazu gebracht hast, wie ein Programmierer zu denken, wirst du feststellen, dass es eine der einfachsten Anfänger-Programmiersprachen ist. Ihre Popularität verdankt sie vor allem ihrer Einfachheit. Wenn du also mehr darüber erfahren möchtest oder eine Karriere als Webentwickler in Betracht ziehst, bleib hier.

JavaScript und HTML

Du kannst eine Webseite nur mit HTML erstellen. Die Verbundenheit, die das JavaScript-HTML-Duo zusammen schafft, ermöglicht jedoch Interaktivität auf allen Webseiten. Wenn du JS auf ein HTML-Dokument anwendest, wird die Seite dynamisch und Benutzer können moderne Webanwendungen nutzen. Diese müssen nicht jedes Mal neu geladen werden, wenn die Nutzer mit der Webseite interagieren möchten. Dies kann als Vorteil für die direkte Interaktion für dynamische Inhaltsänderungen, Bildmanipulation und Formularvalidierung genutzt werden.

JavaScript ermöglicht dynamische Interaktivität auf Webseiten, wenn JS auf ein HTML-Dokument angewendet wird. JS hilft den Benutzern, moderne Webanwendungen zu erstellen und direkt zu interagieren, ohne dass die Seite jedes Mal neu geladen werden muss. Das entlastet den Server und sorgt im Gegenzug für schnelle Ladezeiten und schnelle Ergebnisse. Auf schnellere Ladezeiten und wie du diese für den Server entlasten kannst, gehen wir an einer anderen Stelle in diesem Text ein. Das offensichtliche Problem hier ist, dass eine Verzögerung dazu führen kann, dass die Benutzer deine Webseite verlassen.

Quelle: https://storage.googleapis.com/twg-content/original_images/mobile-page-speed-new-industry-benchmarks-01-01-download.jpg

JavaScript-Funktionen

JavaScript-Funktionen sind sog. Code Constructor Properties. Einige davon umfassen das Objekt, „array string“, „boolean“, und viele andere werden unten im Text ausführlicher erläutert. Aber schauen wir uns zunächst die JavaScript-Funktion an, bei der es sich um einen Codeblock handelt. Der Codeblock muss benannt werden und kann mehrmals im gesamten Code ausgeführt werden. Du kannst ein Codeblock definieren, indem du ihm einen passenden Namen gibst. Die beste Vorgehensweise wäre, wenn du ein Schlüsselwort verwendst, das sich auf den JS-Code bezieht. Dies ist nicht mit „js fn“ zu verwechseln, dass kein Akronym ist. Tatsächlich bezieht sich „fn“ auf einen Jquery-Prototyp. Jquery ist eine Bibliothek, die du mit deinen eigenen Funktionen erweitern könntest, um viele Dinge zu vereinfachen, während du JS codierst.

Eine der Funktionen, die als Best-Practice gilt, ist die Verwendung von JavaScript parseInt, um beispielsweise eine Zeichenfolge in eine int-primitive anstelle von Integer (String s) zu konvertieren. Du kannst mit dieser Syntax zwei separate Parameter definieren parseInt (string, radix):

• String – Dies stellt den Wert dar, der ge-parsed werden soll. Wenn der Wert kein String ist, wird er mit der Abstraktionsmethode ToString in einen konvertiert.
• Radix – Dies stellt dar, welches Zahl-System Sie verwenden möchten. Dies kann ein Wert zwischen 1 und 55 sein. Obwohl es optional ist, wird empfohlen, Radix als Basiswert zu definieren, um Verwirrung oder mögliche Fehler des Codes zu vermeiden. Üblicherweise wird ein Basiswert von 10 verwendet (von 0 bis 9).

JSON und JavaScript

Ein weiteres hilfreiches Asset, das du verwenden kannst, ist JSON. Es ist eine Programmiersprache und das Akronym JSON steht für JavaScript Object Notation. Die verwendete Objektnotationssyntax ist von JavaScript abgeleitet. Normalerweise bestehen diese Objekte aus Attribut-Wert-Paaren und Arrays. Schauen wir uns ein Beispiel an:

{

“musicians”:[

{“firstName”:”Freddie”, “lastName”:”Mercury”},

{“firstName”:”Stevie”, “lastName”:”Wonder”},

{“firstName”:”Eric”, “lastName”:”Clapton”}]

}

Der Code (der für das JSON-Format verwendet wird) ist identisch mit der Syntax des Codes, die man zum Erstellen von JavaScript-Objekten verwendet. Das macht es für ein JS-Programm einfach, jeden in JSON geschriebenen Code zu konvertieren. JS hat sogar eine eingebaute Funktion, um diesen JavaScript-String in ein Objekt umzuwandeln. Aus diesem Grund wird JavaScript JSON hauptsächlich zum Speichern und Transportieren von Daten verwendet. Meistens geht es darum, die Daten von einem Server an eine Webseite zu senden.

JavaScript RegEx

Eine andere Objektform, die in dieser Programmiersprache zu finden ist, ist JavaScript RegEx. Es steht für reguläre Ausdrücke und besteht aus vielen Mustern. Diese Muster werden verwendet, um Zeichenkombinationen in Zeichenfolgen abzugleichen. Ein RegExp kann entweder konstant oder neu sein. Ist Letzteres der Fall, wird der neue RegExp auf Basis der Benutzereingaben gebildet.

Constant:        let re = /ab+c/;
New:                let re = new RegExp(‘ab+c’);

Im Gegensatz zu Objekten existieren auch JavaScript-Klassen, die werden aber nicht wirklich benötigt. Da JS Prototyp-Basiert ist, kann man jede Objekteigenschaft erweitern. Bis 2015 bestand die Praxis darin, Konstruktor-Funktionen zu verwenden (um objektorientierte Entwurfsmuster nachzuahmen), die in anderen Programmiersprachen ein fester Bestandteil waren.

Nachdem eine neue Version von JS namens ES6 auf den Markt kam, brachte das Update die Funktion der Javascript-Class zur Geltung. In Bezug auf die Syntax-Funktionalität war viel sauberer und ähnlicher zu anderen bekannten Script-Sprachen. Das hat die Arbeit der Entwickler, die oft zwischen Sprachen wechseln müssen, leichter gemacht. Vielleicht sah die Einführung der JS-Class wie ein sehr kleiner Schritt aus, aber es war eine große Hilfe und machte die Codierung einheitlicher sowie unkomplizierter für alle Webentwickler.

Neben der Interaktion mit anderen Programmiersprachen gibt es auch APIs, die Dienstprogramme für JS bereitstellen. Eine Methode namens JavaScript fetch verwendet die „The Fetch API“. Diese Schnittstelle wird genutzt, um in erster Linie Teile der HTTP-Pipeline, wie z. B. Anforderungen und Antworten zu manipulieren und darauf zuzugreifen.

Ist JavaScript schlecht für SEO?

Wenn du JS nur verwendest, um einige visuelle Elemente zu verbessern, muss du dich keine Gedanken über JavaScript für SEO machen. Und wenn der gesamte Inhalt eine Webseite ohne JS existieren kann, dann wird die Website in keiner Form beeinträchtigt. Trotzdem gibt es mittlerweile viele JavaScript-Webseiten, die JS verwenden, um mehr Inhalte auf den Seiten dynamisch zu laden und anzuzeigen (z. B. durch Klicken auf „Weiterlesen“). Du kannst eine einfache GET-Anforderung zusammen mit JS verwenden, um auf Webseite-Daten zuzugreifen und unendliches Scrollen bereitzustellen.

Es kann sein, dass zusätzlicher Inhalt für deine Website von entscheidender Bedeutung ist und du ihn hinzufügen möchten, indem der Benutzer scrollt oder klickt, um weitere Inhalte anzusehen. Du solltest wissen, dass nur der sichtbare Inhalt (ohne dass der Benutzer klickt, um mehr zu sehen, oder gescrollt wird) in der ersten Indexierungswelle indexiert wird. Aber damit auch der Rest dieses Inhalts indexiert werden kann, müssen wir auf das Rendern warten.

Wenn wichtigen Inhalte (Content) nicht indexiert sind, können sie nicht über die Suche gefunden werden. Und falls in diesem Content zusätzlichen Inhalten plus interne Links vorhanden sind, solltest du alle erforderlichen Schritte unternehmen, damit diese Inhalte von Google-Bots gecrawlt und indexiert werden.

Die Web-Apps, die stark auf die React-Library angewiesen sind, benötigen möglicherweise keine Optimierung, da dies kein Design-Ziel von React ist (Echtzeit-Chat-Apps, Social-Media-Apps). Viele React-Web-Apps, die auf Inhalten wie E-Commerce-Seiten oder Blogs basieren, erfordern eine Suchmaschinenoptimierung. Wenn Sie also ein besseres Ranking erzielen möchten, sollten Sie sich die „Best Practices“ und Tipps für React-JS für SEOs ansehen, um deine Seite sowohl für deine Benutzer als auch für SEO gut einzurichten.

Wie Googlebot JavaScript verarbeitet?

Das Crawling beginnt wie gewohnt, wenn der Crawler GET-Anfragen an den Server sendet, der wiederum mit allen Bausteinen der Seite antwortet. Du hast zwei Optionen den JS-Code auf deine Website einzubetten. Entweder du fügst den Code in ein Skriptelement in einem HTML-Dokument ein oder dui verwendest eine externe JavaScript-Datei.

Quelle: https://seranking.com/blog/css-and-javascript-seo/

Wenn wir keine JS-Datei und opt-in-code innerhalb der Seite haben, können wir Änderungen am Inhalt durch eine Onclick-Eigenschaft vornehmen. Dies geschieht häufig durch die Verwendung von DOM (Document Object Model), um seine Elemente zu manipulieren. DOM organisiert ein Dokument wie einen logischen Baum, der sich verzweigt. Du kannst auf jeden Zweig des HTML-DOM zugreifen und ihn mit DOM-JavaScript ändern. Wenn dies gerendert wird, wird die Ausgabe im Browser angezeigt.

Du hast die Möglichkeit dasselbe JavaScript auf mehreren Seiten zu verwenden und damit vermeiden, immer wieder dasselbe Skript schreiben zu müssen. Wähle je nach Bedarf die Option Eins (JavaScript-Datei in HTML einbetten) oder Zwei (externe JavaScript-Datei). Und es ist wichtig, hier die „Best Practices“ zu verwenden, da diese beim Crawlen und Rendern immens hilfreich sind. Wenn du eine Datei mit demselben Code habest, können diese Inhalte zwischengespeichert werden. Dadurch erhält der Benutzter den Inhalt schneller und die Datenlast wird vom Server auf den Benutzer durch zwischengespeicherte Ressourcen übertragen.

Nehmen wir also an, Googlebot stößt auf deine JS-Datei und lädt sie herunter. Der nächste Schritt besteht darin, JS mithilfe des Google Web Rendering Service (WRS) zu analysieren, zu kompilieren und auszuführen (parse, compile and execute). Das Google WRS ruft alle Datenbanken von vielen externen APIs an, die du verwendet hast. Dann wird den Inhalt tatsächlich indiziert. Wenn Google neue Links in diesem Inhalt entdeckt, fügt es sie der Crawling-Que hinzu und der Zyklus geht weiter.

Wenn wir kein JS haben, durchläuft Google alle HTMLs ohne die zusätzliche Rendering-Phase. Diese Phase ist teuer, daher solltest du die Indizierung und das Rendern immer trennen, um die Dinge zu beschleunigen. Es werden zuerst die Inhalte indexiert, die JS nicht so schnell erfordern. Das bedeutet, dass es länger dauern kann, bis der JS-Inhalt aktualisiert wird. Aus diesem Grund ist es wichtig, eine Website so zu optimieren, dass möglicherweise nicht alles während eines bestimmten Crawl-Zeitraums indiziert wird.

Server-Side Rendering

Während das Crawlen und die Indexing des normalen Inhalts sofort erfolgt, wird eine JS-Datei, die ausgeführt und gerendert werden muss, in der zweiten Indexierungswelle indiziert. Wenn Sie einige wichtige Inhalte darin haben und Sie möchten, dass Ihre Aktualisierungen sofort in der SERPs angezeigt werden (Preisänderungen für eine E-Commerce-Seite), dann sollten Sie z. B. nicht auf dem Absturz die zweite Welle der Indexierung warten. Die Lösung wäre Pre-Rendering oder Server-Side-Rendering (SSR).

SSR hat die Fähigkeit, die Webseite vollständig auf dem Server anzuzeigen, anstatt sie im Browser zu rendern. Der Klient erhält eine vollständig gerenderte Seite vom Server, dann übernimmt die JavaScript-Datei und ein SPA-Framework (wie das zuvor erwähnte React) kann ausgeführt werden.

SSR and Vue.js

Abgesehen von der Zeitverzögerung bei der Indexierung, gibt es noch andere mögliche Tücken, die durch SSR vermeiden werden können. Eine davon ist das Überspringen einiger Ressourcen durch Google-Bot crawl oder das Unvermögen, die Webseite vollständig darzustellen. Hier empfehlen wir Vue.js, da Vue.js eines der beliebtesten JS-Frameworks ist. Neben einer aktiven Community von Benutzern, etablierten Systemen von Entwicklern, Werkzeugausstattung und umfangreichen Dokumentation, kann Vue-JS und SSR kann deine Webseite schnell up to date bringen.

Wenn Sie Vue-JS serverseitiges Rendering verwenden, können die Crawler sofort die vollständige Seite sehen. So vermeidest du die Wartezeit oder riskieren, dass deine Seite gar nicht indexiert wird. Das Entscheidende hier ist, den Unterschied zwischen Pre-Rendering oder SSR zu kennen. Du solltest überlegen, welcher deine Seiten sofort angezeigt werden muss. Wenn es sich um etwas Kleineres wie die Seite „Über uns“ oder „Kontakt“ handelt, reicht das Pre-Rendering aus. Du solltest dich nicht für SSR entscheiden, wenn du viel Verkehr erwartest. Dein Server kann dies ohne zusätzliche Ladezeit nicht bewältigen, damit riskierst du eine erhöhte Absprungrate.

Zusammenfassung

JS allein ist nicht schlecht für SEO. Alles, was die Nutzererfahrung verbessern kann, wie schnelle Interaktivität mit der Webseite oder schnellere Ladezeit ist definitiv etwas, das ein positives Signal an Google sendet. Du solltest jedoch auf die Indexierung achten, bevor du dich entscheidest, wie viel JS Sie auf deinen Seiten implementieren wollen sollte. Wähle mit Bedacht zwischen Pre-Rendering oder SSR. Es gibt keine Einheitslösung, und es hängt alles davon ab, wie du eine schnellere Indexierung oder ein schnelles Laden für deine Benutzer schätzst.