SEOLZ

Html lang valid

Quick win

Found on 1% of audited stores.

Set a valid BCP 47 language code on the `lang` attribute of your page's `<html>` element (e.g., `lang="en"`) so browsers, screen readers, and search engines correctly identify the page language.

What it is

Every HTML page has a root `<html>` tag, and that tag should carry a `lang` attribute that tells technology what human language the page is written in — for example, `lang="en"` for English, `lang="fr"` for French, or `lang="de"` for German. The value must be a recognised BCP 47 language tag (e.g. `en`, `en-US`, `fr`, `es-419`). A missing or invalid value — like a typo, an empty string, or a made-up code — triggers this issue. WCAG Success Criterion 3.1.1 (Level A) requires that the language of every page be programmatically determinable.

Why it matters

Screen readers use the `lang` attribute to select the correct voice engine, pronunciation rules, and text-to-speech language for your content — an invalid or missing value causes the reader to either guess or speak your content in the wrong language, making your store inaccessible to blind and low-vision customers. This is a WCAG Level A violation (the most basic level), which means it exposes your business to accessibility-related legal risk in many jurisdictions including the US (ADA), EU (EAA 2025), and UK (Equality Act). Search engines also use the declared language to surface pages in the right regional results, so an invalid `lang` can silently reduce your international organic traffic. Fixing it is a quick win that immediately improves accessibility compliance, user experience, and discoverability.

How to fix it

  1. Identify the current (invalid or missing) `lang` value by viewing your page source and finding the opening `<html>` tag.
  2. Choose the correct BCP 47 language tag for your store's primary language (e.g. `en` for English, `en-US` for US English, `fr` for French, `de` for German, `es` for Spanish, `ja` for Japanese). A full list is maintained by the IANA Language Subtag Registry.
  3. Locate where your theme or template outputs the opening `<html>` tag — this is almost always in a root layout file (e.g. `layout/theme.liquid`, `header.php`, `base.html`, or equivalent).
  4. Replace the invalid or missing attribute with the correct one, e.g. change `<html>` or `<html lang="">` to `<html lang="en">`.
  5. Save and publish the change, then view the page source in a browser to confirm the `<html>` tag now reads `<html lang="en">` (or your chosen code).
  6. Re-run your accessibility scanner or use a browser extension (e.g. axe DevTools) to confirm the `html-lang-valid` rule now passes.
<html lang="en">
<!-- Use your correct BCP 47 code: en, en-US, fr, de, es, ja, zh-Hans, etc. -->

Fix it on your platform

Pick your platform for the exact steps.

How to fix html lang valid on Shopify
  1. In your Shopify Admin, go to Online Store → Themes.
  2. Click the three-dot menu (⋯) next to your active theme and choose Edit code.
  3. In the Layout folder on the left, click `theme.liquid`.
  4. Find the opening `<html` tag near the top of the file (it may already include `lang="{{ shop.locale }}"`). If the `lang` attribute is missing or has a hard-coded invalid value, replace it so the tag reads: `<html lang="{{ shop.locale }}">` — this dynamically outputs the language your customer has selected.
  5. Click Save. Preview the storefront, view page source, and verify the rendered tag reads e.g. `<html lang="en">`.
