The lang attribute on the <html> element is the primary signal search engines use to serve your page to the correct language audience. Without it, Google may incorrectly categorize or exclude your content from language-segmented search results, reducing organic reach in your target market. Screen readers depend on the lang value to select the right pronunciation engine; an absent or wrong language code causes WCAG 2.2 SC 3.1.1 (Language of Page) to fail, potentially exposing your product to accessibility compliance liability.
Low because incorrect language declaration rarely causes functional breakage but does reduce SEO precision and introduces an accessibility compliance gap that compounds across all pages.
Set the lang attribute on the root <html> element. In Next.js App Router this lives in app/layout.tsx:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
Use a valid BCP-47 code ("en", "en-US", "fr-CA", etc.). For multilingual sites, set the primary language at the root and use per-route lang overrides or hreflang link tags to signal alternate locales.
ID: seo-fundamentals.meta-tags.lang-attribute
Severity: low
What to look for: Check the root layout or _document for a lang attribute on the <html> tag. In Next.js App Router, this is in the root layout.tsx. In Pages Router, it's in _document.tsx.
Pass criteria: Enumerate all <html> tags and their lang attributes across root layouts. The <html> tag must have a lang attribute with a valid BCP-47 language code (e.g., "en", "en-US", "fr", "de"). Before evaluating, extract and quote the exact lang attribute value found in the root layout. The value must be a non-empty string of at least 2 characters.
Fail criteria: No lang attribute on the <html> tag, or the lang attribute is an empty string.
Skip (N/A) when: Never — every HTML document should declare its language.
Detail on fail: "No lang attribute on <html> tag in root layout"
Remediation: The lang attribute helps search engines serve your content to the right language audience and assists screen readers with pronunciation. Add it to your root layout:
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}