Optimasi Gambar Untuk Meningkatkan Kecepatan Situs Web Dan Promosi Situs Web - Ahli Semalt

Gambar adalah salah satu komponen terpenting dari web, mengikuti teks tentunya. Situs web tanpa gambar biasanya akan membosankan dan kurang memotivasi para peselancar, dibandingkan situs yang memiliki gambar.

Juga, ada beberapa area di mana penggunaan gambar adalah wajib dan bahkan diperlukan untuk membenarkan situs tersebut.

Sebagai contoh:

Situs perdagangan online
Situs portofolio dan tampilan karya
Situs gambar yang foto-fotonya adalah "produk" - misalnya, gaun pengantin, fotografi acara, dll.
Jejaring Sosial - Semakin banyak penelitian menunjukkan fakta bahwa posting dengan foto mendapatkan lebih banyak komentar dan berbagi, dengan persentase yang cukup besar dibandingkan dengan posting dan status tanpa foto

Promosi gambar Google: menggunakan gambar dengan benar

Sudahkah Anda menginvestasikan dan membeli foto dari situs foto/repositori gambar, atau pernahkah Anda memperbesar dan mengambil foto sendiri? Anda juga harus memaksimalkannya untuk tujuan SEO!

Promosi Gambar Google adalah salah satu dari cara terbaik untuk meningkatkan lalu lintas situs web di area tertentu - terutama yang berfokus pada sisi visual.

Terlepas dari hal-hal di atas, penggunaan gambar yang tidak tepat dapat lebih merugikan daripada menguntungkan situs dan bahkan secara signifikan mengganggu upaya promosi. Saat berbicara tentang penggunaan gambar di file konteks promosi organik, penting juga untuk mengingat beberapa aturan, penggunaan gambar yang tidak tepat dapat sangat mengganggu kecepatan situs, dan oleh karena itu dapat berdampak signifikan pada promosi.

Aturan pengoptimalan gambar dasar:

1. Berat dan dimensi gambar

Salah satu parameter penting untuk mempromosikan gambar secara online - adalah bobot gambar.

Di satu sisi, kami ingin menggunakan gambar berkualitas tinggi tetapi di sisi lain, ini tidak akan mengorbankan kecepatan situs, pengalaman pengguna, dan promosi. Rekomendasinya adalah selalu untuk "mengoptimalkan" (dari kata optimasi) gambar semaksimal mungkin, tanpa mengurangi kualitas secara signifikan. Untuk melakukan ini, ikuti semua aturan berikut:

Menggunakan format yang sesuai untuk berbagai situasi (jpg, png, gif, dan lainnya) - detail lengkap tentang jenis format di bawah.
Penting - Mengatur dimensi setiap gambar di situs - Hindari menampilkan gambar yang lebih kecil dari ukuran sebenarnya (fisik) gambar sebanyak mungkin, agar tidak menyia-nyiakan sumber daya yang tidak perlu. Semakin besar dan lebih mobile situsnya, semakin besar signifikansinya.
Memastikan Pencocokan Responsif - Jika Anda bekerja dengan WordPress dan template modern, kemungkinan Anda telah menutup sudut ini. Namun jika tidak, penting untuk selalu memastikan bahwa gambar di situs, terutama gambar yang ada di dalam postingan, responsif dan ditampilkan dengan baik di perangkat seluler, tablet, dll.
Kompresi maksimum bobot gambar tanpa menurunkan kualitas secara signifikan (perluasan alat dan metode untuk melakukannya - di bawah).

Bobot yang direkomendasikan untuk foto

Hampir semua gambar dapat dikompresi ke satu derajat atau lainnya sehingga selalu disarankan untuk menggunakan hanya dimensi yang benar-benar diperlukan dan yang ditampilkan secara fisik di situs, dan kurangi bobot gambar sebanyak mungkin. Ini benar untuk situs manapun. Tetapi terutama untuk situs dengan banyak gambar. Tidak ada satu aturan yang benar dalam semua kasus, tetapi disarankan untuk memastikan bahwa berat gambar tidak melebihi 70-80K kecuali gambar galeri/slider dengan kepentingan khusus.

2. Pilih nama yang sesuai untuk gambar

Dalam pencarian gambar di Google, beberapa parameter diperhitungkan untuk menampilkan gambar yang relevan dengan kueri. Salah satunya adalah nama file. Sebaiknya luangkan waktu satu detik lagi dan beri nama pada gambar yang menggambarkan apa yang Anda lihat pada gambar. Penting untuk menyimpan nama file dalam bahasa Inggris dan menggunakan garis tengah dan bukan spasi. Alasannya adalah Google mengatasi lebih baik dengan tanda hubung tengah.

Contoh nama yang buruk untuk sebuah gambar:

DSC2387.jpg

Promotor situs.png

Contoh nama yang bagus untuk sebuah gambar:

Search-engine-optimizer.jpg

Bagi Anda yang bertanya-tanya - ya, Google juga tahu cara menangani nama gambar bahasa Inggris untuk bahasa lain. Karena ia tahu bagaimana menerjemahkan string pencarian dan menyorot kata-kata yang diterjemahkan dalam hasil pencarian.

3. ALT ke gambar

Alt tag yang merupakan singkatan dari alternative merupakan parameter yang bertujuan untuk mendeskripsikan gambar. Alt tag didefinisikan dalam sistem manajemen/kode HTML untuk setiap gambar secara individual, dan fungsi aslinya adalah untuk melayani para tunanetra dan penyandang disabilitas yang menggunakan perangkat lunak khusus yang memindai tag ini dan membaca apa yang tertulis.

Secara teknis dalam kodenya, terlihat seperti ini:

<imgsrc="tree.jpg" alt="tree">

Selain pentingnya tag dalam hal aksesibilitas situs web, tag juga penting bagi mesin pencari. Alt tag membantu mesin pencari memahami subjek gambar (bersama dengan hal-hal lain seperti nama file, konteks halaman, dll.) Dan juga secara alami memengaruhi pencarian gambar di Google.

Juga, tag alt adalah bagian dari pengoptimalan di halaman untuk semuanya. Selain itu, bila ada tautan eksternal yang keluar dari gambar, tag alt berfungsi sebagai semacam jangkar teks ("teks jangkar") untuk gambar.

Bagaimana cara memeriksa apakah gambar memiliki tag ALT?

Ada beberapa cara:

Secara keseluruhan - klik pada gambar dengan mouse -> klik kanan -> periksa elemen (kata-katanya bervariasi di browser yang berbeda).
Kami ingin mencari tag di dalam perintah <img> seperti yang diilustrasikan sebelumnya.
Gunakan plugin yang disebut Pengembang Web (bagus untuk banyak tugas lainnya). Ekstensi memungkinkan kita, dengan mengklik tombol, untuk menampilkan semua tag alt yang dimiliki gambar pada halaman tertentu.

Screaming Frog - Gunakan katak yang sesuai saat kita ingin melakukan scan menyeluruh terhadap gambar di situs.

Prosesnya adalah memasukkan URL untuk dipindai dan kemudian klik pada tab Gambar.

Di sana kita akan melihat daftar gambar di situs, yang dapat diurutkan berdasarkan beberapa parameter:

Gambar dengan berat lebih dari 100kb
Gambar tanpa tag ALT
Gambar dengan tag ALT yang berisi lebih dari 100 karakter (dan Anda mungkin harus mempersingkatnya sedikit)

Tentu saja ada lebih banyak cara dan lebih banyak plugin dari berbagai jenis, tetapi bagi saya tampaknya saya telah membahas subjek di sini dalam hal kebutuhan poin, per halaman, dan ulasan menyeluruh dari situs.

Promosi gambar Google - tips untuk mengoptimalkan tag ALT

Anda tidak boleh memaksakan kata kunci, tetapi coba gambarkan apa yang Anda lihat di gambar.

Jika memungkinkan untuk menggabungkan deskripsi gambar + kata kunci yang relevan agar menonjol secara alami - bagus.
Tidak perlu membesar-besarkan deskripsi, alt tag 2-5 kata sudah lebih dari cukup.
Disarankan agar tag alt dan tag judul untuk gambar tidak identik.
Untuk situs perdagangan - jika produk memiliki nomor model, disarankan untuk menggunakannya di tag alt (untuk muncul di pencarian gambar Google).

Tidak perlu menggunakan alts untuk wallpaper/gambar dekoratif - bahkan disarankan untuk tidak menggunakan agar Google tidak curiga bahwa Anda mencoba untuk melakukan optimasi yang berlebihan.

4. Tag judul untuk sebuah gambar

Keterangan gambar, atau Keterangan, adalah sejenis keterangan alat yang dapat dilihat dengan menggerakkan mouse di atas gambar. Banyak orang mengacaukannya dengan tag ALT.

Judul gambar adalah indikasi lain dari relevansi dan subjek gambar yang dapat membantu Google memahami apa yang dibicarakan gambar tersebut dan meningkatkan peringkat pencarian gambarnya. Berbeda dengan tag ALT, tag judul biasanya lebih deskriptif dan sedikit lebih panjang, dan tujuannya adalah untuk menjelaskan kepada surfer apa yang terlihat pada gambar dan/atau apa yang akan muncul setelah mengklik gambar. Situs berita sering menggunakan tag ini.

Seperti inilah tampilannya dalam kode:

5. Jenis gambar dan ekstensi file

Ada beberapa format umum untuk menggunakan gambar secara online. Saya akan menjelaskan secara singkat masing-masing:

JPEG/JPG - Format gambar tertua dan mungkin paling umum di web. Keuntungan dari format JPG adalah kemampuannya untuk menampilkan gambar dengan kualitas yang relatif tinggi dan bobot yang rendah. Gambar JPG tidak mendukung opasitas.
GIF - Format GIF juga telah bersama kami cukup lama, dimulai dari hari-hari ketika masih ada disket. Gif hanya mendukung 256 warna, jadi format gambar berkualitas lebih rendah dan terutama ditujukan untuk digunakan sebagai ikon atau dekorasi dari berbagai jenis. Selain itu, format GIP mendukung animasi, dan bahkan Facebook baru-baru ini mulai mendukung format ini di feed.

Intinya - gif tidak dimaksudkan untuk menampilkan gambar, terutama dalam hal kualitas gambar, tetapi untuk ikon, animasi, dan elemen yang lebih sederhana.

PNG - Ini adalah format (yang relatif) baru dalam kelompok. Keunggulan utama file PNG - kualitas lebih tinggi dibandingkan JPG dan GIF, dan dukungan transparansi. File PNG dibagi menjadi 2 format - PNG24 yang memiliki kualitas lebih baik (dan memiliki bobot gambar yang sesuai) dan PNG8 yang paling ekonomis dari semuanya.

Ada banyak format gambar lain yang tersedia, tetapi kurang relevan untuk digunakan di situs web.

Tip - Bagi mereka yang menggunakan Photoshop, saya selalu merekomendasikan untuk membandingkan bobot gambar menggunakan Save for web dan perangkat antara format yang berbeda (ada pratinjau bobot gambar sebelum menyimpan file).

Aturan praktis untuk memilih format gambar

Dalam kebanyakan kasus, format JPG akan melakukan pekerjaan itu. Gambar JPG memungkinkan kualitas tinggi dan bobot file rendah.
Jangan gunakan GIF dalam file besar yang berisi banyak detail - berat file akan besar. Formatnya tidak dirancang untuk ini dan lebih cocok untuk digunakan dengan elemen kecil dan sederhana.
Jika transparansi memainkan peran penting - gunakan format PNG. Selalu disarankan untuk membandingkan PNG24 dan PNG8 untuk mengurangi bobot gambar seminimal mungkin.

6. Penggunaan Thumbnail dengan benar

Thumbnail (pratinjau) adalah komponen penting dan bahkan kritis dari beberapa situs - terutama situs berbasis galeri dan situs niaga. Thumbnail ("Thumbnail" oleh Google Terjemahanâ € ¦) bisa bagus di satu sisi tetapi secara signifikan menyabotase situs dan pengalaman pengguna di sisi lain.

Hal terpenting dalam menggunakan gambar ini adalah menjaga kualitas dan bobot yang wajar serendah mungkin. Di situs perdagangan besar yang mengandalkan thumbnail untuk menampilkan halaman kategori dan pratinjau produk, fakta ini sangat penting. Tahukah Anda bahwa setiap detik penundaan dalam memuat situs menghabiskan biaya Amazon $ 1,6 miliar setahun? Sebagian besar waktu pemuatan di situs semacam itu adalah gambar.

Benar, kebanyakan dari kita hanya dapat bermimpi memiliki situs sebesar ini. Tapi tahukah Anda - perubahan besar dimulai dari bawah ke atas dan yang kecil. Semakin cepat kita membahasnya, semakin baik.

Tips menggunakan Gambar Mini dengan benar

Sangat disarankan untuk membuat thumbnail untuk thumbnail dan gambar yang lebih besar untuk halaman produk itu sendiri. Jangan gunakan gambaran besar sebagai thumbnail! Ini akan memuat beberapa kali pemuatan situs, terutama bila ada banyak thumbnail di satu halaman. Di berbagai sistem CMS, Anda secara otomatis dibebaskan dari masalah ini.

Terkait aturan pengoptimalan gambar, disarankan untuk berinvestasi lebih banyak pada gambar besar daripada thumbnail. Misalnya - jangan menyertakan thumbnail di Image Sitemap (ekstensi di bawah), dalam beberapa kasus bahkan tidak menyetel tag ALT untuk mereka. Ambisinya adalah bahwa Google akan mengindeks gambar besar dengan mengorbankan thumbnail dan bukan sebaliknya.

Direkomendasikan untuk mengatur Image Title menjadi Thumbnail, yang mendeskripsikan produk dalam beberapa kata dan secara umum apa yang akan dilihat oleh surfer setelah mengklik gambar tersebut.

Jika setiap halaman kategori produk memiliki banyak produk (katakanlah lebih dari 30), disarankan untuk menggunakan script Lazy Load yang memuat gambar hanya saat peselancar menggulir ke area tempat mereka berada.

7. Penggunaan teks pembungkus

Biasanya, gambar datang untuk menyajikan teks dan bukan sebaliknya. Namun sejauh menyangkut pengoptimalan gambar dan promosi gambar Google, dan jika situs tersebut adalah jaring berdasarkan gambar, sangat bermanfaat untuk tidak mengabaikan masalah teks, meskipun itu adalah hal mendasar.

Bagi mereka yang ingin mempertahankan tampilan yang bersih dan minimalis (misalnya di situs web portofolio fotografer), disarankan agar dia setidaknya menetapkan hal berikut di setiap halaman yang memiliki gambar:

H1 Menurut subjek gambar
Deskripsi singkat (bahkan 10-20 kata lebih baik daripada tidak sama sekali) pada gambar, sebaiknya dengan satu atau dua kata kunci yang relevan
Judul dan deskripsi tentu saja relevan (jika itu adalah halaman fisik dan bukan gambar yang muncul dari galeri).
Alt dan judul foto - Sangat disarankan dalam kasus ini.

8. Peta Situs untuk foto

Image Sitemap (image-sitemap.xml) membantu Google membaca dan mengindeks gambar kita di situs dengan lebih baik. Mirip dengan peta situs XML standar, peta situs gambar dapat dikirimkan menggunakan Search Console, di area peta situs.

Tambahkan Peta Situs di Search Console

Peta situs gambar sangat berguna saat menggunakan semua jenis galeri dengan skrip dan berbagai efek - yang sulit dipindai Google secara konvensional.

Ada beberapa parameter untuk menggunakan peta situs dari gambar.

Bagaimana cara membuat peta situs?

WordPress - Seperti biasa jika Anda bekerja di WordPress, hidup Anda mudah. Plugin Udinra All Image Sitemap menutup sudut untuk Anda. Yang harus Anda lakukan adalah menginstal plugin, menandai beberapa V di pengaturan, membuat peta situs, dan meluncurkannya ke Google melalui Search Console.

Di platform lain - itu tergantung. Jika tidak ada solusi Out of box seperti plugin dll, ini dapat dilakukan menggunakan Screaming Frog.

Katak dapat membantu Anda menghasilkan gambar peta situs dengan mudah. Satu-satunya masalah - itu tidak akan diperbarui secara otomatis (tidak seperti plugin) dan harus di-refresh dari waktu ke waktu.

Bagaimana kamu melakukannya?

Pemindaian penuh dari situs yang diminta harus dilakukan dan kemudian di menu atas perangkat lunak pergi ke Peta Situs -> Buat Gambar Peta Situs. Yang akan Anda terima adalah file XML halal untuk digunakan dan diluncurkan melalui Search Console.

9. Mendorong berbagi foto

Jika Anda membanggakan banyak penggunaan gambar asli (baik gambar fisik atau elemen grafis) dan gambar adalah hal utama atau setidaknya bagian penting dari situs, sangat bermanfaat untuk mendorong pengguna untuk membagikan gambar di media sosial. jaringan dan memudahkan mereka untuk melakukannya.

Seperti biasa, saya memiliki tip praktis untuk platform WordPress, di sistem lain saya merekomendasikan menggunakan programmer atau memeriksa apakah ada plugin khusus untuk itu.

WordPress memiliki 2 plugin yang bagus untuk tujuan ini:

Social Image Hover untuk WordPress - Plugin berbayar (em; cat kuku - $ 17).
Tombol Pin it Pinterest - Sebuah plugin yang menambahkan ikon Pinterest kecil ke foto di situs.

10. Alat pengurangan dan pengoptimalan gambar

TinyPNG - layanan luar biasa yang memungkinkan Anda mengompres gambar secara online dengan antarmuka seret yang nyaman. Mereka juga memiliki API yang memungkinkan Anda bekerja dalam jumlah yang lebih besar dan otomatis, dan juga plugin hebat untuk WordPress yang memungkinkan Anda untuk mengompres semua gambar di situs - membutuhkan penggunaan API mereka (gratis untuk 500 gambar per bulan).

Fotosizer - Perangkat lunak desktop bagus yang memungkinkan Anda mengedit gambar dalam jumlah banyak - tidak hanya kompresi tetapi juga pengurangan dimensi, menambahkan tanda air dan berbagai efek pada gambar dan banyak fitur bagus lainnya.

Kesimpulan

Anda baru saja memahami pentingnya mengoptimalkan gambar situs web. Namun, jika Anda ingin mengetahui status situs Anda saat ini, Anda dapat melakukannya secara gratis berkat Semalt's Konsultasi SEO.

Semalt akan membantu Anda mengidentifikasi masalah SEO yang terkait dengan situs Anda. Selain itu, dengan Pakar Semalt Anda bisa dengan mudah meningkatkan kinerja bisnis online Anda dengan biaya yang lebih rendah.

mass gmail