Html lang

Quick win

Found on 6% of audited stores.

Add a lang attribute to your site's <html> tag that matches the primary language of your store's content.

What it is

Every web page starts with an opening `<html>` tag. Adding a `lang` attribute to it — for example, `<html lang="en">` for English — tells browsers, screen readers, and search engines what human language the page is written in. It is a one-line change in your theme or template, and it is one of the most foundational requirements of modern web standards. The value uses a standard two-letter (or extended) language code such as `en`, `fr`, `de`, `es`, `ja`, or `zh-Hans`.

Why it matters

Screen readers used by visually impaired shoppers rely on the `lang` attribute to choose the correct pronunciation engine — without it, your content may be read aloud in the wrong language, making your store inaccessible. Accessibility laws in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada) treat a missing `lang` attribute as a conformance failure, creating real legal exposure. Search engines also use this signal to understand which market a page targets, which influences how and where your pages appear in regional search results. Fixing it is a quick win that simultaneously reduces legal risk, improves usability for millions of shoppers with disabilities, and reinforces your international SEO targeting.

How to fix it

  1. Identify the primary language of your store's content and find its BCP 47 language code (e.g., 'en' for English, 'fr' for French, 'de' for German, 'es' for Spanish, 'pt-BR' for Brazilian Portuguese).
  2. Locate the root HTML template file for your theme or storefront — typically named theme.liquid, header.php, base.html, layout.html, or similar depending on your platform.
  3. Find the opening <html> tag near the very top of that file.
  4. Add the lang attribute so it reads <html lang="en"> (replace 'en' with your language code).
  5. Save and publish the change, then load any page of your store and use browser DevTools (View Source or Inspect) to confirm the rendered <html> tag includes the correct lang attribute.
  6. If your store serves multiple languages on separate URLs or subdomains, ensure each language's template has the matching lang code for that language.

Fix it on your platform

Pick your platform for the exact steps.

How to fix html lang on Shopify
  1. In your Shopify admin, go to Online Store → Themes.
  2. Next to your active theme, click the '...' (Actions) menu → Edit code.
  3. In the Layout folder on the left, open theme.liquid.
  4. Find the opening <html tag (usually line 1 or 2) and add lang="en" (or your language code), e.g. <html lang="en" class="..." ...>.
  5. Click Save. Shopify's Liquid variable {{ shop.locale }} can also be used for multilingual stores: <html lang="{{ request.locale.iso_code }}">.
Full Shopify guide →Official Shopify docs ↗
How to fix html lang on Shopify Plus
  1. Follow the same steps as Shopify: Online Store → Themes → Edit code → Layout/theme.liquid.
  2. For Shopify Plus stores using Hydrogen (headless), open your root layout file (typically app/root.jsx or app/root.tsx) and set the lang prop on the <html> element: <html lang="en">.
  3. For multilingual Plus stores using Shopify Markets, use <html lang="{{ request.locale.iso_code }}"> to output the correct locale automatically.
Full Shopify Plus guide →Official Shopify Plus docs ↗
How to fix html lang on WooCommerce
  1. In WordPress admin, go to Appearance → Theme File Editor (or use a local FTP/SFTP client).
  2. Open your active (child) theme's header.php file.
  3. Find the <html line — WordPress outputs this via the language_attributes() template tag, which automatically includes the correct lang attribute.
  4. Confirm the line reads: <html <?php language_attributes(); ?>>
  5. If it is missing, add it exactly as above. WordPress reads the site language from Settings → General → Site Language and injects it automatically via this tag.
Full WooCommerce guide →Official WooCommerce docs ↗
How to fix html lang on WordPress.org
  1. Go to Settings → General → Site Language and choose your language from the dropdown — WordPress will automatically output the correct lang attribute via language_attributes() in any properly coded theme.
  2. To verify, open Appearance → Theme File Editor → header.php and confirm <html <?php language_attributes(); ?>> is present.
  3. If your theme's header.php is missing this tag, add it: <html <?php language_attributes(); ?>>.
Full WordPress.org guide →Official WordPress.org docs ↗
How to fix html lang on BigCommerce
  1. In BigCommerce admin, go to Storefront → My Themes.
  2. Click Customize on your active theme, then choose Edit Theme Files (available in the developer-mode / file editor, or download the theme via Theme Editor → Download).
  3. Open templates/layout/base.html (Cornerstone theme) or the equivalent base layout template.
  4. Locate the <html tag and add the lang attribute: <html lang="en"> (replace with your language code).
  5. Save and upload/apply the theme. For multi-language setups, use the BigCommerce Stencil locale context variable if available in your theme version.
Full BigCommerce guide →Official BigCommerce docs ↗
How to fix html lang on Wix
  1. Wix automatically adds the correct lang attribute to <html> based on the language you set for your site.
  2. To verify or change it: open Wix Editor → go to Settings (dashboard) → Multilingual / Language, and ensure your primary site language is correctly selected.
  3. If you are using Wix Multilingual, each language version gets its own lang attribute automatically.
  4. You cannot directly edit the <html> tag in Wix — the platform manages it. If the lang attribute is wrong, change the site language in Settings → General Info → Language & Region.
Full Wix guide →Official Wix docs ↗
How to fix html lang on Wix Studio
  1. Wix Studio also manages the <html lang> attribute automatically based on your project's configured language.
  2. In the Wix Studio dashboard, go to Settings → Language & Region and confirm the primary language is correct.
  3. For multilingual projects, use the Wix Multilingual app; each language route will receive the appropriate lang attribute automatically.
  4. Direct HTML tag editing is not available — the platform injects it based on your language settings.
Full Wix Studio guide →Official Wix Studio docs ↗
How to fix html lang on Squarespace
  1. Squarespace automatically sets the lang attribute based on your site's language setting.
  2. To change it: go to Settings → Language & Region → Site Language and choose the correct language.
  3. Squarespace injects the lang attribute into <html> automatically — you do not edit it directly in a template file.
  4. If you use Code Injection (Settings → Advanced → Code Injection), do not add a duplicate <html> tag there; only adjust the language in Settings.
Full Squarespace guide →Official Squarespace docs ↗
How to fix html lang on Webflow
  1. In the Webflow Designer, open Project Settings (the gear icon at the top left).
  2. Go to the General tab and find the Language field (or Locale settings if you are on a localization plan).
  3. Set the primary language code (e.g., 'en'). Webflow injects this as the lang attribute on the <html> element automatically.
  4. For multi-locale projects using Webflow Localization, each locale is assigned its own language code, which Webflow outputs on the <html> tag per locale automatically.
  5. Publish your site and verify with View Source that <html lang="en"> (or your code) appears.
Full Webflow guide →Official Webflow docs ↗
How to fix html lang on Adobe Commerce (Magento)
  1. In Magento admin, go to Content → Design → Configuration.
  2. Select your store view and look for HTML Head settings — Magento does not set lang via this UI, so you must edit the root template.
  3. Via SFTP or your server file manager, open app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml (for your custom theme) or the Magento_Theme module's root.phtml.
  4. Find <html and add <?= /* @escapeNotVerified */ $htmlAttributes ?> if it is already templated, or add lang="en" directly: <html lang="en">.
  5. For multi-store/multi-language setups, use the Magento locale resolver: inject the current locale as the lang value via a Block or ViewModel so each store view outputs its own language code.
  6. Deploy static content and clear the cache: bin/magento cache:clean, then verify with View Source.
Full Adobe Commerce (Magento) guide →Official Adobe Commerce (Magento) docs ↗
How to fix html lang on Magento Open Source
  1. Follow the same steps as Adobe Commerce (Magento): locate root.phtml in your custom theme at app/design/frontend/<Vendor>/<Theme>/Magento_Theme/templates/root.phtml.
  2. Edit the <html tag to include lang="en" (or your locale code).
  3. Run bin/magento cache:clean && bin/magento setup:static-content:deploy after saving.
Full Magento Open Source guide →Official Magento Open Source docs ↗
How to fix html lang on PrestaShop
  1. Via FTP or your hosting file manager, navigate to your active theme folder: themes/<your-theme>/templates/
  2. Open _partials/head.tpl or the root layout file (often layouts/layout-full-width.tpl or similar).
  3. Find the <html tag and add lang="{$language.iso_code|escape:'html':'UTF-8'}" to output the correct language code dynamically per PrestaShop's language object.
  4. Save and clear the PrestaShop cache via Admin → Advanced Parameters → Performance → Clear cache.
Full PrestaShop guide →Official PrestaShop docs ↗
How to fix html lang on Headless / Custom (I build in code)
  1. Open your root layout component or HTML shell template (e.g., app/root.jsx in Remix/Hydrogen, pages/_document.js in Next.js, app.html in SvelteKit, index.html in a static build).
  2. Add the lang attribute to the <html> element: <html lang="en"> (hardcoded) or dynamically bound to a locale variable for multi-language apps.
  3. For Next.js, set i18n.defaultLocale in next.config.js — Next.js automatically adds lang to <html> based on the active locale.
  4. For Nuxt.js with @nuxtjs/i18n, the module sets the lang attribute automatically from the active locale.
  5. Verify with browser DevTools → Elements panel that the rendered <html> tag carries the correct lang value.
