Missing Footer

Your site has no footer with contact or legal info. It's a business card with no phone number — visitors can't trust what they can't verify.

What is this?

A business card with a name and nothing else — no phone number, no email, no address. Would you trust that person? Your website's footer serves the same purpose as the back of a business card. It is where visitors look for contact information, legal pages, and the "fine print" that signals legitimacy. When your site has no footer, or the footer is just an empty strip with a copyright year, visitors lose a critical trust signal.

Why it matters

For your visitors: When someone scrolls to the bottom of your page looking for a privacy policy, contact email, or "About us" link and finds nothing, alarm bells ring. Is this site even legitimate? Can I contact a real human? What happens with my data? These are the questions your footer should answer before they are asked. Missing this information makes visitors feel uneasy — and uneasy visitors do not convert.
For your business: Footers impact trust, SEO, and legal compliance. Search engines use footer links to understand site structure. Privacy laws like GDPR and CCPA require accessible links to your privacy policy. And potential customers actively check for contact information before making a purchase — Baymard Institute found that 64% of users look for contact details as a trust signal.
The standard: WCAG requires that contact information be available and consistent across pages. Legal frameworks (GDPR, CCPA, e-Commerce regulations) require accessible links to privacy policies and terms of service. The <footer> HTML element exists specifically for this purpose and creates a landmark that assistive technologies use for navigation.

Complete, trustworthy footer

<footer>
  <nav aria-label="Footer">
    <div>
      <h3>Product</h3>
      <a href="/features">Features</a>
      <a href="/pricing">Pricing</a>
      <a href="/docs">Documentation</a>
    </div>
    <div>
      <h3>Company</h3>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
      <a href="/blog">Blog</a>
    </div>
    <div>
      <h3>Legal</h3>
      <a href="/privacy">Privacy Policy</a>
      <a href="/terms">Terms of Service</a>
    </div>
  </nav>
  <p>&copy; 2026 YourApp Ltd. All rights reserved.</p>
</footer>

Empty or missing footer

<body>
  <header>...</header>
  <main>Your page content</main>
  <!-- Page just... ends. No footer. -->
  <!-- Where's the privacy policy? Contact info? -->
  <!-- Are you even a real company? -->
</body>

How to fix it

React / Next.js

Create a footer component and include it in your root layout.

// src/components/footer.tsx
import Link from "next/link";

const footerLinks = {
  Product: [
    { label: "Features", href: "/features" },
    { label: "Pricing", href: "/pricing" },
    { label: "Docs", href: "/docs" },
  ],
  Company: [
    { label: "About", href: "/about" },
    { label: "Contact", href: "/contact" },
    { label: "Blog", href: "/blog" },
  ],
  Legal: [
    { label: "Privacy Policy", href: "/privacy" },
    { label: "Terms of Service", href: "/terms" },
  ],
};

export function Footer() {
  return (
    <footer className="border-t bg-gray-50 dark:bg-gray-950">
      <div className="mx-auto max-w-6xl px-4 py-12">
        <nav aria-label="Footer" className="grid grid-cols-2 gap-8 md:grid-cols-3">
          {Object.entries(footerLinks).map(([category, links]) => (
            <div key={category}>
              <h3 className="mb-3 text-sm font-semibold">{category}</h3>
              <ul className="space-y-2">
                {links.map((link) => (
                  <li key={link.href}>
                    <Link
                      href={link.href}
                      className="text-sm text-gray-500 hover:text-gray-900 dark:hover:text-white"
                    >
                      {link.label}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </nav>
        <div className="mt-8 border-t pt-8 text-sm text-gray-400">
          <p>&copy; {new Date().getFullYear()} YourApp Ltd. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}

// src/app/layout.tsx
import { Footer } from "@/components/footer";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>{/* nav */}</header>
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

Plain HTML

<footer style="border-top: 1px solid #e5e7eb; padding: 3rem 1rem;">
  <nav aria-label="Footer">
    <div>
      <h3>Product</h3>
      <ul>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/docs">Docs</a></li>
      </ul>
    </div>
    <div>
      <h3>Legal</h3>
      <ul>
        <li><a href="/privacy">Privacy Policy</a></li>
        <li><a href="/terms">Terms of Service</a></li>
      </ul>
    </div>
    <div>
      <h3>Contact</h3>
      <p>Email: hello@yourapp.com</p>
    </div>
  </nav>
  <p>&copy; 2026 YourApp Ltd. All rights reserved.</p>
</footer>

Your footer checklist: company name with copyright, privacy policy link, terms of service link, contact information (email at minimum), and navigation links to key pages. If you are an EU business, you also need an imprint/impressum.

Medium impact — navigation~1 paw

The footer is where trust lives. The cat checks there first — like sniffing someone before deciding they are worth knowing.

How the cat scores this

The scanner looks for a <footer> element and checks its contents. An empty <footer> tag still gets flagged — the cat wants substance. Specifically, it checks for the presence of: at least one link to a privacy policy or terms page, some form of contact information (email, contact page link, or address), and internal navigation links. Pages with no <footer> element at all receive the strongest penalty. A footer with only a copyright year and nothing else gets a partial flag.