Skip to content

Metadata · Next.js (App Router)

How to set the html lang attribute in Next.js (App Router)

Search engines use it to decide which language market to show you in, and screen readers use it to pick a pronunciation voice. A wrong or missing value puts you in the wrong results and makes the page unlistenable. It is also a documented WCAG failure.

The fix for Next.js (App Router)

13x detects your framework from the response and hands you this version rather than the generic one — below 50% confidence it hedges and gives you the generic one instead.

tsx code
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

For a multi-language site, drive it from the route segment: <html lang={locale}>.

On a different stack? The general version of this fix explains what 13x checks and why it matters, without assuming a framework.

Check your Next.js (App Router) site

113 deterministic checks against your live URL, in about 30 seconds. Framework detected from the response, so every fix comes back in the form your stack actually uses.

No signup. Results in 30 seconds.