Saubere Technik als Wettbewerbsvorteil

Teil 1. des Guide für unsere SEO Agentur Lübeck

Eine saubere technische Umsetzung ist für eine Webseite genauso wichtig, wie bei einem Auto (von dem man nicht will, dass Bremse und Gas vertauscht sind) oder einem Haus (das nicht undicht sein oder auseinanderfallen soll).

Es gibt daher internationale Standards, die Kompatibilität und Darstellung weltweit sicherstellen, ohne beispielsweise für jede Sprache (z.B. chinesisch) eine extra Version der Seite ausliefern zu müssen.

Daneben spielen Faktoren wie die Optimierung für Smartphones, Tablets & Co. (Responsive Design), die Sicherheit des verwendeten Systems für die Bearbeitung der Inhalte, sowie beispielsweise Ladezeiten eine wichtige Rolle für den technischen „Erfolg“ der Webseite.

Hier lässt sich aus Vertriebsperspektive gut ansetzen, denn der weit überwiegende Teil der Webseiten erfüllt häufig nicht einmal die Grundvoraussetzungen.

Die Prüfung sollte in der hier eingehaltenen Reihenfolge durchgeführt werden, da die Kernprobleme damit am Schnellsten identifiziert werden können.

KONA (Kundenorientierte Nutzenargumentation):

Wenn auf Ihrer Webseite (in Ihrem Content-Management-System) Fehler sind, dann:

• wird sie nicht richtig angezeigt
  was verhindert, dass Sie zeigen, was Sie zu zeigen wünschen
• funktioniert sie nicht auf den meisten mobilen Geräten
  und damit ebenfalls bei über der Hälfte der Internetnutzer nicht!
• kann sie von Suchmaschinen nicht optimal verarbeitet werden
• was die Sichtbarkeit und Auffindbarkeit massiv behindert → schlechtes Ranking
• birgt sie Sicherheitsrisiken
  wie Einbruch in das CMS, Vandalismus oder Identitätsdiebstahl

1.1. Standardkonformer Code

Standardkonform bedeutet lediglich, dass sich die Programmierer bei der Umsetzung der Seite an die allgemeingültig bestehende Regeln halten, damit die Inhalte im Browser wie erwartet und gewünscht dargestellt werden können. Für eine Webseite sind das die Bereiche: HTML & CSS.

1.1.1. HTML prüfen

HTML (HyperText Markup Language), inzwischen in der Version 5, daher HTML5 genannt, ist eine „Struktursprache“. Sie bildet den Rahmen der Webseite, strukturiert den Inhalt und definiert so beispielsweise ob etwas eine Navigation, ein Text, eine Überschrift oder ein Button ist. Diese Struktur muss in sich geschlossen und logisch sein, denn nur so können Suchmaschinen erkennen, um welche Art Inhalt es sich handelt (Überschrift? Text? Link?) – und es liegt auf der Hand, dass auch nur so die korrekte Darstellung sichergestellt werden kann.

Die Prüfung auf valides HTML (sog. Quellcode) erfolgt auf der Seite des internationalen Web-Konsortiums (W3C). Unter folgendem Link kann man entweder die Domain/URL der Seite oder aber sogar den Quelltext direkt einfügen und testen (siehe Abbildung unten).

http://validator.w3.org

Das Ergebnis einer solchen Prüfung kann so aussehen:

Weiter unten auf der Seite werden Details zu den jeweiligen Fehlern ausgegeben – samt Hinweisen, wie diese zu beheben sind. Wichtig ist hier zwischen Warnung und Fehler zu unterscheiden: eine Warnung ist kein Fehler sondern eher ein freundlicher Hinweis.

Merke: viele Fehler bedeuten, dass die Seite in jedem Fall modernisiert bzw. upgedatet werden muss; ein Haus mit defekter Statik.

1.1.2. CSS prüfen

Das CSS (Cascading Style Sheets) [aktuell in Version 3, daher CSS3] definiert Position, Aussehen und Verhalten von Inhalten auf der Webseite. Wenn über HTML beispielsweise ein Text als Überschrift ausgezeichnet ist, wird per CSS nun z.B. die Schriftart, -größe, -farbe etc. definiert. Auch Hover- und moderne Slide- sowie Übergangseffekte werden damit realisiert.

Da CSS3 inzwischen sehr massiv eingesetzt wird, gilt es auch hier zu prüfen, ob es korrekt benutzt wird. Dazu findet sich auf dieser Seite das passende Formular (wieder W3C):

http://jigsaw.w3.org/css-validator

