Webseiten-Optimieren
Webseiten - Ein Kapitel für sich
Inhaltsverzeichnis
Was ist ein Quelltext?
Ein Quelltext bezeichnet den Inhalt einer ausführbaren Datei. Jede Webseite wird von dem Anzeigegerät, dem Browser, interpretiert und gemäß den vereinbarten Regeln auf dem Bildschirm angezeigt. Neben dem reinen Text enthält der Quelltext Anweisungen zur Ausgabe der Inhalte als Text, Bild, Link und ggf. Anweisungen für andere Medien (Video, XML, PHP, JavaScript etc.).
Man trennt grundsätzlich zwischen den Varianten Interpreter, Pre Compile, Nativ. HTML 4 Dateien sind grundsätzlich Interpreter in Klartext Formatierung, das heißt, der Quelltext ist einsehbar und lesbar. Jeder Browser hat eine Funktion um den Quelltext der Webseite anzuzeigen.
Aufbau einer HTML 4 Datei
Der Aufbau einer HTML 4 Datei folgt festgelegten Regeln (Syntax). Jede Datei hat mit der Deklaration eines Dokumententyps zu beginnen. Dadurch wird dem Anzeigegerät mitgeteilt, wie die folgenden Anweisungen zu interpretieren sind. Der weitere Aufbau gliedert sich zunächst recht simpel nach dem folgendem Schema.
<!doctype>
<html>
<head>Metadaten, Referenzen</head>
<body>Der Inhalt der Seite</body>
</html>
Angaben für Header (<head>)
Im Header der HTML-Datei werden sogenannte Meta-Tags und Referenzen hinterlegt. In manchen Fällen werden im Header auch JavaScript und StyleSheet Definition eingefügt, hiervon sollte aber kein Gebrauch gemacht werden, die Definition sollte über die Referenzen auf die entsprechenden Dateien erfolgen.
TopSuchmaschinen Angaben im Header
Als relevante Angaben für die Suchmaschinen im Header gelten der Seitentitel, die Suchbegriffe (teilweise) und die Seitenbeschreibung (Inhaltsangabe). Auf die Erläuterung der technischen Anweisungen für die Suchmaschinen verzichte ich hier.
TopFormatierung mit StyleSheet (CSS)
Der Quelltext enthält idealerweise die Verknüpfung mit einem sogenannten StyleSheet, einer Datei mit Anweisung zur Formatierung verschiedener Elemente (Tags, Id, Klassen). Bei einer konsequenten Umsetzung und einer korrekt codierten StyleSheet Datei werden keine sogenannten inline Styles (direkt im Quelltext platzierte Formatierung) verwendet. Das eröffnet zugleich die Option, das Erscheinungsbild der Webseite durch Änderungen an der StyleSheet-Datei global in allen Dokumenten zu ändern.
TopJavaScript Erweiterungen
JavaScript ist eine clientseitige, also auf Ihren Computer aktivierte Ergänzungssprache für HTML. Dynamische Inhalte auf Webseiten werden in der Regel mit Hilfe von JavaScript bzw. JavaScript Frameworks erzeugt. Vieles was Sie heute auf Webseiten zu sehen bekommen würde ohne JavaScript nicht angezeigt werden. Der Einsatz von JavaScript auf Webseiten ist nicht grundsätzlich abzulehnen, sollte aber immer einen Mehrwert bieten, und nicht als Spielkram (Gadget) eingesetzt werden. Jede Webseite sollte ohne JavaScript die volle Funktionalität bereitstellen. Einen sehr guten Page-Speed Index erreichen Sie nur durch den Verzicht von aufwendigen JavaScript Funktionen.
TopDer HTML-Body - Seitenstruktur
Der HTML-Body enthält den sichtbaren Inhalt Ihrer Webseite. Der Seitenbau sollte denselben Strukturen folgen wie in jedem anderen Textdokument. Sie verwenden sinnvollerweise eine Seitenüberschrift, Absatzüberschriften und entsprechend der Verwendung formatierte Textabsätze.
Zusätzlich können Sie weitere Elemente wie Bilder, Tabellen, Listen, Formulare und Links im Text platzieren. Mit Einführung von HTML 5 gibt es eine Fülle weiterer Elemente für die Gliederung der Inhalte und ein Element um Videos ohne Umwege (Flash) im Browser anzuzeigen.
Sie können sich den Aufbau einer Webseite wie eine Baumstruktur vorstellen, bei der jeder Knoten modifiziert werden kann, Knoten entfernt oder hinzugefügt werden können.
Man bezeichnet die Dokumentenstruktur auch als Document Object Modell (DOM). Dieses Modell lässt sich dynamisch über die Ergänzungssprachen während der Laufzeit (Darstellung im Browser) verändern. Diese Form wird immer noch als DHTML oder dynamisches HTML bezeichnet.
Quelltext Optimierung
Nachdem Sie in den vorhergehenden Absätzen den grundsätzlichen Aufbau einer Webseite erklärt bekommen haben, kann jetzt die Frage der Optimierung eines Quelltextes erläutert werden.
Ziel der Optimierung ist ein soweit als möglich reiner Inhalt. Das bedeutet, dass der Quelltext idealerweise sowenig Anweisung zur notwendigen Gliederung enthält, wie erforderlich sind.
Alles Überflüssige wird aus dem Quelltext entfernt, da es nur unnötiger Balast für den Inhalt ist. Damit erreichen Sie eine hohe Wahrscheinlichkeit, dass eine Suchmaschine Ihren Inhalt positiv bewertet, eine automatisierte Weiterverarbeitung der Inhalte in anderen Anwendungen wird zudem deutlich erleichtert.
Ein weiterer Vorteil von optimierten Quelltexten ist die problemlose Übernahme der Inhalte in eine neue Webseitengestaltung. Eben weil diese Quelltexte sauber gegliedert und frei von unnötigem Ballast sind, können sie in jedes Gestaltungsmuster integriert werden.
Die Qualität einer Webseite liegt nicht in der Optik, sondern im Quelltext. Die Optik einer Webseite kann sich im Laufe der Zeit ändern, die grundsätzlichen Inhalte bleiben.
Quelltexte überprüfen
Jede Webseite lässt sich auf die formale Richtigkeit überprüfen. Ich habe dazu auf allen meinen Webseiten einen Link zum W3c Validator eingefügt, Sie können sich gerne über die Qualität meiner Arbeit informieren.
TopPage-Speed
Ein weiterer Indikator für eine gute Webseite ist der Page-Speed Index. Sollte Ihr Browser über ein Page-Speed Add On verfügen, prüfen Sie doch einfach meinen Page-Speed Index, er sollte im Bereich von 95 – 99 liegen, also den begehrten grünen Haken anzeigen, der signalisiert das die Seite den Richtlinien im vollen Umfang entspricht.
Niemand wartet bis Ihre Webseite geladen ist, warum auch, es gibt Tausende von Webseiten mit vergleichbaren Informationen.