Rank-O-Saur Logo
Rank-O-Saur Don't let your rankings go extinct.
← Back to Wiki

🌍 The Ultimate Guide to HTML Lang & Hreflang

If your website serves users in multiple languages or regions, International SEO is critical. Without proper language declarations, search engines might show the wrong version of your site to the wrong users, or penalize you for duplicate content. This guide covers the two most important tools: the HTML Lang attribute and hreflang tags.

📑 Table of Contents

1. The HTML Lang Attribute

The lang attribute is a simple HTML element that tells web browsers, screen readers, and search engines the primary language of the document. It must be placed inside the opening <html> tag at the very top of your source code. 

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Page head -->
</head>
...

Why it matters: While Google relies more on hreflang for ranking multi-regional sites, Bing and other search engines rely heavily on the HTML lang attribute. Furthermore, it is absolutely essential for web accessibility (WCAG compliance) so screen readers know which pronunciation rules to use.

2. What are Hreflang Tags?

Introduced by Google in 2011, the hreflang attribute tells search engines what the relationship is between web pages in alternate languages. It allows you to say: "Hey Google, this is my English page, but if the user is searching from Germany, please show them this German URL instead."

Hreflang solves two major problems:

  1. Targeting: It ensures the correct language or regional URL is served in the search results.
  2. Duplicate Content: If you have an English site for the US (/en-us/) and an identical English site for the UK (/en-gb/), hreflang prevents Google from viewing them as competing duplicate content.

3. Hreflang Syntax & Code Examples

Hreflang tags are typically placed in the <head> of your HTML document. The attribute requires a specific format: a two-letter language code (ISO 639-1), optionally followed by a two-letter country code (ISO 3166-1 Alpha 2).

Example: A website with an English page and a Spanish page.

<head>
    <title>My Global Store</title>
    <link rel="alternate" hreflang="en" href="https://www.example.com/en/page/" />
    <link rel="alternate" hreflang="es" href="https://www.example.com/es/page/" />
</head>

Example (Language + Region): A website targeting English speakers in the US vs. English speakers in the UK.

<head>
    <title>My Regional Store</title>
    <link rel="alternate" hreflang="en-us" href="https://www.example.com/us/page/" />
    <link rel="alternate" hreflang="en-gb" href="https://www.example.com/uk/page/" />
</head>

⚠️ Important Rule: The language code ALWAYS comes first. You can specify a language without a region (e.g., es), but you cannot specify a region without a language (e.g., mx is invalid, it must be es-mx).

4. The x-default Attribute

What happens if a user searches from France, but you only have an English and Spanish version of your site? You use the x-default tag. This tells Google which page is the default fallback for unmatched languages and regions.

<link rel="alternate" hreflang="x-default" href="https://www.example.com/en/page/" />

5. Crucial Rules & Best Practices

  1. Bidirectional Return Links: This is the golden rule of hreflang. If Page A links to Page B via hreflang, Page B must link back to Page A. If the return link is missing, Google will ignore the tag completely.
  2. Self-Referencing Tags: Every page must include an hreflang tag pointing to itself. If your US page lists the UK and AU versions, it must also list the US version.
  3. Absolute URLs: Always use full, absolute URLs (including https://), not relative paths.
  4. Canonical Consistency: Hreflang tags should only point to canonical URLs. Do not point an hreflang tag to a page that has a noindex tag or canonicalizes to a different URL.

Pro Tip: International SEO is incredibly easy to mess up. Rank-O-Saur automatically scans your hreflang tags, checks for valid country/language codes, and verifies that the return tags are correctly implemented across all language versions.

6. Common Mistakes to Avoid