Website Footer gestalten - Best Practices mit Beispielen

Warum ist der Footer so wichtig?

Viele Webseitenbetreiber investieren viel Zeit in Header, Hero-Bereich und Hauptinhalt, vergessen dabei aber den Footer. Das ist ein Fehler, denn der Footer erfüllt gleich mehrere zentrale Funktionen auf einer Website.

SEO-Vorteile des Footers

Der Footer bietet eine hervorragende Möglichkeit für interne Verlinkung. Suchmaschinen wie Google crawlen auch den Footer-Bereich und folgen den dort gesetzten Links. Dadurch kannst du wichtige Unterseiten stärken und die Linkstruktur deiner gesamten Website verbessern. Interne Links im Footer helfen Suchmaschinen, die Hierarchie und Struktur deiner Website besser zu verstehen. Besonders für tieferliegende Seiten, die nicht direkt über die Hauptnavigation erreichbar sind, kann der Footer als zusätzlicher Einstiegspunkt dienen.

Bessere Nutzererfahrung (UX)

Wenn ein Besucher bis zum Ende einer Seite scrollt, sucht er in der Regel nach weiteren Informationen oder einer bestimmten Aktion. Der Footer fängt diese Nutzer auf und bietet ihnen Orientierung. Kontaktdaten, weiterführende Links, Social-Media-Kanäle oder eine Newsletter-Anmeldung geben dem Besucher einen klaren nächsten Schritt. Ohne einen durchdachten Footer endet die Nutzererfahrung abrupt, und der Besucher verlässt die Seite möglicherweise ohne Interaktion.

Vertrauen und Glaubwürdigkeit

Ein professionell gestalteter Footer signalisiert Seriosität. Bewertungen, Zertifikate, Partnerschaften und Gütesiegel im Footer stärken das Vertrauen potenzieller Kunden. Besucher erwarten bestimmte Elemente im Footer, zum Beispiel Kontaktdaten und rechtliche Hinweise. Fehlen diese, wirkt die Website unprofessionell oder sogar unserioes.

Rechtliche Pflicht

In Deutschland und der EU gibt es klare rechtliche Anforderungen an Websites. Das Impressum muss leicht erreichbar sein, ebenso die Datenschutzerklärung. Der Footer ist der etablierte Ort, um diese Pflichtlinks unterzubringen. Fehlen Impressum oder Datenschutzerklärung oder sind sie schwer auffindbar, drohen Abmahnungen und Bussgelder. AGB, Widerrufsbelehrung und Cookie-Hinweise gehören ebenfalls zu den rechtlich relevanten Inhalten, die über den Footer zugänglich sein sollten.

Diese Elemente gehören in jeden Footer

Ein guter Footer ist mehr als eine Sammlung von Links. Er ist eine durchdachte Zusammenstellung der wichtigsten Informationen und Handlungsmöglichkeiten, die deine Besucher am Ende jeder Seite erwarten. Die folgenden Elemente solltest du bei der Gestaltung berücksichtigen.

Kontaktinformationen

Kontaktdaten im Footer sind für viele Besucher der schnellste Weg, um mit dir in Verbindung zu treten. Dazu gehören in der Regel:

• Firmenname und Adresse
• Telefonnummer (idealerweise klickbar für Mobilgeräte)
• E-Mail-Adresse
• Oeffnungszeiten (falls relevant)

Achte darauf, dass die Telefonnummer mit einem tel:-Link versehen ist, damit mobile Nutzer direkt anrufen können. Die E-Mail-Adresse sollte ebenfalls als mailto:-Link formatiert sein. Für lokale Unternehmen empfiehlt es sich, auch die vollständige Anschrift im Footer anzugeben, da dies positive Signale für Local SEO sendet.

Navigation / Sitemap-Links

Der Footer eignet sich ideal für eine komprimierte Seitennavigation. Hier verlinkst du die wichtigsten Bereiche deiner Website, die nicht alle in der Hauptnavigation Platz finden. Typische Footer-Navigationselemente sind:

• Über uns / Unternehmen
• Leistungen / Produkte
• Blog / Ratgeber
• FAQ / Hilfe
• Karriere / Jobs
• Kontakt

