Dapatkan info dan insight terbaru dari Google I/O 2019.
Banyak hal luar biasa terjadi dengan Google Penelusuran, dan kami sangat senang dapat membagikannya di Google I/O 2019!
Dalam postingan ini, kami akan berfokus pada praktik terbaik agar aplikasi web JavaScript dapat ditemukan di Google Penelusuran, termasuk:
- Googlebot terkini yang selalu baru
- Pipeline Googlebot untuk crawling, rendering, dan pengindeksan
- Deteksi fitur dan penanganan error
- Strategi rendering
- Alat pengujian untuk situs Anda di Google Penelusuran
- Tantangan umum dan kemungkinan solusinya
- Praktik terbaik untuk SEO di aplikasi web JavaScript
Kenali Googlebot yang selalu ada
Tahun ini, kami mengumumkan Googlebot evergreen baru yang sangat dinantikan.
Googlebot kini menggunakan mesin Chromium modern untuk merender situs untuk Google Penelusuran. Selain itu, kami akan menguji versi Chromium yang lebih baru untuk terus mengupdate Googlebot, biasanya dalam beberapa minggu sejak setiap rilis Chrome stabil. Pengumuman ini merupakan berita besar bagi developer web dan SEO karena menandai hadirnya 1.000+ fitur baru—seperti ES6+, IntersectionObserver, dan Komponen Web v1—di Googlebot.
Mempelajari cara kerja Googlebot
Googlebot adalah pipeline dengan beberapa komponen. Mari kita pelajari untuk memahami cara Googlebot mengindeks halaman untuk Google Penelusuran.
Prosesnya bekerja seperti ini:
- Googlebot mengantrekan URL untuk di-crawl.
- Tindakan ini kemudian mengambil URL dengan permintaan HTTP berdasarkan anggaran crawl.
- Googlebot memindai HTML untuk mencari link dan mengantrekan link yang ditemukan untuk di-crawl.
- Googlebot kemudian mengantrekan halaman untuk dirender.
- Sesegera mungkin, instance Chromium headless akan merender halaman, yang menyertakan eksekusi JavaScript.
- Googlebot menggunakan HTML yang telah dirender untuk mengindeks halaman.
Penyiapan teknis Anda dapat memengaruhi proses crawling, rendering, dan pengindeksan. Misalnya, waktu respons yang lambat atau error server dapat memengaruhi anggaran crawling. Contoh lainnya adalah mengharuskan JavaScript untuk merender link dapat menyebabkan penemuan link ini menjadi lebih lambat.
Menggunakan deteksi fitur dan menangani error
Googlebot evergreen memiliki banyak fitur baru, tetapi beberapa fitur masih belum didukung. Mengandalkan fitur yang tidak didukung atau tidak menangani error dengan benar dapat menyebabkan Googlebot tidak dapat merender atau mengindeks konten Anda.
Perhatikan contohnya:
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
Halaman ini mungkin tidak menampilkan konten apa pun dalam beberapa kasus karena kode tidak menangani saat pengguna menolak izin atau ketika panggilan getCurrentPosition menampilkan error. Googlebot menolak permintaan izin seperti ini secara default.
Berikut adalah solusi yang lebih baik:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
Jika Anda mengalami masalah terkait pengindeksan situs JavaScript, baca panduan pemecahan masalah kami untuk menemukan solusinya.
Memilih strategi rendering yang tepat untuk aplikasi web Anda
Strategi rendering default untuk aplikasi web satu halaman saat ini adalah rendering sisi klien. HTML memuat JavaScript, yang kemudian menghasilkan konten di browser saat dieksekusi.
Mari kita lihat aplikasi web yang menampilkan kumpulan gambar kucing dan menggunakan JavaScript untuk dirender sepenuhnya di browser.
Jika Anda bebas memilih strategi rendering, pertimbangkan rendering sisi server atau pra-rendering. Crawler menjalankan JavaScript pada server untuk menghasilkan konten HTML awal, yang dapat meningkatkan performa bagi pengguna dan crawler. Strategi ini memungkinkan browser mulai merender HTML saat tiba di jaringan, sehingga halaman memuat lebih cepat. Sesi rendering di I/O atau postingan blog tentang rendering di web menunjukkan bagaimana rendering dan hidrasi sisi server dapat meningkatkan performa dan pengalaman pengguna aplikasi web serta memberikan lebih banyak contoh kode untuk strategi ini.
Jika Anda mencari solusi untuk membantu crawler yang tidak menjalankan JavaScript, atau jika Anda tidak dapat melakukan perubahan pada codebase frontend, pertimbangkan untuk melakukan rendering dinamis, yang dapat Anda coba di codelab ini. Namun, perlu diketahui bahwa Anda tidak akan mendapatkan manfaat performa atau pengalaman pengguna seperti yang diperoleh dengan rendering sisi server atau pra-rendering karena rendering dinamis hanya menyajikan HTML statis ke crawler. Hal tersebut menjadikannya sebagai solusi sementara, bukan strategi jangka panjang.
Uji halaman Anda
Meskipun umumnya sebagian besar halaman berfungsi dengan baik dengan Googlebot, sebaiknya uji halaman secara rutin untuk memastikan konten Anda tersedia untuk Googlebot dan tidak ada masalah. Ada beberapa alat hebat untuk membantu Anda melakukannya.
Cara termudah untuk melakukan pemeriksaan cepat pada halaman adalah Pengujian Situs Mobile-Friendly. Selain menunjukkan masalah terkait mobile-friendly, cara ini juga memberi Anda screenshot konten paruh atas dan HTML yang dirender seperti yang dilihat Googlebot.
Anda juga dapat mencari tahu apakah ada masalah pemuatan resource atau error JavaScript.
Sebaiknya verifikasi domain Anda di Google Search Console sehingga Anda dapat menggunakan Alat Inspeksi URL untuk mengetahui lebih lanjut status crawling dan pengindeksan URL, menerima pesan saat Search Console mendeteksi masalah, serta mencari tahu detail lebih lanjut tentang performa situs Anda di Google Penelusuran.
Untuk tips dan panduan SEO umum, Anda dapat menggunakan audit SEO di Lighthouse. Untuk mengintegrasikan audit SEO ke dalam rangkaian pengujian Anda, gunakan Lighthouse CLI atau bot Lighthouse CI.
Alat ini membantu Anda mengidentifikasi, men-debug, dan memperbaiki masalah terkait halaman di Google Penelusuran, serta harus menjadi bagian dari rutinitas pengembangan Anda.
Dapatkan info terbaru dan hubungi kami
Untuk terus mendapatkan info terbaru tentang pengumuman dan perubahan pada Google Penelusuran, pantau terus Blog Webmaster, channel YouTube Google Webmaster, dan akun Twitter kami. Lihat juga panduan developer tentang Google Penelusuran dan serial video SEO JavaScript kami untuk mempelajari SEO dan JavaScript lebih lanjut.