---
title: "Deteksi Bahasa Berbasis Edge Menggunakan Header Accept-Language untuk Konsistensi SEO"
---

# Deteksi Bahasa Berbasis Edge Menggunakan Header Accept-Language untuk Konsistensi SEO  

Situs web yang menargetkan audiens dalam berbagai bahasa menghadapi ketegangan konstan antara menyajikan versi bahasa yang tepat kepada pengunjung manusia dan menyediakan struktur yang dapat diprediksi untuk perayap mesin pencari. Negosiasi bahasa tradisional di sisi server dapat menimbulkan latensi, menambah kompleksitas lapisan cache, dan terkadang menghasilkan URL yang tidak konsisten yang membingungkan bot pencarian.  

Menerapkan deteksi bahasa di edge—tepat di tempat permintaan pertama kali bertemu jaringan pengiriman konten (CDN)—menawarkan alternatif ringan dengan latensi rendah. Dengan membaca header **Accept‑Language** (AL), fungsi edge dapat memutuskan varian lokalisasi mana yang akan disajikan, menulis ulang URL permintaan, atau mengarahkan ke aset khusus bahasa yang sudah dipra‑generate. Bila dilakukan dengan benar, pendekatan ini menghasilkan satu URL kanonis per bahasa, anotasi hreflang yang konsisten, dan respons yang dapat di‑cache yang menghormati kebijakan TTL CDN.  

Di bawah ini kami menelusuri komponen penting dari pipeline deteksi bahasa berbasis edge, membahas desain kunci cache, mengeksplorasi mekanisme fallback, dan merinci langkah‑langkah implementasi yang ramah SEO.

## Mengapa Memproses Bahasa di Edge  

Pemrosesan bahasa di edge memberikan tiga keuntungan utama untuk SEO multibahasa:

1. **Waktu Putar yang Lebih Pendek** – Lokasi edge berada lebih dekat secara geografis dengan pengguna akhir, sehingga mengurangi latensi langkah negosiasi awal.  
2. **Efisiensi Cache** – Dengan memasukkan keputusan bahasa ke dalam kunci cache, konten identik dapat disimpan sekali per varian bahasa, menghindari kecenderungan header “Vary: Accept‑Language” yang memotong caching CDN.  
3. **URL yang Dapat Diprediksi** – Penulisan ulang di edge dapat memetakan permintaan umum (`example.com`) ke jalur bahasa‑spesifik (`example.com/en/`), menjaga struktur URL statis yang disukai mesin pencari.  

Manfaat‑manfaat ini secara langsung meningkatkan Core Web Vitals, menurunkan rasio bounce, dan memberikan sinyal perayapan yang lebih jelas kepada mesin pencari.

## Anatomi Alur Permintaan di Edge  

Diagram Mermaid berikut menggambarkan alur tipikal dari browser klien ke fungsi edge, melalui proses deteksi bahasa, dan akhirnya ke server asal atau respons yang di‑cache.

```mermaid
flowchart TD
    A["Client Browser"] --> B["Edge Node (CDN)"]
    B --> C["Read Accept-Language Header"]
    C --> D{"Supported Language?"}
    D -- Yes --> E["Map to Language Path"]
    D -- No --> F["Apply Fallback Logic"]
    E --> G["Construct Cache Key (URL + Lang)"]
    F --> G
    G --> H{"Cache Hit?"}
    H -- Hit --> I["Serve Cached Variant"]
    H -- Miss --> J["Fetch From Origin"]
    J --> K["Store Variant in Cache"]
    K --> I
    I --> L["Response to Client"]
```

Diagram menekankan dua titik keputusan: memverifikasi bahwa bahasa yang diminta didukung, dan menangani cache hit versus miss. Setiap cabang mengarah ke URL deterministik yang dapat diindeks mesin pencari.

## Merancang Kunci Cache  

Kunci cache yang dirancang dengan baik adalah inti dari solusi berbasis edge. Kunci tersebut harus berisi:

* Jalur permintaan yang sudah dinormalisasi (misalnya, `/products/123/`).  
* Kode bahasa yang telah diselesaikan (misalnya, `en`, `fr`, `es`).  

Format kunci cache tipikal tampak seperti `/<language>/<path>`. Contohnya, permintaan ke `/products/123/` dengan header AL yang menunjukkan bahasa Prancis (`fr`) akan menghasilkan kunci `/fr/products/123/`.  

**Hindari menggunakan header `Vary` untuk bahasa** karena banyak CDN memperlakukan `Vary: Accept-Language` sebagai bypass cache, yang pada dasarnya menonaktifkan caching di edge. Dengan menanamkan bahasa langsung ke dalam kunci cache, Anda mempertahankan kemampuan CDN untuk menyajikan salinan cache untuk setiap varian bahasa.

## Mengimplementasikan Fungsi Edge  

Berikut contoh pseudocode untuk runtime edge generik (mis. Cloudflare Workers, Fastly Compute@Edge, atau AWS Lambda@Edge). Logika sengaja bersifat bahasa‑agnostik dan dapat disesuaikan ke runtime JavaScript apa pun.

```javascript
export async function handle(event) {
  const request = event.request
  const url = new URL(request.url)

  // 1. Extract Accept-Language header
  const acceptLang = request.headers.get('Accept-Language') || ''
  
  // 2. Parse header into ordered list of language tags
  const languages = parseAcceptLanguage(acceptLang)

  // 3. Determine the first supported language
  const supported = ['en', 'es', 'fr', 'de', 'zh']
  let chosenLang = supported[0] // default fallback
  for (const lang of languages) {
    const base = lang.split('-')[0] // ignore region subtags
    if (supported.includes(base)) {
      chosenLang = base
      break
    }
  }

  // 4. Rewrite URL to include language segment
  if (!url.pathname.startsWith(`/${chosenLang}/`)) {
    url.pathname = `/${chosenLang}${url.pathname}`
  }

  // 5. Create a new request with the rewritten URL
  const newRequest = new Request(url, request)

  // 6. Let the CDN handle caching based on the new URL
  return fetch(newRequest)
}

// Helper: simple Accept-Language parser
function parseAcceptLanguage(header) {
  return header
    .split(',')
    .map(part => part.split(';')[0].trim())
    .filter(Boolean)
}
```

Poin‑poin penting dalam kode:

* **Ekstraksi header** – Mengambil nilai `Accept-Language` dari permintaan masuk.  
* **Parsing** – Memecah header menjadi daftar bahasa terurut, mengabaikan bobot kualitas (`q`).  
* **Pemilihan bahasa yang didukung** – Mengiterasi