Mendapatkan persetujuan dari Google AdSense adalah pencapaian besar bagi setiap pemilik blog. Namun, tantangan sebenarnya bagi pengguna Static Site Generator (SSG) seperti Hugo adalah bagaimana cara memasang kode iklan tersebut agar muncul dengan rapi, efisien, dan tidak merusak struktur tema yang digunakan.
Banyak pemula merasa bingung saat harus menaruh script iklan di Hugo karena tidak ada sistem plugin sekali klik seperti di WordPress. Padahal, struktur folder Hugo yang transparan sebenarnya memudahkan kita untuk melakukan kustomisasi penuh, baik untuk iklan otomatis maupun penempatan iklan manual di tengah artikel.
Dalam tutorial ini, kita akan membahas cara pasang iklan Google Adsense di Hugo secara menyeluruh. Saya akan memandu Anda mulai dari integrasi kode dasar di bagian head hingga cara paling fleksibel menampilkan iklan di dalam konten menggunakan fitur Shortcode.
Persiapan dan Prasyarat #
Sebelum memulai, pastikan Anda telah menyiapkan hal-hal berikut agar proses integrasi berjalan lancar:
- Akses ke Dashboard Google AdSense yang sudah aktif atau dalam proses peninjauan.
- Akses ke direktori project Hugo Anda (lokal atau melalui repository).
- Tema Hugo yang mendukung kustomisasi partial layout (seperti Blowfish atau tema populer lainnya).
- Pemahaman dasar mengenai struktur folder Hugo (
layouts,static, dancontent).
Langkah Demi Langkah Cara Pasang Iklan Google Adsense di Hugo #
Ikuti langkah-langkah teknis berikut ini untuk mengintegrasikan AdSense ke dalam situs web statis Anda.
1. Mendapatkan Snippet Kode AdSense #
Masuk ke akun Google AdSense Anda, tambahkan situs web Anda, dan salin Code Snippet yang diberikan. Kode tersebut biasanya berbentuk script JavaScript seperti di bawah ini:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
crossorigin="anonymous"></script>2. Memasang Script ke Bagian Header Situs #
Agar Google dapat memverifikasi situs Anda dan menjalankan iklan otomatis, script tersebut harus berada di dalam tag <head>.
Di Hugo, Anda tidak boleh mengedit file di folder themes secara langsung. Sebaliknya, buatlah file baru di:
layouts/partials/extend_head.html (jika Anda menggunakan Blowfish) atau file partial header di tema Anda.
Mengapa di sini? Dengan menaruhnya di folder layouts root project, Hugo akan melakukan override terhadap file tema asli tanpa merusak kode bawaan vendor.
3. Mengatur File ads.txt untuk Keamanan #
Google mewajibkan file ads.txt untuk mencegah penipuan inventaris iklan.
- Buat file baru bernama
ads.txtdi dalam folderstatic/. - Tempelkan baris kode verifikasi yang diberikan oleh AdSense (contoh:
google.com, pub-xxxxxxxxxxxxxxxx, DIRECT, f08c47fec0942fa0).
Penempatan di folder static memastikan file ini dapat diakses langsung melalui domainanda.com/ads.txt setelah situs di-deploy.
4. Membuat Shortcode untuk Iklan di Dalam Artikel #
Ini adalah bagian terpenting dari cara pasang iklan Google Adsense di Hugo agar iklan tampil di tengah konten. Kita akan membuat shortcode khusus.
Buat file baru di: layouts/shortcodes/ads-in-article.html. Masukkan kode iklan unit (Display Ads) Anda di sana:
<div class="ad-container" style="margin: 20px 0; text-align: center;">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>5. Memanggil Iklan di File Markdown #
Sekarang, Anda bisa menentukan secara spesifik di paragraf mana iklan akan muncul. Buka salah satu file konten .md Anda dan masukkan kode berikut:
Ini adalah paragraf pembuka artikel saya.
{{< ads-in-article >}}
Ini adalah paragraf lanjutan setelah iklan.Mengapa Menggunakan Shortcode? #
Menggunakan Shortcode jauh lebih baik dibandingkan menanamkan kode iklan secara hardcode di dalam file layout single.html. Dengan shortcode, Anda memiliki kontrol penuh atas estetika artikel. Iklan tidak akan muncul secara sembarangan yang berpotensi merusak pengalaman membaca pengguna (UX).
Selain itu, metode ini memberikan fleksibilitas manajemen. Jika suatu saat Anda ingin berhenti menampilkan iklan atau menggantinya dengan penyedia lain, Anda cukup mengubah isi file ads-in-article.html tanpa harus menyisir ratusan file Markdown satu per satu. Jika file tersebut dikosongkan, area iklan akan hilang secara otomatis di seluruh artikel.
Dampak Terhadap Performa (LCP) #
Salah satu aspek penting dalam cara pasang iklan Google Adsense di Hugo adalah memahami pengaruhnya terhadap kecepatan situs. Karena Hugo adalah situs statis yang sangat cepat, penambahan script eksternal dari Google pasti akan menambah beban load.
Penggunaan atribut async pada script AdSense sangat krusial agar browser tidak menghentikan proses rendering halaman saat mengunduh script iklan. Selalu pantau nilai Largest Contentful Paint (LCP) Anda di Google PageSpeed Insights setelah memasang iklan untuk memastikan skor SEO Anda tetap terjaga.
Kesimpulan #
Memasang iklan di Hugo memerlukan pendekatan manual namun memberikan hasil yang sangat bersih dan terstruktur. Dengan memanfaatkan folder layouts/partials untuk header dan layouts/shortcodes untuk iklan di tengah artikel, Anda telah menerapkan praktik terbaik dalam pengembangan Hugo.
Troubleshooting Umum #
- Iklan Tidak Muncul: Pastikan status di dashboard AdSense adalah “Ready” dan Anda tidak sedang menggunakan AdBlocker saat mengecek situs.
- Error Shortcode: Pastikan penulisan
{{< ads-in-article >}}sudah benar dan file.htmlsudah ada di folder yang tepat. - File ads.txt 404: Pastikan file berada di root folder
static, bukan di dalam sub-folder lain.
Sudahkah Anda berhasil menerapkan cara pasang iklan Google Adsense di Hugo pada blog Anda? Jika Anda menemui kendala teknis atau memiliki tips tambahan, jangan ragu untuk berdiskusi di kolom komentar di bawah ini!
Next artikel: saya akan membuatkan tutorial tentang cara mengatur Lazy Loading pada iklan AdSense di Hugo agar skor PageSpeed Anda tetap 100.
