Mengatur SEO Situs Web Multi Bahasa dengan Hugo
Apa yang harus dilakukan dengan `canonical`, `lang`, dan `hreflang`
Men-translate situs web Hugo dapat meningkatkan peringkat Google dan Bing Anda - tetapi hanya jika konten yang diterjemahkan berkualitas tinggi, dilokalisasi, dan dirancang dengan benar untuk SEO multibahasa.
Halaman yang dilokalisasi (tidak hanya diterjemahkan, tetapi disesuaikan secara budaya) sering kali mengurangi tingkat keluar (bounce rate), meningkatkan waktu kunjungan, dan meningkatkan konversi. Ini adalah sinyal perilaku pengguna yang dapat secara positif memengaruhi peringkat SEO Anda.
Hugo adalah generator situs web statis. Secara intinya, ia mengubah file Markdown menjadi halaman HTML dengan cara yang sangat dapat dikonfigurasi dan cukup cepat. Untuk detailnya, silakan lihat di sini Hugo Cheat Sheet, Anda juga dapat menjelajahi daftar artikel terkait Hugo di bagian bawah halaman ini.
Pertanyaan utama: Apakah Anda Harus Menerjemahkan untuk SEO?
Skenario | Terjemahan Membantu SEO? | Catatan |
---|---|---|
Terjemahan manusia + dilokalisasi + terstruktur untuk SEO | ✅ Ya, manfaat kuat | Opsi terbaik |
Terjemahan AI berkualitas tinggi + diedit + hreflang | ✅ Potensial | Dapat berperingkat jika kualitasnya baik |
Terjemahan otomatis saja + canonical | ❌ Tidak | Tidak akan berperingkat — hanya digunakan untuk UX |
Terjemahan otomatis + tidak ada canonical atau hreflang | ⚠️ Risiko | Mungkin memicu sanksi duplikasi |
HTML yang Diperlukan untuk Situs dengan Terjemahan Literal (Otomatis)
- Setiap halaman harus memiliki atribut
lang
dalam taghtml
, misalnya:
<html lang="de">
- Setiap halaman harus memiliki daftar tautan alternatif untuk halaman ini dalam bahasa lain, misalnya, HTML berikut menggambarkan tautan alternatif untuk halaman yang sama atau serupa dalam tiga bahasa:
<link rel="alternate" hreflang="en" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">
<link rel="alternate" hreflang="de" href="https://www.glukhov.org/de/post/2025/10/multi-language-website-seo-with-hugo/">
<link rel="alternate" hreflang="ru" href="https://www.glukhov.org/ru/post/2025/10/multi-language-website-seo-with-hugo/">
- Setiap halaman situs web yang diterjemahkan harus menentukan URL canonical untuk halaman ini (yang satu di bahasa asli atau bahasa pertama), seperti:
<link rel="canonical" href="https://www.glukhov.org/post/2025/10/multi-language-website-seo-with-hugo/">
Ini akan memberi tahu mesin pencari untuk mengabaikan indeks halaman non-canonical. Beberapa mesin pencari tentu saja dapat mengabaikan ini, dan mengindeks semua halaman.
Untuk halaman web yang diterjemahkan secara profesional / manual
Tidak menentukan <link rel="canonical"
dapat menyebabkan mesin pencari memberikan sanksi duplikasi.
Namun, jika Anda menerjemahkan halaman situs web Anda secara manual, atau memesan penerjemahan profesional, Anda dapat berharap mesin pencari akan menerima halaman non-canonical Anda sebagai halaman asli.
Template Hugo untuk Situs Web yang Dilokalisasi
Kita harus ingat bahwa tema situs web Hugo mungkin sudah mendukung semua ini.
<html lang=…
Buka file layouts/_default/baseof.html
baik di folder situs web Hugo Anda atau folder tema Anda dan pastikan ada sesuatu seperti:
<!DOCTYPE html>
<html class="no-js" lang="{{ .Site.Language.Lang }}">
<head>
...
{{ partial "seo-localise.html" . }}
</head>
...
<link rel=“alternate” hreflang= dan <link rel=“canonical”
Sekarang buka file layouts/partials/seo-localise.html
dan masukkan kode template HTML berikut:
{{ $defaultLang := .Site.Params.defaultContentLanguage | default "en" }}
{{ $canonical := .Permalink }}
{{ if .IsTranslated }}
{{ $original := .Translations.GetByLang $defaultLang }}
{{ if $original }}
{{ $canonical = $original.Permalink }}
{{ end }}
{{ end }}
<!-- Canonical URL -->
<link rel="canonical" href="{{ $canonical }}">
<!-- Hreflang Alternate Tags -->
{{ range .AllTranslations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}
Jika Anda menerjemahkan situs web Anda secara manual, kode ini mungkin terlihat seperti:
{{ $canonical := .Permalink }}
<!-- Canonical URL -->
<link rel="canonical" href="{{ $canonical }}">
<!-- Hreflang Alternate Tags -->
{{ range .AllTranslations }}
<link rel="alternate" hreflang="{{ .Lang }}" href="{{ .Permalink }}">
{{ end }}
config.toml
Di file config.toml
Anda, pastikan Anda mengatur:
# konfigurasi bahasa pada situs web Anda
defaultContentLanguage = "en"
[languages]
[languages.en]
weight = 1
languageName = "English"
[languages.es]
weight = 2
languageName = "Español"
[languages.fr]
weight = 3
languageName = "Français"
Atur di atas sesuai dengan bahasa situs Anda.
Sekarang jalankan perintah hugo
untuk menghasilkan situs web, lalu hugo serve
untuk menjalankan host situs web pengembang, buka situs web dan lihat sumber halaman.
Pastikan semua tag <html>
dan <link>
memiliki atribut yang tepat.
Tautan yang Berguna: Generator Situs Web Statis Hugo
- Hugo Cheat Sheet - perintah paling berguna
- Mengirimkan Situs Web Hugo ke AWS S3
- Menggunakan Gitea Actions untuk Mengirimkan Situs Web Hugo ke AWS S3
- Menambahkan Markup Data Terstruktur ke Hugo
- Mengirimkan Form Google di Situs Web Hugo
- Tema Mainroad Hugo - pengelolaan gambar
- Tema Terpopuler untuk Hugo
- Cara Menyimpan Gambar Thumbnail di Folder Bundle Halaman untuk Situs Web Hugo dengan Tema Mainroad
- Hugo quickstart: https://gohugo.io/getting-started/quick-start/