html · level 3 · unit 5 · lesson 4
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
hreflang links each page to its translations.
If your site comes in English and Welsh, each page has a . Tell search engines with <link rel="alternate" hreflang="cy" href="..."> in the head, so Welsh speakers find the Welsh page in their results.
hreflang takes a language code, plus a when it matters: en-GB for British English, en-US for American English. Every version lists every version, itself included, with full URLs.
Add hreflang="x-default" for the page to show everyone else, often a page where people choose their language.
<!doctype html>
<html lang="en-GB">
<head>
<meta charset="utf-8">
<title>Visit us | Castle Café</title>
<link rel="alternate" hreflang="en-GB" href="https://example.com/en/visit">
<link rel="alternate" hreflang="cy" href="https://example.com/cy/ymweld">
<link rel="alternate" hreflang="x-default" href="https://example.com/visit">
</head>
<body>
<h1>Visit us</h1>
</body>
</html>Press show my page to see it here.
The lang on <html> can carry a region code too, like en-GB.
guess first
Which page will search show a Welsh speaker?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<head>
<link rel="alternate" hreflang="en" href="https://example.com/en/menu">
<link rel="alternate" hreflang="cy" href="https://example.com/cy/bwydlen">
</head>
<body>
<h1>Our menu</h1>
</body>your turn
Your turn. Link the French version.
This café also has a French page at https://example.com/fr/visite. Fill line 7 so search engines know about it.
Press show my page to see it here.
- the French page is linkednot checked yet
- the English page still lists itselfnot checked yet
fix it
The British page uses a code that does not exist. Can you fix it?
Press show my page to see it here.
- the British page uses
en-GBnot checked yet - there is no
en-UKcodenot checked yet
- Region codes come from an official list of countries. Is UK on it?
- The official code for the United Kingdom is
GB, for Great Britain. Line 2 already uses it. - Change
hreflang="en-UK"tohreflang="en-GB"on line 6, then press run.
nailed it
every reader finds their language. :D
hreflanglinks a page to each of its translations.- Add a region code when it matters, like
en-GB. - Every version lists every version, itself included.
new words in your collection
- translation
- region code
This lesson isn’t saved. A free account remembers every lesson you finish.