Die Footer-Navigation sollte logisch gruppiert und übersichtlich strukturiert sein. Verwende klare Überschriften für die einzelnen Spalten oder Bereiche, damit Besucher sofort erkennen, wo sie was finden. Vermeide es, zu viele Links unterzubringen, da dies den Footer unübersichtlich macht und den SEO-Wert der einzelnen Links verwässert.

Rechtliche Links (Impressum, Datenschutz, AGB)

Rechtliche Links sind Pflichtbestandteil jedes Footers in Deutschland. Folgende Seiten müssen von jeder Unterseite deiner Website aus erreichbar sein:

• Impressum - gesetzlich vorgeschrieben nach Paragraph 5 TMG
• Datenschutzerklärung - Pflicht nach DSGVO
• AGB - für Online-Shops und Dienstleister empfohlen
• Widerrufsbelehrung - für Online-Shops Pflicht
• Cookie-Einstellungen - Link zum erneuten Aufrufen des Cookie-Banners

Diese Links werden häufig in einer separaten Zeile ganz am unteren Rand des Footers platziert, oft zusammen mit dem Copyright-Hinweis. Das ist eine etablierte Konvention, die Nutzer kennen und erwarten.

Social Media Icons

Social-Media-Icons im Footer verlinken auf deine Präsenz in sozialen Netzwerken. Sie bieten Besuchern die Möglichkeit, dir auf Plattformen wie Instagram, LinkedIn, Facebook, X (ehemals Twitter) oder YouTube zu folgen. Wichtig dabei:

• Verwende erkennbare Icons in einheitlicher Größe
• Oeffne Social-Media-Links in einem neuen Tab (target="_blank")
• Verlinke nur Profile, die du aktiv pflegst
• Füge ein rel="noopener noreferrer" Attribut hinzu für Sicherheit

Verwaiste Social-Media-Profile, die seit Monaten nicht aktualisiert wurden, hinterlassen einen schlechten Eindruck. Besser nur zwei aktive Kanäle verlinken als fünf tote Profile.

Copyright-Hinweis

Der Copyright-Hinweis ist ein Standardelement im Footer. Er signalisiert, dass die Inhalte der Website urheberrechtlich geschützt sind. Ein typischer Copyright-Hinweis sieht so aus:

Copyright 2026 Firmenname. Alle Rechte vorbehalten.

Achte darauf, die Jahreszahl aktuell zu halten. Eine veraltete Jahreszahl wie "Copyright 2019" wirkt unprofessionell und lässt vermuten, dass die Website nicht gepflegt wird. Am besten generierst du die Jahreszahl dynamisch über JavaScript oder serverseitig, sodass sie sich automatisch aktualisiert.

Newsletter-Anmeldung

Der Footer ist ein ausgezeichneter Platz für ein Newsletter-Anmeldeformular. Besucher, die bis zum Ende einer Seite scrollen, haben bereits Interesse an deinen Inhalten gezeigt. Ein kompaktes Formular mit E-Mail-Feld und einem klaren Call-to-Action-Button kann hier sehr effektiv sein.

Halte das Formular einfach: Ein E-Mail-Feld und ein Button genügen in den meisten Fällen. Erkläre kurz, was den Abonnenten erwartet, zum Beispiel "Erhalte wöchentliche Tipps zu Webdesign und SEO direkt in dein Postfach." Vergiss nicht den Hinweis auf die Datenschutzerklärung und die Möglichkeit, sich jederzeit abzumelden.

Trust-Elemente (Bewertungen, Zertifikate, Logos)

Trust-Elemente im Footer verstärken die Glaubwürdigkeit deiner Website. Dazu gehören:

• Bewertungssterne von Google, Trustpilot oder ProvenExpert
• Gütesiegel wie Trusted Shops, TÜV oder eKomi
• Partnerlogos und Zertifizierungen
• Zahlungsanbieter-Logos (PayPal, Klarna, Visa, Mastercard)
• Auszeichnungen und Mitgliedschaften in Fachverbänden

Diese Elemente wirken besonders stark, wenn sie authentisch sind. Ein Google-Bewertungswidget mit echten Rezensionen ist überzeugender als ein generisches "Top-Qualität"-Siegel. Platziere die Trust-Elemente gut sichtbar, aber nicht aufdringlich. Sie sollen das Vertrauen stärken, ohne den Footer zu überladen.

Footer Design Best Practices

Ein guter Footer verbindet Funktionalität mit ansprechendem Design. Die folgenden Best Practices helfen dir, einen Footer zu gestalten, der sowohl optisch überzeugt als auch nutzerfreundlich ist.

Klare visuelle Hierarchie

Eine klare visuelle Hierarchie sorgt dafür, dass Besucher die Inhalte des Footers schnell erfassen können. Strukturiere den Footer in logische Bereiche mit deutlich erkennbaren Überschriften. Nutze unterschiedliche Schriftgrößen und Gewichtungen, um Überschriften von Links und Fliesstexten abzuheben.

Weissraum zwischen den einzelnen Bereichen ist entscheidend. Ohne ausreichend Abstand wirken die Elemente gedrängt und unübersichtlich. Ein gut strukturierter Footer leitet den Blick des Nutzers natürlich von oben nach unten und von links nach rechts durch die verschiedenen Bereiche.

Responsive Design (Mobile-First)

Mehr als die Hälfte aller Webseitenbesuche erfolgt mittlerweile über mobile Geräte. Dein Footer muss daher auf Smartphones und Tablets genauso gut funktionieren wie auf dem Desktop. Mobile-First bedeutet, dass du den Footer zuerst für kleine Bildschirme gestaltest und dann für größere Bildschirme erweiterst.

Auf Mobilgeräten sollten die Footer-Spalten untereinander statt nebeneinander angeordnet werden. Buttons und Links müssen gross genug sein, um sie mit dem Finger komfortabel antippen zu können. Apple empfiehlt eine minimale Tippfläche von 44x44 Pixeln. Klappbare Bereiche (Accordions) können den Footer auf Mobilgeräten kompakter und übersichtlicher machen.

Kontrast und Lesbarkeit

Der Footer hat typischerweise eine dunklere Hintergrundfarbe als der Hauptinhalt. Das schafft eine visuelle Trennung und signalisiert dem Nutzer, dass er sich am Ende der Seite befindet. Achte auf ausreichenden Kontrast zwischen Text und Hintergrund. Die Web Content Accessibility Guidelines (WCAG) empfehlen ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text.

Beliebte Farbkombinationen für Footer sind:

• Dunkelgrau oder Anthrazit mit weisser Schrift
• Schwarz mit hellgrauer Schrift
• Dunkle Markenfarbe mit heller Kontrastfarbe
• Heller Footer mit dunkler Schrift (seltener, aber effektiv bei minimalistischen Designs)

Teste die Lesbarkeit auf verschiedenen Geräten und bei unterschiedlichen Lichtverhältnissen. Was auf einem kalibrierten Designmonitor gut aussieht, kann auf einem günstigen Smartphone-Display schwer lesbar sein.

Nicht zu voll, nicht zu leer

Die richtige Balance zwischen Inhalt und Leerraum ist entscheidend für einen gelungenen Footer. Ein überladener Footer mit dutzenden Links, mehreren Formularen und zahlreichen Grafiken überfordert den Nutzer. Ein zu leerer Footer mit nur einem Copyright-Hinweis verschenkt dagegen Potenzial.

Als Faustregel gilt: Beschränke den Footer auf drei bis fünf inhaltliche Bereiche. Jeder Bereich sollte einen klaren Zweck erfüllen. Prüfe kritisch, ob jedes Element im Footer einen Mehrwert für den Besucher bietet. Elemente, die keinen klaren Nutzen haben, sollten entfernt werden. Denke auch daran, dass der Footer auf jeder einzelnen Unterseite angezeigt wird. Was auf der Startseite sinnvoll ist, kann auf einer Produktseite überflüssig sein.

Sticky Footer vs. Standard Footer

Ein Sticky Footer bleibt am unteren Rand des Viewports fixiert, auch wenn der Seiteninhalt nicht ausreicht, um den gesamten Bildschirm zu füllen. Das ist besonders nützlich bei Seiten mit wenig Inhalt, damit der Footer nicht mitten auf der Seite "schwebt".

Ein Standard Footer hingegen sitzt am Ende des Dokumentenflusses und wird erst sichtbar, wenn der Nutzer nach unten scrollt. Für die meisten Websites ist der Standard Footer die bessere Wahl, da ein Sticky Footer auf Mobilgeräten wertvollen Bildschirmplatz beansprucht.

Die Entscheidung hängt von deinem Anwendungsfall ab. Für Webanwendungen mit wenig Inhalt auf einzelnen Seiten kann ein Sticky Footer sinnvoll sein. Für inhaltsreiche Websites mit Blog, Produktseiten und Landingpages ist der Standard Footer fast immer die richtige Wahl. Der CSS-Ansatz für einen Sticky Footer ist einfach: Verwende Flexbox auf dem Body-Element und setze den Hauptinhalt auf flex-grow: 1.

3 Footer Layouts mit CSS Code

Die folgenden drei Footer-Layouts kannst du direkt in deinen Projekten verwenden. Jedes Layout ist responsiv und folgt den zuvor beschriebenen Best Practices. Der CSS-Code ist bewusst schlank gehalten und lässt sich leicht an dein Branding anpassen.

Einfacher 3-Spalten Footer

Dieses Layout ist der Klassiker und eignet sich für die meisten Unternehmenswebsites. Drei gleichbreite Spalten enthalten jeweils eine Überschrift und eine Liste von Links oder Informationen. Auf Mobilgeräten werden die Spalten untereinander gestapelt.

HTML-Struktur:

<footer class="footer-drei-spalten"> <div class="footer-container"> <div class="footer-spalte"> <h3>Unternehmen</h3> <ul> <li><a href="/über-uns">Über uns</a></li> <li><a href="/team">Team</a></li> <li><a href="/karriere">Karriere</a></li> <li><a href="/kontakt">Kontakt</a></li> </ul> </div> <div class="footer-spalte"> <h3>Leistungen</h3> <ul> <li><a href="/webdesign">Webdesign</a></li> <li><a href="/seo">SEO</a></li> <li><a href="/beratung">Beratung</a></li> <li><a href="/support">Support</a></li> </ul> </div> <div class="footer-spalte"> <h3>Kontakt</h3> <p>Musterstrasse 1<br>12345 Musterstadt</p> <p><a href="tel:+491234567890">+49 123 456 7890</a></p> <p><a href="mailto:info@beispiel.de">info@beispiel.de</a></p> </div> </div> <div class="footer-bottom"> <p>Copyright 2026 Firmenname. Alle Rechte vorbehalten.</p> <nav> <a href="/impressum">Impressum</a> <a href="/datenschutz">Datenschutz</a> <a href="/agb">AGB</a> </nav> </div>
</footer>

CSS-Code:

.footer-drei-spalten { background-color: #1a1a2e; color: #e0e0e0; padding: 60px 20px 20px; font-family: system-ui, -apple-system, sans-serif;
} .footer-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
} .footer-spalte h3 { color: #ffffff; font-size: 18px; margin-bottom: 20px; font-weight: 600;
} .footer-spalte ul { list-style: none; padding: 0; margin: 0;
} .footer-spalte ul li { margin-bottom: 10px;
} .footer-spalte a { color: #b0b0b0; text-decoration: none; transition: color 0.3s ease;
} .footer-spalte a:hover { color: #ffffff;
} .footer-bottom { max-width: 1200px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid #333; display: flex; justify-content: space-between; align-items: center; font-size: 14px;
} .footer-bottom nav a { color: #b0b0b0; text-decoration: none; margin-left: 20px;
} .footer-bottom nav a:hover { color: #ffffff;
} @media (max-width: 768px) { .footer-container { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; text-align: center; gap: 10px; } .footer-bottom nav a { margin: 0 10px; }
}

Dieses Layout ist bewusst einfach gehalten. Die drei Spalten passen sich über CSS Grid automatisch an den verfügbaren Platz an. Auf Mobilgeräten unterhalb von 768px Breite werden die Spalten untereinander gestapelt. Die untere Leiste mit Copyright und rechtlichen Links wechselt ebenfalls in eine vertikale Anordnung.

Mehrzeiliger Footer mit CTA

Dieser Footer eignet sich besonders gut für Websites, die einen Call-to-Action-Bereich über dem eigentlichen Footer platzieren möchten. Der CTA-Bereich hebt sich farblich ab und lässt sich für Newsletter-Anmeldungen, Kontaktaufrufe oder Sonderangebote nutzen.

