Hreflang and canonical
Learn hreflang and link relations for multilingual pages.
hreflang and alternate
A multilingual site can have several language versions of each page. The <link rel="alternate" hreflang="en" href="..."> tag tells browsers and search engines the address of the English version.
You place it in the <head> section. The hreflang attribute takes an ISO language code: tr, en, de. Search engines use these hints to serve the right language to each user.
canonical for the main address
Sometimes the same page has more than one address: http and https versions, or extra URL parameters. Search engines may think they are different pages. With rel="canonical" you say which address is the main one.
Example: <link rel="canonical" href="https://example.com/posts/first-post">. This tells search engines 'this is the main address, treat the others as copies'. A page has only one canonical link.
Exercise Write hreflang and canonical links
Add three <link> tags to the page's <head>. The first with rel="alternate" hreflang="tr" goes to https://example.com/tr/hakkında, the second with rel="alternate" hreflang="en" goes to https://example.com/en/about, the third with rel="canonical" goes to https://example.com/en/about.
Show example solution
<link rel="alternate" hreflang="tr" href="https://example.com/tr/hakkında">
<link rel="alternate" hreflang="en" href="https://example.com/en/about">
<link rel="canonical" href="https://example.com/en/about">Test yourself
-
Which rel value marks the English version of a multilingual page?
- canonical
- bookmark
- alternate
- license
Show answer
alternate — Correct. alternate marks another version of the page.
-
Write the link tag
<____ rel="canonical" href="https://example.com/posts/first-post">Show answer
<link rel="canonical" href="https://example.com/posts/first-post"> -
Match each rel type to its meaning
- alternate
- Another language version
- canonical
- Main URL
- bookmark
- Permanent post address
- license
- Licence page