DOM PASSAU

Document Object Model

Das DOM ist das Gerüst jeder Website und Passau, da sind wir.

DOM Passau - präsentiert von CMS-Webstudio

Die google-freundliche Internetagentur im Landkreis Passau

Mit dem größten Barockdom in Süddeutschland hat das DOM nur insofern eine Gemeinsamkeit, dass auch ein barocker Dom einen Bauplan braucht. In diesem Fall geht es um das DOM von Internetseiten, das Document Object Model.

Das DOM beinhaltet die Struktur einer Website, also jeder HTML-Seite. HTML (HyperText Markup Language) ist die Struktursprache für Internetseiten. Erfunden hat sie im Jahr 1989 der britische Wissenschaftler Tim Berners-Lee am CERN in Genf. Er suchte eine Möglichkeit, Forschungsergebnisse mit anderen Mitarbeitern und auf unterschiedlichen Computersystemen zu teilen. Was aus seiner Idee werden sollte, hätte er sich wohl in diesem Augenblick nicht in den kühnsten Träumen vorstellen können.

HTML - Die Struktur

HTML besteht aus Tags, die ineinander verschachtelt werden. Das äußere Tag heißt <html> und mit </html> wird es am Schluss der Seite wieder geschlossen. Fast alle Tags haben ein öffnendes Tag <p> und ein schließendes Tag </p>.

Jede HTML-Seite ist in zwei Bereiche aufgeteilt. Zunächst kommt der Seitenkopf <head> und dann der Inhalt <body>.
Damit sieht jede Seite so aus:

<html>
<head>
</head>
<body>
</body>
</html>

Das ist das DOM einer ziemlich leeren Seite.
Damit die Strukturen besser erkennbar sind, werden die Tags nach Hierarchieebene eingerückt. Und unsere leere Seite würde so aussehen:

<html>
   <head>
   </head>
   <body>
   </body>
</html>

Aber dabei will ich es belassen. Es gibt natürlich eine Vielzahl von Tags für alle möglichen Elemente. Überschriften, Absätze, Bilder, Videos, Tabellen und so fort. Diese Tags werden also alle in das DOM eingebaut. Damit entsteht schon mal einiges an "Text", den die Seite schon enthält, bevor auch nur das erste Wort, die erste Überschrift in das Dokument kommt. Aber mit der Überschrift sind wir auch schon außerhalb des DOM.

Quelltext

HTML und Inhalt ergeben zusammen den Quelltext (oder auch Quellcode) einer Seite. Wobei so mancher Inhalt nur eingebunden wird. Dazu gehören Bilder und Videos. Eingebundene Elemente tragen nur unwesentlich zum Quelltext bei. Text indessen schon und deshalb ist er auch so wichtig, denn Text ist das, was wir den Suchmaschinen anbieten wollen. Das DOM ist unvermeidlich und auch die Angaben im Seitenkopf sind wichtig.

Content : Quelltext

Google kann nur Quelltext lesen. Die Bots von Google durchsuchen ständig das Netz nach neuen und geänderten Informationen. Die Bots laden die Seiten dazu in ihren Speicher. Was sie laden ist der Quelltext. Also das DOM und die Inhalte. Wir wollen aber nicht das DOM, sondern die Inhalte an Google vermitteln, also ist es sehr wichtig, dass Google möglichst schnell erkennt, was die Inhalte sind.

Manchmal ist es leicht. So erstellte ich vor Kurzem eine Seite für ein innovatives Produkt, das sich Forstlibelle nennt. Eine erste Recherche ergab, dass Google das Wort nicht kennt, sondern mir Ergebnisse über eine Frostlibelle andrehen wollte. Zunächst vermutete ich einen Tippfehler, aber rasch stellte ich fest, dass Google "o" und "r" vertauschte. Als ich die Seite über die Google-Webmastertools anmeldete dauerte es keine zwei Tage und Google kannte die "Forstlibelle", außerdem war die Seite praktisch über Nacht auf Platz 1 der Suchergebnisse. Dass Google mir dann trotzdem die Frostlibelle in weiteren Ergebniszeilen unterjubelte zeigt, wie die Algorithmen funktionieren.

Das Glück eines neuen Wortes hat man aber nicht oft, leider ist meist das Gegenteil der Fall und der Kunde möchte bei Google tausende Konkurrenten überholen. Dann wird es ganz schön sportlich. Google muss nämlich davon überzeugt werden, dass diese Seite wesentlich mehr dem entspricht, was der User sucht, als alle Konkurrenzseiten. Aber wie macht man das? Ganz einfach: Google die besten Informationen bieten. Der Bot ist ein Programm, also entscheidet er nach mathematischen Gesichtspunkten. Wie oft ist der Suchbegriff in der Seite? Wie häufig in Überschriften? Ist er auch in Alt- und Tiltle-Tags? Kommt er in Bildbeschreibungen vor? Wie relevant ist das Thema innerhalb der Seite? Er macht das also sehr methodisch und gründlich.

