Praktik terbaik SEO Google Gambar
Google menyediakan beberapa fitur dan produk Penelusuran yang membantu pengguna menemukan informasi secara visual di web, seperti gambar hasil teks, Google Discover, dan Google Gambar. Meski setiap fitur dan produk terlihat berbeda, rekomendasi umum agar gambar muncul di dalamnya tetap sama.
![Ilustrasi yang menampilkan gambar di hasil penelusuran Google, tab gambar, dan Discover](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/images-on-google.png?authuser=0000&hl=id)
Anda dapat mengoptimalkan gambar agar muncul di hasil penelusuran Google dengan mengikuti praktik terbaik berikut:
Membantu kami menemukan dan mengindeks gambar
Persyaratan teknis untuk menampilkan konten Anda di hasil penelusuran Google juga berlaku untuk gambar. Karena gambar memiliki format yang pada dasarnya berbeda dengan HTML, ada persyaratan tambahan agar gambar dapat diindeks. Misalnya, cara menemukan gambar di situs Anda berbeda, dan penyajian gambar juga memengaruhi apakah gambar akan diindeks, dan untuk kata kunci yang tepat.
Gunakan elemen gambar HTML untuk menyematkan gambar
Menggunakan elemen gambar HTML standar membantu crawler menemukan dan memproses gambar. Google dapat menemukan gambar
dalam atribut src
dari elemen <img>
(meskipun elemen tersebut merupakan turunan dari elemen lain,
seperti elemen <picture>
). Google tidak mengindeks gambar CSS.
Baik:
<img src="puppy.jpg" alt="A golden retriever puppy" />
Buruk:
<div style="background-image:url(puppy.jpg)">A golden retriever puppy</div>
Menggunakan peta situs gambar
Anda dapat memberikan URL gambar yang mungkin tidak dapat kami temukan dengan mengirimkan peta situs gambar.
Tidak seperti peta situs reguler, Anda dapat menyertakan URL dari domain lain dalam
elemen <image:loc>
dari peta situs gambar. Hal ini memungkinkan Anda menggunakan CDN (jaringan
penayangan konten) untuk menghosting gambar. Jika menggunakan CDN, sebaiknya Anda
memverifikasi kepemilikan
nama domain CDN di Search Console sehingga kami dapat menginformasikan error crawl yang kami
temukan kepada Anda.
Gambar yang responsif
Desain yang responsif akan memudahkan halaman web diakses di berbagai jenis perangkat, dan hal ini tentu menghadirkan pengalaman yang lebih baik bagi pengguna. Lihat panduan gambar responsif kami untuk mempelajari praktik terbaik dalam menangani gambar di situs Anda.
Halaman web menggunakan elemen <picture>
atau atribut srcset
dari
elemen img
untuk menentukan gambar responsif. Namun, beberapa browser dan crawler tidak
memahami atribut tersebut. Sebaiknya Anda selalu menentukan URL pengganti melalui
atribut src
.
Atribut srcset
memungkinkan penentuan berbagai versi gambar yang sama,
khususnya untuk ukuran layar yang berbeda. Contoh:
<img srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="maine-coon-nap-800w.jpg" alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">
Elemen <picture>
adalah container yang digunakan untuk mengelompokkan berbagai versi
<source>
untuk gambar yang sama. Elemen ini menawarkan pendekatan penggantian sehingga
browser dapat memilih gambar yang tepat berdasarkan kemampuan perangkat, seperti kepadatan piksel dan ukuran
layar. Elemen picture
juga bermanfaat untuk penggunaan format gambar baru dengan
degradasi halus bawaan bagi klien yang mungkin belum mendukung format baru.
Sesuai dengan
bagian 4.8.1 Standar HTML,
pastikan Anda memberikan elemen img
sebagai pengganti dengan atribut src
saat menggunakan elemen picture
menggunakan format berikut:
<picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid"> </picture>
Menggunakan format gambar yang didukung
Google Penelusuran mendukung gambar yang dirujuk dalam atribut src
dari img
dalam
format file berikut:
BMP, GIF, JPEG, PNG, WebP, dan SVG. Sebaiknya Anda memiliki
ekstensi dari nama file yang sesuai dengan jenis file.
Anda juga dapat menyisipkan gambar sebagai URI Data. URI Data menyediakan cara untuk menyertakan file, seperti
gambar, secara inline dengan menyetel atribut src
dari elemen img
sebagai
string berenkode Base64 menggunakan format berikut:
<img src="data:image/svg+xml;base64,[data]">
Meskipun menyisipkan gambar dapat mengurangi permintaan HTTP, tentukan dengan cermat kapan gambar tersebut akan digunakan, karena penyisipan gambar dapat meningkatkan ukuran halaman secara signifikan. Untuk mengetahui info selengkapnya terkait hal ini, baca bagian keunggulan dan kekurangan penyisipan gambar di halaman web.dev kami.
Optimalkan kecepatan dan kualitas
Foto berkualitas tinggi lebih menarik bagi pengguna daripada gambar yang blur dan tidak jelas. Selain itu, gambar yang tajam di thumbnail hasil terlihat lebih menarik bagi pengguna dan dapat meningkatkan kemungkinan mendapatkan traffic dari pengguna. Oleh karena itu, ukuran halaman secara keseluruhan sering kali ditentukan oleh ukuran gambar di halaman tersebut, yang dapat berdampak pada pemuatan halaman yang lambat dan tidak murah. Pastikan Anda menerapkan pengoptimalan gambar terbaru dan teknik gambar responsif untuk memberikan pengalaman pengguna yang cepat dan berkualitas tinggi.
Analisis kecepatan situs Anda dengan PageSpeed Insights dan buka artikel Mengapa kecepatan itu penting? untuk mempelajari berbagai praktik terbaik dan teknik guna meningkatkan performa situs.
Mengoptimalkan halaman landing gambar
Meskipun tidak langsung terlihat, konten dan metadata halaman tempat gambar disematkan dapat sangat memengaruhi bagaimana dan di mana gambar muncul di hasil penelusuran Google.
Memeriksa judul dan deskripsi halaman
Google Penelusuran otomatis membuat link judul dan cuplikan untuk menjelaskan sebaik mungkin setiap hasil dan hubungannya dengan kueri pengguna. Hal ini membantu pengguna menentukan apakah akan mengklik hasil atau tidak. Berikut adalah dua contoh tampilan link judul dan cuplikan di halaman hasil penelusuran Google:
![Ilustrasi yang menampilkan judul dan deskripsi di hasil penelusuran gambar](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/titles-descriptions-in-image-results.png?authuser=0000&hl=id)
Kami menggunakan sejumlah sumber yang berbeda untuk informasi ini, termasuk informasi dalam
tag meta
dan title
untuk setiap halaman.
Anda dapat membantu kami meningkatkan kualitas link judul dan cuplikan yang ditampilkan untuk halaman Anda dengan mengikuti panduan judul dan cuplikan Google.
Menambahkan data terstruktur
Jika Anda menyertakan data terstruktur, Google dapat menampilkan gambar Anda di hasil multimedia tertentu, termasuk badge yang terlihat jelas di Google Gambar, yang memberikan informasi relevan tentang halaman Anda kepada pengguna serta dapat mengarahkan traffic yang ditargetkan secara lebih baik ke situs Anda.
Ikuti panduan umum data terstruktur serta panduan lain khusus untuk jenis data terstruktur Anda. Jika tidak, data terstruktur Anda mungkin tidak memenuhi syarat untuk muncul di hasil kaya di Google Gambar. Di setiap jenis data terstruktur ini, atribut gambar merupakan kolom yang wajib diisi agar memenuhi syarat untuk badge dan hasil multimedia di Google Gambar. Berikut dua contoh tampilan hasil kaya di Google Gambar:
![Ilustrasi yang menunjukkan cara hasil multimedia muncul di Google Gambar](https://developers-dot-devsite-v2-prod.appspot.com/static/search/docs/images/structured-data-in-image-results.png?authuser=0000&hl=id)
Gunakan nama file, judul, dan teks alternatif yang deskriptif
Google mengekstrak informasi tentang materi pokok gambar dari konten halaman, termasuk teks dan judul gambar. Jika memungkinkan, pastikan gambar ditempatkan di dekat teks yang relevan dan di halaman yang relevan dengan materi pokok gambar.
Sama halnya, nama file dapat memberikan petunjuk yang sangat jelas tentang materi pokok gambar kepada Google.
Jika memungkinkan, gunakan nama file yang pendek dan deskriptif. Misalnya,
my-new-black-kitten.jpg
lebih baik daripada IMG00023.JPG
. Hindari penggunaan nama file generik
seperti image1.jpg
, pic.gif
, 1.jpg
jika memungkinkan.
Jika situs Anda memiliki ribuan gambar, sebaiknya beri nama gambar
secara otomatis. Jika Anda melokalkan gambar, jangan lupa untuk menerjemahkan nama file dengan memperhatikan
pedoman encoding URL jika Anda menggunakan
karakter khusus atau non-latin.
Teks alternatif (teks yang mendeskripsikan gambar) merupakan atribut terpenting saat Anda memberikan lebih banyak metadata untuk gambar. Atribut ini juga meningkatkan aksesibilitas bagi orang yang tidak dapat melihat gambar di halaman web, termasuk pengguna yang menggunakan pembaca layar atau memiliki koneksi bandwidth yang rendah.
Google menggunakan teks alternatif beserta algoritma computer vision dan konten halaman untuk memahami materi pokok gambar. Selain itu, teks alternatif dalam gambar berguna sebagai teks link jika Anda memutuskan untuk menggunakan gambar sebagai link.
Saat menulis teks alternatif, fokuslah pada pembuatan konten yang bermanfaat dan kaya informasi yang
menggunakan kata kunci yang relevan dan sesuai dengan konten halaman. Jangan mengisi atribut alt
dengan kata kunci (juga dikenal sebagai
penjejalan kata kunci)
karena akan berdampak negatif pada pengalaman pengguna dan dapat menyebabkan situs Anda ditandai sebagai spam.
Buruk (teks alternatif tidak ada):
<img src="puppy.jpg"/>
Buruk (penjejalan kata kunci)::
<img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
Lebih baik:
<img src="puppy.jpg" alt="puppy"/>
Terbaik:
<img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>
Pertimbangkan juga aksesibilitas teks alternatif Anda, sesuai
panduan W3.
Untuk elemen <img>
, Anda dapat menambahkan atribut alt
elemen, sedangkan untuk elemen <svg>
inline, Anda dapat menggunakan
elemen <title>
. Contoh:
<svg aria-labelledby="svgtitle1"> <title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title> </svg>
Sebaiknya uji konten Anda dengan mengaudit aksesibilitas dan menggunakan emulator koneksi jaringan yang lambat.
Memilih tidak ikut penautan inline Google Gambar
Jika mau, Anda dapat mencegah munculnya gambar berukuran penuh di halaman hasil penelusuran Google Gambar dengan memilih tidak ikut penautan inline di hasil penelusuran Google Gambar. Untuk memilih tidak ikut penautan inline:
- Saat gambar Anda diminta, periksa header perujuk HTTP dalam permintaan.
-
Jika permintaan tersebut berasal dari domain Google, balas dengan kode status HTTP
200
, atau kode status HTTP204
dan tanpa konten.
Google tetap akan meng-crawl halaman Anda dan melihat gambar tersebut, tetapi akan menampilkan gambar thumbnail yang dihasilkan pada waktu crawling dalam hasil penelusuran. Opsi tidak ikut ini dapat dipilih kapan saja, dan tidak memerlukan pemrosesan ulang gambar situs. Perilaku ini tidak dianggap sebagai penyelubungan gambar dan tidak akan dikenai tindakan manual.
Atau, Anda dapat mencegah gambar ditampilkan dalam hasil penelusuran sepenuhnya.
Mengoptimalkan untuk SafeSearch
SafeSearch adalah setelan di akun pengguna Google yang menentukan apakah akan menampilkan, memburamkan, atau memblokir gambar, video, dan situs vulgar di hasil Google Penelusuran. Pastikan Google memahami sifat situs Anda sehingga Google dapat menerapkan filter SafeSearch ke situs tersebut jika diperlukan. Pelajari lebih lanjut cara melabeli halaman untuk SafeSearch.