Full Shopify guide →Official Shopify docs ↗
How to fix html lang valid on Shopify Plus
  1. Follow the same steps as Shopify above — Shopify Plus themes use the same `theme.liquid` layout file.
  2. If you use a custom Hydrogen/headless storefront, open your root layout component (e.g. `app/root.jsx` or `app/root.tsx`) and ensure the `<html>` element has `lang={locale}` where `locale` is derived from the Shopify Storefront API locale.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix html lang valid on WooCommerce
  1. WordPress automatically adds `lang` to `<html>` via the `language_attributes()` template tag. First check: go to WP Admin → Settings → General and ensure 'Site Language' is set to your desired language (e.g. English (United States)).
  2. If the theme's `header.php` (or root layout) does not include `language_attributes()`, open your child theme's `header.php` (Appearance → Theme File Editor → header.php) and ensure the `<html>` tag reads: `<html <?php language_attributes(); ?>>`.
  3. Save, then view page source and confirm `lang="en-US"` (or your locale) appears on the `<html>` tag.
  4. If a page builder (Elementor, Divi, etc.) overrides the template, check the builder's 'Custom Code' or 'Theme Builder' header template for a hardcoded `<html>` tag and apply the same fix.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix html lang valid on BigCommerce
  1. In your BigCommerce Admin, go to Storefront → My Themes → click Customize on your active theme → click Edit Theme Files (Advanced).
  2. Open `templates/layout/base.html` (the exact name may vary by theme, e.g. Cornerstone uses `templates/layout/base.html`).
  3. Find the `<html` tag. It should read `<html lang="{{locale_name}}">` to use BigCommerce's built-in locale variable. If it's missing or has a hard-coded/invalid value, update it to use that Handlebars variable.
  4. Save and publish. View page source to confirm the rendered `lang` attribute is a valid BCP 47 code.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix html lang valid on Wix
  1. Wix automatically manages the `<html lang>` attribute based on the language set for your site. Go to your Wix Dashboard → Settings → Multilingual (or Language & Region).
  2. Ensure the primary language of your site is correctly set. Wix will render the correct `lang` attribute automatically.
  3. If you use Wix Multilingual, confirm each language version has a valid language assigned — Wix injects the correct `lang` per language.
  4. Because Wix controls the HTML output, you cannot directly edit the `<html>` tag. If the issue persists after setting the language, contact Wix Support, as this is a platform-level rendering issue.
Full Wix guide →Official Wix docs ↗
How to fix html lang valid on Wix Studio
  1. In Wix Studio, the `lang` attribute is controlled by the site's language settings, not directly editable in the canvas.
  2. Open your site in Wix Studio → click the Site Settings (gear icon) → Language & Region, and confirm the primary language is set correctly.
  3. For multilingual sites, use the Wix Multilingual panel to ensure each language has a valid locale assigned.
  4. Publish the site and verify via page source. If the attribute is still invalid, escalate to Wix Studio support.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix html lang valid on Squarespace
  1. Squarespace sets the `lang` attribute based on your site's language setting. Go to Home Menu → Settings → Region → Site Language and select the correct language.
  2. Save and publish. View your page source to confirm `<html lang="en">` (or your chosen language code) is present.
  3. If you need a language not listed, you can inject a custom `<html>` override via Settings → Advanced → Code Injection — but note this is an advanced step and Squarespace may not support full overrides of the `<html>` tag directly; contact Squarespace support if the platform-set language tag is rendering incorrectly.
Full Squarespace guide →Official Squarespace docs ↗
How to fix html lang valid on Webflow
  1. In the Webflow Designer, go to Project Settings (the gear icon in the top-left of the Designer, or via the Dashboard).
  2. Click the Localization tab (for multi-language sites) or the General tab.
  3. Under 'Localization / Language', set the primary locale/language for your site. Webflow will render the correct `lang` attribute on the `<html>` element automatically.
  4. For a single-language site without Localization enabled, Webflow uses your project's locale setting. Ensure it is set to your actual content language.
  5. Publish the site, then open the live page source and confirm `<html lang="en">` (or your code) is present.
