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

Next lesson: Title and slug strategy

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies