Hreflang on a link element in head can describe alternate language versions of a page. Search engines may use these relationships to connect equivalent content in different languages. The important question is always where the link leads and whether the person reading the page can predict it.
What You Need to Know
Each alternate URL should point to real equivalent content. Language tags must be accurate, and alternate versions should generally reference one another.
Links are the pathways through a website. The words on a link should help someone choose where to go before clicking it.
Example: See It in Action
Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.
If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.
<head>
<link rel="alternate" hreflang="en" href="/en/article.html">
<link rel="alternate" hreflang="fr" href="/fr/article.html">
<title>Language Alternatives</title>
</head>Let’s Understand the Example
- The head contains useful page information for the browser, such as its title and character encoding.
- A link element points to a related resource, often a stylesheet or an icon. It does not make a clickable link in the page body.
- The title names the page in the browser tab. It is different from the heading shown on the page.
- Hreflang hints at the language of the linked resource; it does not translate the page.
- Rel describes a relationship to the linked page or resource, including security and search hints.
- Href contains the destination of a link. A value starting with # points to an id on the same page.
Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.
What Should You See?
The browser tab should show “Language Alternatives”.
Imagine this link is read out of context. Would its text still explain the destination? Rename unclear links before trying to make them look nicer with CSS.
Try It Yourself
- Add an alternate Spanish page link and check its destination.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Declaring the same English page as several different language versions.
- Avoid dead links, empty href values and clickable-looking text without a real destination.
Key Takeaways
- Hreflang on a link element in head can describe alternate language versions of a page.
- The head contains useful page information for the browser, such as its title and character encoding.
- Each alternate URL should point to real equivalent content. Language tags must be accurate, and alternate versions should generally reference one another.