Bird
Raised Fist0
SEO Fundamentalsknowledge~10 mins

Hreflang for international SEO - Step-by-Step Execution

Choose your learning style10 modes available
LearnWhyDeepVisualPracticeChallengeProjectRecallTime
Concept Flow - Hreflang for international SEO
User visits page
↓
Browser reads hreflang tags
↓
Match user language & region
↓
Serve correct language version
↓
Improve SEO & user experience
When a user visits a webpage, the browser checks hreflang tags to find the best language and region version to show, improving SEO and user experience.
Execution Sample
SEO Fundamentals
<link rel="alternate" hreflang="en-US" href="https://example.com/en-us" />
<link rel="alternate" hreflang="fr-FR" href="https://example.com/fr-fr" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />
These tags tell search engines which page version to show for US English, French France, or a default fallback.
Analysis Table
StepUser LanguageHreflang Tag ReadMatch Found?Page Served
1en-USen-USYeshttps://example.com/en-us
2fr-FRfr-FRYeshttps://example.com/fr-fr
3de-DENoneNohttps://example.com/ (x-default)
4es-ESNoneNohttps://example.com/ (x-default)
5en-GBNoneNohttps://example.com/ (x-default)
💡 When no exact language-region match is found, the x-default page is served as fallback.
State Tracker
VariableStartAfter Step 1After Step 2After Step 3After Step 4After Step 5
User LanguageN/Aen-USfr-FRde-DEes-ESen-GB
Page ServedN/Ahttps://example.com/en-ushttps://example.com/fr-frhttps://example.com/https://example.com/https://example.com/
Key Insights - 2 Insights
Why does a user with language 'de-DE' get the default page instead of a German page?
Because there is no hreflang tag for 'de-DE' in the execution_table rows 3, so the default (x-default) page is served.
What happens if the hreflang tags are missing or incorrect?
Search engines may show the wrong language version or treat pages as duplicates, hurting SEO. See execution_table where matching fails without correct tags.
Visual Quiz - 3 Questions
Test your understanding
Look at the execution_table at Step 2. Which page is served for user language 'fr-FR'?
Ahttps://example.com/en-us
Bhttps://example.com/fr-fr
Chttps://example.com/
DNo page served
💡 Hint
Check the 'Page Served' column for Step 2 in the execution_table.
At which step does the user get the default page because no exact language match is found?
AStep 3
BStep 2
CStep 1
DStep 5
💡 Hint
Look for 'Match Found?' column showing 'No' and 'Page Served' as default in execution_table.
If a new hreflang tag for 'de-DE' is added, how would the page served at Step 3 change?
AIt would serve https://example.com/en-us
BIt would still serve the default page
CIt would serve https://example.com/de-de
DNo page would be served
💡 Hint
Refer to variable_tracker and execution_table logic about matching user language to hreflang tags.
Concept Snapshot
Hreflang tags tell search engines which language and region version of a page to show.
Use <link rel="alternate" hreflang="x" href="url" /> in HTML head.
Exact language-region match serves that page.
If no match, x-default page is fallback.
Improves SEO by avoiding duplicate content and serving correct language.
Full Transcript
Hreflang tags help websites show the right language and region version of a page to users and search engines. When a user visits, the browser or search engine reads the hreflang tags in the page's HTML head. It tries to find a tag that matches the user's language and region. If it finds a match, it serves that page version. If not, it serves the x-default page as a fallback. This process improves SEO by preventing duplicate content issues and giving users the best language experience. For example, if a user speaks French in France, the page with hreflang='fr-FR' is served. If a user speaks German in Germany but no German page exists, the default page is shown instead. Adding correct hreflang tags is important to guide search engines properly.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard