DMIWEBZ - Sebagian besar penolakan dari kebanyakan pemula dan pengembang ketika mereka ditanya mengapa tidak membangun aplikasi web mereka dengan aplikasi satu halaman adalah karena itu tidak ramah mesin pencari. Mereka beranggapan bahwa halaman tersebut tidak dapat dibaca oleh crawler mesin pencari terutama Googlebot karena rendering sisi klien tidak ramah mesin pencari.
Tetapi kebanyakan dari mereka tidak tahu bahwa Googlebot Crawler sudah dapat mengurai Javascript dan merender laman seperti perenderan browser Anda. Ya, masih ada batasan karena spesifikasi browser dan Javascript di-iterasi dengan cepat. Tapi itu bukan sesuatu yang menahan pengembang untuk membangun aplikasi mereka dengan teknik web terbaru yang sebagian besar sekarang menggunakan rendering sisi klien dengan perpustakaan dan kerangka kerja seperti React, Polymer, Angular, Vue, Preact, Next, Skate, dll.
Saya telah membantu tim di Nepal untuk membuat Aplikasi Web Progresif untuk Pekerja Migran Nepal. Aplikasinya bernama Shuvayatra, atau perjalanan aman dalam bahasa Inggris. Aplikasi ini tersedia dengan Aplikasi Web Asli dan Progresif Android. Karena fitur utama aplikasi ini adalah tentang penyampaian informasi kepada pekerja migran Nepal, maka pengoptimalan mesin pencari adalah kunci untuk membantu pekerja migran menemukan informasi yang mereka butuhkan saat mereka bepergian ke luar negeri melalui mesin pencari. Dan artikel ini akan menjelaskan eksperimen apa yang telah kami lakukan dengan Shuvayatra untuk membuat konten di dalam Shuvayatra PWA dapat diindeks oleh mesin pencari dan dapat ditemukan oleh para pekerja migran.
Berbagi Facebook
Kami membangun Shuvayatra PWA dengan Polymer. Sebelumnya kami membangunnya dengan Polymer 1.x tetapi kemudian kami mencoba mengubahnya menjadi Polymer 2.0 yang baru dirilis awal tahun ini. Masalah pertama yang kami temui adalah berbagi Facebook. Saat pengguna membagikan artikel kami di Facebook, itu tidak akan mengembalikan ikhtisar artikel kami, seperti gambar sampul, dan ikhtisar konten. Ini hanya dapat menunjukkan judul aplikasi yang tidak relevan dengan halaman konten.
Kemudian kami menemukan bahwa perayap Facebook berfungsi seperti bot Google sebelumnya. Itu tidak dapat merender javascript, jadi tidak dapat membaca konten kita. Dan untuk masalah ini, satu-satunya solusi adalah menggunakan konten rendering sisi server. Namun alih-alih menggunakan layanan seperti pra-render untuk merender PWA kami, atau Chrome Headless dan Phantom JS, kami memutuskan untuk membuat Accelerated Mobile Page dan merendernya dengan server yang dirender NodeJS. Alasannya, kami juga berpikir bahwa memiliki halaman AMP untuk konten kami akan membantu pengguna kami memuatnya lebih cepat di seluler dan akan membantu hasil mesin pencari kami juga.
Tetapi pengguna kami tidak hanya menggunakan AMP itu, terkadang pengguna kami juga membagikan versi PWA ke Facebook. Untuk memastikan Perayap Facebook dapat membaca dan mengembalikan konten ikhtisar kami yang dibagikan pengguna di Facebook, kami menggunakan pengalihan NGINX untuk mengalihkan semua permintaan bot di PWA ke halaman AMP kami. Ini berfungsi dengan sempurna, dan Facebook Share dapat membaca konten kami bahkan pengguna memposting tautan konten PWA kami.
Jadikan itu dapat diindeks oleh Google
Seperti biasa, saya selalu mengirimkan situs yang saya buat ke Alat Webmaster Google untuk memastikan Google Penelusuran mengetahui dan mengindeks situs tersebut. Namun setelah saya mengirimkannya, saya tidak melihat hasil yang bagus saat mengetik `site: shuvayatra.org` di Google Search. Itu tidak mengembalikan hasil seperti yang diharapkan. itu hanya dapat menampilkan satu hasil halaman dengan halaman statis seperti home, contact, dan about. Tapi semua artikel tidak muncul di hasil. Artinya, Google tidak mengindeks semua artikel.
Kemudian saya memeriksa PWA kami melalui Google Search Console untuk melihat apa yang terjadi. Saat saya mengujinya dengan alat Fetch as Google, ia kembali dengan gambar kosong abu-abu tanpa konten apa pun di dalamnya. Kemudian saya tahu bahwa bot Google tidak dapat melihat PWA kami dengan benar. Setelah mencoba menyesuaikan berbagai hal, saya menemukan bahwa bot Google tidak dapat mengurai PWA kami saat dibuat dengan ES6. Setelah mengganti konfigurasi build pada `polymer.json` untuk mengompilasi skrip dengan ES5 yang kompatibel, Google akhirnya dapat melihat PWA kami seperti yang diharapkan.
Kemudian saya menemukan dokumentasi cara kerja Google Bot yang pada dasarnya didasarkan pada mesin rendering Chrome 41. Jadi untuk melihat API dan fitur apa saja yang bisa dibaca oleh Google Bot, Anda bisa mengecek Chrome Status tapi ada beberapa batasan yang diterapkan.
Jadikan Googlebot Temukan Konten Shuvayatra
Jadi setelah dapat dibaca dan diindeks oleh Google, kita perlu memberi tahu Google bahwa kita memiliki konten untuk diindeks. Meskipun Anda sudah mengirimkan situs webnya, tetapi bukan berarti Googlebot mengetahui semua konten kami yang perlu diindeks. Jadi kami perlu membuat file peta situs untuk memberi tahu Google konten apa yang kami miliki dan di mana lokasinya.
Untuk dapat menghasilkan file peta situs, saya menulis skrip untuk mengurai API kami dan melakukan iterasi melalui semua halaman dan memasukkan semua konten ke dalam satu file peta situs. Kemudian kami mengirimkannya ke Google Search Console dan menunggu Googlebot datang.
Susun Data dengan Hasil Pencarian Kaya
Saya berpikir untuk mendapatkan hasil yang kaya saat orang menelusuri konten dengan Shuvayatra. Seperti web semantik, kami perlu membuat Google memahami jenis konten apa yang kami coba sediakan di halaman. Apakah itu artikel, video, audio, atau berita. Untuk mengatasinya, Anda perlu memasukkan lebih banyak data terstruktur di halaman Anda. Dan jika Anda bisa melakukannya dengan benar, Anda akan memiliki hasil pencarian yang kaya seperti di bawah ini.
Cara membuat rich result seperti di atas adalah dengan meletakkan beberapa data struktur di dalam halaman tersebut. Tetapi setelah mencoba untuk meletakkan beberapa data struktur berbasis format data JSON-LD secara dinamis ketika memuat halaman posting, saya menemukan bahwa itu tidak berfungsi dan tidak ada data yang terdeteksi bahkan pada kode sumber saya sudah meletakkan data seperti ini.
Saat saya mengujinya dengan Alat Pengujian Data Struktur Google. Ini tidak menunjukkan data apa pun, artinya tidak berfungsi sama sekali. Saya masih mencoba menemukan konfirmasi tentang ini, apakah PWA akan mendukung data struktur yang dihasilkan secara dinamis di sisi klien atau hanya berfungsi di halaman yang dirender server.
0 Komentar