` element provides the page's name that appears in browser tabs, bookmarks, and search results. Screen readers announce the title when users arrive at a page, giving immediate context. 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: ```js 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: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Product Catalog

--- title: "Fix Missing Document Title" description: "Learn how to fix missing document title in Lighthouse accessibility audits. The title gives screen reader users an overview of the page." canonical_url: "https://unlighthouse.dev/learn-lighthouse/accessibility/document-title" last_updated: "2025-01-18" --- Pages without titles leave users guessing. Screen reader users hear "untitled document" and cannot identify what page they landed on. ## What's happening The `` element provides the page's name that appears in browser tabs, bookmarks, and search results. Screen readers announce the title when users arrive at a page, giving immediate context. 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: ```js 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: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Product Catalog - Acme Store ... ``` ### 2. Make titles descriptive and unique Each page needs a unique, descriptive title: ```html Acme Store Running Shoes - Acme Store Checkout - Acme Store Order Confirmation #12345 - Acme Store ``` Pattern: **Page-specific content - Site name** ### 3. Include key information first Screen readers may truncate long titles. Put the most important information first: ```html Acme Store | Running Shoes | Men's Athletic Footwear Men's Running Shoes - Athletic Footwear - Acme Store ``` ## Framework examples **Nuxt** Use `useHead` composable or `useSeoMeta`: ```html ``` For dynamic titles: ```html ``` Configure a title template in `nuxt.config.ts`: ```ts export default defineNuxtConfig({ app: { head: { titleTemplate: '%s - Acme Store' } } }) ``` **React / Next.js** With Next.js App Router: ```tsx // 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: ```jsx import { Helmet } from 'react-helmet' function ProductPage({ product }) { return ( <> {product.name} {' '} - Acme Store

...

) } ``` ## SEO impact: CTR & rankings The document title is the single most important on-page SEO element. - **Primary SERP hook**: It is the first 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 `` element" audit should pass. 2. **Check browser tab** - Should show descriptive page name. 3. **Console verification**: ```js 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>` passes the "exists" check but fails accessibility. The title must contain text. - **Same title on all pages**: `Home` 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. Use server-side rendering or a fallback. - **Special characters not encoded**: Encode ampersands and other special characters: `Tom & Jerry` - **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](/learn-lighthouse/accessibility/html-has-lang) - Both are document-level metadata requirements - [Heading order](/learn-lighthouse/accessibility/heading-order) - Title and h1 should align for consistent structure - [Meta description](/learn-lighthouse/seo/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.