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

Next lesson: Link accessibility

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies