Saat kita memulai membangun website bertemakan desain modern, gambar dan media seperti video, memainkan peran penting untuk memperkaya konten, menyampaikan informasi secara visual, serta meningkatkan pengalaman penugunjung pada website kita. Namun, menampilkan gambar atau media tidak cukup hanya dengan "memasukkan" file saja. Kita juga perlu memahami penggunaan dari tag HTML dengan benar, serta memastikan media yang digunakan ramah terhadap mesin pencari (SEO Friendly). Pada artikel ini, kita akan membahas bagaimana cara kita menampilkan gambar, menyematkan video, dan praktek terbaik SEO untuk konten media.

Menampilkan Gambar

Untuk menampilkan gambar dalam HTML, kita bisa menggunakan tag <img>. Tag ini bersifat self-closing (tanpa tag penutup) dan membutuhkan dua attribute penting di dalamnya yaitu src dan alt. Sebelum ke contoh penggunaan tag <img>, buat file bernama index.html didalam folder, serta masukkan gambar pada folder tersebut. Jika sudah, berikut contoh penggunaan tag img untuk menampilkan gambar ke browser.

<img src="mypicture.png" alt="picture from my computer" />

Mari kita bahas kode diatas.

• <img> tag pembuka sekaligus penutup.
• src menentukan URL atau path dari gambar.
• alt berfungsi sebagai deskripsi pada gambar jika gagal dimuat, dan juga penting untuk aksesibilitas serta SEO.

Dan juga, ada beberapa tips untuk menampiilkan gambar pada browser yang ramah untuk SEO. Diantara lainnya adalah.

1. Selalu gunakan format gambar yang optimal dengan ekstensi WebP atau png agar halaman cepat dimuat.
2. Berikan nama file gambar yang deskriptif seperti 'tips-html-seo.png'.
3. Jangan pernah sampai lupa mengisi attribute alt dengan deskripsi yang relevan dan alami.

Menampilkan Video

Kita juga dapat menampilkan video pada browser dengan menggunakan tag <video> tanpa perlu plugin tambahan. Sebelum kita lanjut ke contoh penggunaan dari tag <video>, tambahkan video ke folder yang dengan index.html. Berikut contoh penggunaan dari tag <video> untuk menampilkan video ke browser.

<video width="600" controls>
	<soruce src="myvideo.mp4" type="video/mp4">
	Your browser does not support the video tag.
</video>

Penjelasan dari kode diatas.

• <video> tag pembuka untuk menampilkan konten media berupa video.
• width berfungsi untuk mengatur lebar tampilan video dalam satuan piksel.
• controls berfungsi untuk menampilkan kontrol pemutar video standar seperti, tombol play/pause, volume, tombol fullscreen, dan lain-lain.
• <source> untuk mendefinisikan sumber video yang akan di tampilkan ke browser.
• Your browser does not support the video tag. teks akan ditampilkan jika browser dari pengguna tidak mendukung elemen video. Selain kita menampilkan video secara internal, kita bisa menampilkan video menggunakan media eksternal seperti platofrm Youtube menggunakan tag <iframe>. Berikut contohnya.

<iframe width="560" height="315" src="" 
  title="Tutorial HTML" frameborder="0" allowfullscreen>
</iframe>

Pada attribute <src, kalian dapat menambahkan URL video yang ingin ditampilkan.

Praktik Terbaik Media untuk SEO

Agar media konten yang ditampilkan tidak memperlambat loading website, perhatikan hal-hal berikut.

1. Optimasi ukuran file media sebelum ditampilkan ke browser.
2. Gunakan format file seperti WebP, png, MP4.
3. Gunakan tanda penghubung (-) dari pada spasi saat memberi nama pada file media.
4. Gunakan lazy loading (khusus gambar dan iframe) agar media dimuat hanya saat dibutuhkan saja. Contoh penggunaan lazy loading pada gambar.

<img src="tutorial-html.webp" alt="Tutorial HTML" loading="lazy"/>

Kesimpulan

Menggunakan gambar dan media dalam HTML bukan hanya soal tampilan saja, tetapi juga bagian penting dalam membangun pengalaman terbaik bagi pengguna yang berkunjung pada website kita. Dengan memahami cara kerja dari tag seperti <img>, <video>, dan <iframe>. Kita bisa membuat konten yang menarik, ringan, dan mudah di temukan oleh mesin pencari.

Terimakasih, sampai jumpa di artikel selanjutnya.