Full Headless / Custom (I build in code) guide →Official Headless / Custom (I build in code) docs ↗
How to fix html lang on Next.js
  1. If using the App Router (Next.js 13+), open app/layout.tsx (or app/layout.jsx) and add the lang prop to the <html> element: <html lang="en">.
  2. If using the Pages Router, open pages/_document.js and set <Html lang="en"> (using Next.js's built-in Html component).
  3. For internationalized routing, configure i18n in next.config.js and Next.js will automatically pass the detected locale; bind it: <html lang={params.lang}> using the dynamic segment.
Full Next.js guide →Official Next.js docs ↗
How to fix html lang on Ghost
  1. In Ghost Admin, go to Settings → Design → Customize (or via SSH to your Ghost installation).
  2. Open your active theme's default.hbs file (found in content/themes/<your-theme>/).
  3. Locate the <html tag and add lang="en" (or use Ghost's {{@site.locale}} helper if available in your theme version): <html lang="{{@site.locale}}">.
  4. Upload the updated theme via Settings → Design → Upload theme, or restart Ghost if editing on the server.
Full Ghost guide →Official Ghost docs ↗
How to fix html lang on Squarespace Commerce
  1. Same as Squarespace: go to Settings → Language & Region → Site Language.
  2. Squarespace Commerce does not expose the <html> tag for direct editing; the lang attribute is injected automatically from your language setting.
  3. Verify after saving by viewing your storefront page source.
Full Squarespace Commerce guide →Official Squarespace Commerce docs ↗
How to fix html lang on Webflow Commerce
  1. Same as Webflow: open Project Settings → General → Language and set the correct language code.
  2. Webflow Commerce inherits the lang attribute from your project's locale settings automatically.
  3. Publish and verify via View Source.
Full Webflow Commerce guide →Official Webflow Commerce docs ↗
How to fix html lang on OpenCart
  1. In OpenCart, the HTML wrapper is in the theme's header template file, typically catalog/view/theme/<your-theme>/template/common/header.twig (or header.tpl for older versions).
  2. Open that file via Admin › Design › Theme Editor, or via FTP.
  3. Find the <html opening tag and add the lang attribute. OpenCart passes language data to templates; use the language code variable, e.g.: <html lang="{{ language_code }}"> or hard-code your language: <html lang="en">.
  4. Save the file and clear the OpenCart cache via Admin › Dashboard › cog icon › Refresh, then verify via View Page Source.
Full OpenCart guide →Official OpenCart docs ↗
How to fix html lang on BigCommerce for WP
  1. The <html> tag is rendered by your WordPress theme's header.php, not the BigCommerce for WordPress plugin.
  2. Follow the WooCommerce / WordPress.org steps above to ensure language_attributes() is in your theme's header.php and that Settings › General › Site Language is set correctly.
Full BigCommerce for WP guide →Official BigCommerce for WP docs ↗

Does your site have this issue?

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

Scan my site free

Frequently asked questions

What is Html lang?

Every web page starts with an opening `<html>` tag. Adding a `lang` attribute to it — for example, `<html lang="en">` for English — tells browsers, screen readers, and search engines what human language the page is written in. It is a one-line change in your theme or template, and it is one of the most foundational requirements of modern web standards. The value uses a standard two-letter (or extended) language code such as `en`, `fr`, `de`, `es`, `ja`, or `zh-Hans`.

Why does html lang matter?

Screen readers used by visually impaired shoppers rely on the `lang` attribute to choose the correct pronunciation engine — without it, your content may be read aloud in the wrong language, making your store inaccessible. Accessibility laws in many jurisdictions (ADA in the US, EN 301 549 in the EU, AODA in Canada) treat a missing `lang` attribute as a conformance failure, creating real legal exposure. Search engines also use this signal to understand which market a page targets, which influences how and where your pages appear in regional search results. Fixing it is a quick win that simultaneously reduces legal risk, improves usability for millions of shoppers with disabilities, and reinforces your international SEO targeting.

How do I fix html lang?

Add a lang attribute to your site's <html> tag that matches the primary language of your store's content.

Related Site Lifecycle issues