Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar

Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar
Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar - Selamat malam sobat Blogger semua diseluruh Indonesia, pada kesempatan kali ini blog Ficri Pebriyana akan membagikan sebuah artikel mengenai Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar. Menambahkan title tags dan alt tags pada setiap gambar yang ada pada blog ini memang akan membantu artikel kita masuk kedalam pencarian menggunakan mode image atau gambar yang dimana pencarian ini berdasarkan gambar yang dicari jadi sangat penting menambahkan alt tag dan title tag pada setiap gambar yang ada pada blog kita. Selain itu dengan menambahkan attribute alt tag dan title tag pada setiap gambar akan menambahkan score seo kita, bisa Anda cek disini chkme.com silahkan Anda cek sebelum dan sesudah menggunakan alt tag dan title tag pada setiap gambar. Tidak hanya itu saja yang mempengaruhi score seo blog, kita juga harus Menambahkan Attribute Title Tag Pada Setiap Link, agar blog menjadi lebih SEO lagi dalam pencarian di search engine.

Sebenarnya jika suatu gambar yang ada dalam sebuag blog atau website ini tidak memiliki attribute alt tag dan title tag ini akan membuat score seo kita menurun, karena membuat attribute alt tags dan title tags pada setiap gambar merupakan salah satu Optimasi SEO On Page, selain itu dengan memberikan attribute alt tag dan title tag pada gambar akan membuat blog menjadi Valid HTML5 HomePage maupun Valid HTML5 Halaman Posting jadi ini perlu diperhatikan dan dipraktekan atau dicoba oleh setiap Blogger. Dalam tutorial ini saya akan membagikan dengan 3 cara menambahkan attribute alt tags dan title tags pada gambar, langsung saja silahkan simak tutorial mengenai Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar dibawah ini :

1. Menambahkan Attribute Alt Tag dan Title Tag Pada HomePage

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode expr:src='data:post.thumbnailUrl' dan expr:src='data:post.thumbnail'
4. Lalu tambahkan kode expr:alt='data:post.title' dan expr:title='data:post.title'
Contoh :
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
Biasanya kode expr:src='data:post.thumbnailUrl' dan expr:src='data:post.thumbnail' lebih dari 1, silahkan Anda tambahkan kode expr:alt='data:post.title' dan expr:title='data:post.title' pada setiap kode yang ada.

2. Menambahkan Attribute Alt Tag dan Title Tag Pada Gambar Postingan

1. Silahkan buat artikel
2. Upload atau masukkan gambar pada artikel tersebut
3. Klik gambar tersebut, lalu akan muncul properties klik saja
Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar 1 - Ficri Pebriyana
4. Setelah Anda klik silahkan isi Title Tag dan Alt Tag untuk gambar tersebut, lalu klik OK
Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar 2 - Ficri Pebriyana

Atau dengan cara seperti ini :
<img alt='Judul Gambar' src='URL_Gambar' title='Judul Gambar'/>

3. Menambahkan Attribute Alt Tag dan Title Tag Pada Gambar Otomatis

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode </body>
4. Copy kode script dibawah ini, lalu Paste diatas kode </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ $(document).ready(function() {$('img').each(function(){var $img = $(this);var filename = $img.attr('src')$("img:not([alt])").attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));$("img:not([alt])").attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));//]]></script>
5. Lalu klik Simpan Template

Sekian artikel mengenai Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