HTML-Struktur:

<footer class="footer-mit-cta"> <div class="footer-cta"> <div class="footer-cta-inner"> <h2>Bereit für deine neue Website?</h2> <p>Lass uns gemeinsam dein Projekt umsetzen.</p> <a href="/kontakt" class="cta-button">Jetzt Kontakt aufnehmen</a> </div> </div> <div class="footer-main"> <div class="footer-main-inner"> <div class="footer-spalte"> <h3>Navigation</h3> <ul> <li><a href="/">Startseite</a></li> <li><a href="/leistungen">Leistungen</a></li> <li><a href="/referenzen">Referenzen</a></li> <li><a href="/blog">Blog</a></li> </ul> </div> <div class="footer-spalte"> <h3>Rechtliches</h3> <ul> <li><a href="/impressum">Impressum</a></li> <li><a href="/datenschutz">Datenschutz</a></li> <li><a href="/agb">AGB</a></li> <li><a href="/cookies">Cookie-Einstellungen</a></li> </ul> </div> <div class="footer-spalte"> <h3>Kontakt</h3> <p>Musterstrasse 1<br>12345 Musterstadt</p> <p><a href="tel:+491234567890">+49 123 456 7890</a></p> </div> <div class="footer-spalte"> <h3>Social Media</h3> <div class="social-icons"> <a href="#" aria-label="Instagram">Instagram</a> <a href="#" aria-label="LinkedIn">LinkedIn</a> <a href="#" aria-label="YouTube">YouTube</a> </div> </div> </div> </div> <div class="footer-copyright"> <p>Copyright 2026 Firmenname. Alle Rechte vorbehalten.</p> </div>
</footer>

CSS-Code:

.footer-mit-cta { font-family: system-ui, -apple-system, sans-serif;
} .footer-cta { background-color: #0066cc; padding: 50px 20px; text-align: center;
} .footer-cta-inner { max-width: 800px; margin: 0 auto;
} .footer-cta h2 { color: #ffffff; font-size: 28px; margin-bottom: 10px;
} .footer-cta p { color: #cce0ff; font-size: 18px; margin-bottom: 25px;
} .cta-button { display: inline-block; background-color: #ffffff; color: #0066cc; padding: 14px 32px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 16px; transition: background-color 0.3s ease, transform 0.2s ease;
} .cta-button:hover { background-color: #f0f0f0; transform: translateY(-2px);
} .footer-main { background-color: #1a1a2e; padding: 50px 20px;
} .footer-main-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
} .footer-main-inner .footer-spalte h3 { color: #ffffff; font-size: 16px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: 1px;
} .footer-main-inner .footer-spalte ul { list-style: none; padding: 0; margin: 0;
} .footer-main-inner .footer-spalte ul li { margin-bottom: 10px;
} .footer-main-inner .footer-spalte a { color: #999; text-decoration: none; transition: color 0.3s ease;
} .footer-main-inner .footer-spalte a:hover { color: #ffffff;
} .footer-main-inner .footer-spalte p { color: #999; line-height: 1.6;
} .social-icons a { display: block; color: #999; text-decoration: none; margin-bottom: 8px; transition: color 0.3s ease;
} .social-icons a:hover { color: #ffffff;
} .footer-copyright { background-color: #12121f; padding: 15px 20px; text-align: center; color: #666; font-size: 14px;
} @media (max-width: 768px) { .footer-main-inner { grid-template-columns: 1fr 1fr; gap: 25px; } .footer-cta h2 { font-size: 22px; }
} @media (max-width: 480px) { .footer-main-inner { grid-template-columns: 1fr; }
}

Der mehrzeilige Aufbau mit CTA-Bereich oben, Navigation in der Mitte und Copyright unten schafft eine klare Struktur. Der blaue CTA-Bereich zieht Aufmerksamkeit auf sich und motiviert zur Interaktion. Das Vier-Spalten-Layout im mittleren Bereich bietet genug Platz für alle wichtigen Footer-Elemente, ohne überladen zu wirken.

Minimalistischer Footer

