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 Sie die erforderliche Zeit und Mühe investieren, können auch schwierigere Dinge erreicht werden. Der Schlüssel liegt hier darin, den Programmierzustand zu erreichen. Sobald Sie Ihr Gehirn dazu gebracht haben, wie ein Programmierer zu denken, werden Sie feststellen, dass es eine der einfachsten Anfänger-Programmiersprachen ist. Ihre Popularität verdankt sie vor allem ihrer Einfachheit. Wenn Sie also mehr darüber erfahren möchten oder eine Karriere als Webentwickler in Betracht ziehen, bleiben Sie hier und lesen Sie mehr.

JavaScript und HTML

Sie können eine Webseite nur mit HTML erstellen. Die Verbundenheit, die das JavaScript-HTML-Duo zusammen schafft, ermöglicht jedoch Interaktivität auf allen Webseiten. Wenn Sie JS auf ein HTML-Dokument anwenden, 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 Sie diese für den Server entlasten können, 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 Ihre 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. Sie können ein Codeblock definieren, indem Sie ihm einen passenden Namen geben. Die beste Vorgehensweise wäre, wenn Sie ein Schlüsselwort verwenden, 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 Sie mit Ihren eigenen Funktionen erweitern können, um viele Dinge zu vereinfachen, während Sie JS codieren.

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. Sie können 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 Sie verwenden können, 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 Sie JS nur verwenden, um einige visuelle Elemente zu verbessern, müssen Sie sich 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 Ihren Seiten dynamisch zu laden und anzuzeigen (z. B. durch Klicken auf „Weiterlesen“). Sie können 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 Ihre Website von entscheidender Bedeutung ist und Sie ihn hinzufügen möchten, indem der Benutzer scrollt oder klickt, um weitere Inhalte anzusehen. Sie sollten 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 Ihre 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, sollten Sie 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 Ihre Seite sowohl für Ihre 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. Sie haben zwei Optionen den JS-Code auf Ihre Website einzubetten. Entweder Sie fügen den Code in ein Skriptelement in einem HTML-Dokument ein oder Sie verwenden 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. Sie können auf jeden Zweig des HTML-DOM zugreifen und ihn mit DOM-JavaScript ändern. Wenn dies gerendert wird, wird die Ausgabe im Browser angezeigt.

Sie haben die Möglichkeit dasselbe JavaScript auf mehreren Seiten zu verwenden und damit vermeiden, immer wieder dasselbe Skript schreiben zu müssen. Wählen Sie 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 Sie eine Datei mit demselben Code haben, 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 Ihre 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 Sie verwendet haben. 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 sollten Sie 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 Sie 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 Ihre Webseite schnell up to date bringen.

Wenn Sie Vue-JS serverseitiges Rendering verwenden, können die Crawler sofort die vollständige Seite sehen. So vermeiden Sie die Wartezeit oder riskieren, dass Ihre Seite gar nicht indexiert wird. Das Entscheidende hier ist, den Unterschied zwischen Pre-Rendering oder SSR zu kennen. Sie sollten überlegen, welcher Ihre Seiten sofort angezeigt werden muss. Wenn es sich um etwas Kleineres wie die Seite „Über uns“ oder „Kontakt“ handelt, reicht das Pre-Rendering aus. Sie sollten sich sich nicht für SSR entscheiden, wenn Sie viel Verkehr erwarten. Ihr Server kann dies ohne zusätzliche Ladezeit nicht bewältigen, damit riskieren Sie 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. Sie sollten jedoch auf die Indexierung achten, bevor Sie sich entscheiden, wie viel JS Sie auf Ihren Seiten implementieren wollen. Wählen Sie mit Bedacht zwischen Pre-Rendering oder SSR. Es gibt keine Einheitslösung, und es hängt alles davon ab, wie Sie eine schnellere Indexierung oder ein schnelles Laden für Ihre Benutzer schätzen.