55 Responses to "Cara Membuat Attribute Alt Tag dan Title Tag Pada Gambar"

  1. klo otomatis itu bs sempurna ga boss , dan aartiny aklo sdh memasukan kode g buat tag alt otomatis kita ga usah bkin alt manual lg gtu boss

    ReplyDelete
    Replies
    1. yang peting hasilnya sama menampilkan alt dan title

      Delete
  2. keuntungan masang alt tag apa mas

    ReplyDelete
    Replies
    1. seo firendly dan unggul di google search image

      Delete
  3. terima kasih telah berbagi dan artikelnya sangat bermanfaat sekali bagi saya seorang newbie

    di tunggu silaturrahmi baliknya gan
    http://suksespenuh.blogspot.com

    ReplyDelete
  4. nomer 1 sama 3 sama2 edit HTML, kalo dipasang barengan bisa? makasih.
    numpang mejeng 72bidadari.blogspot.com, hehe :D

    ReplyDelete
  5. artikelnya sangat membantu sekali gan, apalagi buat nubi seperti saya.. sangat bermanfaat

    ReplyDelete
    Replies
    1. wew master menyamar menjadi nubi ya seperti ini :D

      Delete
  6. Saya lebih suka menambahkan ALT dan Title gambar secara Manual sob.
    Bisa kita tambahkan kata-kata yang lebih sesuai keperluan

    ReplyDelete
  7. berhasil gan, thx, seberapa besar gan pengaruhnya dalam meningkatkan traffic ?
    i tunggukunjunganya ya :)
    Fwaluy.blogspot.com
    tankkyuu....hhe

    ReplyDelete
  8. cara yang paling bagus yang mana mas?
    maklum saya masih newbie jadi sering tanya - tanya

    ReplyDelete
    Replies
    1. ya pasti semuanya... itu bukan beberapa cara, tapi semuanya harus di praktekan

      Delete
  9. makasih mas ficri.. bermanfaat bagi saya..

    ReplyDelete
  10. Jarang ane pake nih, makasih dah ngingetin.

    ReplyDelete
  11. Makasih infonya.. Saya Pilih yang manual saja

    ReplyDelete
  12. bisa dicoba nih tipsnya. tapi saya cenderung lebih pilih nomor 2 nih.

    ReplyDelete
  13. Sangat Membantu Sekali ! Terima Kasih !

    ReplyDelete
  14. Tips Yang bermanfaat dan setelah saya terapkan ternyata berhasil menaikkan Score Seo di Chkme -d

    ReplyDelete
  15. masih bingung mas,, maaf masih awam.

    ReplyDelete
  16. kalo gambar postingan lebih dari satu gimana gan? mkasih.. maaf masih nubi...

    ReplyDelete
  17. Thaks infonya, langsung saya praktekkan di blog saya, Mas.

    ReplyDelete
  18. saya biasanya hanya memakai addcaptionnya aja, sehingga timbul tilisan dibawahnya, berarti itu aja belum cukup ya?

    ReplyDelete
  19. simple gak pake ribet.. thank info nya gan

    ReplyDelete
  20. Jadi kata-kata untuk title text dan alt text nya disamain ya mas...

    ReplyDelete
    Replies
    1. bisa sama bisa juga beda, jadi terserah mau nulis apa asalkan kalau bisa terdapat kata kuncinya ya

      Delete
  21. gmalam gan,
    mau nanya , kenapa yahsetelah ane masukin text nya (mengikutin cara diatas) kemudian sudah disave juga tetapi hilang lagi (kalau ane cek lagi di propertis textnya hilang lagi)
    mohon pencerahannya gan.. trimss

    ReplyDelete
  22. mas kalo alt image tiba tiba hlang knapa ya..padahal waktu posting udah seo..mohon bantuan

    ReplyDelete
  23. Gan yang no.3 itu fungsinya membuat otomatis alt title & tag gambar setelah upload atau giman tuh ??
    Mohon penjelasannya :). Terima kasih

    ReplyDelete
    Replies
    1. iya itu maksudnya gambar nya akan otomatis mengikuti title gambarnya, misalnya image-10.jpg maka alt dan title akan berisi image-10

      tetapi saya rasa cara no 3 ini tidak cocok untuk blogspot, tetapi bisa saja di coba

      Delete
  24. mau ty donk..knp yak setelah menambahkan title text dan alt text kmdn saving, pas di edit kembali image propertiesnya kembali kosong?

    ReplyDelete
    Replies
    1. pas di bagian posting atau dimana nih ?

      tenang saja, hal itu juga terjadi di saya juga tetapi alt tag dan title tag sudah afa pada gambar tersebut, silahkan saja lihat di bagian HTML, ubah dari COMPOSE menjadi HTML

      Delete
    2. iya maksudnya itu. emang kyk gitu ya? di compose kosong tp di html ada. trus yg saya ga ngerti di check seo score, ada sekian image ternyata yg missing image description, tapi pas saya check di html postingannya ada.
      kemudian untuk image yg ada di webnya sendiri kyk icon2 itu harua pake image description juga? thx.

      Delete
    3. iya memang begitu...
      itu disebabkan bukan dari postingannya, tetapi di halaman postingan itu mungkin ada gambar lain, misalnya gambar di bagian post populer, foto komentator, atau gambar lainnya yang ada pada halaman postingan, untuk memperbaiki ini bisa di edit dibagian Template > Edit HTML bisa pakai cara yang ke 1.
      kalau bisa sih ya gunakan saja deskripsi, maksudnya setiap gambar wajib pakai tag alt dan title sedangkan url hanya wajib menggunakan tag title saja.

      untuk deskripsi ada 2 macam, pertama deskripsi khusus homepage, kedua deskripsi khusus halaman posting, saya sudah menerapkan ini pada blog ini dengan menambahkan beberapa kode meta tag, tapi saya belum share di blog ini :)

      Delete
  25. Nice artikel,, ini dia yang saya cari-cari

    ReplyDelete
  26. nice info gan, sangat bermanfaat

    ReplyDelete
  27. yg begini nih bisa membantu blogger pemula seperti saya... thank for sharing gan

    ReplyDelete
  28. terima kasih infonya langsung saya coba praktekan..

    ReplyDelete
  29. cara agar blog saya peringkat 1 gimana y ???
    terima kasih

    ReplyDelete
  30. ini isinya kan otomatis terus isinya apa yak ?? yang pakek javascript

    ReplyDelete
  31. kalau wordpress caranya gimana mas?

    ReplyDelete
  32. Apa harus sama yg diisi texs dan altnya mas..

    ReplyDelete
    Replies
    1. alt untuk image di isi ya, terus jangan lupa image juga punya link jadi di kasih title juga buat linknya

      Delete
  33. Caranya membantu banget mas, ijin nyoba ya. makasih ya mas atas caranya....
    Mampir juga ya ke sini http//ziesehat.com/tips kesehatan

    ReplyDelete
  34. baru saja menerapkan saya mas, sebelum sebelumna gak tau..hehe

    ReplyDelete

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting