Should I use en, en-GB, or en-US?

Use the most specific code that genuinely matches your content. en alone is fine for content that doesn't differ regionally. en-GB if you use British spellings and target UK audience. en-US for American spellings and US targeting. Don't use en-GB if your content is just generic English — it's misleading and doesn't help SEO.

Does the html lang attribute affect SEO?

Indirectly. Google uses lang as one signal among many to determine page language; it also looks at body text, hreflang tags, and the URL/domain. The biggest direct impact is accessibility: screen readers use lang to choose the right pronunciation model. A US screen reader reading 'Frankfurt' will mispronounce it without lang='de' on the relevant span.

What if my page has mixed languages?

Set html lang to the primary language of the page. Wrap sections in the secondary language with or . Example: an English page describing a French recipe might have html lang='en' but wrap French ingredient names in ingredients . Screen readers switch pronunciation accordingly.

Should I use lang or xml:lang?

In HTML5: use lang only. xml:lang is XHTML syntax — valid but redundant in HTML5. For pages served as application/xhtml+xml, use both. For normal HTML5 pages served as text/html, lang alone is correct and shorter.

How to Fix Missing Lang Attribute

The lang attribute on your <html> element tells browsers, search engines, screen readers and AI parsers which language your content is in. Missing or wrong lang doesn't crash anything but degrades accessibility (screen readers mispronounce), translation behaviour, and search-engine language detection. The fix is one attribute on one tag. This guide covers the right codes, multilingual patterns, and the hreflang connection.

1. Pick the right BCP 47 code

Step 1

Choose language-only or language+region

BCP 47 codes can be just a language (en, fr, de) or language + region (en-GB, fr-CA, pt-BR). Rule: use the most specific code that genuinely matches your content.

Generic English content → lang="en"
British spellings, UK audience → lang="en-GB"
American spellings, US audience → lang="en-US"
Brazilian Portuguese specifically → lang="pt-BR"
Generic Portuguese → lang="pt"

⚠️ Don't use en-GB as the default just because the codebase is British. The lang should reflect what's in the content. Mislabelled lang confuses screen readers and translation tools.

2. Add lang to your template

WordPress

Step 1

Edit header.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

language_attributes() outputs lang="en-GB" (or whatever you set in Settings → General → Site Language). If your theme has a hardcoded <html lang="en">, replace it with language_attributes() so the value follows WP settings.

Shopify

Step 1

Edit theme.liquid

<html lang="{{ request.locale.iso_code }}">

request.locale.iso_code outputs the active locale (e.g. en, en-GB). For multi-locale stores via Shopify Markets, this automatically matches the visitor's locale.

Next.js

Step 1

Set lang in app/layout.tsx

export default function RootLayout({ children }) {
  return (
    <html lang="en-GB">
      <body>{children}</body>
    </html>
  );
}

For internationalised routing, use the active locale from next-intl or the App Router's locale param.

3. Tag mid-page language switches

Pages with mixed languages need lang attributes on the sections in different languages.

Step 1

Wrap foreign-language content

<html lang="en">
<body>
  <p>Welcome to our French bakery.</p>
  <p>Our signature: <span lang="fr">pain au chocolat</span>.</p>
</body>

Screen readers switch pronunciation mid-sentence based on the lang switch. Without it, "pain au chocolat" gets pronounced in English: "pain-aw-chock-o-lat" instead of the correct French pronunciation.

4. Link hreflang for multilingual sites

If you have separate URLs per language (most sites with proper i18n), link them with hreflang.

Step 1

Add hreflang link tags to head

In the <head> of EVERY language variant:

<link rel="alternate" hreflang="en-GB" href="https://yourdomain.com/uk/page" />
<link rel="alternate" hreflang="en-US" href="https://yourdomain.com/us/page" />
<link rel="alternate" hreflang="fr-FR" href="https://yourdomain.com/fr/page" />
<link rel="alternate" hreflang="x-default" href="https://yourdomain.com/page" />

Self-referencing (each variant links to itself plus all siblings) and x-default for the fallback language are both required.

For full hreflang treatment see the hreflang fixes index.

5. Validate

Step 1

Re-run the HTML Checker

The lang-missing finding should clear. Spot-check via:

curl -s https://yourdomain.com/ | grep -i '<html'

Expected output: <html lang="en-GB"> (or your chosen code).

📐 Re-run the HTML Checker

Verify lang attribute is present and correct.

Run HTML Checker →