Nischenchallenge: Die fehlerfreie Seite!

Die Nischenchallenge läuft nun schon einen Monat und so langsam haben alle Teilnehmer ihre Seiten online gestellt und die ersten Schritten zur Monetarisierung eingeleitet.

Auch ich war nicht untätig und habe weiterhin Content erstellt und ein paar Links aufgebaut.

Primär habe ich mich allerdings um eine fehlerfreie Seite bemüht, denn ein optimaler Code und ein schneller Seitenaufbau, kann gerade für Nischenprojekte entscheidend sein.

Deshalb möchte ich Dich einladen, einmal die eigene Seitenstruktur ein wenig genauer unter die Lupe zu nehmen und ein paar Tools vorstellen, wie wir unser Projekt von unnötigen Fehlern bereinigen.

Die Fehlerfreie Seite

Die fehlerfreie SeitenstrukturIn meiner Artikelserie über die Website-Geschwindigkeit, habe ich schon sehr viele Tipps und Tricks gegeben, was man beim Seitenaufbau beachten sollte.

Manche dieser Hinweise setze ich beispielsweise auf diesem Blog gar nicht um, weil es sehr mühselig sein kann, jedem Plugin den Fehlercode hinterher zu tragen.

Bei einer Nischenseite sieht das aber mitunter ganz anders aus und wir sollten alles daran setzen, es für unsere Besucher und natürlich Google einfach zu machen.

Dabei können sogar Kleinigkeiten entscheidend sein, denn mitunter fällt die fehlerfreie Struktur bei der Bewertung einer Seite mit ins Gewicht.

Beginnen möchte ich, indem ich Dir zeige, wie Du Deine eigene Seite einmal genau analysierst und somit die häufigsten Fehlerquellen aufspüren kannst.

Ein sehr praktisches und vor allem kostenloses AnalyseTool ist Seitenreport.

Fehler finden und ausbessern

Ich habe für die Nischenchallenge ein Theme gekauft, aber natürlich kann man auch ein kostenloses WordPress-Theme nutzen. Manchmal sind diese aber mit fehlerhaftem Code überfrachtet und wir müssen noch jede Menge ausbessern. Das ist natürlich nicht immer der Fall. 

Schauen wir doch in diesem Zusammenhang einmal auf ein typisches Vorher-Nachher-Bild meiner Nischenseite. Der obere Teil zeigt das Analyseergebnis bevor ich irgendwas verbessert habe und unten sehen wir den jetzigen Zustand.

Danach möchte ich Schritt für Schritt erklären, wie ich die angezeigten Fehler beseitigt habe. Natürlich habe ich auch nicht für alles eine Lösung und bin auf ein paar Helferlein und Tools angewiesen.

Fherlquellen beseitigen - Vorher-Nachher

Schauen wir doch einmal, wie wir die einzelnen Aspekte auf unserem Blog oder unserer Seite grundsätzlich optimieren können und was es dabei zu beachten gibt.

HTML- und CSS-Fehler beseitigen

HTML bereinigenDie Fehler im HTML-Code lassen sich recht einfach mit dem W3C-Validator aufspüren, wo wir auch gleich Vorschläge für die einzelnen Punkte bekommen.

Das gleiche Tool bietet uns übrigens auch einen CSS-Validator, um den CSS-Code zu optimieren und ein paar alte oder auch falsche Befehle aufzuspüren.

Außerdem halte ich das Tool Clean CSS für sehr empfehlenswert, vor allem weil es uns noch mehr Optionen bietet.

Idealerweise übernehmen wir diese aber nicht blind, sondern speichern vorab das Original ab, um späteren Ärger zu vermeiden.

Language-Key festlegen

Mehr Besucher durch KommentareDer sogenannte Language-Key ist insofern wichtig, als dass wir Crawlern und Suchmaschinen über diesen mitteilen, welche Sprache auf unserem Projekt genutzt wird.

Diesen können wir mit ganz einfachen Mitteln festlegen und zwar an mehreren Stellen.

Idealerweise platzieren wir die Spracherkennung allerdings gleich an den Anfang. Dort können wir auch gleich noch festlegen, dass wir ein Zeichensystem verwenden, das von links nach recht funktioniert. Bei einer hebräischen Seite wäre das also anders.

Im Code sieht das dann so aus:

<html xmlns=“http://www.w3.org/1999/xhtml“ dir=“ltr“ lang=“de-DE“>

Diese Zeile platzieren wir im Kopfbereich unserer Homepage oder bei einem WordPress-Blog in der header.php und zwar noch vor dem eröffnenden <head>-Tag.

Spaghetti-Elemente reduzieren

Unnötigen Code durch CSS ersetzenDen Begriff Spaghetti-Elemente gibt es eigentlich gar nicht und er wurde vom Analyse-Tool Seitenreport selbst kreiert.

