Lompat ke konten Lompat ke sidebar Lompat ke footer

5 Cara Optimasi Gambar Blog Agar Optimal Ala SEO Specialist

Dalam seri Tutorial Blog selanjutnya saya akan membagikan sedikit tips cara mengoptimasi gambar blog agar lebih optimal secara SEO atau yang biasa disebut SEO Friendly. Cara ini dipraktikin langsung oleh SEO Specialist yang saya kenal loh (hasil nanya beberapa orang secara personal chat atau pun lewat webinar).

Anda bisa banget kok menerapkan beberapa tips cara mengoptimasi gambar untuk blog dari artikel ini. Mudah dilakukan dan tidak membutuhkan waktu yang lama. Asalkan Anda lagi mode serius dalam mengoptimasi SEO web untuk Google.

Hasil optimasi gambar buat website tentunya akan berdampak kepada loading web yang semakin cepat. Ini buktinya :

Mendapat skor 100 di Google PageSpeed Insights untuk tampilan desktop itu bukanlah hal yang mustahil. Pokoknya kita harus memahami bagaimana cara Google me-render halaman website, termasuk gambar di dalamnya.

cara optimasi gambar blog
Gambar 1 : Hasil optimasi gambar blog

Okee, selanjutnya apa yang bisa kita lakukan untuk mengoptimasi SEO website agar lebih optimal lewat cara mengutak-atik bagian gambar? Simak beberapa caranya di bawah ini.

Tips Mengoptimasi Gambar untuk Website Agar SEO Friendly

1. Penamaan Gambar untuk Postingan

Misalnya Anda mau upload gambar untuk keperluan sebuah artikel berjudul "Review Samsung Galaxy A52 : Smartphone Entry Level Rasa Flagship" lalu ada foto Galaxy A52 itu sendiri. Anda akan beri nama apa file foto tersebut?

Apakah foto.jpg atau samsung.jpg? Kebanyakan praktik yang dilakukan seperti itu padahal ada celah optimasi yang terlewatkan apabila menggunakan cara seperti itu.

Sebaiknya penamaan gambar adalah seperti ini "review-smartphone-samsung-galaxy-a-52.jpg" (jika menargetkan long tail keyword) atau "samsung-galaxy-a-52.jpg" (jika menargetkan volume pencarian).

Jadi, beri nama gambar Anda dengan keyword yang ingin dibidik atau penjelasan secara singkat gambar tersebut itu apa. Jangan asal memberi nama gambar untuk keperluan SEO.

Oh ya satu lagi sebaiknya dalam penamaan gambar beri tanda hash (-) untuk memisahkan tiap katanya. Mengapa? Agar spasi dalam nama gambar tidak berubah menjadi %20, itu bikin tingkat keterbacaan nama gambar jadi berkurang.

2. Compress Gambar

Prefer menggunakan Kraken.io daripada TinyJPG karena hasil compress gambarnya bisa lebih kecil, tetapi gambar tidak pecah. Bukti gambar hasil compress-nya ada di gambar 1 itu ya.

Situs Ukuran gambar
Asli Compress
Kraken
90.25KB 42.43KB
TinyJPG 90.25KB 46.9KB

Lihat kan perbedaannya. Kraken.io bisa compress gambar lebih baik 3% daripada TinyJPG. Namun, itu juga tergantung gambar yang hendak Anda compress apakah warnanya banyak atau tidak.

Lalu, mengapa compress ukuran gambar ada di urutan kedua dalam langkah-langkah optimasi gambar untuk website? Sebab, ukuran gambarlah yang paling berpengaruh signifikan setelah penamaan gambar itu sendiri.

Usahakan gambar yang akan dipakai dalam website baik untuk background-image dalam CSS atau dalam posingan artikel berukuran kurang dari 50KB yaa.

Dengan ukuran segitu aja bisa buat loading website lemot apalagi gambar yang berukuran ratusan KB + tidak teroptimasi dengan teknik lainnya. Makin lemot dong websitenya.

Oh ya kalau pakai kraken.io versi free, salah satu kelemahan terbesarnya adalah tidak bisa mengcompress gambar lebih dari 1MB. 

Oh ya buat Anda blogger yang suka bingung bagaimana cara membuat sitemap simak artikel ini : Cara Membuat Sitemap Blogger dan Wordpress

3. Gunakan CDN

Selanjutnya, para praktisi SEO di media-media besar selalu menggunakan CDN (Content Delivery Network) untuk penyimpanan dan pendistribusian gambarnya.

Bagaimana sih contoh penerapan CDN untuk gambar website?

Ini saya benchmarking ke beberapa website yang menggunakan CDN.

Tribunnews

Salah satu URL gambarnya :

https://cdn-2.tstatic.net/tribunnews/foto/bank/images/ilustrasi-berdoa2.jpg

Lihat pada tulisan yang saya tebalkan. Nah, itulah tempat di mana Tribun menghosting gambarnya. Mereka tidak meng-upload gambar secara langsung di domain utama.

Akan tetapi, mereka menggunakan layanan CDN yang sepertinya berbayar. Lihat juga pada penamaan gambarnya, nama file diberi kata kunci dan dipisahkan oleh strip (-).

Kotakode

Selanjutnya adalah tempat di mana saya magang sebagai SEO Analyst. Lihat salah satu URL gambarnya :

https://storage.googleapis.com/kotakode-prod-public/images/3ecb0874-39cd-4629-add4-d3f1da44b913-image.png

Kotakode menghosting gambarnya menggunakan layanan CDN milik Google, yakni Googleapis.

Lalu, fitur blogs di website tersebut adalah User Generated Content alias semua orang bisa membuat postingan blog di Kotakode. Alhasil penamaan file gambar tidak dilakukan secara baik oleh orang yang awam soal SEO.

