SEO

`seo/hreflang-valid`

hreflang values are ISO 639-1 language codes with an optional script and ISO 3166-1 region (or x-default), linking absolute URLs.

moderatestaticfe-seo-metadata

Why

Search engines use hreflang to show each person the version in their language. Locale codes from code (en_US), made-up regions (en-UK) and relative links make the annotation invalid, so the wrong language version ranks or versions compete with each other.

Fix

Write the language first, then an optional region, joined with a hyphen: en, en-GB, pt-BR, zh-Hant. Use absolute URLs, list every version on every version including itself, and add x-default for the language picker or auto-redirect page. Generate the set from the i18n configuration so it stays reciprocal.

Examples

<!-- bad -->
<link rel="alternate" hreflang="en_UK" href="/en/">
<!-- good -->
<link rel="alternate" hreflang="en-GB" href="https://example.com/en-gb/">
<link rel="alternate" hreflang="x-default" href="https://example.com/">

Sources

Facts

Id: seo/hreflang-valid
Severity: moderate
Check: static checked in the source by audit
Applies to: html vue svelte astro jsx
Same problem in: Lighthouse hreflang
Taught by the skill: fe-seo-metadata SEO and metadata
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain seo/hreflang-valid