Cara Mengatasi Iframe Tidak Muncul atau Tidak Ter-render di Hugo dengan Shortcode RawHTML

Saat menggunakan Hugo, banyak pengguna mengalami masalah ketika menyisipkan <iframe> ke dalam konten artikel—namun iframe tersebut tidak muncul atau tidak ter-render sama sekali di halaman website.

Biasanya hal ini terjadi ketika kita menambahkan kode HTML langsung di dalam file Markdown (.md). Secara default, Hugo (terutama dengan konfigurasi Goldmark) membatasi atau menonaktifkan raw HTML demi alasan keamanan. Akibatnya, elemen seperti <iframe> akan diabaikan atau tidak diproses.

Masalah ini cukup sering ditemui, terutama ketika ingin menyematkan konten dari YouTube, Google Maps, atau widget pihak ketiga lainnya. Untungnya, ada solusi yang sederhana dan rapi tanpa perlu mengubah konfigurasi global Hugo.

Pada artikel ini, kita akan membahas cara mengatasi iframe yang tidak muncul di Hugo dengan menggunakan shortcode khusus.

Mengapa iframe Tidak Muncul?

#

Secara default, Hugo menggunakan Markdown renderer bernama Goldmark. Jika pengaturan unsafe tidak diaktifkan, maka HTML mentah (raw HTML) di dalam Markdown akan diblokir. Karena <iframe> termasuk elemen HTML mentah, maka ia tidak akan dirender.

Daripada mengubah konfigurasi global seperti:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

kita bisa menggunakan pendekatan yang lebih aman dan terkontrol: Shortcode.

Solusi: Menggunakan Shortcode rawhtml

#

1. Buat File Shortcode

#

Buat file berikut di dalam folder:

layouts/shortcodes/rawhtml.html

Isi dengan kode berikut:

<!-- raw html -->
{{.Inner}}

Shortcode ini berfungsi untuk memproses isi di dalamnya sebagai HTML mentah.

2. Cara Menggunakan Shortcode

#

Di dalam file Markdown artikel Anda, bungkus kode iframe dengan shortcode berikut:

{{< rawhtml >}}
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allowfullscreen>
</iframe>
{{< /rawhtml >}}

Dengan cara ini, Hugo akan merender isi iframe dengan benar tanpa perlu mengaktifkan unsafe = true.

Kenapa Menggunakan Shortcode Lebih Baik?

#

Beberapa keunggulan pendekatan ini:

• ✅ Tidak perlu mengubah konfigurasi global
• ✅ Lebih aman karena hanya HTML tertentu yang diproses
• ✅ Lebih rapi dan reusable
• ✅ Cocok untuk berbagai embed (YouTube, Google Maps, dsb)

Metode ini sangat direkomendasikan terutama jika website Anda memiliki banyak kontributor atau ingin menjaga keamanan konten tetap terkontrol.

FAQ

#

1. Kenapa iframe tetap tidak muncul setelah menggunakan shortcode?

#

Pastikan:

• File rawhtml.html berada di folder layouts/shortcodes/
• Penulisan shortcode tidak salah (huruf kecil semua)
• Tidak ada kesalahan syntax pada iframe

2. Apakah cara ini aman?

#

Ya, lebih aman dibanding mengaktifkan unsafe = true secara global. Dengan shortcode, hanya bagian tertentu saja yang diizinkan untuk memproses HTML mentah.

3. Apakah bisa digunakan untuk HTML selain iframe?

#

Bisa. Shortcode ini dapat digunakan untuk:

• Script embed
• Widget pihak ketiga
• Custom HTML layout
• Form eksternal

Namun tetap gunakan dengan bijak.

4. Apakah ada cara lain selain shortcode?

#

Ada, yaitu dengan mengaktifkan:

unsafe = true

Namun cara ini akan mengizinkan semua HTML mentah di seluruh konten, sehingga kurang direkomendasikan jika tidak benar-benar diperlukan.

Kesimpulan

#

Masalah iframe yang tidak ter-render di Hugo umumnya terjadi karena pembatasan HTML mentah oleh Goldmark. Solusi paling aman dan fleksibel adalah dengan membuat shortcode rawhtml.html dan membungkus iframe di dalamnya.

Dengan pendekatan ini, Anda tidak perlu mengubah konfigurasi global dan tetap bisa menyematkan berbagai konten eksternal dengan aman.

Jika artikel ini membantu, jangan ragu untuk memberikan vote atau feedback di kolom komentar Disqus. Dukungan Anda sangat berarti 🙌