Dieser Footer ist ideal für Portfolios, Freelancer-Websites und minimalistische Marken. Er beschränkt sich auf das Wesentliche: eine kurze Beschreibung, die wichtigsten Links und die rechtlichen Pflichtangaben. Der Fokus liegt auf Klarheit und Eleganz.

HTML-Struktur:

<footer class="footer-minimal"> <div class="footer-minimal-inner"> <div class="footer-minimal-brand"> <p class="brand-name">Firmenname</p> <p class="brand-tagline">Webdesign und Entwicklung aus Musterstadt.</p> </div> <nav class="footer-minimal-nav"> <a href="/leistungen">Leistungen</a> <a href="/referenzen">Referenzen</a> <a href="/blog">Blog</a> <a href="/kontakt">Kontakt</a> </nav> <div class="footer-minimal-legal"> <p>Copyright 2026 Firmenname</p> <nav> <a href="/impressum">Impressum</a> <a href="/datenschutz">Datenschutz</a> </nav> </div> </div>
</footer>

CSS-Code:

.footer-minimal { background-color: #fafafa; border-top: 1px solid #e0e0e0; padding: 50px 20px 30px; font-family: system-ui, -apple-system, sans-serif;
} .footer-minimal-inner { max-width: 800px; margin: 0 auto; text-align: center;
} .brand-name { font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px;
} .brand-tagline { color: #666; font-size: 16px; margin-bottom: 30px;
} .footer-minimal-nav { display: flex; justify-content: center; gap: 30px; margin-bottom: 35px; flex-wrap: wrap;
} .footer-minimal-nav a { color: #333; text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.3s ease;
} .footer-minimal-nav a:hover { color: #0066cc;
} .footer-minimal-legal { padding-top: 20px; border-top: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #999;
} .footer-minimal-legal nav a { color: #999; text-decoration: none; margin-left: 15px; transition: color 0.3s ease;
} .footer-minimal-legal nav a:hover { color: #333;
} @media (max-width: 600px) { .footer-minimal-nav { flex-direction: column; gap: 15px; } .footer-minimal-legal { flex-direction: column; gap: 10px; text-align: center; } .footer-minimal-legal nav a { margin: 0 8px; }
}

Der minimalistische Footer nutzt einen hellen Hintergrund mit dezenter oberer Linie. Die zentrierte Anordnung und der großzügige Weissraum erzeugen ein ruhiges, elegantes Erscheinungsbild. Dieser Ansatz eignet sich besonders dann, wenn der Footer die Aufmerksamkeit nicht vom Hauptinhalt ablenken soll, aber dennoch alle wichtigen Informationen bereitstellt.

Footer und SEO - Was du wissen musst

Der Footer spielt eine Rolle für die Suchmaschinenoptimierung, auch wenn seine Bedeutung oft überschätzt oder falsch eingesetzt wird. Die folgenden Aspekte solltest du bei der SEO-Optimierung deines Footers beachten.

Interne Verlinkung im Footer

Interne Links im Footer werden von Suchmaschinen gecrawlt und können dabei helfen, die Linkstruktur deiner Website zu stärken. Allerdings haben Footer-Links in der Regel weniger Gewicht als Links im Hauptinhalt einer Seite. Google erkennt den Unterschied zwischen Navigation, Footer und Content-Bereich.

Trotzdem sind Footer-Links wertvoll, und zwar aus mehreren Gründen:

• Sie erscheinen auf jeder Seite und sorgen dafür, dass wichtige Unterseiten konsistent verlinkt werden
• Sie helfen Crawlern, tieferliegende Seiten zu entdecken
• Sie verbessern die allgemeine Crawlbarkeit der Website
• Sie können die interne Linkstruktur sinnvoll ergänzen

Verlinke im Footer gezielt auf die wichtigsten Kategorieseiten, zentrale Serviceseiten und Inhalte, die du in den Suchergebnissen stärken möchtest. Vermeide es, wahllos dutzende Links in den Footer zu packen, da dies von Suchmaschinen als Link Stuffing gewertet werden kann.

Strukturierte Daten (LocalBusiness)

Für lokale Unternehmen bietet der Footer eine ideale Gelegenheit, strukturierte Daten im Format JSON-LD einzubinden. Das LocalBusiness-Schema hilft Google, deine Unternehmensinformationen korrekt zu erfassen und in den Suchergebnissen anzuzeigen.

