{"id":31954,"date":"2024-11-12T12:39:33","date_gmt":"2024-11-12T12:39:33","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31954"},"modified":"2025-03-18T13:52:18","modified_gmt":"2025-03-18T13:52:18","slug":"Footer","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Footer","title":{"rendered":"Footer"},"content":{"rendered":"

Definition<\/span><\/h2>\n

Footer ist die englische Bezeichnung f\u00fcr Fu\u00dfzeile. Der Footer ist ein vom \u00fcbrigen Inhalt abgegrenztes Element am unteren Rand einer Dokument- oder Webseite. Auf einer Website enth\u00e4lt dieser Bereich f\u00fcr gew\u00f6hnlich Informationen f\u00fcr die Besucher der Webseite und f\u00fcr Suchmaschinen. Hierbei kann es sich beispielsweise um ein Copyright, Kontaktinformationen, interne Verlinkungen<\/a> zu wichtigen Unterseiten, Social Media Accounts und mehr handeln. Seitenspezifische Elemente werden dagegen nicht in der Fu\u00dfzeile aufgelistet. Bei einigen Webseiten wird der eigentliche Footer durch einen Subfooter erg\u00e4nzt. Der Subfooter hat meist einen dunkleren Hintergrund und enth\u00e4lt weniger Inhalte.\n<\/p>\n

Umsetzung im HTML Code<\/span><\/h2>\n

Seit der Einf\u00fchrung von HTML 5<\/a> steht ein eigener <footer>-Tag f\u00fcr die Implementierung des Footers in ein HTML Dokument zur Verf\u00fcgung. Der HTML Tag definiert eine Fu\u00dfzeile f\u00fcr ein Dokument oder einen Abschnitt und unterst\u00fctzt globale und Ereignisattribute in HTML. Kontaktinformationen im <footer> Element sollten innerhalb eines <address>-Tags stehen.\n<\/p>\n

Wichtig ist, dass der Footer-Tag in sein \u00fcbergeordnetes HTML Element eingebettet ist. Wenn er in einem <article> Element eingef\u00fcgt ist, dann handelt es sich um die Fu\u00dfzeile dieses Artikels. Wenn er das letzte Element innerhalb des <body> Elements ist, dann stellt er die Fu\u00dfzeile der Seite als Ganzes dar.\n<\/p>\n

Einfache Footer bestehen aus nur einer Zeile mit wenigen Informationen wie dem Copyright und gegebenenfalls Verlinkungen zu rechtlich relevanten Inhalten einer Webseite.\n<\/p>\n

Beispielhafter HTML Code f\u00fcr eine einfache Fu\u00dfzeile einer Website:\n<\/p>\n

<footer>\r\n<p> (C) 2018 Meine Webseite | <a href=\"\/legal.htm\" class=\"legal\">Datenschutz<\/a> | <a href=\"\/impressum.htm\" class=\"legal\">Impressum<\/a><\/p>\r\n<\/footer><\/pre>\n
Bei kommerziellen Webseiten werden diese Informationen oft in den Subfooter eingef\u00fcgt. Die eigentliche Fu\u00dfzeile enth\u00e4lt wesentlich mehr Angaben und hat ein mehrspaltiges Layout. Im HTML Code werden die Eigenschaften der einzelnen Spalten in der Regel in der CSS Datei definiert. Das folgende Beispiel zeigt den HTML Code f\u00fcr die Fu\u00dfzeile eines Blogs mit 3 Spalten f\u00fcr „Neue Artikel“, „N\u00fctzlich Links“ und „Social-Media-Links“ sowie einem mittels <div>-Tag abgetrennten Subfooter:\n<\/p>\n
<footer>\r\n<ul class=\"cf\">\r\n<li class=\"recent-pages\">\r\n<ol>\r\n<li class=\"widget-title\">< h4>Neue Artikel<\/h4><\/li>\r\n<li id=\"ra1\"><\/li>\r\n<li id=\"ra2\"><\/li>\r\n<li id=\"ra3\"><\/li>\r\n<li><a href=\"\/whatsnew.htm\">Alle neuen Artikel<\/a><\/li>\r\n<\/ol>\r\n<\/li>\r\n<li class=\"useful-links\">\r\n<ol>\r\n<li class=\"widget-title\"><h4>N\u00fctzliche Links<\/h4><\/li>\r\n<li><a href=\"\/about.htm\">About Meine Webseite<\/a><\/li>\r\n<li><a href=\"\/agb\">AGB<\/a><\/li>\r\n<li><a href=\"\/impressum\">Impressum<\/a><\/li>\r\n<li><a href=\"\/contact\">Kontakt<\/a><\/li>\r\n<li><a href=\"\/help>Hilfe<\/a><\/li>\r\n<\/ol>\r\n<\/li>\r\n<li class=\"social-networks\">\r\n<ol>\r\n<li class=\"first-child\"><h4>Social Media<\/h4><\/li>\r\n<li><a href=\"https:\/\/www.facebook.com\/meine-webseite\/\" class=\"facebook\">Facebook<\/a><\/li>\r\n<li><a href=\"https:\/\/twitter.com\/meine-webseite\/\" class=\"twitter\">Twitter<\/a><\/li>\r\n<li><a href=\"https:\/\/plus.google.com\/+meine-webseite\/\" rel=\"publisher\" class=\"google\">Google+<\/a><\/li>\r\n<li><a href=\"https:\/\/www.pinterest.com\/meine-webseite\/\" class=\"pinterest\">Pinterest<\/a><\/li>\r\n<li><a href=\"\/rss.htm\" class=\"rss\">RSS<\/a><\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n<div class=\"copyright\">(C) 2018 Meine Webseite<br><a href=\"\/legal.htm\" class=\"legal\">Datenschutz<\/a><\/div>\r\n<\/footer><\/pre>\n
Welche Inhalte k\u00f6nnen in der Fu\u00dfzeile einer Website stehen?<\/span><\/h2>\n
Typische Inhalte der Fu\u00dfzeile sind zun\u00e4chst die Kontaktinformationen des Betreibers der Webseite. Die in der Fu\u00dfzeile eingef\u00fcgte Firmierung, Postanschrift, Telefonnummer und E-Mail-Adresse ersparen Besuchern das Aufrufen des Impressums oder der Kontaktseite. Eine anklickbare und vom Smartphone direkt w\u00e4hlbare Telefonnummer erh\u00f6ht die Usability<\/a> zus\u00e4tzlich. Ebenso k\u00f6nnen die \u00d6ffnungszeiten, ein Link zur „\u00dcber uns“ Seite und die M\u00f6glichkeit zur Newsletter Anmeldung im Footer platziert werden. Auch wichtige interne Links, wie beispielsweise die URL des unternehmenseigenen Blogs, sind h\u00e4ufig im Footer zu finden, um positive Effekte f\u00fcr die SEO zu erzielen (siehe letzter Abschnitt „Bedeutung des Footers f\u00fcr die SEO“).\n<\/p>\n
Falls kein Subfooter f\u00fcr Links zum Impressum, den AGB, der Datenschutzerkl\u00e4rung und Widerrufsbelehrung genutzt wird, stehen diese Informationen ebenfalls in der Fu\u00dfzeile und gegebenenfalls zus\u00e4tzlich in der Navigation<\/a> der Webseite. Weitere f\u00fcr Besucher n\u00fctzliche Informationen sind G\u00fctesiegel, Auszeichnungen, die Angabe der Zahlungsm\u00f6glichkeiten und Hinweise auf die verschl\u00fcsselte Daten\u00fcbertragung per SSL. Diese Informationen sind f\u00fcr Besucher von hoher Relevanz und stellen ein wichtiges vertrauensbildendes Element dar, insbesondere bei Onlineshops. Nicht zuletzt sollten die Links zu den Social Media Profilen mit den allgemein bekannten Icons in den Footer eingef\u00fcgt werden.\n<\/p>\n
Optimierung des Designs eines Footers<\/span><\/h2>\n
Um Besucher nicht zu verwirren, sollte die Fu\u00dfzeile \u00fcber alle Seiten einer Website hinweg konsistent gestaltet sein. Zudem sollte das Element vom \u00fcbrigen Inhalt einer Webseite durch eine eindeutige Trennlinie oder eine andere Hintergrundfarbe abgegrenzt werden. Eine Strukturierung der Fu\u00dfzeile mit mehreren Spalten und \u00dcberschriften, in denen zusammenh\u00e4nge Inhalte aufgef\u00fchrt werden, erleichtert Besuchern die Orientierung. F\u00fcr eine optimale \u00dcbersichtlichkeit sorgen eine Beschr\u00e4nkung auf die wichtigsten Informationen, ausreichend gro\u00dfe Abst\u00e4nde zwischen den Spalten und Zeilen sowie ein sparsamer Einsatz von Grafiken oder Bildern.\n<\/p>\n
Ein Beispiel f\u00fcr einen gelungen Footer findet man bei Otto<\/a>. Dort sind nicht nur alle wichtigen Angaben und internen Verlinkungen enthalten, sondern der Footer zeichnet sich auch durch ein \u00fcbersichtliches aber dennoch attraktives Design aus, welches klar vom Rest der Seite abgetrennt und logisch strukturiert ist.\n<\/p>\n
\"Footer\"\n<\/p>\n
Screenshot mit Footer von otto.de<\/a>\n<\/p>\n
Bedeutung des Footers f\u00fcr SEO und Online Marketing<\/span><\/h2>\n
Die Bedeutung der Fu\u00dfzeile f\u00fcr die SEO hat in den vergangenen Jahren nachgelassen und wird nach Ansicht vieler SEO Experten im Zuge der Weiterentwicklung der Suchmaschinen Crawler<\/a> weiter abnehmen. Dennoch ist der Footer nicht vollst\u00e4ndig irrelevant f\u00fcr die SEO. So besteht ein bedeutender Aspekt darin, dass mithilfe des Footers gezielt Link Juice<\/a> von der Startseite auf wichtige Unterseiten weitergeleitet werden kann, wenn diese im Footer verlinkt werden. Allerdings ist hierbei Vorsicht geboten, denn Google k\u00f6nnte einen \u00fcberm\u00e4\u00dfigen Gebrauch von Verlinkungen in der Fu\u00dfzeile als Spam abwerten, was sich wiederum negativ auf die SEO auswirkt.\n<\/p>\n
In Bezug auf die Usability einer Website sowie das Online Marketing<\/a> hat das Element hingegen an Bedeutung gewonnen. User sind mittlerweile daran gew\u00f6hnt, dass sie bestimmte Angaben zu einer Webseite, wie die M\u00f6glichkeit, sich f\u00fcr einen Newsletter anzumelden, in der Fu\u00dfzeile finden. F\u00fcr das Online Marketing sind insbesondere die im Footer platzierten Social-Media-Links sowie vertrauensbildende Inhalte von Bedeutung.\n<\/p>\n
Weiterf\u00fchrende Links<\/span><\/h2>\n