CodeBlanks Logo Icon CodeBlanks
Login Register

Multilingual SEO

HTML course · Expert · Lesson 22/39

Learn canonical + hreflang together on multilingual pages.

What does canonical do?

A page can show the same content under different URLs: ?sort=price and ?sort=date for example. To stop search engines treating them as duplicate pages, you declare the main URL with <link rel="canonical">.

On multilingual pages canonical and hreflang work together: each page canonicals itself while introducing its siblings with hreflang. This avoids duplicate-content penalties and serves the right language version.

The canonical + hreflang pattern

In a three-language site (TR, EN, AR) the Turkish page's <head> looks like this:

<link rel="canonical" href="https://magazine.com/tr/"> names the main URL. Then <link rel="alternate" hreflang="tr" href="https://magazine.com/tr/">, hreflang="en" and hreflang="ar" introduce the sibling pages. Finally hreflang="x-default" marks the default page for users without a matched language.

Exercise canonical + hreflang set

Add a <link rel="canonical" href="https://magazine.com/tr/"> to head. Then add three <link rel="alternate" hreflang="...">: hreflang="tr" + href="https://magazine.com/tr/"; hreflang="en" + href="https://magazine.com/en/"; hreflang="x-default" + href="https://magazine.com/tr/".

Show example solution 
<head>
  <link rel="canonical" href="https://magazine.com/tr/">
  <link rel="alternate" hreflang="tr" href="https://magazine.com/tr/">
  <link rel="alternate" hreflang="en" href="https://magazine.com/en/">
  <link rel="alternate" hreflang="x-default" href="https://magazine.com/tr/">
</head>

Test yourself

  1. How do canonical and hreflang work together?

    • Only canonical is used
    • Each page canonicals itself and hreflangs the others
    • Only hreflang is used
    • Neither is used
    Show answer

    Each page canonicals itself and hreflangs the others — Correct. Each page canonicals itself and introduces sibling languages with hreflang.

  2. Complete the canonical link

    <link rel="canonical" href="____">
    Show answer 
    <link rel="canonical" href="https://magazine.com/tr/">

  3. Match each SEO concept to its role

    canonical
    Points to the main URL
    hreflang
    Introduces sibling pages
    x-default
    Default language page
    alternate
    Alternative version link

All lessons in Expert

1 Advanced accessibility

  1. WCAG principles
  2. Keyboard navigation
  3. Live regions
  4. Dialog and modal
  5. Heading outline
  6. Summary - Accessible widget

2 Advanced ARIA patterns

  1. ARIA roles
  2. States and properties
  3. Grid and tree
  4. Tabs and accordion
  5. Menu and menubar
  6. Summary - Accessible tabpanel

3 Project: High-performance page

  1. Project: High-performance page
  2. Critical resource order
  3. Image optimization
  4. Template and noscript
  5. Project final - Performance page

4 Internationalization

  1. Lang and dir
  2. Hreflang strategy
  3. Bidi and bdo
  4. RTL-aware markup
  5. Multilingual SEO
  6. Summary - Multilingual page

5 Project: Secure page

  1. Project: Secure form page
  2. Rel noopener
  3. CSP meta
  4. Referrer policy
  5. Project final - Secure page

6 Advanced web components

  1. Custom element registry
  2. Slot and shadow boundary
  3. Declarative shadow DOM
  4. Form-associated custom element
  5. AOM and accessibility tree
  6. Summary - Component library skeleton

7 Expert final

  1. Challenge - Accessible dialog
  2. Challenge - ARIA tabpanel
  3. Challenge - Multilingual RTL
  4. Challenge - Security package
  5. Challenge - Expert capstone