Die richtige HTML-Struktur für die eigene Website

Damit eine Website überhaupt im Browser richtig angezeigt wird benötigt sie eine klare und eindeutige Struktur. Der richtige Aufbau des HTML-Gerüsts ist außerdem entscheidend für die Suchmaschinen. Semantisch korrekte Websites liegen Google und Co.

Das HTML-Gerüst einer Website ist entscheidend für deren Erfolg, Google und Co. lieben zwar Content wollen jedoch auch, dass dieser ihnen Mundgerecht präsentiert wird. Dafür bietet HTML viele Tags, die richtig eingesetzt, den Content erheblich aufwerten. Semantic Web nennt der Fachmann die richtige Aufbereitung des Content.

Das Grundgerüst für eine Website

Was quasi jeder drittklassige Editor hinbekommt ist die einfache Grundstruktur der Website: Die Unterteilung nach dem „unsichtbaren“ Kopf (Head) und dem „sichtbaren“ Körper (Body) der Website.

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

Doch das reicht den Suchmaschinen nicht aus. Ehrlich gesagt, mit NetObjects Fusion und vielen anderen WYSIWYG-Editoren kann man heute keinen Blumentopf mehr gewinnen. Sie kommen in den Suchmaschinen nur nach vorne, wenn Sie ihren Quellcode selbstschreiben oder von einem Profi schreiben lassen.

So gehört zum Tag <html></html> auch immer die Angabe der verwendeten HTML-Version. Mit HTML5 wurde das auch extrem vereinfacht. <!doctype html> muss dazu vor dem ersten HTML-Tag stehen.

Die umschließenden HML-Tags sollten eine Angabe zur Sprache der Website erhalten.

Von Title bis Meta-Tags – Die wichtigsten Angaben im HTML-Head

Der Kopf sollte mindestens eine Angabe zu dem Inhalt und dem Zeichsatz haben. In Deutschland sind dies für die meisten Websites das Charset „utf-8“ und der Content-Type text/html.

Außerdem muss natürlich der Titel der Seite mit dem Title-Tag angegeben werden. Aus SEO-Sicht ist dies der wichtigste Tag und sollte pro Webauftritt nur einmal verwendet werden. Wer also alle Seiten gleich benennt, der macht defintiv etwas falsch auch wenn es so ein wohlkingender Name wie „Meine private Homepage“ ist.

<!doctype html>
<html class="<a>no-js" lang="de-DE" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Titel</title>
  </head>
  <body class="klasse">
  </body>
</html>

Wie man sieht stehe ich auf Social Media und hab auch gleich für Facebook, Google und Twitter die entsprechenden Namespace-Attribute im HTML-Tag eingebaut.

Für die Suchmaschinen reichen diese Daten jedoch noch lange nicht aus. Fast ebensowichtig wie der Titel ist der Meta-Tag „Description“.

<meta name="description" content="Beschreibung der Inhaltsseite" />

Suchmaschinen richtig ansprechen

Viele Seiten sind bereits bei Google oder Yahoo eingetragen, bevor sich überhaupt jemand Gedanken über die Suchmaschinenoptimierung macht. Ist im Head einer Seite nichts anderes angegeben, werden die einzelnen Seiten einer Homepage in den Index aufgenommen. „index“ und „follow“ sind standard und müssen nicht explizit gestezt werden. Kann man aber ;o)

„noindex“ sollte nur auf ausgewählten Seiten gesetzt werden. Ganz brauchbar üfr Impressum, Kontakt und Co. „nofollow“ dient für Seiten, deren Links generell nicht verfolgt werden sollen. Ein gutes Beispiel für solche Seiten sind Gästebücher, Linklisten usw.

Viele Seiten wurden auch bereits in die Kataloge von Yahoo, Google und Co. eingetragen. Wenn man nicht möchte, dass diese vor Urzeiten vorgenommene Eintragung auch in der Beschreibung bei den Suchergebnissen erscheinen, dann ist es sehr sinnvoll statt index, follow den Suchmaschinen zu sagen, wo sie die Description immer hernehmen sollen.

<meta name="robots" content="noodp,noydir"/>

Canonical und Alternate

Weit wichtiger als Meta-Tag für die Suchmaschinen ist mittlerweile der Canonical-Tag. Damit wird einer Suchmaschine mitgeteilt, ob es sich um ein Original oder eine „billige“ Kopie handelt. Hierbei ist es ebenfalls wichtig, das wirklich keine URL doppelt inn erhalb einer Website eingetragen werden sollte.

<meta rel="canonical" href="http://www.domain.de/unterseitexyz.de" />

Handelt es sich um die Kopie einer anderen Seite, sollte man um nicht von den Suchmaschinen schlechter bewertet zu werden, dies auch kenntlich machen und den Canonical auf das Original setzen.

Liegt zwischen dem Original und der eigenen Seite jedoch eine Staatsgrenze und hat man sich vielleicht gar die Mühe gemacht den Text zu übersetzen dann kann durchaus ein Link auf die eigene Seite gesetzt werden inkl. der Angabe einer Sprachvariation.

<meta rel="canonical" href="http://www.domain.de/unterseitexyz.de" />
<meta rel="alternate" href="http://www.orginaldomain.de/unterseitexyz.de" hreflang="fr" land="fr" title="Titel" />

Keywords – ein Mythos

Früher war es einmal üblich und auch notwendig die Keywords in den Head zu schreiben. Heute hat sich dieser Meta-Tag überholt. Google erkennt die wichtigsten Keywords anhand des Inhaltes auf der Seite und nicht mittels einer Zeile. Also raus damit.

Rein sollten dafür explizit für Google die News-Keywords. Diese sind speziell für Google News unter news.google.de.

<meta name="news_keywords" content="WM, Brasilien 2014, Spanien gegen Niederlande, Fußball" />

Wer bei all dem SEO-Stress seinen Humor noch nicht verloren hat, dem entlockt sicher diese kleine Sammlung ein Lächeln.

Der Body braucht Aussagekraft

Jetzt könnte man eigentlich <div> für </div> und <span> um </span> seinen Content zusammenstückeln und via CSS ins Rechte Bild rücken. Kann man machen, ist dann aber Kacke und gefällt den Suchmaschinen nicht wirklich. Diese brauchen nämlich gerade im sichtbaren Bereich der Website klare Anweisungen.

Frames haben hier in Zeiten von HTML5 eigentlich nichts mehr zu suchen. Deshalb wird der Body erst einmal in die wichtigsten Bereich unterteilt. Footer, Header, Nav, Aside und Section.