SEO Fundamentalsknowledge~30 mins

Hreflang for international SEO - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Visual Practice Challenge Project Recall Time

Hreflang for International SEO

📖 Scenario: You manage a website that serves users in different countries and languages. To help search engines show the right version of your pages to the right users, you need to use hreflang tags correctly.This project will guide you step-by-step to add hreflang tags to your HTML pages for international SEO.

🎯 Goal: Build a set of hreflang tags in the HTML <head> section that correctly link language and regional versions of a webpage.

📋 What You'll Learn

Create a list of URLs for different language versions of a page

Define the language and region codes for each URL

Write hreflang link tags for each language version

Add a default hreflang tag for users without a specific language preference

💡 Why This Matters

🌍 Real World

Websites that serve users in multiple languages and countries use hreflang tags to tell search engines which page version to show to which user.

💼 Career

SEO specialists and web developers use hreflang tags to improve international search rankings and user experience.

Progress0 / 4 steps

Create a list of page URLs for different languages

Create a list called page_urls containing these exact URLs as strings: "https://example.com/en-us", "https://example.com/fr-fr", "https://example.com/es-es".

SEO Fundamentals

# Create the list of page URLs
# Your code here

Need a hint?

Use square brackets [] to create a list and include the URLs as strings inside quotes.

Define language-region codes for each URL

Create a list called hreflang_codes with these exact strings: "en-US", "fr-FR", "es-ES".

SEO Fundamentals

page_urls = ["https://example.com/en-us", "https://example.com/fr-fr", "https://example.com/es-es"]
# Create the list of hreflang codes
# Your code here

Need a hint?

Use a list of strings matching the language and region codes for each URL.

Write hreflang link tags for each language version

Use a for loop with variables url and code to iterate over zip(page_urls, hreflang_codes). Inside the loop, create a string called link_tag with this exact format: <link rel="alternate" hreflang="{code}" href="{url}" /> using f-strings.

SEO Fundamentals

page_urls = ["https://example.com/en-us", "https://example.com/fr-fr", "https://example.com/es-es"]
hreflang_codes = ["en-US", "fr-FR", "es-ES"]
# Create hreflang link tags using a for loop
# Your code here

Need a hint?

Use zip() to pair URLs and codes, then create the link tag string with f-strings.

Add a default hreflang tag for unspecified languages

Add a string variable called default_tag with this exact value: <link rel="alternate" hreflang="x-default" href="https://example.com/en-us" />.

SEO Fundamentals

page_urls = ["https://example.com/en-us", "https://example.com/fr-fr", "https://example.com/es-es"]
hreflang_codes = ["en-US", "fr-FR", "es-ES"]
for url, code in zip(page_urls, hreflang_codes):
    link_tag = f''
# Add the default hreflang tag
# Your code here

Need a hint?

The x-default hreflang tag is used as a fallback for users without a matching language.