Menambahkan gambar di blogger + Optimasi Agar SEO Friendly

Gimana sih cara menambahkan gambar di blogger? gimana sih cara optimasi gambar? gimana sih agar gambar terintegrasi dengan Lazyload?

Bagi yang masih pemula selamat belajar, bagi teman2 yang sudah expert bisa memberikan masukan terkait artikel ini.

Menambahkan Gambar di Blogger

Blogger adalah platform blog yang sangat mudah (bila kita sudah terbiasa),

Bila belum terbiasa tentu saja semua terasa sulit, jadi mari dibiasakan

Maksud gurublogger adalah “Mari dibiasakan sampai ke hal paling rumit sekalian” biar tuntas 😀

Untuk lebih jelasnya teman teman bisa mengikuti langkah langkah pada gamber berikut ini :

#1: Buat New Post

Tombol new post / buat postingan berada di sebelah kiri atas dibawah nama blog

#2: Upload Gambar di Blogger

Untuk mengupload gambar ke postingan ikuti langkah gambar berikut :

Kalau semua berjalan dengan baik seharusnya gambar akan tampak di postingan, kalau tidak coba scroll ke halaman paling bawah (kadang juga ada disana itu salah satu bugs dari interface baru blogger)

#3: Melihat Kode HTML Gambar Yang Di Upload

Untuk melihat kode html dari gambar yang baru saja di upload silahkan klik tombol pensil di sebelah kiri atas kemudian pilih html view

Nha…..mulai kusut ya gaes 😀

Untuk kode yang gurublogger tandai dengan garis oranye adalah kode untuk gambar (dimulai dengan opening tag image yaitu <img )

Untuk garis hijau adalah kode atas hyperlink, dimulai dengan tag <a

Untuk garis biru adalah elemen div, opening tag <div

Dari kode diatas bisa diartikan bahwa: gambar berada didalam hyperlink dan hyperlink sendiri berada didalam elemen div

Bila dipreview maka gambar akan terlihat kecil (karena memang gambarnya kecil) namun setelah di klik “kan mengandung link” gambar akan tampil sesuai ukuran asli

Dalam kondisi ini, script masih semrawut dan sama sekali tidak SEO Friendly Bayangkan kalau kita menggunakan 10 gambar, alangkah kacawnya !!

Maaf teman2 kita harus ke step selanjutnya.

#4: Menambah Alt Text dan Title Text Gambar

Step ke 4 adalah yang terpenting, karena kita akan melakukan optimasi SEO gambar di blogger

Nomer 3: Alt text fungsinya adalah memberitahu google ini gambar apa, tanpa ini maka google tidak akan mengerti.

Efeknya adalah gambar teman2 tidak akan pernah muncul di google search image (kan google ga tau), jadi harus dikasih tau

Nomer 4: Title text fungsinya adalah untuk memberitahukan manusia ini gambar apa, ketika si manusia menghover (meletakkan pointer mouse diatas gambar)….akan muncul tulisan.

Catatan: Nomer 5 original size artinya menampilkan gambar sesuai dengan ukuran asli yang di upload,

Agar tidak overflow maka kita harus menyiapkan gambar dengan lebar sama dengan lebar kontainer postingan (siapkan gambar dengan lebar sesuai kontainer postingan masing masing)

#5: Html Gambar Yang Sudah di Optimasi SEO

Hasilnya adalah kode html yang tidak kusut dan gambar yang sudah SEO friendly (walaupun memakai 100 gambar, otak kita tidak akan kusut dengan kode 😀 )

Sampai disini teman teman sebenarnya sudah selesai… tamat

Namun bila teman teman menggunakan template gurublogger V.1.1.0 maka ada satu step opsional yang bisa dilakukan dan bisa juga tidak (lebih baik ke langkah selanjutnya)

Lazy Load Gambar di Blogger

Lazy load, apa itu?

Lazy artinya malas dan Load itu dari Loading, maka lazy load adalah “Malas Loading”

Maksudnya?

Fungsi lazyload adalah untuk mempercepat sebuah website, website yang menggunakan plugin ini secara otomatis memiliki kecepatan super dibandingkan website yang tidak menggunakan lazy loading

Katanya malas, tapi kok jadi cepat…gimana sih

Rada bingung juga sih jelasinnya….. but let me try 😀

Ketika teman2 membuka sebuah halaman website, maka browser akan mendownload seluruh halaman dari atas sampai halaman paling bawah website tersebut (walaupun tidak terlihat krn monitor kita ngga panjang), kita harus scroll kebawah untuk melihat isi website di bagian bawah

Karena mendownload keseluruhan isi website maka jelas lebih lambat loadingnya (misalkan volume web tersebut 900 Kb)

Tanpa lazy load maka browser akang mengejar download sampai 100% (terdownload semua isi web termasuk gambarnya), setelah itu barulah websitenya tampil dan disajikan

Efeknya: orang yang sedang browsing harus menunggu terlebih dahulu sampai terdownload 100% baru bisa melihat isi web.

Kalau dengan lazy load?

Dengan lazy load maka browser tidak akan mendownload website 100%, dia hanya akan mendownload gambar yang ada di area layar (above the fold) kemudian menampilkan isi web.

Jadi katakanlah browser akan mendownload terlebih dahulu 100 kb, kemudian dibalik layar akan dicadangkan 100 kb, kemudian orang yang browsing melakukan scroll kebawah, browser download in lagi …dst sampai  100% bila orang yang browsing melakukan scroll ke halaman web paling bawah

Bila user tidak melakukan scroll maka gambar di bagian bawah tidak akan didownload oleh browser

Contoh lazyload: silahkan akses https://www.gurublogger.id menggunakan HP, lihat apakah website bisa langsung terlihat cepat di layar hp teman2…… selanjutnya coba scroll pelan pelan maka akan terlihat efek malas loadingnya

Beruntunglah pengguna template Gurublogger V.1.1.0 karena pada waktu gurublogger dulu membuatnya tidak lupa memasang lazyload

Bagi yang templatenya belum support lazyload bisa pasang sendiri dengan mengambil plugin lazyload dari github

Cara Menggunakan LazyLoading Gurublogger V.1.1.0

Seperti teman teman telah ketahui bersama, bahwasannya bentuk normal html dari gambar yang telah kita optimasi adalah seperti berikut:

Teman teman bisa menyisipkan kode pemalas dengan cara:

1. tambahkan huruf data- sebelum src di lingkar warna hijau sehingga menjadi data-src=

2. tambahkan kode berikut sebelum alt (jangan lupa beri spasi supaya tidak lengket dengan alt)

Sehingga keseluruhan kodenya akan terlihat seperti ini:

Untuk penggunaan lazyload, usahakan untuk gambar pertama tidak perlu dirubah dari src ke data-src, kenapa? karena gambarnya akan dipanggil oleh snippet