HtmlHow-ToBeginner · 4 min read

How to Use hreflang in HTML for Multilingual Websites

Use the hreflang attribute inside <link> tags in the <head> section to tell search engines which language and region a page is for. This helps show the right page to users based on their language or location.

📐

Syntax

The hreflang attribute is used inside a <link> tag in the HTML <head>. It has two main parts:

hreflang: The language code (and optionally region) like en for English or en-US for English in the US.
href: The URL of the page in that language or region.

Example syntax:

html

<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />

💻

Example

This example shows how to use hreflang to link English and French versions of a page. It helps search engines show the correct language version to users.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Example hreflang Usage</title>
  <link rel="alternate" hreflang="en" href="https://example.com/en/" />
  <link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
  <link rel="alternate" hreflang="es" href="https://example.com/es/" />
</head>
<body>
  <h1>Welcome to our website</h1>
  <p>This page is in English. Use the links above to find other languages.</p>
</body>
</html>

Output

A simple webpage titled 'Example hreflang Usage' with a heading 'Welcome to our website' and a paragraph explaining the page is in English.

⚠️

Common Pitfalls

Not using the full language-region code when needed (e.g., use en-US vs just en if you target US English specifically).
Forgetting to include a self-referencing hreflang link for the current page.
Using incorrect or unsupported language codes.
Not matching URLs exactly between hreflang tags and actual pages.
Mixing hreflang with canonical tags incorrectly, which can confuse search engines.

Example of a common mistake and fix:

html

<!-- Wrong: Missing self-reference and inconsistent URLs -->
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />

<!-- Right: Include self-reference and consistent URLs -->
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

📊

Quick Reference

Attribute	Description	Example
rel	Defines the relationship; use 'alternate' for hreflang links	rel="alternate"
hreflang	Language and optional region code (ISO 639-1 and ISO 3166-1 alpha-2)	hreflang="en-US"
href	URL of the alternate language page	href="https://example.com/en-us/"
x-default	Fallback page if no language match found	hreflang="x-default"

✅

Key Takeaways

Use hreflang in <link> tags inside the <head> to specify language and region for pages.

Always include a self-referencing hreflang link for the current page.

Use correct language-region codes like en-US or fr-CA for precise targeting.

Add a hreflang="x-default" link as a fallback for users with unmatched languages.

Ensure URLs in hreflang tags exactly match the actual page URLs to avoid confusion.