Guest post ini ditulis oleh Carolina Ratri untuk blog www.haniwidiatmoko.com
Hai! Iya, ini saya, Carra, sekarang lagi dikasih kesempatan untuk mengubrak-abrik blog cantiknya Mbak Hani nih. Hehehe. Salam kenal untuk yang belum kenal ya…
Saya sih biasanya memang suka ngulik tentang tulisan dan konten sehari-harinya di blog saya www.carolinaratri.com. So, saya akan bahas yang nggak jauh-jauh amat dari situ. Ya, soalnya saya ngertinya juga cuma itu doang sih. Hihihi.
Btw, sudah tahu belum, kalau sekarang kita bisa melihat referral data dari Google Images yang datang ke blog/web kita dari Google Analytics lo. Belum tahu ya? Kalau belum, ya sudah silakan cek aja langsung ke blognya Google yah.
Jadi, jangan sepelekan lagi keberadaan image di artikel-artikel kita ya. Bisa jadi, image-image itu bakalan membawa traffic alias kunjungan ke blog kita lo, kalau kita bisa mengoptimasinya dengan tepat.
Mau kan, dapat traffic yang bagus? Ya, mau dong. Ada yang enggak mau? Ya sudah, kalau ada yang enggak mau, juga enggak apa-apa sih. Blog mah bebassss, yes?
Tapi kalau mau dapetin traffic yang bagus, kita memang harus berusaha dari semua aspek yang bisa kita lakukan. Ya, tentu saja, supaya performa blognya baik juga.
Salah satunya dari image alias foto atau infografis yang kita sematkan di artikel blog kita. Selain supaya bisa nongol dalam hasil pencarian Google Image, image yang teroptimasi dengan baik juga akan membuat blog kita ringan loadingnya, sehingga juga akan berpengaruh baik untuk keseluruhan performanya.
Tapi, apa sih yang dimaksud dengan optimasi image ini?
Optimasi image berarti kita mereduksi ukuran file image-image yang kita pakai sampai semaksimal mungkin tanpa mengurangi kualitasnya, sehingga waktu loading blog kita tetap rendah, meski image-nya besar.
Jadi, apa saja nih yang perlu kita kerjakan untuk mengoptimasi image hingga blog kita lebih SEO friendly, loadingnya lebih cepat, dan bisa menambah traffic juga?
Kuy, kita lihat ya. Cukup cuma 4 langkah saja kok, overall.
Langkah-langkah mengoptimasi image supaya SEO friendly
-
Berikan nama file yang deskriptif
Saat kita memindahkan foto dari kamera—baik itu kamera handphone atau kamera mirrorless, DSLR, atau jenis kamera apa pun—biasanya file fotonya sudah dinamai secara otomatis. Bener nggak?
DSCN8903746239984638, IMG9274qy483y4o86238, JPG3974823y4u24heoi38, atau jenis nama file lain yang pokoknya nggak bisa kebaca dengan kemampuan kita yang terbatas sebagai manusia.
Nah, untuk diupload ke blog, namai ulang file-file image yang akan diunggah tersebut dengan nama biasa, yang sesuai dengan topik artikelnya, dan mengandung keyword yang ditargetkan.
Misalnya, artikelnya soal pengasuhan anak, maka namailah file image dengan “pengasuhan-anak-kreatif”, misalnya. Atau, “mendidik-anak-perempuan”. Atau apa saja, pokoknya nama yang bisa dibaca dengan kemampuan kita sebagai manusia biasa.
Langkah ini adalah yang paling penting dari semua langkah ya, makanya saya taruh di poin pertama, karena nggak boleh lupa nih. Langkah ini nggak cuma akan bagus untuk on-page SEO, tapi juga bakalan bagus untuk ranking tinggi nantinya di hasil pencarian.
-
Isi alt attributes
Yang mana sih alt attributes? Ini biasanya ada di blog-blog berplatform WordPress ya. Coba lihat gambar berikut.
Nah, itu yang dilingkari merah itu harus diisi dengan kalimat yang sama dengan nama file. Just plain dan pastikan mengandung keyword.
Untuk yang blognya di blogspot, mesti ditambahin pakai source code sih.
Jadi alt= nya itu diletakkan setelah img.
Susah ya? Hahaha. Kalau susah ya, udah. Isi saja captionnya.
Tapi hati-hati. Hanya gunakan alt attributes ini pada image yang memang menjadi bagian dari artikelnya. Jangan gunakan alt attributes pada image dekoratif. Misalnya kek apa? Misalnya, kan ada blogger yang punya emoticon-emoticon khas kan ya? Nah, jangan kasih alt attributes di gambar emoticon ini. Bisa-bisa dibilang spam sama Google, malahan.
-
Resize image hingga berukuran optimal—nggak terlalu besar, dan juga nggak pecah
Sering nih saya temui, imagenya sampai ke mana-mana, nembus sidebar saking lebarnya. Atau terlalu kecil hingga malah nggak kelihatan detailnya, blur, atau pecah.
Seharusnya, image memang dibuat pas, dengan resolusi yang pas pula.
Begitu sebuah foto keluar dari kamera—kamera apa pun—biasanya resolusinya juga mengikuti standar yang sudah di-setting di kamera, dan ini tuh biasanya gede. Antara 500 dpi, bahkan sambai ribuan. Nah, padahal untuk ditaruh online, resolusi image itu cukuplah 72 dpi, atau paling pol 150 dpi.
Kebayang deh, sisanya berapa? Antara 150 dpi, sedangkan file asli bisa sampai ribuan dpi. Inilah yang membuat blog kita loadingnya luambat.
Itu baru satu hal.
Hal lainnya, soal lebar dan panjang. Berapa standar lebar dan panjang foto yang paling optimal, supaya itu foto nggak mbleber ke mana-mana, dan juga nggak kekecilan? Saya juga nggak bisa jawab, karena tergantung pada frame template blog yang kita pakai.
Jadi ya mesti dicoba-coba, lalu kalau sudah ketemu yang pas, pakailah standar itu untuk seterusnya.
Misalnya nih, kalau ambil dari Pixabay, file terkecil ukurannya adalah sekitar 640 x 426 ya? Nah, standar itu juga biasanya yang saya pakai, untuk ngeresize image-image yang saya pakai di blog, dengan resolusi 72 atau 150 dpi.
Kalau mau ngeresize image, bisa nih pakai TinyPNGdotcom ini ya, hasilnya cukup oke kok.
-
Pilih tipe file yang pas
Memang ada 3 tipe file image yang biasa kita temukan di online; PNG, GIF, dan JPEG atau JPG. Mana yang paling baik?
Nggak usah panjang-panjang dan mbulet, saya tegaskan saja lebih baik pasanglah yang bertipe JPG, karena memang lebih optimal tampilannya di laman online. PNG biasanya hanya untuk image-image khusus yang harus ber-background transparent, sedangkan GIF itu biasanya untuk animasi tapi beresolusi mini.
Untuk foto di blog, pakailah file gambar berakhiran .jpg atau .jpeg.
Nah, demikian 4 langkah untuk mengoptimasi image di blog.
Ribet ya? Enggak kan? Enggak dong. Sederhana malah. Hanya dengan 4 langkah ini, image di blog kita akan menunjang performa keseluruhan menjadi lebih baik. Jangan lupa untuk mengedit atau enhance image-nya dulu biar lebih cakep ya, karena siapa sih yang mau liat foto gelap, ngeblur, dan nggak fokus, yes? Hehehe.
Nah, selamat ngeblog ya! Jangan lupa bahagia!
Catatan Hani
Sebelumnya saya mau ucapkan terimakasih dulu nih untuk mbak Rara. Berkatnya saya jadi lebih faham tentang perblogan, ibarat belajar anatomi deh, diuraikan dengan jelas satu per satu. Bedanya sih minus fotonya Jojo yang lagi hip itu. Terimakasih saya dobel-dobel karena mbak Rara mau jadi Guest Post di blog saya.
Awalnya ketika mulai menulis blog, fokus saya melulu pada tema penulisan, gaya bahasa, dan keywords. Terus baca-baca juga tentang bouncerate (di mana saya masih 80% an), sehingga saya menambahkan gambar, infografis (masih belajar), dan kadang-kadang kalau lagi niat membuat slide atau video pendek. Jadi saya menambahkan gambar mulanya hanya sebagai pelengkap dan menambah daya tarik. Belum menyadari bahwa melalui gambar ternyata bisa mendatangkan traffic.
Nah, seperti yang saya tulis dalam Tips Kompres Gambar dengan TinyPNG untuk WordPress, blog TLD yang baru saya beli domainnya pernah macet setiap kali mau upload gambar. Padahal kan mana menariknya kalau blog isinya hanya tulisan.
Artikel dari bintang tamu yang piawai gini saya jadi belajar banyak.
Dari 4 langkah tips optimasi image, kok ya langkah 1 dan langkah 2 belum saya lakukan dengan benar.
Langkah 1, memberi nama gambar, saya masih lalai memberi nama gambar sesuai dengan tema pada artikel. Kadang masih nomor foto seperti yang tertera di file foto dari pocket camera maupaun kamera ponsel. Terus, yang langkah 2 itu, isi alt attributes, saya blas baru tahu banget-nget kalau harus diisi. Hampir semua foto, alt text masih kosong. Nantilah saya harus mapay satu per satu memperbaiki lagi muatan blog saya.
Sayang kalau artikelnya artikel ever green, tapi tidak optimal, bukan.
Kalau langkah 3, meresize atau kompres gambar sudah saya lakukan. Walaupun saya baru-baru saja berkenalan dengan Panda si TinyPNG untuk kompres foto. Tetapi lagi-lagi, saya belum cek dpi nya deh. Mudah-mudahan sudah otomatis resolusinya mengecil antara 72 hingga 150 dpi.
Langkah terakhir, nomor 4, tentang pilihan tipe file gambar. Saya sudah benar lho mbak Rara, sudah JPG. File PNG biasanya untuk logo atau gambar lain yang lebih cocok kalau filenya PNG.
Nah, bagaimana teman-teman bloger. Optimasi gambar di blog teman-teman sudah sesuai belum dengan keempat langkah di atas?
Saya ikutan mbak Rara deh, SELAMAT NGEBLOG dan jangan lupa BAHAGIA!
Sempat kaget pas ada gambar yg bisa tembus ke sidebar hahah… Eh tapi pernah sih liat yg begitu. Kadang juga kalo pasang widget bisa ke mana-mana cuma karna ukuran tak pas.
Iya. Masalahnya cuma ukuran yang engga pas, tapi bisa bikin kaget…
Makasih ya sudah mampir…
Heuheu.
Semoga bermanfaat :-*
Tentu saja manfaat… Makasih yaa…
Saya dulu selalu resize tapi kok selalu pecah dan blur jadi ga pernah di resize lagi huhu
Resize dan kompres beda lho. Resize iya jangan kekecilan. Biasanya 900×600 atau 800×600 pixel cukup.
Kalau kompres, tadinya 500 Kb, dikompres jadi 100 Kb, gitu.
Tapi pixelnya mah bisa tetap…
Semangaaat…
Terima kasih sharing ilmunya. Kudu dibac pelan dan berulang ulang nih. Masih belum paham banget.
Mantaaaap! Thanks sharingnya mbak Hani 😉
Ini buat wordpress yah mba hani.. ak blogspot dan masih blom mudeng mba.. keknya harus belajar sama mastahnya deh ini
Bunda Haniiiiiii ternyata ngundang mba Carra ya di blognya. Aku sukaaaa. Langsung ama aku dibintangin artikelnya. Mksh ya 😘
Dapat ilmu baru tp hrs dibaca beulang-ulang, baru ngerti
Wah makasih banget tulisannya mba Carra sama Bunda Hani. Saya sudah melakukan langkah-langkah di atas, dan hasilmya emang signifikan. Meskipun, saya masih belum maksimal juga ngerjain blog hehe. Semoga ke dpn lebih serius lagi
Terima kasih ilmunya mbak, tetapi saya mesti simpan baik-baik ini agar bisa praktik sedikit demi sedikit.
Saya sudah isi alt, tapi resize masih suka malaaaz..huhuhu
Baca ini jadi tambah ngerti dan yakin musti enggak boleh malazz lagi.
Makasih Mbak Hani dan Mbak Carra, tambah ilmu deh saya…:)
Waaahh.. ilmunya bermanfaat sekali! Akan segera dilakukan mbak. Terima kasih,
Alhamdulillah, saya sudah melakukan keempatnya. Cuma kadang kalau tergesa-gesa saya selalu lupa kasih nama file yang deskriptif gitu, hehehe. PR lagi buat komitmen saya.
Kereeeeen ilmunya bagus bangeeet. Jadi paham sekarang kalo image harus dikasih alt attributes juga.
Wahh, iya. Kudu belajar banyak tentang per-image-an ini. 😘
Mbak Hani, aku nge fans banget lho ama tulisannya Mbak Carra. Dan bisa baca share ilmunya di sini duh seneng banget. Makasih ya Mbak Hani. Dhika masih harus banyak belajar niii
Waaah … makasih banget infonya, mbak. Aku tuh selama ini belum pernah kasih nama file di fotonya, ternyata penting.
Tulisan ini kok bikin saya kesentil, ya? Salah satu orang yang nggak pernah menamai foto, nih. Atau dinamai tapi nggak nyambung sama teman. Baiklah, mariii kita audit images yang ada di postingan blog, yes.
Keren banget mbak boleh gak aku share ke teman-teman aku. Manfaat banget deh artikelnya. Mbak Carolina Ratri emang jagonya masalah blog
Dan saya melupakan optimasi langkah pertama, Mbak
Sebenarnya sudah pernah tau, tapi pas parkteknya kelupaan terus hihihi
Mantep dah infonya. Makasih dah bagi-bagi ilmu gratisnya…😊
Waaaww…
Bermanfaat infonya. Makasih dah bagi-bagi ilmu gratisnya ya mba ..😊
Udah terapin sih di blog. Tapi masig sering lupa.hahaha
Pernah baca poin yg alt attributes .. tp ga tau ternyata kl blogspot harus pake embel2 .. pantes ga teroptimasi hihihi .. makasi bunda dan mba carra atas ilmunya … 😍😍😘😘😘
bener nih, aku pernah ketemu blog yang gambarnya guede-guede banget. emang bikin ga nyaman sih ya. tq mba carra, ilmunya harus segera dipraketikin nih.
ternyata nama file juga harus diperhatikan ya
Bener…saya juga masih belajar nih…
Oh gitu ya…WAh, harus cek-cek lagi judul dan keterangan gambar nih.
Terimakasih yaa…
Ooo jadi gitu ya biar bisa optimalkan gambar. Kereeen ilmunya. 🙂
Awal ngeblog dulu, masih nggak ngerti, pakai foto asli. Kalau ingat itu jadi malu. Sempat diprotes teman2 gara-gara loading lama. Makin kesini, sudah mulai merezise gambar. Tapi yang pakai tinyPNG baru setahunan ini.
Wah… Ilmunya keren… Baru tahu kalau image itu juga bisa membantu traffic blog. Terima kasih ilmunya mbak… (langsung dibookmark)
ah mbak, gimana caranya sampai mbak rara bisa ikutan nulis di sini? seperti biasa, isinya daging banget ya. Saya baru ngeh, selama ini kadang pakai PNG dengan resolusi apa adanya, hahaha. Kalo dari pixabay biasanya emang pilih yang paling kecil.
Pantengin terus update blog dan FB mb Rara. Suka ada tawaran kok ke teman², kalau jadi guest post mau minta tema apa? Saya usul ttg image dkk.
Seru banget baca artikel ini.
Aku selama ini udah ganti nama file, selalu resize tapi di ukuran 11xx, kayaknya nyobaik kompres file bakalan seru juga. Aku juga selalu pakai format .jpg & .jpeg.
Nah kalo benerin alt ini nggak pernah, karena pake blogspot. Beda settingan ya.
Mayan lama sih ulik gambar tuh. Satu-satu. Ada tuh, mb Rara jelasin kan kalau templatenya blogspot
Wah ternyata image bisa dipakai untuk optimasi ya. Saya baru mulai beberapa waktu palu ngisi alt atribut. Tapi rezise belum deh. Makasih banyak artikelnya mbak.
Wah ternyata image bisa dipakai untuk optimasi ya. Saya baru mulai beberapa waktu palu ngisi alt atribut. Tapi rezise belum deh. Makasih banyak artikelnya mbak.
Baru tau kalau bagian alt gitu harus diisi biar lebih optimal, tulisannya bermanfaat banget apalagi buat saya yg masih newbie di dunia perblogan.. ehehehe
udah tau ilmu ini lama, tapi sering aja lupa ngerjainnya, wkwkwwkk, makasih remindernya mb, biar makin nyusss lah traffic ke blog
Sip. Apalagi kontennya juga maknyuuus. Dobel nyus deh.
Makasih ya udah mampir
suka banget sama artikelnya mbak salam sukses ya
Salam kenal juga. Makasih ya sudah mampir…
Untuk load image ini memang ada banyak cara. Kalau yang mengelola blognya secara pribadi di vps, tidak pakai shared hosting, bisa diatur di web servernya. Cache dioptimalisasi dan juga mengaktifkan pengaturan agar gambar tampil memang saat pembaca mengarahkannya ke situ. Jadi kalau masih baca di paragraf pertama, gambar yang diletakkan di paragraf 8 tidak langsung di-load. Hal ini bisa mempercepat pembukaan halaman 🙂
Wah…ilmu nih. Masih harus belajar spy loading halaman engga pake lama. Hehe…
Makasih ya udah mampir…
Makasih bunda hani tipsnya , kereen nih. Setelah di teliti ga terlalu sulit sih ya sebenarnya optimasi ini, asal kita bisa lakukan secara konsisten aja, aku masih suka agak lupa kalau namain file jangan sesuai nama file asli. Padahal simpel dan ngaruh banget ya
Makasih ibu tipsnya aku baru tahu yang JPG dan PNG, selama ini sukanya PNG tanpa tahu mengapa hanya mengikuti hati nurani wkwkwk
Wah, keren mb tips-tipsnya…beberapa sudah saya lakukan. Tapi ada juga yang belum. Mau saya praktikkan ah..terima kasih untuk mb Hani, salam kenal….
Ah. Jadi mengisi Alt teks sesuai keyword tu maksudnya adalah untuk mendatangkan traffic juga. Makanya kalau cek job di vira.id itu salah satu syaratnya kudu nambahin minimal 1 image dengan alt teks sesuai keyword.
Yuni baru ngerti. Hehehe