Relative Hreflang URLs Test Page

This page uses relative URLs in hreflang tags instead of absolute URLs.

What's wrong?

• Hreflang tags use relative paths like /en/page
• Search engines require absolute URLs with protocol and domain
• Relative URLs can cause ambiguity in hreflang clusters

Expected Detection:

Check: hreflang (automatic)

Status: Fail

Severity: Warning

Issue Type: hreflang_relative_url

How to Fix:

Always use absolute URLs in hreflang tags:

❌ Wrong (Relative URLs):
<link rel="alternate" hreflang="en" href="/en/page" />
<link rel="alternate" hreflang="fr" href="/fr/page" />

✅ Correct (Absolute URLs):
<link rel="alternate" hreflang="en" href="https://example.com/en/page" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page" />

Current (Invalid) Metadata:

alternates: {
  canonical: "/issues/hreflang-relative-url",  // ❌ Relative
  languages: {
    en: "/issues/hreflang-relative-url",        // ❌ Relative
    fr: "/issues/hreflang-relative-url-fr",     // ❌ Relative
    de: "/issues/hreflang-relative-url-de",     // ❌ Relative
  }
}

Note: Next.js may convert these to absolute URLs automatically in production. The crawler will detect whether the actual HTML contains relative or absolute URLs.

Correct Example:

alternates: {
  canonical: "https://mock.okok.now/issues/hreflang-relative-url",
  languages: {
    en: "https://mock.okok.now/issues/hreflang-relative-url",
    fr: "https://mock.okok.now/issues/hreflang-relative-url-fr",
    de: "https://mock.okok.now/issues/hreflang-relative-url-de",
  }
}