SEOLZ

Valid lang

Moderate effort

Found on 1% of audited stores.

Add a valid BCP 47 language code to every `lang` attribute on your pages so assistive technologies can read content in the correct language.

What it is

Every HTML page has a `lang` attribute on the `<html>` tag (e.g. `<html lang="en">`) that tells browsers and assistive technologies what language the page is written in. When a page contains a passage in a *different* language, that section should also carry its own `lang` attribute (e.g. `<p lang="fr">`). The value must be a valid BCP 47 language tag — a standardised code like `en`, `en-US`, `fr`, `de`, or `zh-Hans`. An empty, misspelled, or made-up value (such as `lang=""` or `lang="english"`) fails WCAG Success Criterion 3.1.2 (Language of Parts).

Why it matters

Screen readers like JAWS, NVDA, and VoiceOver automatically switch their text-to-speech voice and pronunciation rules based on the `lang` attribute. If the value is missing or invalid, the reader mispronounces words — sometimes so badly that the content becomes completely unintelligible to blind or low-vision shoppers. Beyond accessibility, WCAG 3.1.2 is a Level AA requirement, meaning failing it exposes your store to legal risk under laws such as the ADA in the US, the European Accessibility Act, and equivalent legislation elsewhere. Google also uses language signals to serve your pages to the right audiences, so correct `lang` values support your international SEO.

How to fix it

  1. Identify every element on your pages that carries a `lang` attribute — start with the root `<html>` tag, then search your templates and content blocks for any inline `lang=` attributes.
  2. Check each value against the BCP 47 standard: use a two-letter ISO 639-1 language code (e.g. `en`, `fr`, `de`, `ja`) optionally followed by a region subtag separated by a hyphen (e.g. `en-US`, `pt-BR`, `zh-Hant`). Reject any value that is empty, purely numeric, or a full English word like 'english'.
  3. Replace every invalid value with the correct BCP 47 tag. The page's primary `<html lang="...">` should reflect the dominant language of that page.
  4. For any content block, widget, or snippet written in a language that differs from the page's primary language, add the correct `lang` attribute directly to the wrapping element (e.g. `<blockquote lang="es">`).
  5. After saving, validate with a tool such as the axe browser extension or W3C Markup Validator to confirm no `valid-lang` violations remain.
  6. If your platform auto-generates the `<html>` tag, locate the theme or template file that outputs it and update the variable or hardcoded value there, then re-test across all page templates (home, product, collection, blog, checkout).
<html lang="en">
<!-- For a page in US English -->

<html lang="fr">
<!-- For a page primarily in French -->

<!-- Inline language switch for a passage in Spanish on an English page -->
<p lang="es">Bienvenido a nuestra tienda.</p>

<!-- Region-specific variant -->
<html lang="pt-BR">
<!-- Brazilian Portuguese -->

Fix it on your platform

Pick your platform for the exact steps.

How to fix valid lang on Shopify
  1. In your Shopify admin, go to Online Store → Themes → click 'Customize' on your active theme.
  2. To edit the root `lang` attribute: from the theme editor click 'Edit code' (or go to Online Store → Themes → Actions → Edit code).
  3. Open `layout/theme.liquid`. Find the opening `<html` tag — it typically reads `<html class="..." lang="{{ request.locale.iso_code }}">`. Shopify injects the store locale automatically via `request.locale.iso_code`, so ensure the locale itself is correct.
  4. Verify/update the store locale: Settings → Languages. The 'Published' language's locale code is what Shopify inserts. If that code is wrong, correct it here or switch to a valid language.
  5. For third-party section snippets or app blocks that hard-code a `lang` attribute, open the relevant `.liquid` file in the code editor and update the value to a valid BCP 47 tag.
  6. Save changes and re-test with the axe browser extension on your live storefront.
