Immer mehr Website-Entwickler verwenden heutzutage JavaScript-Frameworks und -Bibliotheken, aber viele JavaScript-Websites scheitern in den Google-Suchergebnissen, obwohl sie ziemlich beliebt sind. Um dies zu vermeiden, muss ein echter SEO-Profi JavaScript und seine möglichen Auswirkungen auf die Suchleistung einer Website verstehen.
In diesem Beitrag werde ich versuchen zu erklären, was JavaScript im Klartext bedeutet, und Ihnen über fünf wichtige Punkte erzählen, die jeder SEO-Spezialist bei der Arbeit mit einer JavaScript-basierten Website berücksichtigen sollte.
Was ist JavaScript?
Beginnen wir mit der Klärung der Begriffe hier.
Als beliebteste Programmiersprache für die Entwicklung von Websites (laut Business Insider 2018 Survey) verwendet JavaScript Frameworks, um interaktive Webseiten zu erstellen, indem es das Verhalten verschiedener Elemente auf der Seite steuert. Mit anderen Worten, es macht Webseiten dynamisch und interaktiv.
Ursprünglich haben die Entwickler ihre Frameworks nur in Browsern auf der Client-Seite implementiert, aber heutzutage ist der Code auch auf der Server-Seite integriert.
JavaScript kann in einem HTML-Dokument platziert werden, oder Entwickler können einen Link oder Verweis darauf setzen.
HTML ist eine Hypertext-Markup-Sprache. Ziel ist es, den Inhalt zu organisieren und seine Struktur widerzuspiegeln, indem alle Textelemente wie Überschriften und Unterüberschriften (H1, H2,…, H6), Absätze, Gliederungspunkte und andere Formatierungsdetails erwähnt werden.
Eine weitere Abkürzung für moderne SEO-Spezialisten, die mutig genug sind, JavaScript-Grundlagen zu erlernen, ist Document Object Model (DOM). Ein Browser führt eine Reihe von Schritten durch, um die Seite nach dem Empfangen des HTML-Dokuments darzustellen. Diese Reihe von Schritten bildet im Wesentlichen das DOM.
Wenn Google also ein HTML-Dokument erhält, erkennt es, ob es JavaScript-Elemente gibt. Danach initiiert ein Browser DOM, um den Suchmaschinen die Möglichkeit zu geben, die Webseite darzustellen.
Interne Verlinkungen korrekt verwenden
Eine interne Linkstrategie ist ein sicherer Weg, um Ihre Website-Architektur Web-Crawlern zu zeigen und auf die wichtigsten Webseiten zu verweisen.
Achten Sie hier darauf, dass die interne Verlinkung nicht durch JavaScript bei Klickereignissen ersetzt wird. Obwohl Crawler sehr wahrscheinlich End-URLs finden und crawlen, werden sie bei Klickereignissen nicht mit der globalen Navigation einer Website in Verbindung gebracht.
Es ist wichtig, dass die interne Verlinkung mit regulären Anker-Tags innerhalb des HTML aktiviert wird, damit das DOM den Benutzern die Möglichkeit gibt, die Seite zu durchqueren.
HTML-Snapshots
Die Beziehungsgeschichte von HTML-Snapshots mit Google ist lang und umstritten.
Sie sollten wissen, dass Google empfiehlt, HTML- Snapshots zu vermeiden (obwohl Suchmaschinen diese Elemente immer noch unterstützen).
Allerdings sollten fleißige SEO-Spezialisten mit HTML- Snapshots vertraut sein, da sie in einigen Situationen hilfreich sein können.
Beispielsweise können Sie Web-Crawlern HTML-Schnappschüsse anzeigen, wenn sie das JavaScript auf Ihrer Website nicht verstehen können. Dies geschieht in der Regel aufgrund von einigen Programmierfehlern. Es ist besser, Suchmaschinen mit HTML- Snapshots zu versorgen, als den Kontext unindiziert zu lassen.
Versuchen Sie, solche Situationen zu vermeiden, indem Sie sich mit dem Entwicklungsteam beraten und gemeinsam Backup-Pläne erstellen. Erwägen Sie die Installation einer Benutzer-Agenten-Erkennung auf der Serverseite, um den HTML-Snapshot sowohl Bots als auch Benutzern in Notfällen anzuzeigen.
Zeigen Sie Ihr Javascript den Suchmaschinen.
Jeder SEO-Spezialist weiß, wie wichtig es ist, Google-Suchmaschinen eine korrekte robots.txt-Datei zur Verfügung zu stellen, um optimale Crawling-Möglichkeiten zu gewährleisten. Der kritische Punkt hier ist, eine Webseite den Crawlern genauso zu zeigen, wie Sie sie den Benutzern zeigen.
Im schlimmsten Fall wird Google diese Dissonanz als Tarnung interpretieren und die Website aus ihrem Index entfernen.
Um unangenehme Folgen zu vermeiden, geben Sie Suchmaschinen immer Zugang zu den Ressourcen, die sie benötigen, um die Benutzerfreundlichkeit vollständig zu verstehen.
Wenn es Seiten gibt, die Sie vor Suchmaschinen verstecken möchten, wenden Sie sich immer an das Entwicklungsteam.
Achten Sie auf die URL-Struktur
Traditionell verwenden Websites mit JavaScript Hashes (#) und Hashbangs (#!) in URLs. Heutzutage werden diese Fragment-Identifikatoren nicht mehr empfohlen, und hier ist der Grund dafür:
Der einsame Hash wird im Allgemeinen verwendet, um einen Ankerlink zu identifizieren. Es ermöglicht es Benutzern, zu einem Teil des Inhalts auf einer Seite zu springen.
Das Problem ist, dass “#” nicht crawlbar ist, und alles, was darauf folgt, wird nicht an den Server gesendet. Dies kann dazu führen, dass die Seite automatisch zum ersten Element mit einer passenden ID scrollt. Google empfiehlt, die Verwendung des einsamen Hash in allen URLs zu vermeiden.
Hashbang war einst ein Hack, um Crawler zu unterstützen. In entkommenen Fragmenten gibt es zwei Erfahrungen.
Die erste nennt man Original-Erfahrung oder hübsche URL, die entweder ein #! innerhalb der URL haben muss, um anzuzeigen, dass es ein Escape-Fragment gibt, oder ein Metaelement, das anzeigt, dass ein Escape-Fragment existiert.
Das andere ist das escapte Fragment oder eine hässliche URL. Diese URL ersetzt (#!) durch “_escaped_fragment_” und dient als HTML-Snapshot.
Er erhielt den Namen “hässlich” wegen seiner Länge und seines Aussehens.
Eine sehr empfehlenswerte Strategie ist eine pushState History API. Da es navigationsbasiert und Teil der History-API ist, aktualisiert es die URL in der Adressleiste. Dies ermöglicht Änderungen nur an Inhalten, die aktualisiert werden müssen.
Die PushState History API ermöglicht es der JavaScript-basierten Website, “saubere” URLs zu nutzen, und wird von Google unterstützt. Ein perfekter Anwendungsfall für diese Methode ist eine unendliche Schriftrolle. Wenn die pushState History API genau implementiert ist, kehrt der Benutzer an die Stelle zurück, die er vor dem Aktualisieren der Seite angesehen hat.
Verbessern Sie die Latenzzeit Ihrer Website
Erinnern Sie sich, wie der Browser nach dem Empfang des HTML-Dokuments ein DOM erstellt? Gut. Gehen wir jetzt noch einen Schritt weiter.
Ein Browser lädt die Mehrheit der Ressourcen genauso, wie sie im HTML-Dokument erwähnt werden. Wenn sich oben in einem HTML-Dokument eine schwere Datei befindet, lädt ein Browser zuerst diese große Datei.
Der Rest der Informationen wird danach angezeigt, wahrscheinlich mit einer erheblichen Verzögerung. Wenn es sich um JavaScript-Dateien handelt, die die Seitenladegeschwindigkeit verstopfen, haben Sie wahrscheinlich ein renderblockierendes JavaScript, auch als wahrgenommene Latenzzeit bezeichnet.
Mit anderen Worten, Ihr JavaScript-Code verlangsamt die Ladegeschwindigkeit der Seite, auch wenn die Webseite das Potenzial hat, schneller zu erscheinen.
Google behauptet, dass die Nutzererfahrung an erster Stelle steht. Daher empfiehlt es sich, die wertvollsten Inhalte oben auf der Seite zu platzieren.
Erwägen Sie, das Problem der wahrgenommenen Latenz zu lösen, indem Sie JavaScript in das HTML hinzufügen, das Attribut “async” zu HTML hinzufügen, um Ihr JavaScript asynchron zu machen, oder JavaScript-Elemente innerhalb des HTML-Dokuments reduzieren.
Seien Sie vorsichtig mit JavaScript-Code, da er seine eigenen Fallstricke hat. Beispielsweise müssen Skripte in der Reihenfolge ihrer Priorität angeordnet werden, und Skripte, die auf Dateien verweisen, sollten erst nach dem Laden dieser Dateien verwendet werden.
Für beste Ergebnisse arbeiten Sie eng mit Ihrem Entwicklungsteam zusammen, um eine reibungslose Benutzerführung ohne Unterbrechungen im Code zu gewährleisten.
Schlussworte
Die Neugier auf neues Wissen zeichnet einen herausragenden SEO-Spezialisten aus. Das Verstehen der JavaScript-Grundlagen ist heute ein großes Plus und wird in naher Zukunft ein Muss sein, da sich die Suchmaschinen ständig weiterentwickeln. Jetzt ist es an der Zeit, Ihre Website auf Website-Latenz, Crawlability und Erreichbarkeit zu überprüfen.
Ich hoffe, dieser Beitrag hat Sie inspiriert, tiefer in JavaScript und seine praktische Bedeutung für SEO einzusteigen.
Haben Sie Fragen oder Anregungen zu diesem Thema? Ich freue mich auf Ihren Kommentar!
- 5 Dinge, die jeder SEO-Spezialist über JavaScript wissen sollte - January 11, 2019
- Website-Optimierung für Yandex – Teil 2 - July 13, 2017
- Website-Optimierung für Yandex – Teil 1 - June 15, 2017