How to fix html lang valid on Shopify Storefront API

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.

Steps for 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.
Official Shopify Storefront API documentation ↗
<html lang="en">
<!-- Use your correct BCP 47 code: en, en-US, fr, de, es, ja, zh-Hans, etc. -->

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.

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.

See the complete Html lang valid guide for every platform and the full background.

Not sure if your Shopify Storefront API store has this?

Run a free SEOLZ audit — we’ll find html lang valid and every other issue across your whole site.

Scan my site free

Fix html lang valid on another platform