Aufbau einer Website

In meinem letzten SEO-Workshop war ein zentrales Thema der strukturierte Aufbau einer Website. Ganz automatisch habe ich Begriffe wie Header, Slider und Footer in den Raum geworfen. Für mich unnötig zu erklären – im Alltag sind sie geläufig. Für viele Kund:innen und Teilnehmende jedoch nicht.

Das wurde deutlich, als eine Teilnehmerin mich fragend anschaute und sagte: „Ich verstehe nicht, wovon du sprichst.“

Sprich deine Kund:innen an – mit Klarheit.

Das ist einer meiner wichtigsten SEO-Tipps. Fachbegriffe komplett zu vermeiden, wäre zu extrem – sie gehören in Gespräche mit Webdesigner:innen und Technikteams. Aber sie gehören nicht ungefiltert in deine Kommunikation.

Damit du ein klares Bild bekommst, habe ich die wichtigsten Grundelemente einer Website grafisch dargestellt und erkläre dir, was sie bedeuten – am Beispiel einer Startseite.

Der Headbereich (Kopfbereich) einer Website erstreckt sich vom oberen Rand bis zum abschließenden Rand des Headerbildes, oder bis unterhalb der Hauptnavigation, je nachdem wo diese positioniert ist.

Elemente des Headbereichs:

• Logo: das Logo steht meist rechts oben oder auch mittig im Headbereich und sollte direkt mit der Startseite verlinkt werden. So finden dich Besucher der Unterseiten zügig zur Startseite zurück.
• Topbar (auch: Topmenü, Topnavigation): Hier befinden sich meist die Links zum Warenkorb, Login, den Social Media Kanälen und das Suchfeld. Ich empfehle immer, die Telefonnummer und/oder E-Mail Adresse in diesem Bereich einzusetzen. Insbesondere, wenn die Website über ein Smartphone abgerufen wird, stehen die wichtigsten Kontaktwege sofort verfügbar auf dem Display. Die Telefonnummer lässt sich dann direkt anklicken und wählen (click-to-call nennt man diese Funktion).
• Slider oder Headerbild: Ein Slider ist quasi eine Diashow mehrere Fotos. Das Headerbild besteht aus nur einem Foto. Entscheidest du dich für einen Slider, so solltest du dir unbedingt Gedanken machen, welches Ziel der Slider hat. Du kannst die Atmosphäre und Angebote deines Unternehmens mit mehreren Bildern spiegeln. Allerdings sorgt ein Slider unter Umständen aber auch für längere Ladezeiten, insbesondere wenn du sehr viele Fotos oder sehr große Fotos reinpackst. Zudem findet nicht jeder Besucher Gefallen an den Slidern. Vielen sind diese wechselnden Bildfolgen zu unruhig und sie lenken ab. Auch schaut sich nicht jeder Besucher geduldig alle Slider Elemente an. Auf alle Fälle sollte der Besucher die Möglichkeit haben, manuell durch den Slider zu klicken, mittels Pfeilen links und rechts vom Bild.
  Wähle die Bilder für Slider oder Headerbild mit Bedacht aus und nutze die Möglichkeit auf eine Unterseite, zum Beispiel zum Angebot, zu verlinken.
• Hauptnavigation (auch: Hauptmenü): Diese befindet sich in der Regel oberhalb oder unterhalb des Headerbildes. Wähle sinnvolle und leicht verständliche Begriffe für die Navigationspunkte. Erstelle eine übersichtliche und intuitiv zu bedienende Navigation. Oft sehe ich noch Navigationen die sowohl den Punkt „Blog“, als auch „Aktuelles“ aufführen. Das bringt mich regelmäßig ins Grübeln: „Was ist der Unterschied zwischen Blog und Aktuelles?“. Vermeide diese „Grübel-Hürden“, sorge für eine ganz klare Nutzerführung und ein „locker leichtes“ Verständnis bei deinen Besuchern.

