Hreflang for International Pages
Signal language and region variants to search engines.
Hreflang for International Pages is a free HTML Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
The Problem hreflang Solves
When you publish the same article in English, Turkish and Japanese, search engines need to know which version to show in each user's search results. Without hreflang, Google may serve the wrong language or treat the variants as duplicate content.
The Link Tag
Declare each alternate version with <link rel="alternate" hreflang="..." href="..."> in the <head>. The hreflang attribute is a BCP-47 language code (en, tr) or language-region pair (en-US, en-GB, pt-BR).
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="tr" href="https://example.com/tr/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">Reciprocal References Required
Every version must link to every other version, including itself. Google ignores hreflang clusters that are not bidirectional. The English page links to TR and JA; the Turkish page links to EN and JA; and so on.
Self Reference
Each page should link to itself via hreflang. The English page must include <link rel="alternate" hreflang="en" ...> pointing to its own URL. This is part of "reciprocal" — Google uses the self-link to confirm cluster membership.
The x-default Value
Use hreflang="x-default" to specify the fallback page for users whose language Google cannot match. It usually points to the English version or a language selector landing page so non-targeted users still land somewhere reasonable.
Language Codes vs Region Codes
en targets all English speakers. en-US, en-GB, en-AU target country variants when the content differs by region (currency, spelling, shipping). Do not specify a region unless the content actually differs from the generic version.
Alternative Declarations
hreflang can also be declared in the HTTP Link header (for non-HTML files like PDFs) or in an XML sitemap with <xhtml:link rel="alternate" hreflang="...">. The three methods are equivalent; pick whichever is easiest to maintain.
Sitemap Declaration
Declaring hreflang in a sitemap scales better than HTML tags for sites with many languages: one sitemap entry per URL lists every alternate, eliminating per-page template duplication. Search Console flags missing reciprocals so errors surface early.
Common Mistakes
Using an underscore (en_US) instead of a hyphen (en-US), pointing to a non-200 URL, mixing http and https in the cluster, or forgetting the self-link all silently break hreflang. Run Google Search Console's International Targeting report after launch.
Does Not Replace Translation
hreflang only tells Google which translation already exists. The pages themselves still need real translated content — Google will not translate on your behalf. Sites that ship hreflang on pages that are 80% English silently confuse the index.
Combining with og:locale and lang
Set the document's <html lang="..."> and og:locale to match the page's actual language. hreflang tells search engines about siblings; lang/og:locale tell browsers and social networks about the current page. Both are needed for a complete picture.
Knowledge Check
What does hreflang="x-default" point to?
Summary
hreflang links translated versions of a page so search engines serve the right language. Use BCP-47 codes, declare alternates reciprocally (including a self-link), add x-default for the fallback, and verify in Google Search Console's International Targeting report. Translation quality and lang/og:locale tags still need to match.
Frequently asked questions
Is the “Hreflang for International Pages” lesson free?
Yes — the full text of “Hreflang for International Pages” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “Hreflang for International Pages”?
Signal language and region variants to search engines. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Hreflang for International Pages” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- OpenGraph og:title og:description og:image
- Twitter Card Meta Tags
- JSON-LD Structured Data Basics
- Hreflang for International Pages