Folgende Informationen solltest du im LocalBusiness-Schema hinterlegen:

• Firmenname (name)
• Adresse (address) mit Strasse, PLZ, Ort und Land
• Telefonnummer (telephone)
• E-Mail-Adresse (email)
• Website-URL (url)
• Oeffnungszeiten (openingHoursSpecification)
• Logo (image)
• Geo-Koordinaten (geo)

Ein Beispiel für ein einfaches LocalBusiness-Schema:

<script type="application/ld+json">
{ "@context": "https://schema.org", "@type": "LocalBusiness", "name": "Firmenname", "address": { "@type": "PostalAddress", "streetAddress": "Musterstrasse 1", "addressLocality": "Musterstadt", "postalCode": "12345", "addressCountry": "DE" }, "telephone": "+491234567890", "email": "info@beispiel.de", "url": "https://www.beispiel.de"
}
</script>

Die strukturierten Daten müssen nicht visuell im Footer sichtbar sein. Du kannst das JSON-LD-Script im Footer-Bereich deines Templates einbinden, ohne dass es für den Nutzer sichtbar wird. Google liest es trotzdem aus und kann die Informationen für Rich Snippets und den Knowledge Graph nutzen.

Footer-Links und PageRank

Die Frage, wie stark Footer-Links den PageRank beeinflussen, wird in der SEO-Community häufig diskutiert. Grundsätzlich gilt: Footer-Links verteilen PageRank wie alle anderen internen Links. Da der Footer jedoch auf jeder Seite erscheint, verteilt sich der PageRank auf alle dort verlinkten Seiten.

John Müller von Google hat mehrfach darauf hingewiesen, dass seitenweite Footer-Links natürlich sind und nicht negativ bewertet werden, solange sie dem Nutzer dienen. Problematisch wird es erst, wenn der Footer ausschließlich für SEO-Zwecke mit Keywords und Links vollgestopft wird.

Für eine gesunde SEO-Strategie im Footer gelten folgende Grundsätze:

• Verlinke nur Seiten, die für den Nutzer tatsächlich relevant sind
• Verwende natürliche Ankertexte statt überoptimierter Keyword-Links
• Halte die Anzahl der Footer-Links in einem vernünftigen Rahmen (10 bis 25 Links sind normal)
• Vermeide es, externe SEO-Links im Footer zu platzieren, die keinen Mehrwert für den Besucher bieten
• Setze keine nofollow-Attribute auf interne Footer-Links, da dies den internen PageRank-Fluss unnötig einschränkt

Häufige Footer-Fehler und wie du sie vermeidest

Selbst erfahrene Webdesigner und Entwickler machen beim Footer Fehler, die sich negativ auf SEO, Nutzererfahrung oder die rechtliche Absicherung auswirken. Die folgenden Probleme begegnen mir in der Praxis am häufigsten.

Zu viele Links (Link Stuffing)

Ein Footer mit 50 oder mehr Links ist keine Seltenheit, besonders bei grossen Websites. Das Problem: Zu viele Links verwässern den SEO-Wert jedes einzelnen Links und überfordern den Nutzer. Wenn der Footer länger ist als der eigentliche Seiteninhalt, stimmt etwas nicht.

Google hat in der Vergangenheit Websites abgestraft, die den Footer für exzessives Linkbuilding missbraucht haben. Sogenannte Fat Footer mit hunderten Links zu unterschiedlichsten Keywords wurden als Manipulationsversuch gewertet. Beschränke dich auf die wirklich wichtigen Links und gruppiere sie sinnvoll. Wenn du viele Unterseiten hast, nutze stattdessen eine separate Sitemap-Seite.

Fehlende Mobile-Optimierung

Ein Footer, der auf dem Desktop drei Spalten hat, wird auf dem Smartphone ohne Responsive Design zu einem unlesbaren Durcheinander. Texte überlappen sich, Links sind nicht klickbar, und die gesamte Darstellung wirkt unprofessionell.

Teste deinen Footer auf verschiedenen Geräten und Bildschirmgrößen. Nutze die Browser-Entwicklertools, um den Footer in verschiedenen Viewports zu prüfen. Achte besonders auf:

• Ausreichend grosse Klickflächen für Touch-Geräte
• Lesbare Schriftgrößen (mindestens 14px für Fliesstext)
• Sinnvolle Stapelung der Spalten auf schmalen Bildschirmen
• Funktionierendes Scrollverhalten und keine abgeschnittenen Inhalte

Kein Impressum/Datenschutz

Es klingt banal, kommt aber erschreckend oft vor: Websites ohne Impressum oder Datenschutzerklärung im Footer. In Deutschland ist das Impressum nach Paragraph 5 TMG für geschäftliche Websites Pflicht. Die Datenschutzerklärung ist nach DSGVO verpflichtend.

Fehlende rechtliche Angaben können zu kostspieligen Abmahnungen führen. Aber auch abseits der rechtlichen Risiken signalisiert ein fehlendes Impressum mangelnde Professionalität. Besucher, die nach dem Impressum suchen und es nicht finden, verlieren Vertrauen in die Website und das dahinterstehende Unternehmen.

Stelle sicher, dass Impressum und Datenschutzerklärung von jeder Seite deiner Website aus mit maximal zwei Klicks erreichbar sind. Der Footer ist dafür der ideale Ort.

Veraltete Copyright-Jahreszahl

"Copyright 2019" auf einer Website im Jahr 2026 - das wirkt, als wäre die Seite seit Jahren nicht mehr gepflegt worden. Die Copyright-Jahreszahl ist ein kleines Detail, das aber einen grossen Einfluss auf die wahrgenommene Aktualität deiner Website hat.

Die einfachste Lösung: Generiere die Jahreszahl dynamisch. In JavaScript funktioniert das so:

document.getElementById('year').textContent = new Date().getFullYear();

In PHP sieht es so aus:

<?php echo date('Y'); ?>

Damit ist die Jahreszahl immer aktuell, und du musst nie wieder manuell daran denken, sie zu ändern.

Broken Links

Broken Links im Footer sind besonders problematisch, weil sie auf jeder einzelnen Seite deiner Website erscheinen. Ein einziger defekter Link im Footer multipliziert sich mit der Anzahl deiner Unterseiten. Bei einer Website mit 100 Seiten bedeutet ein Broken Link im Footer 100 defekte Links aus Sicht der Suchmaschinen.

Broken Links verschlechtern die Nutzererfahrung und senden negative Signale an Suchmaschinen. Sie können entstehen, wenn Seiten umbenannt, gelöscht oder umstrukturiert werden, ohne die Footer-Links anzupassen.

Prüfe deinen Footer regelmäßig auf defekte Links. Dafür eignen sich Tools wie Screaming Frog, Ahrefs Site Audit oder der kostenlose Dead Link Checker. Richte zusätzlich Weiterleitungen (301 Redirects) ein, wenn sich URLs ändern, damit bestehende Links nicht ins Leere führen. Integriere die Footer-Prüfung in deine regelmäßige Website-Wartung, idealerweise einmal im Quartal.

Fazit

Der Website Footer verdient deutlich mehr Aufmerksamkeit, als er in vielen Projekten bekommt. Ein durchdacht gestalteter Footer verbessert die Nutzererfahrung, stärkt das Vertrauen deiner Besucher, unterstützt deine SEO-Strategie und erfüllt rechtliche Anforderungen. Die wichtigsten Punkte im Überblick:

• Integriere die wesentlichen Elemente: Kontaktdaten, Navigation, rechtliche Links, Social Media, Copyright und Trust-Elemente
• Achte auf klare visuelle Hierarchie, ausreichend Kontrast und ein responsives Layout
• Halte die Balance zwischen Informationsfülle und Übersichtlichkeit
• Nutze den Footer strategisch für interne Verlinkung und strukturierte Daten
• Vermeide typische Fehler wie Link Stuffing, fehlende Mobile-Optimierung, veraltete Jahreszahlen und Broken Links

Die drei vorgestellten CSS-Layouts geben dir eine solide Ausgangsbasis für dein nächstes Projekt. Passe Farben, Schriften und Inhalte an dein Branding an und teste den Footer gründlich auf verschiedenen Geräten. Ein guter Footer ist keine einmalige Aufgabe, sondern ein Bereich, den du regelmäßig überprüfen und aktualisieren solltest, genau wie den Rest deiner Website.