Menambahkan gambar di blogger + Optimasi Agar SEO Friendly

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

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 :D

Untuk menambahkan gambar di blogger langkah langkahnya adalah sebagai berikut:

  1. Login di Blogger
  2. Buat sebuah artikel baik itu page atau post, pada menu editor pilih Insert Image, ada 4 pilihan yaitu :
    • Upload From Computer
    • Photos
    • Blogger
    • By Url
  3. Dalam contoh kali ini silahkan pilih Upload From Computer
  4. Setelah itu browse dan temukan gampar yang ingin di upload, pilih gambar tersebut kemudian klik Open
  5. Setelah itu klick select, dan gambar akan terlihat di postingan

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
menambahkan-gambar-di-blogger


#2: Upload Gambar di Blogger


Untuk mengupload gambar ke postingan ikuti langkah gambar berikut :
cara-upload-gambar-di-blogger
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
add-image-in-blogger

Nha.....mulai kusut ya gaes :D

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.
cara-menambahkan-foto-di-blogger

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 :D )
cara-upload-foto-di-blogger

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 :D

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 http://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:
cara-menggunakan-lazyload-di-blogger

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)

class="lazy" src="https://1.bp.blogspot.com/-_Twe1QIDkfM/XvwABcQvxDI/AAAAAAAAHZw/QQ28-22Zm0UX7Wc1CgWRA_tYp1huHEn8gCK4BGAsYHg/lazy-load.jpg"


Sehingga keseluruhan kodenya akan terlihat seperti ini:
lazyload-gambar
Untuk penggunaan lazyload, usahakan untuk gambar pertama tidak perlu dirubah dari src ke data-src, kenapa? karena gambarnya akan dipanggil oleh snippet



Tips dan Trik Optimasi Gambar:

Rename gambar sesuai dengan keyword yang di incar, jangan gunakan spasi sebagai pemisah kata tapi gunakan tanda minus -->  -

Jangan lupa untuk memperkecil volume gambar (bukan gambarnya yang dikecilkan tapi volumenya) gunakan tinypng.com bila teman teman tidak menguasai photoshop kemudian compress (kecilkan volumenya)




Selamat belajar....
Komentar
Silahkan, saya ga nggigit !