Spielen wir einmal Bot

Wir haben zwei Zeitungen vor uns. Die eine ist eine Tageszeitung, die wir gekauft haben, die andere ein Blatt, das man kostenlos bekommt, weil es sich rein mit Werbung finanziert. Und angenommen, beide Zeitungen haben exakt gleich viel redaktionellen Inhalt. Folglich ist die werbefinanzierte Zeitung um einiges dicker. Wo werde ich also die Informationen schneller finden? Natürlich in der Tageszeitung. Sie hat ein wesentlich günstigeres Verhältnis von redaktionellem Inhalt zum Gesamtumfang.

Und genau so ist es auch bei Internetseiten. Je besser das Verhältnis Content : Quelltext, umso besser die Chancen bei Google. Wer also z.B. mit Wordpress eine Seite erstellt, muss wahre Textergüsse schreiben, bis er / sie auf ein einigermaßen messbares Verhältnis Content : Quelltext kommt.

CMS - Die Quelltextmonster

WordPress, Typo3, Joomla, Redaxo, sie alle produzieren Quelltext ohne Ende. Das fängt schon damit an, dass im Seitenkopf eine ganze Armada von CSS und JS Dateien eingebunden wird. Im Seiteninhalt wird es aber nicht viel besser. Formatierungen können entweder über Klassen in CSS erfolgen oder direkt am Text. Dann kann ein einziges fettes Wort schon mal eine Formatierungslawine erzeugen.

In dieser Zeile sitzt ein fettes Wort.
Das sieht minimalistich so aus:
In einer Zeile sitzt ein <strong>fettes</strong> Wort.

Manche CMS-Systeme machen daraus:
In einer Zeile sitzt ein <span style="font-weight:bold;font-variant:normal;font-style:normal">fettes</span> Wort.

Und das ist noch nicht mal ein übertriebenes Beispiel. Aber wenn Sie den Satz zusammenhängend lesen wollen, wird es schwieriger. So geht es auch dem Google-Bot.

CMS ContentAdmin

ContentAdmin ist ein kleines und feines CMS, das den Quellcode von A bis Z im Auge hat. Schlanke Seitenstruktur, möglichst wenig Strukturelemente. Extrem kurzer Seitenkopf. Dabei wurde ContentAdmin nicht mal mit dieser Zielsetzung programmiert. Es ging damals darum ein CMS (den Begriff gab es da noch nicht) zu erstellen, mit dem Kunden einfache Änderungen an ihrer Website selber und ohne jegliche HTML-Kenntnisse machen können. Aus den einfachen Änderungen wurden über die Jahre komplette Änderungen. Trotzdem ist das CMS ContentAdmin dem Ansatz der einfachen und übersichtlichen Bedienung treu geblieben.

Als die CMS wie Pilze aus dem Boden schossen, war bald klar, dass ContentAdmin sich von der Konkurrenz deutlich absetzen muss. Also ging es an den Quelltext, der musste optimiert werden. Raus, was raus kann. Das Verhältnis Content : Quelltext wurde extrem optimiert. Kein anderes CMS kommt hier auch nur ansatzweise an ContentAdmin heran. Trotzdem wird immer noch weiter optimiert.

Ladezeit

Eine schnelle Ladezeit ist nicht nur für den Besucher sehr angenehm, auch Google lässt sie in die Bewertung einfließen. Dass der billigste Webhoster nicht die beste Performance bieten kann, ist an zehn Fingern leicht abzuzählen. Also tut man schon mal gut daran, die Seite auf einem schnellen Server zu hosten. Es sei denn, das CMS macht die Seite so schlank, dass auch der Billigserver schnell liefern kann. ContentAdmin bietet genau das. Allerdings wird es schwierig, wenn viele Bilder oder gar Videos zum Einsatz kommen. Dann bleibt aber immer noch der Vorteil bei den Google-Bots, denn die laden weder Bilder noch Videos, sondern nur den Quelltext und der ist bei ContentAdmin wunderbar schlank. Aber auch bei Bildern punktet ContentAdmin, denn die werden pixelgenau geladen, also auch hier kein Pixel zuviel.

Gerne faseln "Suchmaschinenspezialisten" von den Geheimnissen der Google-Suche, aber das ist Quatsch. Man muss sich nur mal in die Situation von Google versetzen. Kein Mensch würde Google verwenden, wenn die nicht genau die Ergebnisse anzeigen, die der User sucht. Also ist die Vorgehensweise von Google völlig logisch und nachvollziehbar.

Google zeigt Ihre Website dann an, wenn es die Seite ist, die der User sucht und dafür können Sie sorgen.
Denn hier ist genau der Unterschied: Google kennt Ihr Produkt nicht, sondern nur Ihre Website und wenn die nicht so gut ist, wie Ihr Produkt, dann kommen Sie nie nach oben. Es sei denn, Sie leisten sich Google-AdWords.

Nachgeladener Content

Immer häufiger wird Content nachgeladen, also Seiteninhalt per AJAX hinzugefügt. Das ist schnell, weil nicht ständig die ganze Seite komplett neu geladen werden muss. Zum Beispiel bei der Anzeige eines Blogs, wo die letzten 10 Einträge angezeigt werden und dann immer wieder 10 nachgeladen werden, wenn der User nach unten scrollt oder auf weiter klickt, je nach Programmierung.

Das macht schon Sinn, denn wenn der News-Blog jeden Tag gefüttert wird, dann kommt da selbst bei "nur Text" ordentlich was zusammen. Wenn jetzt aber beim Aufruf des Blogs nur die ersten 10 Einträge geladen werden, dann sind auch nur 10 Einträge im DOM und der Rest nicht. Google wird also die Einträge ab 11 niemals finden.

Das zweite Problem sind Aktionen im nachgeladenen Content. Die funktionieren nicht, weil sich der Browser auf das DOM "konzentriert". Angenommen da wird ein <input type="button" id="loadnext" value="Weiter"> nachträglich eingefügt, dann funktioniert die jQuery-Überwachung $('#loadnext').click(function() { ... mach was ... }) nicht. Das geht erst mit einem kleinen Trick, indem man ein übergeordnetes Element überwacht.

$('main').on('click','#loadnext',function() { ... mach was ... })

Das Click-Event wird also bei jedem Click auf "main" ausgelöst. Die Funktion aber nur wenn der Click auf "#loadtext" erfolgte. Das Objekt "main" muss dazu freilich von Anfang an im DOM sein.

Die Reihenfolge

"Ach was muss man doch von bösen Kindern hören oder lesen!" Die Liste der Betrugsversuche ist so lang wie die Geschichte des Internets. Denn leider haben wir da die Designerin und dort den Texter und es erging ihnen wie den beiden Königskindern, sie konnten zusammen nicht kommen. Denn der Texter konzentriert sich auf ein schönes Textbild und ebenso auf die Erfolgsaussichten bei Google. Da muss halt das Wichtigste ganz oben hin. Der Designerin will das aber gar nicht gefallen.

Was gab es dabei schon an Betrügereien. Weißer Text auf weißem Grund. Text in ausgeblendeten DIVs. Text außerhalb des Viewports. Unglaublich, welcher Einfallsreichtum da herrschte. Aber Betrug funktioniert nur solange, bis der Betrogene es merkt und den Betrug unterbindet. Wer glaubt schlauer zu sein, als das Entwicklungsteam bei Google, muss schon verdammt schlau oder verdammt dumm sein.

Dabei gibt es zwei einfache und legale Methoden, die Reihenfolge des Inhalts zu verändern. Beide funktionieren rein per CSS. Die eine ist das Flexbox-Modell, die andere das Grid-Modell. Man kann jetzt nicht sagen, das Flexbox-Modell ist besser oder das Grid-Modell, es kommt auf die Aufgabenstellung an, denn beide Methoden haben ihre Vor- und Nachteile. Beide können aber den Content in beliebiger Reihenfolge anzeigen und damit bekommt der Texter seinen SEO-Text auf Platz eins und ist höchst zufrieden. Die Designerin positioniert ihn am Seitenende und der Kunde bekommt eine wunderschöne Seite, die auch bei Google gut funktioniert. Eine Win-Win-Situation also. Und es geht so einfach.

So ist die Uhr am Seitenanfang tatsächlich der letzte Inhalt des Quelltextes.

Quelltextanzeige: Strg + u

Es bleibt spannend.

Ihr Franz Schuster

Datenschutzerklärung

Diese Seite setzt Matomo zur Analyse der Seitenbesuche ein. Matomo übermittelt dazu an Ihren Browser ein sogenanntes Session-Cookie, das vom Browser lokal auf Ihrem Computer gespeichert wird. Matomo speichert folgende Daten: Angaben über Ihren Browser, das Betriebssystem auf Ihrem Computer, die Url der Herkunftsseite, die IP-Adresse in verkürzter Form sowie Datum und Uhrzeit des Besuchs.

Darüber hinaus zeichnet der Webhoster den Besuch auf und speichert ebenfalls die vorher genannten Daten.

 

Impressum

Diese Seite wird veröffentlicht von:

CMS-Webstudio
Franz Schuster
Rosengasse 16
94110 Wegscheid

E-Mail: info@cms-webstudio.de

Die Turmuhr

Diese Uhr steht ganz am Ende des Quelltextes und trotzdem wird sie hier oben angezeigt. Wie ist das möglich?

Ganz einfach: mit Hilfe des Flexbox-Layout-Moduls. Dieses CSS-Modul wurde bereits 2012 entwickelt. Flexbox wird von allen Browsern unterstützt.

Die Uhr zeigt übrigens die aktuelle Zeit auf dem Webserver an. Sie besteht aus vier Bildern und wird per jQuery animiert.