Full Shopify guide →Official Shopify docs ↗
How to fix valid lang on Shopify Plus
  1. Follow the same steps as Shopify above — `layout/theme.liquid` is the key file.
  2. For headless or custom storefronts using the Storefront API, ensure the HTML document root rendered by your front-end framework includes `<html lang="[valid-BCP47-code]">`, matching the locale returned by the API.
  3. If you use Shopify's Translate & Adapt app for multi-language stores, confirm each published locale has a valid ISO code in Settings → Languages.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix valid lang on WooCommerce
  1. The `lang` attribute on `<html>` is set by WordPress core, not WooCommerce itself — it reads from the site language setting.
  2. Go to WordPress admin → Settings → General → Site Language. Choose the correct language from the dropdown; WordPress will output the proper BCP 47 code automatically.
  3. If the `<html>` tag still shows an invalid value, open your active theme's `header.php` (or the root template file in a block theme: `templates/index.html`) and look for a hard-coded `lang=` attribute overriding the WordPress default. Replace it with `<?php language_attributes(); ?>` which outputs the correct value.
  4. For content in a second language, install the plugin 'Polylang' or 'WPML' and assign the correct language to each post/page — these plugins set `lang` on the `<html>` tag per page automatically.
  5. Save and verify with the axe browser extension.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix valid lang on BigCommerce
  1. Go to BigCommerce admin → Storefront → My Themes → click 'Advanced' → 'Edit Theme Files' on your active theme.
  2. Open `templates/layout/base.html` (Cornerstone theme) and find the `<html` tag.
  3. BigCommerce injects `lang="{{locale_code}}"` automatically via Handlebars. Check that your store's locale is set correctly: Settings → Store Profile → Default Language.
  4. If a `lang` attribute is hard-coded to an invalid value in the template, replace it with `{{locale_code}}` to use the dynamic value.
  5. For any custom HTML widgets containing a `lang` attribute (added via Page Builder), edit the widget in Storefront → Page Builder, open the HTML block, and correct the value.
  6. Save and preview, then validate with the axe extension.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix valid lang on Wix
  1. Wix manages the `<html lang>` attribute automatically based on the site language you set in the dashboard — you cannot edit the raw HTML tag directly.
  2. To set the correct language: Dashboard → Settings → Multilingual (or Settings → Language & Region) → set your Primary Language to the correct language. Wix will output the corresponding valid BCP 47 code.
  3. For multilingual Wix sites using Wix Multilingual, each language version gets its own `lang` attribute automatically once the language is added and published in Settings → Multilingual → Manage Languages.
  4. If an invalid `lang` attribute appears inside a custom HTML embed widget (added via Add → Embed → HTML iframe), open that widget and correct the value in the HTML code panel.
  5. Re-publish the site and verify with the axe browser extension.
Full Wix guide →Official Wix docs ↗
How to fix valid lang on Squarespace
  1. Squarespace automatically sets the `<html lang>` attribute from the site language you configure.
  2. Go to Settings → Regional → Site Language and select the correct language from the dropdown. Squarespace outputs the corresponding valid BCP 47 code.
  3. For Code Injection or custom HTML blocks (Pages → Edit → Add Block → Code) that contain a `lang` attribute, open that block and correct the value to a valid BCP 47 tag.
  4. Squarespace does not expose theme HTML directly, so if the auto-generated `lang` value is still wrong after updating the Regional setting, contact Squarespace Support — it may be a platform bug.
  5. Publish and verify with the axe extension.
Full Squarespace guide →Official Squarespace docs ↗
How to fix valid lang on Webflow
  1. In the Webflow Designer, go to Project Settings (the gear icon) → Localization (or General) and set the primary locale/language. Webflow uses this to populate `<html lang>`.
  2. Alternatively, open Project Settings → Custom Code → add a `<script>` in Head Code that sets `document.documentElement.lang = 'en';` only if Webflow does not expose a direct language field for your plan — but prefer the Localization setting.
  3. For Webflow Localization (paid feature): Settings → Localization → add/edit each locale and ensure its language code is a valid BCP 47 tag. Webflow sets `lang` per locale automatically.
  4. For any Embed components (HTML Embed blocks) in the canvas that contain a `lang` attribute, click the block, open the HTML editor, and correct the value.
  5. Publish the site and verify with the axe browser extension.
