Sebelum mengikuti tutorial ini sebaiknya pahami dulu Apa Itu Tag HTML dan Fungsinya untuk Blog dan Cara Mengetahui URL Gambar. Jangan asal ngikut saja tanpa pengetahuan yang memadai
Meskipun anda sudah mengupload sebuah gambar ke situs file sharing image, tapi tanpa menuliskan tagnya di blog anda, maka gambar tersebut tidak akan tampil. Meskipun URL gambar tersebut sudah anda masukan, tapi tetap saja gambarnya tidak akan muncul. Karena URL gambar fungsinya hanya untuk menampilkan link. Sedang untuk visualisasinya, untuk previewnya di halaman blog anda, hanya jika gambar tersebut dipanggil dengan tag khusus yang sudah standar. Kenapa harus demikian? Karena memang begitulah cara kerja Browser. Sebuah gambar hanya dikenali dengan penandanya sendiri. Dan tanda itu bernama tag image.
Lalu bagaimana cara menuliskannya?
Pahami rumus dibawah ini:
<img="URL GAMBAR"/>
<img src=" adalah tag image pembuka dan tag "/> adalah tag image penutup. Jadi URL gambar anda harus diapit oleh kedua tag ini. Jika penulisannya tidak persis, atau salah satu pasangannya tidak dituliskan, maka gambarnya tidak akan muncul. Karena itu pastikan anda menuliskannya dengan benar.
Sekarang mari kita praktekkan cara menerapkannya:
Saya punya sebuah gambar yang URLnya adalah:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7hTljU3JSrdMUyPIbQf3ECJ2Y78bT9FToKKHFXFdcsom8Lf4_PYkcKsZyeKOMlcAOxqfCmF_PSFaOwELlkWukCQs-JJRwZVK7MWxXoy1upMTNZ14vrxl1OIAK1ayeVZCT4Lh91TVqJs/s1600/tag-image.png
Maka agar URL gambar tersebut berubah menjadi tayangan gambar, saya harus menambahkan tag image pembuka dan tag image penutup pada URL tersebut, sehingga lengkapnya menjadi seperti ini:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7hTljU3JSrdMUyPIbQf3ECJ2Y78bT9FToKKHFXFdcsom8Lf4_PYkcKsZyeKOMlcAOxqfCmF_PSFaOwELlkWukCQs-JJRwZVK7MWxXoy1upMTNZ14vrxl1OIAK1ayeVZCT4Lh91TVqJs/s1600/tag-image.png"/>
Setelah saya publish, baru gambarnya muncul seperti ini:
Lalu dimana saja tag image ini bisa anda sisipkan di blog anda? Bisa dimana saja sepanjang halaman tersebut memang support untuk Mode HTML. Sepanjang mendukung untuk penulisan bahasa pemrograman atau coding, misalnya di halaman postingan, di sidebar, widget, footer dan halaman HTML Template. Bahkan di form komentar, biasanya juga bisa. Cara mengetahui bisa atau tidaknya, anda bisa uji sendiri. Jika tidak, biasanya akan muncul pemberitahuan bahwa sistem menolak teks yang anda masukan.
Tapi jangan lupa, ini baru penulisan standar dari sebuah tag image. Belum dioptimasi agar efek SEO-nya kuat. Karena itu anda harus menambahkan 2 tag lagi agar gambar-gambar di blog anda, menjadi kuat bersaing di halaman pencarian Google Image. Karena itu silahkan anda tinggalkan halaman ini dan loncat ke halaman: Cara Menambahkan Alt Tag & Title Gambar pada Blog.