Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id - Hallo sobat blogger yang berbahagia Tips & Trik SEO, Posting yang saya unggah pada kali ini dengan judul Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id, Artikel ini bertujuan untuk memudahkan kalian mencari apa yang kalian inginkan, kami telah mempersiapkan artikel ini dengan baik untuk kalian baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tips SEO, yang kami tulis ini dapat kalian pahami dengan baik, semoga artikel ini berguna untuk kalian, jika ada kesalahan penulisan yang dilakukan oleh penulis mohon dimaafkan karena penulis masih newbie. baiklah, selamat membaca.

Judul : Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id
link : Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id

Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id

Cara menampilkan gambar dengan kode html bisa dikatakan merupakan hal dasar mengenai html untuk Blogger. Menurut Tips SEO Terbaik, ini sangat diperlukan untuk melakukan blogging.

Apalagi jika dengan menampilkan gambar ini juga untuk menjadikan gambar lebih SEO friendly, maka itu sangat penting untuk menambah kekuatan SEO onpage di pada blog.

Lalu apa dasar-dasar kode html untuk menampilkan gambar di blog ini?
Berikut ini adalah panduan lengkap tentang kode html untuk menampilkan Gambar yang SEO friendly dari Tips SEO Terbaik.

1. Kode html standar untuk menampilkan gambar

Ini adalah kode html paling standar untuk menampilkan gambar.

<img src="http://linkgambar.jp"/>

contohnya adalah sbb:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVo0fpFOCCmF10nfsS3Lwaey5DA_2I7aYM5dHJg2oBWy5dvCx_ahc08sMwfArKz1I5Yj8secQSNA-cWLYhjv0fUgOcUeHa7ZDK5gP8UiHMGq9kidfbbTwqRBIEkobPy_Q9spUhC20tdiM/h120/html+gambar.png"/>

hasilnya adalah sebagai berikut ini:

2. Menambahkan atribut ukuran, lebar dan tinggi gambar

Untuk mengatur ukuran gambar, bisa ditambahkan atribut width untuk lebar dan height untuk tinggi. Penerapannya adalah sebagai berikut.

<img src="http://linkgambar.jp" width="125px" height="150px"/>

Penjelasannya :
Gambar tersebut akan memiliki ukuran lebar 125 pixel dan tinggi 150 pixel.

Contohnya sbb.

 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVo0fpFOCCmF10nfsS3Lwaey5DA_2I7aYM5dHJg2oBWy5dvCx_ahc08sMwfArKz1I5Yj8secQSNA-cWLYhjv0fUgOcUeHa7ZDK5gP8UiHMGq9kidfbbTwqRBIEkobPy_Q9spUhC20tdiM/h120/html+gambar.png" width="100px" height="125px"/>

hasilnya nampak seperti berikut:

3. Menambahkan Atribut Alt dan Title pada gambar agar SEO Friendly

Ini adalah poin penting dalam hal peamsangan gambar dengan kode hmtl di postingan. Karena cara ke 3 ini berhubungan dengan optimasi SEO postingan di blog.

Atribut alt fungsinya adalah untuk memberikan informasi kepada robot spider Google dalam merayapi laman blog, karena robot tidak bisa membaca gambar maka dibutuhkan atribut alt ini untuk membantu robot mengenali gambar.

Sedangkan atribut Title fungsinya adalah untuk memberi informasi kepada pengunjunhg manusia. Prinsipnya hampir sama dengan atribut alt, hanya saja informasinya ditujukan kepada manusia. Hasil penambahan atribut alt ini, setiap kursor pointer terletak di atas gambar, otomatis akan muncul popup informasi gambar tersebut.

Penerapannya adalah sebagai berikut.
kode gambar dengan atribut alt:

<img src="http://linkgambar.jp" alt="contoh kode html gambar"/>

kode gambar dengan atribut title

<img src="http://linkgambar.jp" title="contoh kode html gambar"/>

atau jika digabungkan kedua atribut tersebut menjadi:

<img src="http://linkgambar.jp" alt="contoh kode html gambar" title="contoh kode html gambar"/>

Contohnya sebagai berikut:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVo0fpFOCCmF10nfsS3Lwaey5DA_2I7aYM5dHJg2oBWy5dvCx_ahc08sMwfArKz1I5Yj8secQSNA-cWLYhjv0fUgOcUeHa7ZDK5gP8UiHMGq9kidfbbTwqRBIEkobPy_Q9spUhC20tdiM/h120/html+gambar.png" alt="contoh kode html gambar" title="contoh kode html gambar"/>

Hasilnya akan nampak seperti ini:

4. Menambahkan link pada gambar yang SEO Friendly

Kemudian bagaimana kode untuk gambar yang memiliki link, atau cara menambahkan link pada gambar dengan kode html? Nah berikut ini adalah cara membuatnya.

Gambar dengan link biasa dipakai untuk banner iklan. Seringkali dipasang di posisi widget, entah itu di bagian header atau di sidebar. Jadi ini sangat penting untuk diketahui.

Kode link adalah seperti ini:

<a href="http://linkwebsite.com"/>

Kode link untuk gambar :

<a href="http://linkwebsite.com"><img src="http://linkgambar.jp"/></a>

Agar link lebih SEO, ditambahkan kode rel="nofollow" yang tujuannya agar spider google  tidak meneruskan perayapan kepada link keluar dari gambar (jika itu adalah link website lain).
penerapan kodenya adalah sebagai berikut:

<a href="http://linkwebsite.com" rel="nofollow"><img src="http://linkgambar.jp"/></a>

Agar gambar dengan link tersebut memenuhi kaidah SEO sepenuhnya , atribut rel="nofollow" pada link dan atribut alt dan title pada gambar bisa diganbung.
penerapan kodenya adalah sebagai berikut ini:

<a href="http://linkwebsite.com" rel="nofollow"><img src="http://linkgambar.jp" alt="contoh kode html gambar" title="contoh kode html gambar"/></a>

Contohnya adalah sebagai berikut:

<a href="http://tipseoterbaik.blogspot.com" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCVo0fpFOCCmF10nfsS3Lwaey5DA_2I7aYM5dHJg2oBWy5dvCx_ahc08sMwfArKz1I5Yj8secQSNA-cWLYhjv0fUgOcUeHa7ZDK5gP8UiHMGq9kidfbbTwqRBIEkobPy_Q9spUhC20tdiM/h120/html+gambar.png" alt="contoh kode html gambar" title="contoh kode html gambar"/></a>

Hasilnya akan nampak seperti berikut ini:


Nah keempat panduan kode html untuk menampilkan gambar yang SEO friendly tersebut bisa anda terapkan di blog anda. Seperti sudah sering diinformasikan bahwa ternyata gambar sangat penting fungsinya sebagai penarik pengunjung blog juga. Selamat mencoba

Demikianlah Artikel Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id

Sekianlah artikel Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Informasi Seputar Blogging : Kode html Untuk Menampilkan Gambar SEO Friendly, seosangatmudah.blogspot.co.id, seosangatmudah.blogspot.co.id dengan alamat link https://seosangatmudah.blogspot.com/2015/04/informasi-seputar-blogging-kode-html.html

Tweet