Canonical and hreflang
Solve duplicate content with <link rel="canonical"> and hreflang.
What is canonical?
Sometimes the same content opens from several URLs: with parameters like ?sort=new or ?session=abc. Search engines may treat them as different pages and penalise you.
<link rel="canonical" href="..."> states the main URL. The search engine merges all copies under that URL. Canonical must always be an absolute URL.
Language versions with hreflang
If your page has Turkish and English versions, you mark them with <link rel="alternate" hreflang="tr"> and hreflang="en". The search engine shows the right version for the user's language.
The hreflang value is either a language code (tr, en) or a language-region code (tr-TR, en-US). You connect the different language versions of the same page.
Watch out when writing canonical
Canonical must always be an absolute URL: start with https://.... Do not use a relative URL (/post/...); search engines may read it differently.
Every page points to its own URL as canonical. Do not accidentally point canonical at another page; otherwise your page disappears from search results. When used with hreflang, each language version points to its own canonical.
Exercise Add canonical and hreflang tags
Add three link tags to the head for an article: <link rel="canonical" href="https://..."> (main URL), <link rel="alternate" hreflang="tr" href="https://..."> (Turkish version) and <link rel="alternate" hreflang="en" href="https://..."> (English version).
Show example solution
<head>
<title>Web Design Guide</title>
<link rel="canonical" href="https://alexblog.com/article/web-design">
<link rel="alternate" hreflang="tr" href="https://alexblog.com/article/web-design-tr">
<link rel="alternate" hreflang="en" href="https://alexblog.com/article/web-design">
</head>Test yourself
-
What does canonical do?
- Loads the page faster
- Adds an image to the page
- Gives colour to the page
- Solves the duplicate content issue
Show answer
Solves the duplicate content issue — Correct. Canonical merges several URLs that point to the same content under one main URL.
-
Complete the canonical tag
<link rel="canonical" href="____">Show answer
<link rel="canonical" href="https://alexblog.com/article/web-design"> -
Match the link relation with its role
- rel="canonical"
- Main URL
- rel="alternate" hreflang="tr"
- Turkish version
- rel="alternate" hreflang="en"
- English version
- rel="stylesheet"
- Stylesheet