Apa itu iframe? Inilah Contoh Penggunaan & Fungsinya

2 min read

Apa itu iframe Inilah Contoh Penggunaan dan Fungsinya

Apa itu Iframe? IFrame adalah inline frame yang digunakan di dalam halaman web untuk memuat dokumen HTML lain di dalamnya.

Dokumen HTML ini juga dapat berisi JavaScript atau CSS yang dimuat pada saat tag iframe diuraikan oleh browser pengguna.

Pengguna WordPress sering menemukan iframe ketika mereka mencoba menanamkan sesuatu dari sumber eksternal ke situs WordPress mereka.

Di bawah ini adalah penjelasan lebih lanjut mengenai apa itu iframe dan bagaimana cara kerjanya.

Pengertian iframe

Apa itu Iframe? Iframe merupakan singkatan dari “inline frame,” segmen dari sintaks HTML.

Iframe umumnya diterapkan ketika menggunakan sumber daya dari satu situs web Anda sendiri tanpa membuat konten duplikat.

Pada dasarnya, iframe memungkinkan Anda untuk menyematkan situs web lain dalam kode situs web Anda, seperti halaman di dalam halaman.

Iframe juga bisa ditemukan pada video YouTube dengan tag iframe memuat pemutar video YouTube dengan ID yang disediakan dalam kode.

Iframe juga memiliki parameter lain yang ditentukan, seperti tinggi, lebar, bingkai, dll. Parameter ini akan digunakan oleh skrip yang memuat pemutar video YouTube.

Banyak situs web pihak ketiga lainnya dapat memberikan kode embed iframe kepada pengguna untuk memasukkan elemen tertentu di situs web.

Paling umum penyedia layanan analisis web, situs media sosial, dan situs berbagi video menawarkan kode embed pengguna dalam format iframe.

Untuk sebagian besar pengguna, iFrames bermanfaat karena menjaga pemisahan antara dokumen HTML utama (situs Anda) dan konten eksternal yang Anda muat ke dalamnya.

Iframe membantu karena dua alasan.

Pertama, Anda tidak perlu khawatir tentang memperbarui konten pihak ketiga yang ingin Anda tampilkan.

Mitra iklan Anda dapat mengubah promosi mereka, umpan Facebook Anda dapat melakukan refresh, dan Google Maps dapat menyesuaikan untuk perkembangan alamat baru.

Selain itu, menjaga pemisahan antara konten Anda dan situs lain dapat memberikan keamanan tambahan.

Anda tidak perlu khawatir mengimpor kerentanan atau kesalahan secara tidak sengaja dengan menambahkan kode pihak ketiga secara langsung ke file situs Anda.

Dampak Iframe ke SEO

Strategi SEO
Strategi SEO

Jika sahabat Qwords akan menggunakan konten dari situs web lain dengan iframe, Anda mungkin khawatir akan menurunkan peringkat SEO situs web Anda.

Iframe memang bisa saja mempengaruhi SEO atau Search Engine Optimizzation dan dampaknya mungkin saja bisa berakibat pada hal-hal di bawah ini :

  1. Pengindeksan situs web oleh robot pencarian akan terganggu ketika beralih ke frame.
  2. Beberapa browser tidak mendukung iframe karena sudah usang, atau hanya berfungsi dengan konten audio, dll.
  3. Terkena resiko sanksi. Sanksi mesin pencari dapat dikenakan ketika ada konten ilegal dalam frame.

Untuk menghindari kemungkinan kesalahpahaman dengan robot pencarian dan pengguna yang browsernya tidak mendukung fungsi ini.

Webmaster menyembunyikan iFrame dari pengindeksan dan menambahkan notifikasi yang sesuai dan akan ditampilkan jika window background tidak terbuka, menyarankan pengguna untuk memperbarui browser.

Baca juga: Cara Mengatasi ‘Your Connection Is Not Secure’ Pada Browser

Konten dari tag <noframes> ditampilkan di browser ketika tidak mendukung iFrame.

Pada saat yang sama, browser lain yang dapat memproses halaman iframe tidak memperhatikannya. Seharusnya deskripsi lengkap diungkapkan untuk menjaga pengguna di situs web.

Cara Menggunakan iFrame

Tujuan utama iFrame untuk sebagian besar pengguna WordPress adalah untuk menampilkan konten pihak ketiga di situs Anda. Iframe banyak digunakan pada :

1. Iklan

Banyak iklan sidebar dan banner sebenarnya adalah iFrames yang memungkinkan mitra iklan Anda dengan mudah menyediakan dan mempertahankan konten yang mereka bayarkan untuk ditampilkan di situs Anda.

2. Video Youtube

Kode embed YouTube menggunakan iFrame untuk menampilkan video yang dihosting pada platformnya di halaman Anda. Dengan menggunakan teknik ini, Anda tidak perlu khawatir tentang mengunggah video ke Perpustakaan Media.

3. Google Maps

Jika sahabat Qwords pernah memesan makanan dari restoran untuk pengiriman, Anda mungkin pernah melihat Google Maps iFrame saat memilih lokasi toko terdekat.

Sayangnya, Google telah mengganti ini dengan Maps API Key-nya, sehingga pengguna baru tidak dapat menyematkan peta melalui iFrames.

4. Posting media sosial

Salah satu cara untuk menampilkan posting media sosial terbaru Anda adalah melalui iFrame.

Cara ini nyaman karena mereka akan diperbarui secara otomatis untuk memasukkan suka, komentar, dan elemen dinamis lainnya.

Lalu bagaimana cara menggunakan iframe? Sahabat Qwords dapat menentukan bingkai inline dengan tag HTML <iframe>.

Tag <iframe> tulislah yang tidak terkait dengan tag <frameset>, sebagai gantinya, tag itu dapat muncul di mana saja di dokumen Anda. Tag <iframe> mendefinisikan rectangular region di dalam dokumen tempat browser dapat menampilkan dokumen terpisah, termasuk scrollbar dan batas.

Atribut src digunakan untuk menentukan URL dokumen yang menempati bingkai inline.

Baca juga: Panduan Dasar Belajar HTML Untuk Pemula

Setelah mengetahui definisi apa itu iframe memang cukup rumit, ya! Dengan begitu banyak cara yang berguna untuk menghubungkan dan berbagi informasi dengan orang-orang di seluruh web.

Tidak masalah jika Anda ingin menarik konten pihak ketiga seperti video YouTube ke situs Anda sendiri.

Nah, agar kinerja kecepatan loading website bisa tetap terjaga jangan lupa gunakan paket Business Cloud Hosting dari Qwords.com, yang sudah didukung oleh penyimpanan berbasis SSD (Solid State Drive) serta teknologi LiteSpeed API.

Bagaimana menrut Anda? Tertarik untuk mencobanya?

Semoga bermanfaat.

Leave a Reply

Your email address will not be published. Required fields are marked *