Full Webflow guide →Official Webflow docs ↗
How to fix valid lang on Adobe Commerce (Magento)
  1. The `<html lang>` tag is rendered in the root page template. In the default Luma/Blank theme, open `vendor/magento/module-theme/view/base/templates/root.phtml` — but do NOT edit core files; instead, copy it to your custom theme: `app/design/frontend/[Vendor]/[theme]/Magento_Theme/templates/root.phtml`.
  2. In that file, find the `<html` tag. Replace any hard-coded or invalid `lang` attribute with the dynamic value: `lang="<?= $block->escapeHtmlAttr($block->getLocaleCode()) ?>"` or use the store's locale helper to fetch the correct BCP 47 code.
  3. Set the store locale in Admin → Stores → Configuration → General → General → Locale Options → Locale. Choose the correct locale; Magento maps it to a BCP 47 code.
  4. For content blocks (CMS Blocks/Pages) that contain inline `lang` attributes in their HTML, edit them in Admin → Content → Blocks (or Pages), switch to HTML view, and correct the `lang` values.
  5. Run `bin/magento cache:flush` after changes, then verify with the axe extension.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix valid lang on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template path and locale configuration are identical in Magento Open Source.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix valid lang on PrestaShop
  1. PrestaShop generates the `<html lang>` attribute from the active language. Go to Admin → International → Translations → Languages and verify the language code (ISO code field) for each installed language is a valid two-letter ISO 639-1 code (e.g. `en`, `fr`, `de`).
  2. In your active theme, open `templates/_partials/head.tpl` (or the root layout file). Find the `<html` tag and ensure it uses the Smarty variable `{$language.iso_code}` rather than a hard-coded value.
  3. If using a custom or third-party theme that hard-codes an invalid `lang` value, override the template in your child theme and correct it.
  4. Save, clear cache (Admin → Advanced Parameters → Performance → Clear cache), and verify.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix valid lang on WordPress.org
  1. Same resolution as WooCommerce for the root `lang` attribute: Settings → General → Site Language in the WordPress admin.
  2. Ensure your active theme's `header.php` uses `<?php language_attributes(); ?>` on the `<html>` tag rather than a hard-coded `lang` value.
  3. For block themes (Full Site Editing), go to Appearance → Editor → Templates → open the root template and ensure no hard-coded `lang` override is present in any HTML block.
  4. Verify with the axe browser extension after saving.
Full WordPress.org guide →Official WordPress.org docs ↗

Does your site have this issue?

Run a free SEOLZ audit to find valid lang — and every other issue — across your whole site in minutes.

Scan my site free

Frequently asked questions

What is Valid lang?

Every HTML page has a `lang` attribute on the `<html>` tag (e.g. `<html lang="en">`) that tells browsers and assistive technologies what language the page is written in. When a page contains a passage in a *different* language, that section should also carry its own `lang` attribute (e.g. `<p lang="fr">`). The value must be a valid BCP 47 language tag — a standardised code like `en`, `en-US`, `fr`, `de`, or `zh-Hans`. An empty, misspelled, or made-up value (such as `lang=""` or `lang="english"`) fails WCAG Success Criterion 3.1.2 (Language of Parts).

Why does valid lang matter?

Screen readers like JAWS, NVDA, and VoiceOver automatically switch their text-to-speech voice and pronunciation rules based on the `lang` attribute. If the value is missing or invalid, the reader mispronounces words — sometimes so badly that the content becomes completely unintelligible to blind or low-vision shoppers. Beyond accessibility, WCAG 3.1.2 is a Level AA requirement, meaning failing it exposes your store to legal risk under laws such as the ADA in the US, the European Accessibility Act, and equivalent legislation elsewhere. Google also uses language signals to serve your pages to the right audiences, so correct `lang` values support your international SEO.

How do I fix valid lang?

Add a valid BCP 47 language code to every `lang` attribute on your pages so assistive technologies can read content in the correct language.

Authoritative references

Related Accessibility (WCAG) issues