Hier muss nun allerdings der Link zu der Datei angegeben werden, die geprüft werden soll. Dazu rufen wir auf der Seite einfach per Klick auf den rechten Mausbutton den Kontextmenüpunkt „Quelltext anzeigen“ auf. (Je nach Browser kann die Position variieren.)

Daraufhin erhält in etwa die folgende Ansicht:

In diesen zunächst unübersichtlichen Zeilen findet sich der gesuchte Link zur CSS-Datei (hier blau hinterlegt.) Zu erkennen ist die richtige Stelle am Einfachsten, indem man zunächst nach „type=“text/css“ sucht; diese Angabe ist immer im oberen Bereich zu finden.

Obacht: es gibt häufig mehrere Dateien, daher im Zweifel auf den Namen achten. Dieser ist i.d.R. eindeutig, z.B.: style.css.

Wieder erhält man eine Auswertung mit konkreten Stellen und Hinweisen, um Abhilfe zu schaffen.

Merke: nur sauberes CSS3 bedeutet, dass die Seite korrekt dargestellt werden kann.

1.1.3. Broken Links – defekte Links

Die Verlinkung innerhalb und zwischen Webseiten ist die grundlegende Basis des Internets. Aus diesem Grund sind fehlgeleitete oder defekte Links ein Problem. Zudem bilden Art, Anzahl und Gestaltung von Links die Grundlage für das Suchmaschinenranking.

Um eine Webseite auf fehlerhafte Links zu prüfen, gibt es wieder einen Service des W3C

http://validator.w3.org/checklink

Nach erfolgter Prüfung werden fehlerhafte Links angezeigt und können im Anschluss korrigiert werden.

Merke: fehlerhafte Links beeinflussen Nutzererfahrung und Suchmaschinenranking negativ.
1.2. Responsive Design (für mobile Endgeräte)

Weit über 50% der Webseitenabrufe erfolgen inzwischen über mobile Endgeräte. Webseiten müssen also zwingend auch auf kleineren Displays gut erkenn- und navigierbar sein. Die Lösung ist Responsive Webdesign mit Hilfe von HTML5 und CSS3.

Beim Responsive Design wird i.d.R. bereits zu Beginn der Erarbeitung immer die kleinste Bildschirmauflösung zu Grunde gelegt (Mobile First). Diese bildet die Basis für alle weiteren angestrebten Szenarien der Inhaltsdarstellung je nach Bildschirmauflösung (Tablets, Monitor etc.).

Um die responsiven Fähigkeiten einer Seite zu testen, genügt es, das Browserfenster horizontal zu verkleinern. Entsprechend optimierte Seiten passen die Darstellung an. (Siehe Abbildung oben.)

Merke: ist eine Webseite nicht mobiloptimiert, ist sie im schlimmsten Fall für über die Hälfte der Nutzer nicht bedienbar.

Um zu prüfen, ob eine Seite für mobile Endgeräte optimiert ist, bietet Google einen sehr nützlichen Service unter:

https://www.google.com/webmasters/tools/mobile-friendly

Die dargestellte Analyse listet explizit Probleme und Lösungen auf. Besteht eine Seite diesen Test nicht, herrscht Handlungsbedarf.

1.3. CMS und Updates

Content-Management-Systeme werden primär dazu benutzt die Inhalte einer Webseite zu verwalten. Dafür erhält der Nutzer einen Benutzernamen samt Passwort für einen Administrationsbereich in dem er vielfältige Möglichkeiten vorfindet. Der Markt der Systeme ist praktisch unüberschaubar; hier eine kleine Auswahl:

Im Bereich kleiner und mittelständischer Unternehmen sind in Deutschland die am weitesten verbreiteten Systeme: WordPress, Joomla, Typo3 oder auch Contao.

Vorteil dieser Systeme ist der relativ einfache Zugang zu den Inhalten sowie die Möglichkeit Zusatzfunktionen wie Kontaktformulare, Social-Media-Leisten oder auch komplexere Dinge, wie etwa Shops vergleichsweise einfach zu realisieren.

Nachteil ist, dass diese Systeme AKTIV gepflegt werden müssen, um sicher zu bleiben. Die eingesetzten Datenbank- und Programmiertechniken sind stetigem Wandel unterworfen und Lücken werden tatsächlich im Minutentakt entdeckt… und auch ausgenutzt.

Betroffen waren hunderttausende Systeme, deren Administratoren keine Updates durchgeführt hatten.

Dies ist eine reale Gefahr, insbesondere da sich der Fortschritt beschleunigt und das Tempo mit denen beispielsweise für WordPress Updates zur Verfügung gestellt werden schwindelerregend ist.

Merke: Wer ein CMS einsetzt, muss updaten und sollte das einem Profi überlassen!