Full Webflow guide →Official Webflow docs ↗
How to fix html lang valid on Adobe Commerce (Magento)
  1. The `lang` attribute is output by the root layout XML and the HTML head block. In your custom theme, open or create `app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout/default_head_blocks.xml`.
  2. Alternatively, find your theme's root template, typically `app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml`.
  3. In `root.phtml`, locate the `<html` tag and ensure it reads: `<html lang="<?= $htmlTag->getLang() ?>" ...>` — this uses Magento's built-in locale resolver.
  4. If you need a static fallback, set the store's locale in Admin → Stores → Configuration → General → General → Locale Options → Locale. Magento maps this to the `lang` attribute automatically when using the default template.
  5. Run `php bin/magento cache:flush` and `php bin/magento setup:static-content:deploy`, then verify the rendered `lang` attribute in page source.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix html lang valid on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento) above — the template structure and locale configuration paths are identical in Magento Open Source.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix html lang valid on PrestaShop
  1. PrestaShop derives the `lang` attribute from the active store language. Go to Back Office → International → Translations → Languages and confirm the correct language is installed and active.
  2. In your theme's `templates/_partials/head.tpl` (or the root layout, often `templates/layouts/layout-full-width.tpl`), find the `<html` tag and ensure it uses the Smarty variable: `<html lang="{$language.iso_code}">`.
  3. Clear your theme cache via Back Office → Design → Theme & Logo → (Advanced Customization) or via Advanced Parameters → Performance → Clear Cache.
  4. Verify the rendered page source shows a valid ISO language code on the `<html>` tag.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix html lang valid on WordPress.org
  1. Go to WP Admin → Settings → General and set 'Site Language' to your correct language.
  2. In your active (child) theme's `header.php`, ensure the `<html>` tag uses the WordPress template tag: `<html <?php language_attributes(); ?>>`. This outputs the correct `lang` attribute automatically.
  3. If you don't have a child theme, create one before editing to avoid losing changes on theme updates.
  4. Save and verify via page source.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix html lang valid on Ghost
  1. In your Ghost theme files, open `default.hbs` (the root layout).
  2. Find the `<html` tag and update it to use Ghost's locale helper: `<html lang="{{@site.locale}}">`. Ensure your publication locale is set correctly in Ghost Admin → Settings → Publication info.
  3. Upload the updated theme zip via Ghost Admin → Settings → Design → Upload theme, then verify the page source.
Full Ghost guide →Official Ghost docs ↗
How to fix html lang valid on Shopify Storefront API
  1. In your headless/custom frontend (React, Next.js, etc.), find the root HTML document component (e.g. `_document.jsx` in Next.js or your root layout).
  2. Pass the active locale from the Shopify Storefront API's `language` field to the `lang` prop: `<html lang={locale}>` where `locale` is the BCP 47 code returned by the API.
  3. Verify by inspecting the rendered HTML source of your deployed storefront.
Full Shopify Storefront API guide →Official Shopify Storefront API docs ↗

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Html lang valid?

Every HTML page has a root `<html>` tag, and that tag should carry a `lang` attribute that tells technology what human language the page is written in — for example, `lang="en"` for English, `lang="fr"` for French, or `lang="de"` for German. The value must be a recognised BCP 47 language tag (e.g. `en`, `en-US`, `fr`, `es-419`). A missing or invalid value — like a typo, an empty string, or a made-up code — triggers this issue. WCAG Success Criterion 3.1.1 (Level A) requires that the language of every page be programmatically determinable.

Why does html lang valid matter?

Screen readers use the `lang` attribute to select the correct voice engine, pronunciation rules, and text-to-speech language for your content — an invalid or missing value causes the reader to either guess or speak your content in the wrong language, making your store inaccessible to blind and low-vision customers. This is a WCAG Level A violation (the most basic level), which means it exposes your business to accessibility-related legal risk in many jurisdictions including the US (ADA), EU (EAA 2025), and UK (Equality Act). Search engines also use the declared language to surface pages in the right regional results, so an invalid `lang` can silently reduce your international organic traffic. Fixing it is a quick win that immediately improves accessibility compliance, user experience, and discoverability.

How do I fix html lang valid?

Set a valid BCP 47 language code on the `lang` attribute of your page's `<html>` element (e.g., `lang="en"`) so browsers, screen readers, and search engines correctly identify the page language.

Authoritative references

Related Accessibility (WCAG) issues