SEO

Cara Setup Hreflang untuk Website Multilingual

Hendra Wijaya

· Januari 7, 2026 · 6 menit baca

Hreflang tag membantu Google menampilkan versi halaman yang tepat kepada user berdasarkan bahasa dan lokasi mereka.

Apa itu Hreflang?

Definisi

<link rel="alternate" hreflang="en" href="https://example.com/page/" />
<link rel="alternate" hreflang="id" href="https://example.com/id/page/" />
Memberitahu Google: - Halaman alternatif dalam bahasa lain - Hubungan antar
versi halaman - Target audience per versi

Kapan Menggunakan

Gunakan hreflang jika: - Multiple language versions - Same language, different regions (en-US vs en-GB) - Fully translated pages Tidak perlu jika: Single language site Auto-translated content Partial translations only

Format Hreflang

Language Only

<link rel="alternate" hreflang="en" href="..." />
<link rel="alternate" hreflang="id" href="..." />
<link rel="alternate" hreflang="es" href="..." />
Format: ISO 639-1 language code (2-letter code)

Language + Region

<link rel="alternate" hreflang="en-US" href="..." />
<link rel="alternate" hreflang="en-GB" href="..." />
<link rel="alternate" hreflang="es-ES" href="..." />
<link rel="alternate" hreflang="es-MX" href="..." />
Format: language-REGION REGION = ISO 3166-1 Alpha 2

X-Default

<link rel="alternate" hreflang="x-default" href="..." />
Fallback for: - Users not matching any hreflang - Language selector page -
Default version

Implementation Methods

Method 1: HTML Head

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

Method 2: HTTP Headers

For non-HTML files (PDFs, etc.):
Link: <https://example.com/file.pdf>; rel="alternate"; hreflang="en",
<https://example.com/id/file.pdf>; rel="alternate"; hreflang="id"

Method 3: XML Sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/page/</loc>
    <xhtml:link rel="alternate" hreflang="en"
                href="https://example.com/page/"/>
    <xhtml:link rel="alternate" hreflang="id"
                href="https://example.com/id/page/"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://example.com/page/"/>
  </url>
  <url>
    <loc>https://example.com/id/page/</loc>
    <xhtml:link rel="alternate" hreflang="en"
                href="https://example.com/page/"/>
    <xhtml:link rel="alternate" hreflang="id"
                href="https://example.com/id/page/"/>
    <xhtml:link rel="alternate" hreflang="x-default"
                href="https://example.com/page/"/>
  </url>
</urlset>

Critical Rules

1. Reciprocal Links (WAJIB)

Every page must link to ALL alternates,
INCLUDING ITSELF.
Page A (English) must reference:

Page A (English) ← diri sendiri
Page B (Indonesian)

Page B (Indonesian) must reference:

Page A (English)
Page B (Indonesian) ← diri sendiri

2. Self-Referencing

<!-- On English page -->
<link rel="alternate" hreflang="en" href="https://example.com/page/" />
<!-- SELF -->
<link rel="alternate" hreflang="id" href="https://example.com/id/page/" />

3. Canonical Compatibility

Hreflang URL = Canonical URL
If page has canonical:
<link rel="canonical" href="https://example.com/page/">
Then hreflang must point to same URL:
<link rel="alternate" hreflang="en"
href="https://example.com/page/">

4. Absolute URLs

<!-- CORRECT -->
<link rel="alternate" hreflang="en" href="https://example.com/page/" />
<!-- WRONG -->
<link rel="alternate" hreflang="en" href="/page/" />

URL Structure Options

Subdirectories

example.com/         (English/default)
example.com/id/      (Indonesian)
example.com/es/      (Spanish)
Pros: Easy to implement
Cons: Shares domain authority

Subdomains

en.example.com id.example.com es.example.com

Pros: Clear separation Cons: Each is separate site in GSC

ccTLDs

example.com    (US)
example.co.id  (Indonesia)
example.es     (Spain)
Pros: Strong geo signal
Cons: Expensive, complex to manage

Common Mistakes

1. Missing Reciprocal Links

Problem: EN page → ID page ✓ ID page → EN page ✗

Google ignores incomplete hreflang.

2. Wrong Language Codes

Wrong:
hreflang="eng"    (should be "en")
hreflang="indo"   (should be "id")
hreflang="uk"     (should be "en-GB")
Use correct ISO codes.

3. Missing Self-Reference

Problem: Page doesn't reference itself

Solution: Always include self in hreflang set.

4. Canonical Conflict

Problem: Canonical: https://example.com/page/ Hreflang: https://www.example.com/page/

URLs must match exactly.

5. Non-Indexable Pages

Problem: Hreflang pointing to noindex page Or to redirected page

Hreflang targets must be indexable.

Validation

Google Search Console

GSC → International Targeting Shows: hreflang errors Affected pages Issue types

Validation Tools

Tools:
1. Ahrefs Site Audit (hreflang report)
2. Screaming Frog (hreflang tab)
3. Merkle hreflang validator
4. TechnicalSEO.com hreflang generator

Manual Check

site:example.com/page/ Then check: Google shows correct version Language targeting works

WordPress Implementation

Plugins

Options:
1. WPML (paid) - automatic hreflang
2. Polylang (free) - manual setup
3. TranslatePress
4. Yoast SEO (manual hreflang settings)
WPML auto-generates hreflang.

Manual in Theme

// In header.php or functions.php
function add_hreflang_tags() {
    // Get current page language
    // Output all alternate versions
    ?>
    <link rel="alternate" hreflang="en"
          href="<?php echo get_english_url(); ?>" />
    <link rel="alternate" hreflang="id"
          href="<?php echo get_indonesian_url(); ?>" />
    <?php
}
add_action('wp_head', 'add_hreflang_tags');

Hugo Implementation

In Head Template

{{ if .IsTranslated }} {{ range .Translations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}" />
{{ end }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}" />
<link rel="alternate" hreflang="x-default" href="{{ .Permalink }}" />
{{ end }}

Hreflang Checklist

Setup: ☐ Choose URL structure ☐ Plan language/region codes ☐ Decide implementation method ☐ Create all language versions Implementation: ☐ Add hreflang to all pages ☐ Include self-reference ☐ Include x-default ☐ Use absolute URLs Validation: ☐ Check reciprocal links ☐ Verify canonical match ☐ Test with validators ☐ Monitor GSC errors

Maintenance: ☐ Add hreflang to new pages ☐ Update when URLs change ☐ Regular audits ☐ Fix errors promptly

Kesimpulan

Hreflang implementation memerlukan ketelitian – setiap halaman harus reference semua alternatif termasuk dirinya sendiri. Validate secara regular dan monitor di GSC untuk errors.

Ditulis oleh