Motel One nutzt einen Slider, um das vielfältige Angebot zu zeigen. Wichtig bei Beherbergungsbetrieben ist, dass unmittelbar die Buchungsmaske angezeigt wird. So wird der bereits informierte und buchungswillige Kund:innen sofort der Weg zur Buchung angezeigt. (Quelle: www.motel-one.com/de/)

Auch große Streaminganbieter setzen auf Slider, um Besucher:innen direkt auf die neuesten und beliebtesten Inhalte aufmerksam zu machen (Quelle: https://www.zdf.de)

Susann Köhler nutzt das Headerbild. Es vermittelt sofort einen ersten Eindruck von ihr und über den Button wird dem Besucher angeboten, noch mehr Hintergründe zur Beraterin zu erfahren. (Quelle: www.susann-koehler.de)

Auch Videos eignen sich gut als Element eines Headerbildes bzw. Sliders. (Quelle: https://www.basf.com/global/de)

Im Mittelteil der Startseite befinden sich die Hauptinformationen, meist in Form von einem Text oder auch Teaserboxen (kurze Anreißertexte mit begleitendem Foto, die auf die entsprechenden Unterseiten weiterführen).

Wesentlich zu beachten sind beim Text die Heading-Tags, die sogenannten H-Überschriften (insbesondere H1 bis H3). Diese Überschriften definierst du in deinem CMS (Content Management System, wie z. B. WordPress) als „Überschrift 1“, „Überschrift 2“ etc.
Die H1 und H2-Überschriften gelten nach wie vor noch als wichtige Elemente für die Suchmaschine. Hier solltest du dein Fokus-Keywords einsetzen.

Auf jeder Unterseite sollte eine H1-Überschrift definiert sein. Die H2- und H3- Überschriften kannst du mehrmals definieren und zum Strukturieren deines Textes nutzen. Achte bitte darauf, dass du keine H-Ebene auslässt, also zum Beispiel nur H1 und H4 nutzt, ohne H2 und H3.

Im Body Bereich der Startseite von Wandschutz Nielsen bekommt der Besucher Informationen und mögliche Optionen angezeigt. Das beinhaltet (nicht alle Segmente sind im Screenshot sichtbar): Teaser zu den gefragtesten Shop Kategorien und Weiterführung zum Shop, Handlungsaufforderung zum Eintrag in den Newsletter, Skizzierter Ablauf von der Bestellung bis zur Montage der Wandschutzplatten, Kurzinfo „Wer steht hinter Wandschutz Nielsen“ mit Weiterführung zur „Über uns“-Seite, Referenzen/Inspiration und Vorschau auf die letzten Blogbeiträge (Quelle: www.wandschutz-nielsen.de)

Auch auf meiner eigenen Website lassen sich die einzelnen Segmente gut erkennen – von den Vorteilen von SEO über meine Beratungsangebote und Arbeitsweise bis hin zu persönlichen Informationen und Kontaktmöglichkeiten.

Der Footer (auch: Fußzeile, Footermenü) grenzt sich farblich meist wesentlich vom Rest der Seite ab, sozusagen als Abschluss der Webseite.
Hier kannst du nochmals die Verlinkungen zu deinen Social Media Kanälen unterbringen, denn das Nutzerverhalten der Besucher ist unterschiedlich. Je nachdem welche Erfahrung und Lernprozess sie mit anderen Websites gemacht haben, suchen sie die Social Media Verknüpfungen in der Topbar oder im Footer.

Weitere (mögliche) Elemente:

• Link zum Impressum und Datenschutzerklärung
• Link zu aktuellen Blogartikeln
• Siegel, Zertifikats-Logos und ähnliches

Knusperreich nutzt den Footer noch einmal für wichtige inhaltliche Links und Informationen, welche für Online Shop Besucher von Relevanz sind, wie zum Beispiel die Zahlungsarten. (Quelle: www.knusperreich.de)

Das Unternehmen Wandschutz Nielsen präsentiert im Footer nicht nur sein Firmenmotto, sondern ergänzt dort auch alle wichtigen Informationen: Kontaktmöglichkeiten, Zahlungsarten, FAQs, Details zu Zahlung & Versand sowie rechtliche Hinweise. (Quelle: https://wandschutz-nielsen.de)