Membuat IFRAME Menjadi Lebih SEO Friendly dan 100% Responsive

    Anda para web designer pasti sudah tidak asing lagi dengan bahasa pemrograman HTML. Salah satu kode yang ada dalam HTML adalah IFRAME.  Iframe, merupakan sebuah tag dari HTML yang berfungsi untuk menampilkan sebuah halaman dari web lain. Dengan kata lain, anda dapat menampilkan web lain di dalam web anda.

    Terkadang, saat memasang Iframe di blog, ada saja masalah-masalah baru yang muncul, diantaranya yaitu Iframe yang terpotong alias tidak responsive, dan menurunkan skor SEO blog di chkme dan tool pengecek skor SEO lainnya.

    Nah kali ini saya ingin sedikit berbagi tips bagaimana cara supaya Iframe tadi menjadi responsif (mengikuti ukuran lebar layar) dan menjadi lebih SEO dari sebelumnya. Langsung saja silakan ikuti 2 langkah berikut ini...

    Membuat Iframe Menjadi Responsive


    Pertama, silakan anda lihat terlebih dahulu tag Iframe anda. Contohnya seperti ini:

    <iframe src="https://blog.kodejarwo.com/" />

    Kemudian, tambahkan atribut width dengan value 100% di dalamnya, sehingga berbentuk seperti ini:

    <iframe width="100%" src="https://blog.kodejarwo.com" />

    Simpan dan lihat hasilnya. Cara diatas merupakan cara manual, anda harus memasukkan atribut width tadi ke semua tag secara manual satu per satu. Bagi yang ingin otomatis, silakan anda buka Edit HTML, cari kode </head> atau <head/>, lalu masukkan kode ini tepat diatasnya.

    <style>
     iframe {width:100%}
    </style>

    Simpan template dan lihat hasilnya.

    Membuat Iframe Menjadi SEO Friendly


    Seperti biasa, buka Edit HTML, lalu cari kode berikut ini:

    <iframe

    Ganti semua kode tersebut menjadi seperti ini:

    <object

    Bila selesai, cari lagi kode berikut:

    </iframe>

    Setelah itu, ganti semuanya menjadi seperti ini:

    </object>

    Simpan template dan lihat kembali skor SEO anda.

    Saya yakin, setelah melakukan 2 cara diatas skor SEO blog anda menjadi meningkat dan Iframe menjadi responsive 100%, sehingga ia mengikuti berapapun ukuran dari lebar layar. Saya pun menggunakan cara ini pada blog DEMO template saya yang bernama Template Jarwo.