SeoHow-ToBeginner · 4 min read

How to Use hreflang for Multilingual SEO Effectively

Use the hreflang attribute in your HTML <link> tags or HTTP headers to specify the language and regional targeting of each page version. This helps search engines show the right page to users based on their language or location, improving multilingual SEO.

📐

Syntax

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

hreflang value: A language code (like en for English) optionally combined with a region code (like en-US for US English).
href: The URL of the page in that language/region.

Each language version of a page should list all other versions including itself, creating a bidirectional reference.

html

<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/" />

💻

Example

This example shows how to use hreflang tags on an English, French, and Spanish version of a homepage. Each page includes links to all language versions to help search engines understand the relationship.

html

<!-- On https://example.com/en/ -->
<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/" />

<!-- On https://example.com/fr/ -->
<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/" />

<!-- On https://example.com/es/ -->
<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/" />

⚠️

Common Pitfalls

Missing self-reference: Each page must include a hreflang tag pointing to itself.
Incorrect language codes: Use valid ISO language and region codes (e.g., en-US, not english).
Not listing all versions: All language versions should list every other version to avoid confusion.
Using only language without region when region matters: If you target specific countries, include region codes.
Broken URLs: Ensure URLs in href are correct and accessible.

html

<!-- Wrong: Missing self-reference -->
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="es" href="https://example.com/es/" />

<!-- Right: Include self-reference -->
<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/" />

📊

Quick Reference

Use hreflang to specify language and optionally region (e.g., en-US).
Include hreflang tags on every language version page, listing all versions including itself.
Use absolute URLs in the href attribute.
Use rel="alternate" with hreflang in <link> tags inside the <head>.
Test your implementation with tools like Google Search Console.

✅

Key Takeaways

Always include a self-referencing hreflang tag on each language version page.

Use correct ISO language and region codes to target users accurately.

List all language versions on every page to create clear bidirectional links.

Use absolute URLs in hreflang href attributes for consistency.

Test hreflang implementation with SEO tools to avoid errors.