Er bezeichnet Elemente, die das Aussehen bestimmter Bausteine auf unserer Seite steuern, wie etwa <b>, <font> und ähnlichem Befehlen und dabei jedes Mal abfragen, wie diese gestaltet werden sollen.

Wenn wir in jedem Artikel einzeln festlegen, was wofür gilt, bläht das den Code allerdings sehr stark auf.

Deshalb bietet es sich an, mittels CSS das Ganze auszulagern und dann einfach auf die jeweiligen Klassen zuzugreifen.

Also anstatt <b> Das ist ein fetter Satz</b> lieber per CSS die Fettschreibung einrichten. In etwa so:

.fett { font-weight: bold }

und dann per <div class=“fett“>Das ist ein fetter Satz</div> einsetzen.

Dieses Beispiel ist natürlich nur die Spitze des Eisbergs und wenn es nur um einen fettgedruckten Satz geht, vielleicht auch ein wenig zu aufwändig.

Allerdings verwendet man mitunter auch komplexere Strukturen, wie etwa align-left oder unterschiedliche Schriftgrößen und Farben und spätestens dann sollte darüber nachgedacht werden.

Eine Anleitung dafür findet man auf SELF-HTML, auch wenn wir hierbei noch ein bisschen suchen müssen, um die passenden Bausteine für unser Projekt zu finden. Notfalls eignet sich aber auch das angegliederte Forum für etwaige Nachfragen.

Layout-Tabellen

In HTML hatten Tabellen ehemals die Funktion, die einzelnen Elemente einer Webseite zu koordinieren und auszurichten.

Mithilfe des Befehls „border=0″ ist es nämlich möglich, die unschönen Linien auszublenden und letzten Endes eine schöne Struktur zu schaffen. Dabei können wir Bilder und auch andere Inhalte zielgerichtet auf unserer Seite platzieren.

Layout-Tabellen haben zwar keinen wirklichen Einfluss auf das Suchmaschinen-Ranking, wie ich an vielen Stellen lesen konnte. Jedenfalls habe ich diese Erfahrung noch nicht gemacht. Denn Inhalte werden über kurz oder lang gescannt, ganz egal, wie sie dargestellt werden.

Dennoch ist es von Vorteil, auf DIV-Container für die grundlegende Struktur auszuweichen, da sich das enorm auf die Geschwindigkeit des Seitenaufbaus auswirken kann.

Und diese spielt schon ein wichtigere Rolle, wenn es um die Platzierung in den Suchmaschinen geht. Wenn auch keine übergeordnete.

Eine Schöne Anleitung findet man dafür auf http://www.css4you.de/, jedoch sollte der grundsätzliche Umgang mit DIV-Elementen nicht neu sein. Idealerweise also erst auf einer Testseite ausprobieren :)

Die Seitengeschwindigkeit

Geschwindigkeit ist das A und OAuf Applets und Frames möchte ich an dieser Stelle nicht weiter eingehen. Wenn es diesbezüglich allerdings Fragen gibt, freue ich mich über einen Kommentar und versuche alles zu beantworten.

Zudem möchte ich Dir an dieser Stelle noch meinen Artikel über das Optimieren von Bildern empfehlen.

Ich habe eingangs behauptet, dass die Geschwindigkeit einer Seite wichtig ist, denn einerseits erhöht sie die Usability (~Benutzerfreundlichkeit), aber gleichermaßen ist sie ein Ranking-Faktor für die Suchmaschine Google. Auch wenn der Anteil natürlich minimal ist.

Das sollte allerdings kein Grund sein, das Ganze außen vor zu lassen. Vor allem weil wir diesbezüglich vieles selbst in die Hand nehmen können und nicht auf externe Dinge angewiesen sind. Ein sehr schönes Tool zur Analyse stammt aus dem Hause Google: Pagespeed.

PageSpeed bietet uns die Möglichkeit, eine Seite auf unzählige Stolpersteine und Performance-Fehler zu untersuchen. Zwar ist die Installation ein bisschen kompliziert, aber hier gibt es eine genaue Anleitung.

Weiterhin bietet es sich an, das Plugin WP-Cache zu verwenden. Dieses entlastet den Webserver, indem es statische Seiten erzeugt und somit verhindert, dass unsere dynamisch-generierten Inhalte unzählige Datenbankabfragen bewirken. Eine schöne Anleitung zu Handhabung und Feintuning gibt es auf drweb.

Gerade bei kleineren Projekten konnte ich dadurch enorme Perfomance-Verbesserungen feststellen.

Bei größeren Seiten und vor allem einem hohen Besucheransturm, ist dem aber wohl nur mit einem besseren Server beizukommen. Aber gerade im Bereich der Nischenprojekte kann das jede Menge ausmachen.

Die Geschwindigkeit der Nischenseite

