Fix Missing Document Title for Better Accessibility

Learn how to fix missing document title in Lighthouse accessibility audits. The title gives screen reader users an overview of the page.
Harlan WiltonHarlan Wilton4 min read Published

Pages without titles leave users guessing. Screen reader users hear "untitled document" and cannot identify what page they landed on.

What's Happening

The <title> element provides the page's name that appears in browser tabs, bookmarks, and search results. More importantly, screen readers announce the title when users arrive at a page, giving immediate context about where they are.

Without a title, users cannot distinguish between browser tabs, search results are meaningless, and screen reader users have no indication of the page content until they start exploring.

Diagnose

Browser Check

  1. Look at the browser tab - if it shows the URL or "Untitled" instead of a descriptive name, the title is missing
  2. Try bookmarking the page - the suggested name should be descriptive

DevTools

  1. Open DevTools (F12)
  2. Elements panel > search for <title>
  3. Or run in Console:
console.log('Title:', document.title || 'MISSING')

View Page Source

  1. Right-click > View Page Source
  2. Look for <title> within <head>
  3. Check if it exists and contains meaningful text

Fix

1. Add a Title Element

Add <title> inside <head> on every page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Product Catalog - Acme Store</title>
</head>
<body>
  ...
</body>
</html>

2. Make Titles Descriptive and Unique

Each page needs a unique, descriptive title:

<!-- Bad: Generic title on all pages -->
<title>Acme Store</title>

<!-- Good: Specific to each page -->
<title>Running Shoes - Acme Store</title>
<title>Checkout - Acme Store</title>
<title>Order Confirmation #12345 - Acme Store</title>

Pattern: Page-specific content - Site name

3. Include Key Information First

Screen readers may truncate long titles. Put the most important information first:

<!-- Bad: Site name first -->
<title>Acme Store | Running Shoes | Men's Athletic Footwear</title>

<!-- Good: Specific content first -->
<title>Men's Running Shoes - Athletic Footwear - Acme Store</title>

Framework Examples

NuxtUse useHead composable or useSeoMeta:
<script setup>
useHead({
  title: 'Product Catalog'
})

// Or with template
useSeoMeta({
  title: 'Product Catalog - Acme Store',
  ogTitle: 'Product Catalog - Acme Store'
})
</script>
For dynamic titles:
<script setup>
const product = await useAsyncData('product', () => fetchProduct())

useHead({
  title: () => `${product.value?.name} - Acme Store`
})
</script>
Configure a title template in nuxt.config.ts:
export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s - Acme Store'
    }
  }
})
React / Next.jsWith Next.js App Router:
// app/products/page.tsx
export const metadata = {
  title: 'Product Catalog - Acme Store'
}

// Dynamic
export async function generateMetadata({ params }) {
  const product = await getProduct(params.id)
  return { title: `${product.name} - Acme Store` }
}
Or with React Helmet:
import { Helmet } from 'react-helmet'

function ProductPage({ product }) {
  return (
    <>
      <Helmet>
        <title>
          {product.name}
          {' '}
          - Acme Store
        </title>
      </Helmet>
      <main>...</main>
    </>
  )
}

SEO Impact: CTR & Rankings

The document title is arguably the single most important on-page SEO element.

  • Primary SERP Hook: It is the first (and sometimes only) thing users read in search results.
  • Pogo-sticking: If a title is vague or misleading (e.g., just "Home"), users may click, realize it's not what they wanted, and immediately bounce back to Google. This "pogo-sticking" sends a strong negative signal to Google's algorithm.
  • Keyword Relevance: Placing the primary keyword near the front of the title carries more weight for ranking.

Aligning your titles for accessibility (descriptive, unique, front-loaded) is 100% identical to optimizing them for SEO.

Verify the Fix

  1. Re-run Lighthouse - The "Document has a <title> element" audit should pass
  2. Check browser tab - Should show descriptive page name
  3. Console verification:
const title = document.title
if (!title || title.trim() === '') {
  console.error('Page title is missing or empty')
}
else {
  console.log('Title:', title)
}
  1. Screen reader test - Navigate to the page; the title should be announced

Common Mistakes

  • Empty title tag — <title></title> passes the "exists" check but fails accessibility. The title must contain text.
  • Same title on all pages — <title>Home</title> on every page makes navigation impossible. Each page needs a unique title.
  • Title only in JavaScript — If your title is set via JavaScript and rendering fails, the page has no title. Ensure server-side rendering or use a fallback.
  • Special characters not encoded — Ampersands and other special characters should be encoded: <title>Tom &amp; Jerry</title>
  • Excessively long titles — Keep titles under 60-70 characters. Longer titles get truncated in search results and browser tabs.

Related Issues

Document title issues often appear alongside:

  • HTML Lang — Both are document-level metadata requirements
  • Heading Order — Title and h1 should align for consistent structure
  • Meta Description — Both affect how the page appears in search and assistive tech

Test Your Entire Site

Missing titles often hide in error pages, dynamically generated pages, or legacy sections. Unlighthouse scans your entire site and identifies every page without a proper title, catching issues that manual testing misses.

Related

Color Contrast

Learn how to fix color contrast issues in Lighthouse accessibility audits

Frame Title

Learn how to fix frame and iframe title issues in Lighthouse accessibility audits