Ini Dia! Cara Mengatasi Mixed Content Setelah Migrasi HTTPS

Udah berhasil migrasi ke HTTPS dan lihat ikon gembok hijau muncul di browser? Rasanya memang bikin lega. Tapi kalau tiba-tiba muncul peringatan Not Secure atau beberapa gambar malah nggak tampil, bisa jadi websitemu mengalami mixed content. Apa sih itu? Tenang aja, artikel ini bakal membahas cara mengatasi mixed content setelah migrasi HTTPS dengan langkah yang simpel dan mudah dipahami, bahkan kalau kamu bukan anak IT.

Apa Sih Mixed Content Itu? (Biar Nggak Gagal Paham)

Sebelum masuk ke solusi, penting banget buat tahu dulu apa sih mixed content itu biar kamu nggak gagal paham.

Mixed content terjadi ketika sebuah website sudah menggunakan HTTPS, tetapi masih memuat sebagian elemen dari sumber HTTP. Jadi meskipun alamat website kamu sudah diawali dengan “https://”, ternyata masih ada gambar, script, stylesheet, video, atau resource lain yang diambil dari koneksi yang belum aman.

Kalau diibaratkan, website kamu sudah pakai outfit kece buat kondangan, tapi sepatunya masih jebol. Dari luar kelihatan keren, tapi tetap ada bagian yang bikin keseluruhan penampilan jadi bermasalah.

Baca Juga: Cloaking SEO: Trik Red Flag yang Bikin Website Kamu Gaib!

Padahal HTTPS bekerja dengan teknologi enkripsi SSL/TLS yang bertujuan menjaga data pengguna tetap aman selama proses transfer data. Ketika masih ada resource HTTP yang ikut dimuat, celah keamanan tetap terbuka dan browser menganggap website belum sepenuhnya aman.

Dari sisi SEO, mixed content juga bisa jadi masalah karena:

• Mengurangi manfaat ranking HTTPS dari Google.
• Menyebabkan layout atau fungsi website rusak karena resource tertentu diblokir browser.
• Menurunkan kepercayaan pengunjung karena ikon gembok hilang atau muncul peringatan keamanan.

Yang bikin makin ngeselin, browser biasanya baru memberi peringatan setelah resource tidak aman tersebut sudah terlanjur dimuat.

Baca Juga: Bandwidth Limit Exceeded? Intip Tips Hemat Kuota Hosting!

Jenis-Jenis Mixed Content HTTPS

Mixed content sendiri secara umum dibagi menjadi dua jenis, yaitu passive mixed content dan active mixed content.

Passive Mixed Content

Passive mixed content biasanya berupa:

• Gambar
• Audio
• Video

Jenis ini memang tidak berinteraksi langsung dengan keseluruhan halaman website. Risiko keamanannya lebih rendah dibanding active mixed content, tetapi bukan berarti aman-aman saja.

Misalnya, pihak tidak bertanggung jawab bisa:

• Mengganti gambar produk dengan gambar lain.
• Mengubah tombol menjadi menyesatkan.
• Menampilkan konten yang tidak pantas.
• Melacak aktivitas pengunjung melalui resource yang dimuat.

Karena itu, browser modern mulai membatasi bahkan memblokir beberapa jenis passive mixed content.

Active Mixed Content

Nah, kalau yang ini level bahayanya jauh lebih tinggi.

Contohnya meliputi:

• JavaScript
• CSS
• Iframe
• File script lainnya

Karena resource tersebut bisa memengaruhi seluruh halaman website, penyerang berpotensi:

• Mengubah isi halaman.
• Mencuri data login pengguna.
• Mengambil session cookie.
• Mengalihkan pengunjung ke website lain.

Makanya hampir semua browser modern langsung memblokir active mixed content secara default.

Kalau website kamu mengalami layout berantakan setelah migrasi HTTPS, kemungkinan besar penyebabnya ada di sini.

Apa yang Menyebabkan Mixed Content?

Setelah berhasil install sertifikat SSL, banyak pemilik website mengira semuanya selesai. Padahal, proses migrasi HTTPS biasanya masih menyisakan beberapa URL lama yang belum diperbarui.

Berikut penyebab mixed content yang paling sering ditemukan:

Hardcoded HTTP URL

Ini salah satu biang kerok paling umum.

Contohnya:

<img src="http://domainkamu.com/gambar.jpg">

Karena URL ditulis manual menggunakan HTTP, browser akan menganggap resource tersebut tidak aman.

File Theme atau Template

Banyak tema website yang masih menyimpan URL HTTP pada:

• Background image
• Font
• CSS
• JavaScript

Masalah ini cukup sering ditemukan pada website WordPress.

Plugin atau Extension

Beberapa plugin masih memanggil file dari alamat HTTP, terutama plugin lama yang sudah jarang diperbarui.

Embed dari Pihak Ketiga

Misalnya:

• YouTube
• Google Maps
• Widget eksternal
• Font CDN

Kalau kode embed masih menggunakan HTTP, mixed content bisa langsung muncul.

URL yang Tersimpan di Database

Website berbasis CMS seperti WordPress sering menyimpan URL absolut di database.

Saat migrasi HTTPS dilakukan, URL lama tersebut tetap tersimpan sehingga browser masih memanggil resource melalui HTTP.

Canonical dan Hreflang

Bagian ini sering terlupakan karena tidak terlihat langsung di halaman website.

Padahal canonical tag yang masih menggunakan HTTP bisa mengganggu proses migrasi SEO ke HTTPS.

Cara Mengatasi Mixed Content Setelah Migrasi HTTPS