Bola.com

Lihat salah satu URL gambar di artikel Bola.com :

https://cdn1-production-images-kly.akamaized.net/BAY3w9k5X3ssD6JE4bHTmUYcurI=/640x360/smart/filters:quality(75):strip_icc():format(webp)/kly-media-production/medias/3292356/original/057900800_1604996884-4_000_1VT4CE.jpg

Ini lebih advanced lagi karena selain sudah menggunakan CDN, ukuran gambar sudah ditentukan dalam URL, dan mereka menggunakan format WebP untuk gambarnya.

Coba saja buka file dan simpan gambar tersebut. Pasti format file nantinya adalah .webp bukan .jpg karena mereka meng-convert itu di CDN-nya.

Andhikayp

Selanjutnya blog saya sendiri.

https://cdn.statically.io/img/2.bp.blogspot.com/-BB7TJLld4gU/YE4HYwXPIGI/AAAAAAAABas/OWqkI4tJCvI8fjRv8Nz6CkrcqyYN9poQwCLcBGAsYHQ/s700/cara-cairkan-pembayaran-adsense-lewat-ovo.jpg

Karena keterbatasan fitur hosting di Blogger, saya menggunakan layanan CDN gratisan milik anak negeri, yakni Statically.io.

Untuk menggunakan CDN dalam gambar di Blogger caranya sangat mudah, yakni :

  1. Masuk ke salah satu postingan di Blogger
  2. Masuk ke menu Tampilan HTML
  3. Tambahkan cdn.statically.io/img/ di depan nama file yang biasanya 1.bp.blogspot.com
  4. Lalu, karena url 1.bp.blogspot.com diblokir oleh ISP, maka ubah angka 1 menjadi 2

Buat Anda yang hosting di CMS selain Blogger, Wordpress misalnya. Anda tidak perlu repot-repot mengubah satu per satu penamaan file agar dihosting di CDN Statically.

Gunakan plugin Statically dan generate free API key di website tersebut. Cek di sini : Statically.io.

4. Gunakan Tag Alt dalam Gambar

Buat Anda yang baru belajar SEO pasti mendapat saran seperti ini dari praktisi SEO yang sudah lama terjun di bidang ini atau bahkan dari SEO Specialist pun.

Memang praktiknya seperti itu, wajib banget ini dilakukan apalagi kalau Anda main di website wallpaper/semi wallpaper.

Tujuan utamanya adalah agar gambar situs Anda masuk ke pencarian Google Images sehingga dapat mendatangkan trafik dari sana.

Buat Anda yang belum mengerti bagaimana cara optimasi tag alt di Blogger, cek di bawah ini.

Cara Memberikan Tag Alt Gambar di Blogger

  1. Masuk ke salah satu artikel
  2. Klik pada gambar yang ingin dioptimasi tag alt-nya atau unggah terlebih dahulu
  3. Tekan ikon gerigi atau Setting/Ubah
  4. Isi Teks Alternatif dengan keyword yang ingin dibidik
  5. Lalu, Teks Judul bisa disamakan dengan tag alt atau dibuat beda, bebas

Cara Mengisi Tag Alt di Wordpress

  1. Upload gambar di Media atau dalam postingan langsung (sebaiknya yang pertama)
  2. Klik pada gambar yang sudah terunggah
  3. Isi Teks Alternatif dengan kata kunci sesuai postingan
  4. Selesai

Catatan

Anda tidak perlu membuat tag alt pada gambar secara manual lewat tampilan HTML seperti ini :

<img alt="cara optimasi gambar blog" src="https://cdn.statically.io/img/2.bp.blogspot.com/-Dv907wyr1CM/YH1FLYYUVPI/AAAAAAAABbY/y-TkO32Z5R8Ffo7oPIVIb1F_-FDlmBIkwCLcBGAsYHQ/s1347/hasil-optimasi-gambar-blog.jpg" title="Cara Mengoptimasi Gambar Blog Agar Loading Semakin Kencang"/>

5. Gunakan Ukuran Gambar yang Pas

Jangn memaksakan menggunakan ukuran gambar full-width demi kepuasan pengunjung yang maksimal, tetapi mengorbankan kecepatan loading website.

Toh, kalau loading web jadi lambar karena memaksakan gambar berukuran besar, sama saja itu mengorbankan User Experience.

Kalau di Blogger sebaiknya pilih gambar berukuran sedang atau besar. Sementara di Wordpress apalagi kalau pakai plugin web builder Elementor, pilih custom gambar saja, jangan full width.

Update!

6. Pakai Format Gambar Terbaru

Kalau Anda melakukan test di Google PageSpeed Insight atau Lighthouse pasti pernah lihat saran sebaiknya menggunakan format gambar terbaru seperti JPEG 2000 atau WebP. Saya udah coba sendiri dan hasilnya format WebP lebih unggul daripada PNG dan JPG karena bisa mengkompress gambar lebih kecil, tetapi resolusi masih bagus.

Untuk tutorial cara mengubah gambar ke WebP silakan baca ini : Website untuk mengubah JPG ke WebP

Demikianlah artikel yang membahas cara optimasi gambar website agar lebih SEO friendly sehingga User Experience blog Anda meningkat. Ilmu-ilmu di sini saya dapatkan dari beberapa SEO Specialist yang pernah saya ikuti webinarnya dan saya bertanya tentang hal ini waktu itu.

Andhika YP
Andhika YP Halo, nama saya Andhika YP. Situs andhikayp.com ini digunakan sebagai blog pribadi. Saat ini saya magang di Kotakode sebagai SEO Analyst. Jangan lupa follow Instagram saya yaa!

Posting Komentar untuk "5 Cara Optimasi Gambar Blog Agar Optimal Ala SEO Specialist"