Home  ›  Blogger

Cara Menambahkan Atribut Alt, Title, Width, dan Height Pada Tag Img Secara Otomatis Pada Blog Atau Website

√ Cara Menambahkan Atribut Alt, Title, Width, dan Height Pada Tag Img Secara Otomatis Pada Blog Atau Website

Blogger

Selamat datang di Web TulisanIB. Pada artikel kali ini penulis akan memberikan sebuah tutorial bagaimana caranya menambahkan atau mengisi atribut alt, title, width, dan height pada tag img secara otomatis pada blog atau website.

Bagi kalian yang sering memberikan atau memasukkan banyak gambar pada satu artikel di blog atau website kalian dan merasa capek atau malas untuk memberikan atribut alt, title, width, dan height pada tag img secara manual semoga cara ini bisa meringankan beban kalian.

Mengisi atau menambahkan atribut alt, title, width, dan height pada tag img bisa meningkatkan SEO pada blog atau website dan termasuk salah satu trik dari sekian banyak SEO Onpage.

Untuk mengisi atribut alt, title, width, dan height pada tag img secara otomatis pada blog atau website kita membutuhkan sebuah skrip javascript.

Skrip javascript yang penulis bagikan di bawah adalah pure javascript atau javascript murni, jadi tidak memerlukan bantuan skrip javascript pihak ketiga seperti jQuery.

Pada tutorial ini penulis mempraktikkan caranya pada blog atau website berplatform Blogger.com atau Blogspot, jadi bagi kalian yang menggunakan platform Wordpress dan yang lain-lain silahkan untuk menyesuaikan ya, karena mungkin akan ada perbedaan.

Baiklah langsung saja berikut langkah-langkahnya.
  1. Pertama masuk ke dashboard Blogger.com dulu melalui link berikut ini:
    https://www.blogger.com
    Blogger.com menampilkan gambar makhluk bernyawa di dalam web-nya. Baca artikel saya yang berjudul "Cara Mematikan Gambar Pada Browser dan Browsing di Internet Tanpa Menampilkan Gambar" bagi kalian yang ingin menonaktifkan gambar tetapi belum tahu caranya menonaktifkan gambar pada browser.
  2. Lalu masuk ke menu "Tema".
  3. Klik icon tanda panah yang mengarah ke bawah yang berada di tombol berwarna orange di sebelah kanan tulisan "SESUAIKAN".
    Tema
  4. Akan muncul menu dropdown, silahkan klik pada "Cadangkan" untuk membackup apabila nanti ada kesalahan bisa dipulihkan kembali (optional). Lalu klik "Edit HTML".
    Edit HTML
  5. Cari </body>, pilih salah satu. Tekan tombol Ctrl + F pada keyboard untuk memunculkan form pencarian.
    Cari di Edit HTML
  6. Lalu paste kode berikut di bawah ini tepat di atasnya kode tag </body>.
    <script>//<![CDATA[
document.addEventListener("DOMContentLoaded",function(){var t=document.title.trim();document.querySelectorAll("img").forEach(function(e){e.setAttribute("title",t),e.setAttribute("alt",t);var i=new Image;i.onload=function(){e.setAttribute("width",this.width),e.setAttribute("height",this.height)},i.src=e.src})});
//]]></script>
  7. Lalu simpan dengan mengeklik icon bergambar disket atau kartu memori di sebelah kanan atas yang apabila icon tersebut didekatkan dengan mouse akan muncul tulisan "Simpan".
    Simpan Template
  8. Apabila muncul kotak persegi panjang bertuliskan "Update berhasil." itu tandanya template-nya telah berhasil kita save.
    Update berhasil.
  9. Selesai, kalian boleh coba tes dengan menaruh gambar pada postingan atau artikel tapi jangan diberi atribut alt dan title, coba dilihat sudah berhasil atau belum dengan mendekatkan mouse pada gambar, apabila keluar tulisannya itu tandanya sudah berhasil tetapi apabila tidak keluar tulisannya itu gagal atau ada kesalahan dalam menaruh kode javascript di atas tadi.


Bagaimana? Mudah sekali bukan? Insya Allah sangat mudah sekali cara memasang skrip javascriptnya. Bagi yang masih bingung atau belum paham, langkah-langkah di atas tadi bisa dibaca lagi.

Sekian apa yang bisa penulis sampaikan pada artikel "Cara Menambahkan Atribut Alt, Title, Width, dan Height Pada Tag Img Secara Otomatis Pada Blog Atau Website" ini. Semoga artikel ini bisa bermanfaat untuk semua orang dan terutama bagi yang sedang membutuhkan artikel ini.
Share on Social Media