Nah, sekarang masuk ke bagian yang paling ditunggu: cara mengatasi mixed content setelah migrasi HTTPS.

Step 1: Cari Semua Mixed Content

Sebelum memperbaiki, kamu harus tahu dulu sumber masalahnya.

Gunakan Browser Console

Cara paling cepat:

1. Buka website menggunakan Google Chrome.
2. Tekan F12.
3. Pilih tab Console.
4. Refresh halaman.

Kalau ada mixed content, biasanya akan muncul pesan seperti:

Mixed Content: The page was loaded over HTTPS but requested an insecure resource.

Dari sini kamu bisa melihat URL mana yang masih menggunakan HTTP.

Gunakan Tool Scanner

Kalau website kamu punya ratusan halaman, mengecek satu per satu jelas bikin pusing.

Kamu bisa menggunakan:

• Screaming Frog SEO Spider
• JitBit SSL Checker
• Google Search Console
• Why No Padlock

Tool tersebut bisa membantu menemukan mixed content secara lebih cepat dan menyeluruh.

Step 2: Force HTTPS Melalui .htaccess

Salah satu solusi paling efektif adalah membuat redirect otomatis dari HTTP ke HTTPS.

Tambahkan kode berikut ke file .htaccess:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]

Dengan cara ini, semua permintaan HTTP akan langsung diarahkan ke versi HTTPS.

Step 3: Tambahkan Content Security Policy (CSP)

Sebagai lapisan keamanan tambahan, kamu bisa menambahkan header berikut:

<IfModule mod_headers.c>
Header always set Content-Security-Policy "upgrade-insecure-requests"
</IfModule>

Fungsi CSP ini adalah memerintahkan browser untuk otomatis mengubah request HTTP menjadi HTTPS sebelum resource dimuat.

Praktis banget buat menangani URL lama yang masih tersisa.

Step 4: Update URL di WordPress

Kalau website kamu menggunakan WordPress, lakukan search and replace URL lama.

Caranya:

1. Backup database terlebih dahulu.
2. Install plugin Better Search Replace.
3. Cari URL HTTP lama.
4. Ganti menjadi HTTPS.
5. Jalankan proses replacement.

Jangan lupa cek juga menu:

Settings → General

Pastikan:

• WordPress Address menggunakan HTTPS.
• Site Address menggunakan HTTPS.

Step 5: Periksa Theme dan Plugin

Buka File Manager di cPanel lalu cek:

• header.php
• footer.php
• functions.php
• file CSS
• file JavaScript

Cari semua URL yang masih menggunakan HTTP lalu ubah menjadi HTTPS.

Ini memang agak manual, tapi sering jadi solusi terakhir yang ampuh.

Step 6: Perbarui Embed Pihak Ketiga

Pastikan seluruh layanan eksternal sudah menggunakan HTTPS, seperti:

• YouTube
• Google Maps
• Google Fonts
• CDN
• Script Analytics
• Jaringan iklan

Untungnya hampir semua layanan modern saat ini sudah mendukung HTTPS.

Step 7: Verifikasi Hasilnya

Setelah semua diperbaiki:

• Hapus cache browser.
• Hapus cache website.
• Buka website kembali.
• Cek apakah ikon gembok sudah muncul.
• Periksa Console untuk memastikan tidak ada warning baru.

Kalau sudah bersih, berarti migrasi HTTPS kamu sukses.

Cara Mencegah Mixed Content Terulang Lagi

Daripada memperbaiki masalah yang sama berkali-kali, lebih baik mencegahnya dari awal.

Beberapa tips yang bisa kamu lakukan:

• Gunakan URL relatif untuk resource internal.
• Pastikan CMS sudah dikonfigurasi menggunakan HTTPS.
• Pertahankan header CSP sebagai pengaman.
• Audit plugin dan tema sebelum dipasang.
• Lakukan pengecekan berkala menggunakan scanner SEO.

Dengan begitu, keamanan website tetap terjaga meskipun ada update atau perubahan di masa depan.

Checklist Migrasi HTTPS yang SEO-Friendly

Supaya migrasi HTTPS benar-benar tuntas, pastikan checklist berikut sudah beres:

• Install SSL certificate.
• Tambahkan redirect 301 HTTP ke HTTPS.
• Perbaiki seluruh mixed content.
• Update canonical tag ke HTTPS.
• Perbarui XML sitemap.
• Update robots.txt.
• Tambahkan properti HTTPS di Google Search Console.
• Update Google Analytics.
• Perbarui seluruh internal link.
• Pastikan CDN dan layanan eksternal mendukung HTTPS.
• Update URL website pada profil media sosial dan direktori bisnis.
• Pantau Search Console untuk mendeteksi error crawl.

Kesimpulan

Mixed content memang jadi masalah yang cukup sering muncul setelah install sertifikat SSL dan migrasi HTTPS. Untungnya, penyebabnya relatif mudah ditemukan dan diperbaiki, mulai dari URL yang masih menggunakan HTTP, plugin lama, hingga embed pihak ketiga yang belum diperbarui. 

Dengan menerapkan cara mengatasi mixed content setelah migrasi HTTPS yang tepat, kamu bisa menjaga keamanan website, meningkatkan kepercayaan pengunjung, sekaligus memastikan performa SEO tetap optimal.

Kalau kamu sedang membangun website baru atau ingin migrasi hosting yang lebih praktis, kamu juga bisa mempertimbangkan layanan Hosting Gratis dari Diskon.com. Selain ramah buat pemula, layanan ini cocok untuk belajar mengelola website tanpa harus langsung keluar biaya besar di awal.