Cara Memasang Google AdSense di Hugo: Auto Cuan Tanpa Plugin

deuxly.id

deuxly.id - Cara Pasang Adsense di Hugo: Punya blog yang loadingnya ngebut kayak Hugo itu rasanya kurang lengkap kalau belum bisa ngasilin uang jajan. Salah satu cara paling umum buat monetisasi blog ya pakai Google AdSense.

Tapi, beda sama WordPress yang tinggal install plugin Site Kit, di Hugo kita harus mainin kode pakai cara manual. Tenang, ga susah. Justru ini kelebihannya hugo: Kita punya kontrol penuh. Iklan cuma muncul di tempat yang kita mau, ga bakal bikin layout berantakan.

Di tutorial ini, deuxly bakal bahas cara memasang kode AdSense (Auto Ads) di Hugo pakai metode yang paling rapi dan aman (ngga bakal hilang kalo temanya diupdate).

Ini kesalahan pemula termasuk aku sendiri. Jangan pernah nempelin kode AdSense langsung di dalam folder themes/PaperMod/layouts/.... Kenapa? Karena kalau besok temanya kamu update (git pull), kode iklanmu bakal tertimpa dan hilang.

Solusinya? Kita pakai fitur Override Layout. Kita bakal bikin tiruan file layout di folder root proyek kita.

Dapatkan Kode Script AdSense

deuxly.id

Login ke Dashboard AdSense kamu, lalu masuk ke menu Ads > Overview > Get Code. Kamu bakal dapat kode JavaScript kayak gini:

<script async src="[https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX](https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX)"
     crossorigin="anonymous"></script>

Salin kode itu. Simpan dulu di Notepad.

Buat Partial Khusus Iklan

Biar kodingan kita rapi, kita jangan tempel script panjang itu langsung ke head. Kita bungkus dulu dalam satu file kecil Partial.

1. Buka VS Code.
2. Masuk ke folder layouts (yang ada di root, bukan di dalam themes).
3. Buat folder baru bernama partials.
4. Di dalamnya, buat file baru: adsense_script.html.
5. Paste kode dari Langkah 1 ke situ.

deuxly.id

Strukturnya jadi gini:

my-hugo-site/
├── content/
├── layouts/
│   └── partials/
│       └── adsense_script.html  <-- Kode iklan di sini
├── themes/

Suntikkan file ke dalam head Website

Sekarang kita tinggal panggil file adsense_script.html tadi supaya muncul di setiap halaman website.

Caranya tergantung tema yang kamu pakai.

Opsi A: Pengguna PaperMod (Recommended)

Tema PaperMod punya fitur canggih namanya extend_head.html. Ini adalah pintu khusus buat nambahin kode tanpa ngerusak layout asli.

1. Di folder layouts/partials/, buat file baru lagi bernama extend_head.html.
2. Isi file itu dengan kode di bawah ini:

{{ if not .Site.IsServer }}
    {{ partial "adsense_script.html" . }}
{{ end }}

Penjelasan Logic:

• {{ if not .Site.IsServer }}: Ini trik cerdas ala Deuxly. Kode iklan cuma muncul di website asli (live), tapi NGGA AKAN MUNCUL di Localhost (hugo server).
• Biar statistik AdSense ga rusak gara-gara kamu nge-refresh halaman sendiri pas lagi ngedit artikel.

Opsi B: Pengguna Tema Lain (Universal)

Kalau temamu gak punya extend_head, kita harus timpa file head.html aslinya.

deuxly.id

1. Cari file head.html di dalam folder themes/NAMA-TEMA/layouts/partials/.
2. Copy file itu.
3. Paste ke folder layouts/partials/ di root proyekmu.
4. Edit file hasil copasan itu, lalu sisipin kode ini tepat sebelum tag penutup </head>:

{{ if not .Site.IsServer }}
    {{ partial "adsense_script.html" . }}
{{ end }}

Jangan Lupa ads.txt

Ini sering kelupaan dan bikin akun kena peringatan Earnings at risk. Hugo itu gampang aja kalo soal file statis.

1. Download file ads.txt dari dashboard AdSense.
2. Taro file itu di folder static/.

my-hugo-site/
├── static/
│   └── ads.txt

Pas kamu build (hugo --minify), file itu bakalan otomatis ada di namadomain.com/ads.txt. Beres.

Cara Pasang Unit Iklan Manual

Kalau kamu ga suka fitur Auto Ads Google Adsense yang suka muncul sembarangan, layout-nya berantakan, dan mau pasang iklan di tengah artikel atau di bawah judul, kita bisa bikin pakai Shortcode.

1. Buat file layouts/shortcodes/iklan_tengah.html.
2. Isi dengan kode unit iklan manualmu yang bisa diambil dari AdSense > By ad unit > Display ads.
3. Pas nulis artikel Markdown, tinggal panggil begini:

Paragraf pertama artikel...

{{ < iklan tengah > }}

Paragraf kedua...

Kesimpulan

Memasang AdSense di Hugo itu melatih kita buat ngerti sama struktur website statis.

• Pakai folder layouts/partials biar rapi.
• Pakai logika if not .Site.IsServer biar aman di localhost.
• Pakai static/ buat ads.txt.

Sekarang blog Hugomu udah siap dapet cuan. Ingat rumus biar penghasilan di Google AdSense itu gede, website cepat + konten bermanfaat dan Menerapkan E-E-A-T = Click Through Rate (CTR) tinggi.