Um herauszufinden, ob und welches CMS eingesetzt wird, gibt es:

http://whatcms.org

Hier kann die Domain/URL der betreffenden Seite eingetragen werden und man erhält als Ergebnis den Link zum passenden CMS. Dort lässt sich i.d.R. ebenfalls prüfen, ob die jeweils verwendete Version noch aktuell ist – sollte das nicht der Fall sein, finden sich Hinweise im Administrationsbereich des Kunden. Hier am Beispiel von WordPress:

Das Thema Sicherheit ist in aller Munde. Insbesondere Unternehmen sollten auch in diesem Bereich darauf achten, denn es agieren automatisierte Programme – keine Mitbewerber oder Mitmenschen, die persönlich jemandem Böses wollen. [leider ein häufiges Argument] Hier kann und sollte im Vertrieb sensibilisiert werden.

Wichtig: wenn ein CMS eingesetzt wird, klar fragen, ob und wer updatet. Tut das niemand, ist eigentlich Handeln nötig.

Zusatz: gleiches gilt für Mailadressen. Firmenmails über GMX, T-Online & Co. sind nicht geschützt und datenschutzrechtlich grau/unzulässig. Nur über die eigene Domain kann der Verbleib sichergestellt werden. (seo@rapid-data.de vs rapidseo@gmx.de)

Merke: CMS sollten nur von professionellen Anbietern (z.B. rapid data) eingesetzt und von diesen gewartet werden, um Risiken zu vermeiden und den Datenschutz sicherzustellen.

1.4. Ladezeiten

Bedingt durch die begrenzte Bandbreite der Mobilnetze und auch im Hinblick auf die eingesetzten Ressourcen für das Erfassen der Inhalte (z.B. durch Suchmaschinen) hat sich das Kriterium Ladezeit als zunehmend bedeutet herausgestellt. Auch Nutzer sind zudem kaum bereit spürbare Verzögerungen hinzunehmen – insbesondere auf mobiloptimierten Seiten.

Hinzu kommt: wenn z.B. Google beim Erfassen einer Seite jeweils nur wenige Millisekunden Zeit und damit Energie einspart, dann ist das im Bezug auf Milliarden von Seite eine relevante Größe. Kurz: Ladezeit ist nicht nur ein technisches Kriterium sondern daher auch ein wichtiger Rankingfaktor!

Für die Prüfung des Ladeverhaltens einer Seite gibt es ein Angebot von Google mit ausführlicher Auswertung und Hinweisen:

http://www.pagespeed.de

1.5. robots.txt

In einer Datei dieses Namens kann angegeben werden, welche Such-Roboter (z.B. von Google, die die Inhalte von Webseiten für den Suchindex aufnehmen) welche Inhalte (genauer Verzeichnisse) auslesen dürfen und welche nicht.

Die Datei sollte in jedem Fall vorhanden sein und liegt meist direkt im Hauptverzeichnis, d.h. z.B.:

http://rapid-data.de/robots.txt

Ihr Inhalt definiert bei Rapid Data, dass jede Suchmaschine auf Alles zugreifen darf, was den Regelfall darstellt.

Merke: ist die robots.txt nicht vorhanden, sollte sie vom Profi angelegt werden.

1.6. sitemap.xml

In dieser Datei wird die Navigationsstruktur (samt Zusatzinformationen) einer Webseite in einem leicht maschinenlesbaren Dokument dargestellt. Reicht man diese Datei z.B. über Google Webmaster-Tools ein, so hat die Suchmaschine damit auf einen Streich die komplette Struktur erfasst, ohne, dass auf Robots gewartet werden müsste.

Die sitemap.xml wird in der Regel dynamisch generiert, d.h. ändert sich der Name eines Menüpunkts, so wird die Datei aktualisiert und auch Google liegt die Änderung damit direkt vor.

Die Datei liegt für gewöhnlich im Hauptverzeichnis, wie auch hier:

http://rapid-data.de/sitemap.xml

Merke: eine Sitemap.xml sorgt für schnelle Indizierung, spart Ressourcen und führt damit zu einem besseren Ranking.

1.7. Zusammenfassung

Mit dem reibungslosen Zusammenspiel dieser Kernfaktoren ist der optimale Betrieb aus Nutzer- bzw. Kundenperspektive sichergestellt. Das ist das beste Zeichen von Qualität. Der überwiegende Teil der Webseiten hält die Standards nicht, kaum oder wenig ein.

Da gerade im Handwerk Qualität geschätzt wird, sollte man diese auch als Maßstab anlegen.

Merke: Saubere Technik ist ein Wettbewerbsvorteil.