Apa Itu Mixed Content? Apa Pengaruhnya Pada SEO?

Mixed Content adalah saat halaman website dengan koneksi HTTPS (secure) mengambil resource yang berasal dari koneksi HTTP (non-secure), meskipun hanya 1 resource atau 1 content.

Resource ini dapat berupa image, file CSS, file JS, file XML, iframe, video, dll.

Halaman yang dibuka dari koneksi HTTPS dianggap aman dari serangan sniffer atau man-in-the-middle. Koneksi ini terenkripsi dan memiliki autentikasi. Jadi tidak ada yang dapat mengintip data trafik Anda.

Koneksi secure ini cukup penting pada website yang memiliki fitur login, pengunaan password dan data pembayaran. Keamanan visitor lebih terjamin karena membuka situs yang tepat dan menggunakan koneksi HTTPS.

Ketika website dengan koneksi HTTPS mengambil resource atau konten dari koneksi HTTP, resource ini dapat menjadi titik lemah halaman website tersebut dan dapat dieksploitasi keamanannya.

Maka dari itu kebanyakan browser yang kita gunakan sekarang akan menampilkan pesan peringatan mixed content jika kita mengakses halaman semacam ini.

Contoh Mixed Content Warning

Ini adalah Contoh Halaman Mixed Content yang sudah diberi non-secure konten berupa sebuah image dan sebuah file CSS (tidak berbahaya). Kita coba akses halaman tersebut di browser dan lihat seperti apa warning yang ditampilkan.

Warning berupa icon perisai bertanda merah. Jika icon tersebut diklik, ada keterangan bahwa insecure content telah diblok (tidak ditampilkan). Terdapat juga pilihan Load unsafe scripts untuk tetap membuka non-secure content di halaman ini.

Note: Tampilan dari browser selain Chrome dapat berbeda. Namun kurang lebih konsepnya sama.

Non-secure content yang pasif berupa image, video atau audio masih dapat ditampilkan. Namun jika sudah berupa file yang dapat secara aktif memanipulasi halaman website seperti JS, CSS, iframe, flash, object atau bentuk code script lainnya akan diblok.

Beberapa browser ini tetap memberi kita pilihan untuk unblock content tersebut. Non-secure content akan tetap ditampilkan atau dijalankan. Namun dengan resiko yang akan kita tanggung sendiri pastinya.

Jika kita memilih untuk unblock konten non-secure tersebut, browser akan menampilkan warning lain, menyatakan kalau halaman tersebut tidak aman (Not Secure).

Pengaruh Mixed Content Terhadap SEO

Mixed content berpengaruh pada user experience:

• Pesan warning mengenai mixed content yang muncul browser dapat mengurangi rasa percaya user pada website yang dikunjungi.
• Resource penting yang diblok oleh browser dapat merubah tampilan halaman website atau tidak dapat menyajikan konten tertentu bagi user.

Jika keamanan data user tidak aman, user tidak mendapatkan content yang dicari, atau user tidak dapat “mengonsumsi” konten seperti yang seharusnya, halaman website tersebut menjadi tidak relevan bagi user.

Hal ini dapat dibaca oleh search engine sebagai sinyal untuk tidak menempatkan halaman tersebut di posisi atas pencarian.

Rank di search engine berpengaruh ke jumlah trafik, page view, ad view dan penjualan di website bukan?

Note: Menurut kabar, perlahan mulai Desember 2019 browser Chrome akan memblok semua mixed content secara default.

Cara Menemukan Mixed Content di Website

Untuk menemukan mixed content, kita harus melakukan crawling (scan) pada website. Kita melakukan scan seluruh halaman dan konten yang ada pada website. Kemudian identifikasi halaman mana yang memiliki non-secure content.

Saya menemukan ada 2 tools yang menurut saya cocok untuk tugas ini.

1. Missing Padlock – SSL Checker (Free)

Tools ini memang spesifik untuk menemukan mixed content. Cukup dengan membuka websitenya dan masukkan URL website anda di kolom yang disediakan, kemudian click Crawl My Site. Tools ini akan melakuakn crawling beberapa saat.

Saat sudah selesai, kita bisa melihat langsung hasilnya pada tab Active Mixed Content dan Passive Mixed Content. Kita bisa langsung tahu halaman apa dan resource mana yang berupa non-secure content.

2. Screaming Frog (Free and Paid)

Screaming Frog adalah tools untuk melakukan crawling website secara umum. Tools yang sudah familiar bagi para pegiat SEO ini merupakan desktop application, harus download dulu dan diinstal. Jadi tidak seperti Missing Padlock yang hanya perlu diakses webnya melalui browser.

Hasil crawling untuk menampilkan halaman mixed content ada pada tab Reports > Insecure Content.

Report ini berupa worksheet yang kita download. Disana ada daftar halaman yang berupa mixed content. Sayangnya kita harus mengecek secara manual pada halaman-halaman ini mana resource yang merupakan non-secure content. Anda dapat cek dengan fitur Inspect pada browser.

Cara Memperbaiki Mixed Content

Isu mixed content dapat diperbaiki dengan mengganti semua resource atau content yang diambil dari HTTP menjadi HTTPS. Sederhananya, update semua link resource yang mengandung http:// menjadi link https://. Dengan catatan bahwa resourcenya memang sudah tersedia di URL https://.

Jika resource tidak tersedia di https:// lebih baik jangan gunakan resource tersebut sama sekali. Atau pindahkan resource tersebut ke secure website (domain yang sudah pakai https://) dan kemudian baru ganti linknya.

Misal kita memiliki file CSS yang diambil dari koneksi HTTP seperti ini:

<link rel="stylesheet" href="http://mikhailnasa.com/non-secure.css" type="text/css"/>

Setelah kita yakin kalau file tersebut memang dapat kita panggil dengan dari URL https, maka ganti url http tadi menjadi https. Seperti ini:

<link rel="stylesheet" href="https://mikhailnasa.com/non-secure.css" type="text/css"/>

Jika resource tersebut tidak ada di koneksi https namun kita tetap mengganti URLnya, resource tidak akan terbuka di halaman website.

Memang kita harus tangani ini secara manual, alias ganti semua URL resource http yang ada di website kita satu-per-satu. Tapi demi user experience yang lebih baik saya yakin pasti membuahkan hasil.

Jika ada yang tahu cara ganti URL secara bulk otomatis silakan komentar di bawah. I would love to know that.