Jika Anda merupakan seorang blogger yang menggunakan Hugo sebagai platform blogging Anda, memasang iklan dengan Google AdSense dapat menjadi langkah yang tepat untuk meningkatkan pendapatan dari blog Anda. Dalam artikel ini, kami akan memberikan panduan langkah demi langkah tentang cara memasang AdSense di Hugo, serta tips SEO yang dapat membantu Anda mengoptimalkan pendapatan dari iklan tersebut. Pada artikel ini juga memberikan tips SEO untuk membantu meningkatkan pendapatan dari iklan tersebut. Dengan mengikuti panduan ini, para blogger dapat memanfaatkan potensi pendapatan yang lebih besar melalui iklan AdSense di blog Hugo mereka.

Siapkan Akun Google Adsense

Langkah pertama dalam memasang AdSense di Hugo adalah mendaftar untuk mendapatkan akun AdSense dan menyetujui persyaratan yang ditetapkan oleh Google. Kunjungi situs web AdSense https://www.google.com/adsense dan ikuti langkah-langkah pendaftaran yang diberikan. Pastikan Anda membaca dan memahami kebijakan dan pedoman yang diberikan oleh Google untuk memastikan kepatuhan penuh dengan aturan yang berlaku dan pastikan bahwa akun Adsense anda sudah disetujui oleh pihak Google itu sendiri.

Setelah akun AdSense Anda disetujui, langkah berikutnya adalah membuat unit iklan yang akan ditampilkan di blog Anda. Masuk ke akun AdSense Anda dan pilih opsi “Iklan & Penempatan” di panel navigasi. Klik tombol “Buat iklan baru” dan ikuti panduan untuk membuat unit iklan sesuai dengan preferensi Anda. Pastikan Anda memilih jenis iklan yang paling sesuai dengan desain dan konten blog Anda. Salin kode adsense yang mirip seperti ca-pub-XXXXXXXXXX

Instalasi pada Hugo

  1. Setelah akun Google Adsense siap langkah selanjutnya adalah membuat file baru pada folder layouts/partials. Disini saya membuat file dengan nama adsense-script.html dan adsense.html.

sehingga struktur folder hugo akan seperti ini :

nama_website
|-- content
|-- public
|-- themes
|   `-- nama_tema
|       |-- archetypes
|       |-- assets
|       |-- config
|       |-- data
|       |-- i18n
|       |-- layouts
|       |   |-- partials
|       |   |   |-- adsense-script.html
|       |   |   |-- adsense.html
|       |   |   |-- head.html
|       |   |   |-- header.html
|       |   |   |-- sidebar.html
|       |   |   |-- footer.html
|       |   |   `-- script.html
|       |   |-- shortcodes
|       |   |-- taxonomy
|       |   |-- hero.html
|       |   |-- about.html
|       |   |-- 404.html
|       |   |-- index.html
|       |   `-- robots.txt
|       |-- resources
|       `-- static
`-- config.toml
  1. Salin kode beriku dan tempel pada file layouts/adsense-script.html
{{ with site.Params.google_adsense }}
<script>
  !function(){const e=document.createElement("script");e.async=!0,e.setAttribute("crossorigin","anonymous"),e.src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ . }}";let t=0;document.addEventListener("mousemove",function(){1==++t&&document.getElementsByTagName("HEAD").item(0).appendChild(e)}),window.onscroll=function(n){1==++t&&document.getElementsByTagName("HEAD").item(0).appendChild(e)},setTimeout(function(){0===t&&(t++,document.getElementsByTagName("HEAD").item(0).appendChild(e))},5e3)}();
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>
{{ end }}
  1. Salin juga kode beriku dan tempel pada file layouts/adsense.html
<!-- test -->
<ins
  class="adsbygoogle"
  style="display:block"
  data-ad-client="{{ site.Params.google_adsense }}"
  data-ad-slot="{{ .Slot }}"
  data-ad-format="{{ .Format | default `auto` }}"
  data-full-width-responsive="true"></ins>
  1. Buka folder layouts/shortcodes dan buat file dengan nama adsense.html kemudian salin dan tempelkan script di bawah ini.
<!-- test -->
<ins
  class="adsbygoogle"
  style="display:block"
  data-ad-client="{{ site.Params.google_adsense }}"
  data-ad-slot="{{ .Get `slot` }}"
  data-ad-format="{{ .Get `format` | default `auto` }}"
  data-full-width-responsive="true"></ins>
  1. Edit file config.toml dan tambahkan script di bawah ini.
[params]
    # google adsense, see https://www.google.com/adsense/
    google_adsense = "" # example: ca-pub-XXXXXXXXXX

Untuk yang menggunakan file config.yaml bisa menggunakan script berikut ini.

params:
    # google adsense, see https://www.google.com/adsense/
    google_adsense = "" # example: ca-pub-XXXXXXXXXX

Implementasi

Untuk penerapannya kalian bisa memanggilnya dengan cara menyalin script berikut dan menempelkannya pada website atau blog Hugo kalian.

<!-- google adsense -->
{{ partialCached "adsense-script.html" . }}

Jika ingin menerapkannya pada lokasi tertentu panggil parsial ini di sana.

{{ partial "adsense" (dict "Slot" "YOUR_SLOT_ID" "Format" "auto") }}

Penutup

Kesimpulannya memasang Google AdSense di platform blogging Hugo dapat menjadi langkah yang menguntungkan bagi para blogger yang ingin meningkatkan pendapatan dari blog mereka. Dalam artikel ini, kami memberikan panduan langkah demi langkah tentang cara memasang AdSense di Hugo, mulai dari mendaftar akun hingga menyisipkan kode iklan ke dalam tema. Selain itu, kami juga memberikan tips SEO yang dapat membantu meningkatkan pendapatan dari iklan tersebut.

Dengan mengoptimalkan pemasangan iklan AdSense dan mengikuti praktik SEO yang baik, para blogger dapat meningkatkan potensi pendapatan mereka melalui monetisasi blog dengan iklan. Penting untuk selalu mematuhi kebijakan dan pedoman yang ditetapkan oleh Google AdSense untuk memastikan kepatuhan yang tepat.

Dalam menjalankan program AdSense, penting untuk menciptakan pengalaman pengguna yang baik dan tidak mengganggu konten yang disajikan di blog. Menggunakan unit iklan yang relevan dengan konten dan desain blog juga akan membantu meningkatkan efektivitas iklan.

Dengan menerapkan panduan ini, para blogger di platform Hugo dapat mengoptimalkan pendapatan mereka melalui Google AdSense dan memanfaatkan potensi penuh dari monetisasi blog mereka.