Footer ›› Definition & Aufbau › ADVIDERA

Footer

Als Footer (zu deutsch: Fußzeile) bezeichnet man den unteren Bereich einer Website. Dieser Bereich, der sich am unteren Ende eines Dokuments oder einer Website befindet, wird je nach Branche und Unternehmen unterschiedlich genutzt. Oft findet man hier Informationen rund um AGB’s, Datenschutzhinweise, Liefer- und Zahlungsbedingungen, Impressum, Sitemap, sowie den Kontakt. Andere Seiten wiederum nutzen den Footer-Bereich für die Navigation und Links zu anderen internen und externen Seiten.

Aufbau einer HTML-Seite inkl. Footer

Footer Beispiel

Die meisten Webseiten können grob in drei Bereiche aufgeteilt werden:

  • Header: Den oberen Teil bildet der Header. Dieser enthält i.d.R. ein Logo oder den Namen der entsprechenden Firma oder Website. Der Header besteht sehr oft aus einer einzigen großen Grafik und vereint Text und Grafik-Elemente. Im Header befindet sich ebenfalls die Navigation, über welche man die verschiedenen Inhalte und Bereiche innerhalb einer Website erreichen kann. Die Navigation sollte auf allen Seiten identisch sein und die Möglichkeit bieten, mit einem einfachen Klick auf die Startseite zurückkehren können. Dies vereinfacht die Navigation und Orientierung innerhalb der Website. Der Header einer Seite ist nicht mit dem <head> eines HTML-Dokuments zu verwechseln. Dieser ist für den Nutzer (mit Ausnahme des Titels im Browserfenster) nicht sichtbar. Dort sind unter anderem Meta Angaben und Verlinkungen zu externen Skripten zu finden. Der Header einer Webseite befindet sich hingegen innerhalb des <body> Tags.
  • Hauptteil: Unter dem Header Bereich kommt der Hauptteil. Dieser enthält den den Content und stellt somit den wichtigsten Bereich einer Webseite dar. Die meisten Seiten verwenden hier einen Body, der sich in zwei bis drei Spalten gliedert. Die Linke Spalte wird hierbei häufig für weitere Elemente der Navigation benutzt. In der mittleren und breiten Spalte werden sämtliche Inhalte wie Texte, Bilder, Videos etc. platziert.Sofern eine weitere Spalte benutzt wird, hat diese oft die Funktion spezielle Inhalte darzustellen wie aktuelle News, Blog-Post oder anderweitige Inhalte.
  • Footer: Direkt unter dem Body wiederum befindet sich der Footer, der den Abschluss der Seite bildet und das Gegenstück zum Header ist. Ähnlich dem Header Bereich samt Navigation, sollte der Footer auf allen Seiten identisch aufgebaut sein und typische Elemente wie das Impressum, die AGBs oder ein Kontaktformular enthalten.

Grundgerüst einer HTML-Seite inkl. Footer

<!DOCTYPE html>
<html>
<head>
<title>Titel der Webseite</title>
<!-- weitere Kopfinformationen -->
</head>
<body>
<div class="header"><ul><li><a href="https://beispielseite.de/link1">Menüpunkt 1</a></li></ul></div>
<p>Inhalt der Webseite</p>
<footer>
<p>Kontakt: <a href="E-Mail:Mustermann@beispiel.de">
Mustermann@beispiel.de</a></p>
</footer>
</body>
</html>

Footer und deren Auswirkung auf die Suchmaschinenoptimierung

Lange Zeit wurden Footer benutzt, um möglichst viele Links dort unterzubringen. Der Hintergedanke hinter dieser Maßnahme war es, eine große Backlinkstruktur dort anzulegen, damit der entsprechende Linkjuice der Seite weitergereicht wurde. Gerade Startseiten, welche aus SEO Sicht die stärkste Seite darstellen, wurden hierfür benutzt. Um Missbrauch entgegenzuwirken hat Google allerdings entsprechend reagiert und externe Footer-Links nach und nach entwertet.

Trotz der Entwertung stellt der Footer Bereich dennoch ein effektives Mittel dar, dem Crawler zumindest zu helfen, die Seite effektiver zu crawlen und weitere Seiten und Inhalte zu indexieren. Aufgrund eines limitierten Budgets ist es Crawlern nur bis zu einem gewissen Grad möglich, Webseiten bei nur einem Crawl komplett zu erfassen. So kann es unter Umständen passieren, dass einige Seiten nicht gecrawlt werden und letztlich nicht im Index landen. Durch entsprechende Links und Verweise im Footer kann man den Crawler gezielt auf tiefere Ebenen der Webseite weiterleiten.

Auch im Sinne der Usability sollte darauf geachtet werden, bestimmte Verlinkungen im Footer bereitzustellen. Nutzer die z.B. nach Informationen rund um das Impressum und die AGBs suchen, erwarten diese meist im Footer Bereich und scrollen entsprechend bis zum Ende der Seite. Bei Online Shops ist es zum Beispiel üblich, Zahlungsarten und Lieferinformationen im Footer einzubauen.

Da der Footer auf den meisten Unterseite gleich bleibt, bietet es sich an, hier Caching zu nutzen. So müssen Browser den Footer nicht jedes Mal neu rendern, sondern können auf den schnelleren Cache zurückgreifen.

Die richtige Gestaltung eines Footers

Der Footer gilt prinzipiell das Ende einer Webseite. Bei richtiger Nutzung kann der Footer den Besucher jedoch dazu veranlassen tiefer in die Inhalte der Webseite einzutauchen, statt die Webseite zu verlassen. Neben den Standard Informationen wie Impressum, AGBs, Zahlungsmöglichkeiten und z.B. dem Kontaktformular sollte der Footer weitere Links zu interessanten und nützlichen Inhalten, die im Header Bereich keinen Platz finden, für den Besucher bereithalten.

Dreht sich die Seite z.B. um ein spezielles Thema, zu dem es häufig Fragen gibt, so könnte ein Glossar oder eine eigene FAQ-Seite wertvolle Inhalte vermitteln. Ein Onlineshop könnte wiederum Größentabellen, Storefinder oder Waschanleitungen für den Besucher bereitstellen. Als Anbieter von Dienstleistungen, könnten Gütesiegel, Auszeichnungen und Referenzen dazu beitragen, das Vertrauen der Kunden zu stärken. Viele Nutzer suchen bei diesen Informationen inzwischen im Footer, weil sie dort schnell zu finden sind und mittlerweile in jedem großen Online Shop dort eingebunden sind.

Es gibt keine festen Richtlinien, wie Footer am besten gestaltet werden sollten. Webseiten müssen nicht einmal einen Footer beinhalten. Allerdings dient der Fuß der Webseite Nutzern, um Informationen schnell und einfach zu finden. Die Möglichkeit eines Footers muss also nicht genutzt werden, um eine vollfunktionsfähige Webseite zu erstellen, bietet Webmastern aber viele Gestaltungsmöglichkeiten.

Quellen

http://praxistipps.chip.de/header-und-footer-was-ist-das-einfach-erklaert_41286
http://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/footer
http://webkompetenz.wikidot.com/html-handbuch:header-footer
http://www.usabilityblog.de/2012/07/footer-gestaltung-good-practices-am-beispiel-von-online-shops/
https://de.onpage.org/wiki/Footer
https://www.xovi.de/wiki/Footer
https://www.seokratie.de/footer-usability/

Ihr Weg zu mehr Besuchern und Umsatz