Hreflang for international SEO - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to specify the language of the page using hreflang.

SEO Fundamentals

<link rel="alternate" hreflang="[1]" href="https://example.com/en/" />

Drag options to blanks, or click blank then click option'

Ade

Bfr

Cen

Des

Attempts:

3 left

💡 Hint

Common Mistakes

Using a country code instead of a language code.

Leaving the hreflang attribute empty.

The hreflang attribute specifies the language of the linked page. Here, "en" stands for English.

2fill in blank

medium

Complete the code to specify the language and region using hreflang.

SEO Fundamentals

<link rel="alternate" hreflang="[1]" href="https://example.com/en-us/" />

Drag options to blanks, or click blank then click option'

Aen-GB

Bes-MX

Cfr-CA

Den-US

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up region codes.

Using only the language code when region is needed.

The hreflang attribute can specify both language and region. "en-US" means English for the United States.

3fill in blank

hard

Fix the error in the hreflang attribute to correctly specify French for Canada.

SEO Fundamentals

<link rel="alternate" hreflang="[1]" href="https://example.com/fr-ca/" />

Drag options to blanks, or click blank then click option'

Afr-CA

Bfr-ca

CFR-CA

Dfr_ca

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase for region code.

Using underscore instead of hyphen.

Using uppercase for language code.

The correct format for hreflang uses lowercase language code and uppercase region code separated by a hyphen, like "fr-CA" for French in Canada.

4fill in blank

hard

Fill both blanks to create hreflang links for English (US) and Spanish (Mexico).

SEO Fundamentals

<link rel="alternate" hreflang="[1]" href="https://example.com/en-us/" />
<link rel="alternate" hreflang="[2]" href="https://example.com/es-mx/" />

Drag options to blanks, or click blank then click option'

Aen-US

Bes-MX

Cen-GB

Dfr-FR

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping language and region codes.

Using lowercase for region codes.

"en-US" specifies English for the United States, and "es-MX" specifies Spanish for Mexico in hreflang attributes.

5fill in blank

hard

Fill all three blanks to create a dictionary mapping languages to URLs for hreflang tags.

SEO Fundamentals

hreflang_links = {
  "[1]": "https://example.com/en/",
  "[2]": "https://example.com/fr/",
  "[3]": "https://example.com/es/"
}

Drag options to blanks, or click blank then click option'

Aen

Bfr

Ces

Dde

Attempts:

3 left

💡 Hint

Common Mistakes

Using country codes instead of language codes.

Mixing up language codes.

This dictionary maps language codes to their respective URLs for hreflang usage: English (en), French (fr), and Spanish (es).

Practice

1. What is the main purpose of using hreflang tags in international SEO?

easy

A. To tell search engines which language or regional version of a page to show users

B. To increase the number of backlinks to a website

C. To speed up website loading times

D. To hide duplicate content from search engines

Solution

1. Step 1: Understand the role of hreflang tags

   hreflang tags tell search engines which language or regional version of a page should be shown to users based on their location or language preference.

2. Step 2: Compare with other SEO goals

   While backlinks, speed, and duplicate content are important SEO factors, hreflang specifically addresses language and regional targeting.

3. Final Answer:

   To tell search engines which language or regional version of a page to show users -> Option A

4. Quick Check:

   Purpose of hreflang = language/region targeting [OK]

Hint: Remember: hreflang = language + region targeting [OK]

Common Mistakes:

• Confusing hreflang with backlink strategies
• Thinking hreflang speeds up the site
• Assuming hreflang hides duplicate content

2. Which of the following is the correct syntax to specify a hreflang tag for a Spanish page targeting Spain?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct hreflang format

   The correct format uses a hyphen between language and region codes, like "es-ES" for Spanish in Spain.

2. Step 2: Check href URL matches language and region

   The URL should point to the Spanish page, so "https://example.com/es/" is correct. points to English, so it's incorrect.

3. Final Answer:

   <link rel="alternate" hreflang="es-ES" href="https://example.com/es/" /> -> Option C

4. Quick Check:

   Correct hreflang format = language-region with hyphen [OK]

Hint: Use hyphen between language and region codes [OK]

Common Mistakes:

• Using underscore instead of hyphen
• Mismatch between hreflang and URL language
• Omitting region code when needed

3. Given the following hreflang tags in the <head> section:

<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/" />
<link rel="alternate" hreflang="de" href="https://example.com/de/" />

If a user in Germany visits the site, which URL will search engines likely show in search results?

medium

A. https://example.com/fr/

B. https://example.com/de/

C. https://example.com/en/

D. The homepage without language specification

Solution

1. Step 1: Match user location with hreflang tags

   The user is in Germany, so the hreflang tag with "de" matches their language/region.

2. Step 2: Determine which URL corresponds to "de" hreflang

   The URL "https://example.com/de/" is linked to the German version, so search engines will prefer this for German users.

3. Final Answer:

   https://example.com/de/ -> Option B

4. Quick Check:

   User location matches hreflang "de" = German page shown [OK]

Hint: Match hreflang code to user language/region [OK]

Common Mistakes:

• Ignoring hreflang and showing default language
• Confusing language codes
• Assuming homepage is always shown

4. A website has these hreflang tags:

<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/" />
<link rel="alternate" hreflang="en" href="https://example.com/en/" />

Users from the UK report seeing the US page in search results. What is the likely error?

medium

A. The hreflang tags are missing the x-default tag

B. The URLs for en-GB and en-US are swapped

C. The hreflang tags are not self-closing

D. The en tag should not be included when region-specific tags exist

Solution

1. Step 1: Understand the role of x-default hreflang

   The x-default tag tells search engines which page to show when no exact language-region match is found.

2. Step 2: Identify missing x-default causing fallback issues

   Without x-default, search engines may default to the wrong page, like showing US instead of UK for UK users.

3. Final Answer:

   The hreflang tags are missing the x-default tag -> Option A

4. Quick Check:

   Missing x-default causes wrong fallback page [OK]

Hint: Always add x-default for fallback page [OK]

Common Mistakes:

• Swapping URLs without checking content
• Ignoring importance of x-default
• Thinking self-closing tags affect hreflang behavior

5. You manage a website with English, French, and Spanish versions. You want to target users in Canada who speak English and French, and users in Spain who speak Spanish. Which hreflang tags should you use to correctly target these audiences?

hard

A.

B.

C.

D.

Solution

1. Step 1: Match language and region codes to target audiences

   Canada English is "en-CA", Canada French is "fr-CA", and Spain Spanish is "es-ES". These codes precisely target the intended users.

2. Step 2: Include x-default for fallback

   The x-default tag provides a default page for users not matching any specific hreflang, improving user experience and SEO.

3. Final Answer:

   Use hreflang tags with en-CA, fr-CA, es-ES, and x-default for fallback -> Option D

4. Quick Check:

   Use language-region codes + x-default for precise targeting [OK]

Hint: Use language-region codes plus x-default for fallback [OK]

Common Mistakes:

• Using generic language codes without region
• Mixing up region codes (e.g., US instead of CA)
• Omitting x-default tag