Salin dan Bagikan

Cara Setup Hreflang untuk Website Multilingual

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.