# How to Implement hreflang Attributes for International SEO

> Master international SEO by correctly implementing hreflang attributes. Learn to use alternate link tags with language and region codes for optimal search engine targeting.

- Repository: [David Dias/Front-End-Checklist](https://github.com/thedaviddias/Front-End-Checklist)
- Tags: how-to-guide
- Published: 2026-03-02

---

**Implement hreflang attributes by placing `<link rel="alternate">` tags in the HTML `<head>` of every localized page, using ISO-639-1 language codes optionally combined with ISO-3166-1-Alpha-2 region codes, including a self-referencing tag for the current page's language, and adding an `x-default` tag for fallback traffic.**

Implementing hreflang attributes for international SEO is critical for ensuring search engines serve the correct language or regional version of your content to users worldwide. The `thedaviddias/Front-End-Checklist` repository provides authoritative guidelines for proper hreflang implementation, detailing specific architectural rules that prevent common indexing errors.

## Placement and Structure Requirements

Search engine crawlers only read `hreflang` declarations that appear within the document `<head>`. You must place all `<link rel="alternate">` tags containing `hreflang` attributes inside the `<head>` section of **every** localized page. Tags placed in the `<body>` or other locations will be ignored by crawlers.

Each language or regional variant must be declared explicitly with a separate `<link rel="alternate" href="URL" hreflang="code">` element. Missing tags force search engines to guess the correct version, potentially serving the wrong language to users and degrading the user experience.

## Language and Region Code Standards

Use **ISO-639-1** format for language codes, optionally combined with **ISO-3166-1-Alpha-2** region codes separated by a hyphen. This standardized format ensures Google can correctly map your content to its language-region taxonomy.

Common implementations include:

- `hreflang="en"` for generic English
- `hreflang="en-GB"` for British English
- `hreflang="fr-CA"` for Canadian French
- `hreflang="es"` for Spanish (Spain)

## Self-Referencing and Default Fallbacks

Every page must include a **self-referencing tag** that points to its own URL with its own language code. This prevents the page from being treated as a duplicate of another variant and establishes the page as a distinct entity in the relationship cluster.

Additionally, implement an **`x-default`** tag to act as a fallback for users whose language or regional preferences do not match any specific declared variant. According to the Front-End Checklist [`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md) (lines 219-229), this tag typically points to a language selector page or your primary market page, ensuring search results still display a relevant destination for undefined locales.

## URL Validation and Consistency Requirements

Ensure all URLs referenced in `href` attributes return **200 OK** status codes. Broken URLs break the hreflang signal and can cause indexing issues or "conflicting hreflang" warnings in Google Search Console.

Maintain **consistent tag sets** across all localized pages. Duplicate the same list of tags on every page, updating only the `href` to point to that page's own URL and ensuring the self-referencing tag reflects the current page. Document the mapping in comments or external sheets to help future developers maintain the list and avoid accidental removal.

## Implementation Example

The following HTML demonstrates proper hreflang implementation for a multi-regional site, including the `x-default` fallback and self-referencing tags:

```html
<head>
  <!-- Default (fallback) version -->
  <link rel="alternate" href="https://example.com/" hreflang="x-default" />

  <!-- English (generic) -->
  <link rel="alternate" href="https://example.com/en/" hreflang="en">

  <!-- British English -->
  <link rel="alternate" href="https://example.com/en-gb/" hreflang="en-GB">

  <!-- Spanish (Spain) -->
  <link rel="alternate" href="https://es.example.com/" hreflang="es">

  <!-- French (Canada) -->
  <link rel="alternate" href="https://fr-ca.example.com/" hreflang="fr-CA">
</head>

```

Place this complete set of tags in the `<head>` of every localized page, ensuring the self-referencing `href` points to the current page's URL.

## Source File Reference

The `thedaviddias/Front-End-Checklist` repository contains the authoritative guidelines in the following locations:

- **[`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md)** (lines 219-229): Provides the canonical examples of `<link rel="alternate">` with `hreflang` and `x-default` tags.
- **[`CONTRIBUTING.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/CONTRIBUTING.md)**: Describes how contributors can add or update checklist items, useful if you want to extend the hreflang section.
- **[`package.json`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/package.json)**: Part of the repository's source tree for reference.

These files together form the authoritative reference for implementing hreflang attributes in the Front-End Checklist repository.

## Summary

- Place all `hreflang` tags in the `<head>` section of every localized HTML page.
- Use **ISO-639-1** language codes, optionally combined with **ISO-3166-1-Alpha-2** region codes (e.g., `en-GB`, `fr-CA`).
- Include a **self-referencing tag** pointing to the current page's own URL to prevent duplicate content issues.
- Add an **`x-default`** tag as a fallback for users whose language does not match any declared variant.
- Ensure all referenced URLs return **200 OK** status codes and maintain consistent tag sets across all pages to avoid search console errors.

## Frequently Asked Questions

### What is the purpose of the x-default hreflang tag?

The `x-default` tag acts as a catch-all fallback for users whose language or regional preferences do not match any of the specific `hreflang` variants you have declared. According to the Front-End Checklist [`README.md`](https://github.com/thedaviddias/Front-End-Checklist/blob/main/README.md), this tag typically points to a default page—often a language selector or your primary market page—ensuring that search results still display a relevant destination for undefined locales.

### Where must hreflang tags be placed in HTML documents?

Search engine crawlers only process `hreflang` declarations that appear within the document `<head>`. As specified in the Front-End Checklist guidelines, you must place all `<link rel="alternate">` tags containing `hreflang` attributes inside the `<head>` section of every localized page. Tags placed in the `<body>` or other locations will be ignored by crawlers, breaking the international SEO signal.

### What language codes should be used for hreflang attributes?

Use **ISO-639-1** format for language codes (e.g., `en`, `es`, `fr`), optionally combined with **ISO-3166-1-Alpha-2** region codes separated by a hyphen (e.g., `en-GB`, `fr-CA`, `es-MX`). This standardized format ensures that Google and other search engines can correctly map your content to their language-region taxonomy, preventing misalignment between your intended audience and search results.

### Why is a self-referencing hreflang tag necessary?

A self-referencing tag points to the current page's own URL with its own language code, preventing search engines from treating the page as a duplicate of another variant. Without this tag, Google may interpret the page as a copy of a different language version, potentially causing indexing issues or incorrect language targeting. Every page in your set must include its own self-referencing `hreflang` tag to establish itself as a distinct entity in the relationship cluster.