SEO-News

CodeDer Trend zu dynamischen Webseiten auf JavaScript-Basis und zu Single Page-Applications hat einen Nachteil: SEO-Aspekte geraden dabei oft ins Hintertreffen. Eine Lösung dafür bietet Isomorphic JavaScript: die Vereinheitlichung der Code-Basis auf Client und Server.

 

Webseiten haben in den letzten Jahren eine beachtliche Entwicklung durchlaufen: Vor gar nicht langer Zeit lieferte der Server noch das komplette HTML aus. Der Browser musste dieses HTML lediglich darstellen und rendern. Dazu kam rudimentäres JavaScript, um beispielsweise Slideshows oder Kalender-Widgets darzustellen.

Mit zunehmender Leistungsfähigkeit der Computer und dem Aufkommen von Smartphones und Tablets wurden immer größere Teile der Logik auf den Client übertragen. Schnelle JavaScript-Umgebungen und HTML5 sorgen inzwischen dafür, dass Webseiten gestaltet werden können, die sich wie Applikationen anfühlen. Die Berechnung der Nutzeroberfläche geschieht vollständig im Browser. Der Vorteil: Für die einzelnen Aktionen auf der Webseite ist kein vollständiger Server-Roundtrip mehr notwendig.

 

Dynamische Webseiten verhalten sich wie Apps

Dies mündete in sogenannte Single Page-Applikationen - eine Art Hybrid zwischen Webseite und App. JavaScript-Frameworks wie Angular.js, Backbone.js oder Ember.js, sogenannte Model View Controller- oder auch MVC-Frameworks, liefern die notwendige Funktionaliät.

Client-side MVC

 

Der Großteil der Funktionalität sowie die Logik der Applikation inklusive Templates befinden sich in diesem Modell innerhalb des Clients. Vom Server erhält der Client lediglich ein Grundgerüst. Die Daten bezieht die App von einer definierten Schnittstelle (API).

Der Vorteil besteht darin, dass der Client die Elemente der Oberfläche wiederverwenden kann und lediglich für aktualisierte Daten Abfragen durchführen muss. Das erleichtert die Bedienung.

 

SEO-Frage ungeklärt

Ein entscheidender Nachteil dieser Arbeitsteilung zwischen Client und Server ist jedoch die Schwierigkeit, solche Webseiten oder Single Page-Applications reibungslos in den Index der Suchmaschinen zu überführen. Während der Server nur Grundelemente ausliefert, kommt er als Ansprechpartner für den Googlebot nicht mehr in Frage.

Auf der Clientseite besteht das Problem, dass zur Darstellung der Inhalte die Ausführung von JavaScript notwendig ist. Zwar beteuert Google, inzwischen JavaScript ausführen zu können, jedoch gibt es keine Garantie dafür, dass das für jede Seite funktioniert. Das Resultat können Fehler beim Crawlen und die unvollständige Indexierung von Daten sein. Die von Google noch bis vor einigen Monaten bevorzugte Variante des Auslieferns statischer HTML-Snapshots für den Crawler wird inzwischen nicht mehr offiziell empfohlen. Es bleibt also eine Grauzone.

Ein weiterer Nachteil kommt hinzu: Die meisten SEO-Tools kommen aktuell noch nicht mit dynamischen Webseiten zurecht. Will man eine umfangreiche Webseite, die dynamisch ausgeliefert wird, auf Fehler untersuchen, indem man ein Werkzeug zum Crawlen der Seite verwendet, stößt man oft auf Probleme. Hoffnung machen erste Ansätze von JavaScript-fähigen Crawlern wie zum Beispiel Screaming Frog.

 

Ein hybrider Ansatz für alle Fälle

Wie lassen sich also die Vorteile beider Welten verbinden, nämlich die Crawlbarkeit klassischer HTML-Webseiten und die Usability von Single Page-Applikationen? Eine Möglichkeit dazu verspricht das Isomorphic JavaScript. Abgeleitet aus dem Griechischen steht der Begriff "isomorph" für gleichartig oder von gleicher Gestalt. Und genau darum geht es: Man schafft Applikationen, deren Code sowohl auf dem Server als auch auf dem Client identisch ist. Das ermöglicht das Ausliefern von fertigem HTML durch den Server für die Crawlbarkeit und die Nutzbarkeit im Stile einer Applikation im Client. Wie das aussehen kann, verdeutlicht die folgende Abbildung:

Client-Server-MVC

 

Im sogenannten Client-Server-MVC-Modell können Teile der Applikationslogik sowohl auf dem Client als auch auf dem Server ausgeführt werden. Laufzeitumgebungen wie Node.js ermöglichen das Ausführen von JavaScript-Code auf dem Server. Dazu ist lediglich für entsprechende Abstraktionen zu sorgen:

Routing: Es wird ein Route-Handler benötigt, der in der Lage ist, mit HTTP-Headern, Cookies, URI-Parametern etc. umzugehen.

Daten sammeln und speichern: Benötigt werden Ressourcen, die für Rendern einer Seite oder Komponente sorgen. Dabei kann es sich um eine simple URI handeln, die auf einen JSON-Endpunkt zeigt. Vorstellbar ist auch das Kapseln von Ressourcen in Klassen und Objekten.

Rendern der Seite: Das Markup einer Seite muss in einer isomorphen, also gleichartigen Weise geschehen. Das kann durch direkte Manipulation des Document Object Models (DOM) der Seite geschehen oder durch einfache HTML-Tags.

Bauen und packen: Vor allem bei komplexeren Web-Applikationen ist die Frage des Erstellens entsprechender Pakete entscheidend: Für eine App müssen der Code, die Views und die Templates in ein Artefakt überführt werden, das mehrere Megabytes groß werden kann. Dynamische Pakete und Lazy-Loading versprechen hier zwar Abhilfe, erhöhen jedoch die Komplexität.

Isomorphic JavaScript wird auch von Google empfohlen: Im aktuellen Webmaster-Hangout nannte Johannes Müller von Google diese Technik als eine Möglichkeit, dynamische Webseiten crawlbar zu machen (siehe folgendes Video):

Johannes Müller

 

Frameworks für Isomorphic JavaScript

Bereits heute gibt es eine große Anzahl von JavaScript-Frameworks, mit denen sich die genannten Anforderungen bewältigen lassen. Zu diesen Frameworks gehören

Mojito: Eines der ersten, wenn nicht das erste Isomorphic Framework, das als Open Source-Projekt verfügbar war, ist Mojito. Es basiert auf Node.js, weist aber viele Yahoo-spezifische Eigenheiten auf, was seiner Popularität geschadet hat.

Meteor: Wie Mojito basiert auch Meteor auf Node.js, genießt in der JavaScript-Gemeinde eine wesentlich größere Popularität.

Asana: Die Task-Management-App erlaubt das Ausführen einer App auf dem Server. Für jeden Nutzer wird ein eigener Prozess auf dem Server gestartet, wobei derselbe JavaScript-Code ausgeführt wird, der auch auf dem Client läuft.

 

Fazit: Client und Server gleichen sich an

Nach einer Periode des Auseinanderdriftens von Client und Server ist nun eine Annäherung absehbar. Der größte Vorteil dieser Entwicklung ist darin zu sehen, dass sich damit die Vorteile verschiedener Paradigmen kombinieren lassen: dynamische Webseiten, die sich wie Apps anfühlen und eine komfortable Bedienung erlauben und die außerdem auch für die Suchmaschinen sichtbar, crawlbar und indexierbar sind.

Es wird vermutlich noch eine Weile dauern, bis sich das entsprechende Wissen unter den Webentwicklern und Applikationsdesignern durchgesetzt hat, doch mit den bereits heute verfügbaren Frameworks stehen möchtige Werkzeuze bereit, um die Apps der Zukunft zu gestalten und zu entwickeln. Bereits heute nutzen große Anbieter wie zum Beispiel Airbnb diese Technik für ihre Applikationen.

 

Titelbild © maciek905 - Fotolia.com

 


Christian Kunz

Von Christian Kunz

SEO-Experte. Sie benötigen Beratung für Ihre Webseite? Klicken Sie hier.



Anzeige von Clixado

Artikelveröffentlichungen auf starken Magazinen und Blogs

Wir kooperieren mit unzähligen Verlagen und Bloggern und können daher auf über 4000 Blogs zu fast allen Themengebieten Artikelplätze anbieten:

    - Nachhaltiger Linkaufbau, kein SEO-Netzwerk
    - Hohe Sichtbarkeitswerte, keine expired Domains
    - Einmalzahlung, keine Vertragsbindung

Für jede Artikelveröffentlichung erstellen wir hochwertigen Content mit mindestens 400 Wörtern und publizieren den Artikel mit einem DoFollow-Bachlink zu deiner Seite auf einem Magazin oder Blog deiner Wahl.

Frag uns unverbindlich nach Beispielen





 

SEO-Checkliste

SEO-Checkliste

 

Anzeigen












SEO-Beratung

Suchmaschinenoptimierung und SEO-Beratung für Karlsruhe, Baden und die Pfalz

 

06340/351-943

 

info(at)seo-suedwest.de

SEO-Schulung 2019

SEO-Schulung

Ganztägige Schulung "SEO-Grundlagen". Jetzt anmelden

Jetzt vernetzen

SEO-Glossar

SEO-Glossar

 

SEO-Kalender 2018

SEO-Kalender 2018

 

Onsite-Optimierung

Onsite-Optimierung

 

SEO- und Suchmaschinenblogs

Bekannt aus

Website Boosting


Internet World Business

SEO United


The SEM Post


Webselling

SEO selber machen

SEO selber machen

Sprecher auf

Auszeichnungen

iBusiness Top-100-Liste SEO-Dienstleister

SEO Südwest: Platz 5 bei den SEO-Wahlen 2014 zum besten deutschen SEO-Blog

 

SEO-united.de Tipp 12/15

SEO-Tipps und SEO-Tricks

IMAGE 'Noindex' oder robots.txt - wann ist welches Instrument das richtige?
Freitag, 09. Februar 2018
Um zu steuern, welche Seiten von Google und anderen Suchmaschinen gecrawlt und indexiert werden... Weiterlesen...
IMAGE Lighthouse: ein Top-Tool für die Performancemessung von Webseiten und PWAs
Montag, 16. Oktober 2017
Lighthouse ist ein Tool, mit dem man die Performance und die Nutzerfreundlichkeit von Progressive... Weiterlesen...
IMAGE Tipp: Reddit für den Aufbau von Backlinks nutzen
Samstag, 17. Januar 2015
Die Social-News-Plattform Reddit erlaubt den Aufbau von guten Backlinks - wenn man sich an... Weiterlesen...

News aus dem Blog

IMAGE Vielen Dank für die Glückwünsche, Google!
Dienstag, 07. November 2017
Google hat mich mit einem persönlichen Geburtstags-Doodle überrascht. Vielen Dank dafür! Weiterlesen...
IMAGE Google Webmaster Hangout: A visit at the Google Zurich office
Donnerstag, 05. Juli 2018
I was invited to Google Zurich to take part in a new episode of the Webmaster Office Hangout. I was... Weiterlesen...
IMAGE AMP - Is GDPR-compliant usage possible?
Sonntag, 29. April 2018
The AMP framework was established to speed up mobile websites. Normally, AMP pages are served via... Weiterlesen...

 Eine Auswahl zufriedener Kunden

Rebel - Bad Küche Raum
Schöne Haare Karlsruhe
kr3m
feel-perfect.eu - Die Nährstoffexperten border=
Flintec IT GmbH
ESM Academy
Ringladen

Verbinden und Informationen zu SEO Südwest

Impressum und Datenschutz

Social Networks und RSS-Feed