When you publish a webpage, people are not the only ones reading it. Browsers, search engines, and sharing apps also look for clues about its meaning. This lesson explains how hreflang for translation and regional targeting fits into that picture.
The Idea in Plain English
Each translated page needs its own URL. Place reciprocal alternate links on every version and use real language tags such as en or fr. Hreflang is a hint to search engines, not a way to translate text automatically.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nature Club</title>
<link rel="alternate" hreflang="en" href="https://example.com/en/clubs/">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/clubs/">
<link rel="alternate" hreflang="x-default" href="https://example.com/language/">
</head>
<body>
<h1>Nature Club</h1>
</body>
</html>What Each Part Does
- The meta element supplies machine-readable settings; its name or charset decides which setting.
- The title gives the document a name in tabs and other browser surfaces.
- The link element declares a relationship such as a stylesheet or alternate language.
- lang identifies the natural language for text-to-speech and language tools.
- hreflang labels the language of an alternate linked page.
- href is the URL or fragment destination of a link.
The page still looks the same, but a search crawler can discover which URL serves each language. The two pages must actually contain translated content.
Try It Yourself
Try creating /en/ and /fr/ pages and link each one to the other with reciprocal hreflang values.
Common Beginner Mistakes
- Pointing both languages at the English URL or omitting the return link.
- Copying the code without checking whether its linked files or endpoints exist; sample addresses and file paths need real resources.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Each translated page needs its own URL. Place reciprocal alternate links on every version and use real language tags such as en or fr. Hreflang is a hint to search engines, not a way to translate text automatically.
- The page still looks the same, but a search crawler can discover which URL serves each language. The two pages must actually contain translated content.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.