Ich konnte durch den Einsatz der genannten Tools jede Menge Potential aus meinem Projekt herauskitzeln. Mit Sicherheit gibt es noch viel zu tun, aber ich wollte Dir in diesem Artikel hauptsächlich ein paar Anregung zur Optimierung geben.

Außerdem bin ich selbst auf solche Tools angewiesen, da ich nicht auf Anhieb immer alles richtig mache und mit Sicherheit selbst einige Fehler einbaue.

Viele Fehler lassen sich aber vermeiden und mit ein bisschen Geduld in wenigen Augenblicken aus der Welt schaffen.

Da eine fehlerfreie Struktur die Lesbarkeit für Crawler erhöht und die Geschwindigkeit sich mitunter auf das Ranking auswirkt, halte ich es für wichtig, wenigstens die grundlegenden Aspekte zu beachten.

Wer einmal schauen möchte, wie der Google Bot unsere Seite sieht, wird im verlinkten Artikel fündig.

Die Entwicklung meiner Nischenseite

Das soll es für diese Woche gewesen sein. Allerdings möchte ich noch einen kleinen Blick auf die Entwicklung meiner Seite (http://taufgeschenke24.com) werfen.

Zwar ist die Hauptseite aus dem Index verschwunden, aber ein paar Unterseiten ziehen nach und in den nächsten Wochen sollte sich das auch alles wieder einpegeln. Die letzten sieben Tage sahen dabei so aus:

Die letzten sieben Tage - Nischenprojekt

Hierbei finde ich vor allem die hohe Verweildauer bemerkenswert und auch die vielzähligen Seitenaufrufe sind sehr gut.

Zwar ist das mitunter noch ein wenig verfälscht, aber teilweise kommen solche Besucher direkt über Google. Ich bin also sehr gespannt, wie sich das Projekt zukünftig entwickelt.

Außerdem konnte ich die ersten Einnahmen generieren und zwar 8€ via GoogleAdsense und rund 48€ über mehrere Partnerprogramme, wodurch ich meine Ausgaben immerhin drin habe.

Die 48€ sind allerdings noch nicht fix, da ich hierbei noch mit Stornierungen rechnen muss, aber immerhin.

Wenn Du einmal schauen möchtest, wie sich die anderen Teilnehmer des kleinen Wettbewerbs schlagen, kannst Du das entweder bei Peer oder Sebastian tun.

In der nächsten Woche möchte ich mich dann vor allem mit dem Aufbau von Backlinks beschäftigen und ein paar Möglichkeiten zeigen, wie man sich im Google-Index nach oben boxt. Wenn Du noch weitere Hinweise zur fehlerfreien Seite hast, freue ich mich über Deinen kommentar :)

7 Meinungen

  1. Helge03-13-2012

    Wow, viele, viele Links zum Experimentiern. Mal unabhängig von der Nische: Danke :)

  2. Andy03-13-2012

    Hab gerade bei mir auch mal gechekt, oh mann vor allem die HTML Fehler.

    • Jonas G.03-15-2012

      @Helge

      Sehr gern!

      @Andy

      Ja, hier im Blog stapeln sich auch viele unerledigte Aufgaben, aber nahezu jedes Plugin bringt wieder etwas durcheinander und ich kümmere mich deshalb nicht alle paar Minuten darum. Allerdings halte ich eine nahezu fehlerfreie Struktur bei einer Nischenseite für essentiell :)

      schöne Grüße

  3. Nathanael03-15-2012

    Hey Jonas, das ist wirklich wichtig. Ich hätte da eine Artikelidee von der ich natürlich ganz im speziellen profitieren würde. Nur habe ich gerade gesehen, dass Du hier keinen Newsletter anbietest, deswegen ist wohl für Dich der Artikel nicht ganz so brauchbar. Es geht darum einen validen Opt-In Code hinzubekommen….

    • Jonas G.03-15-2012

      Hallo Nathanael,
      schön, Dich nochmals hier begrüßen zu dürfen :)

      Eine Artikelidee ist doch aber dennoch brauchbar. Ich betreibe auf dieser Seite auch kein Dropshipping und trotzdem schreibe ich sehr gern darüber – Also immer her mit den guten Ideen, ich bin gespannt!

      schöne Grüße

  4. Nathanael03-15-2012

    Hey, hab’s gerade eben selbst geschafft, zumindest meine Startseite valide zu haben. Bin grad richtig stolz drauf. :-)

    Natürlich schau ich hier jetzt regelmässig vorbei. Find ja, dass Du tolle Artikel schreibst.

  5. Jonas G.03-16-2012

    Hey Nathanael,

    das freut mich – wobei ich eingestehen muss, dass ich das schon häufiger „hinbekommen habe“, um es dann mit dem nächsten Plugin, einer unachtsamen Minute oder irgendeinem anderen Quark wieder verhunzt habe :)

    Schöne Grüße und ein wundervolles Wochenende Dir