Vue.js Dan SEO: Cara Mengoptimalkan Situs Web Reaktif Untuk Mesin Pencari Dan Bot

Kerangka Kerja JavaScript Reaktif (seperti React, Vue.js, dan Angular) sangat populer akhir-akhir ini, dan tidak mengherankan jika kerangka tersebut digunakan di semakin banyak situs web dan aplikasi karena fleksibilitas, modularitas, dan kemudahan pengujian otomatis.

Kerangka kerja ini memungkinkan seseorang untuk mencapai hal-hal baru yang sebelumnya tidak terpikirkan di situs web atau aplikasi, tetapi bagaimana kinerjanya dalam hal SEO? Apakah halaman yang telah dibuat dengan kerangka kerja ini diindeks oleh Google? Karena dengan kerangka kerja ini semua — atau sebagian besar — ​​rendering halaman dilakukan dalam JavaScript (dan HTML yang diunduh oleh bot sebagian besar kosong), tampaknya mereka tidak boleh digunakan jika Anda ingin situs web Anda diindeks mesin pencari atau bahkan diurai oleh bot pada umumnya.

Dalam artikel ini, saya akan berbicara sebagian besar tentang Vue.js, karena ini adalah kerangka kerja yang paling sering saya gunakan, dan dengannya saya memiliki pengalaman langsung dalam hal pengindeksan oleh mesin pencari pada proyek-proyek besar, tetapi saya dapat berasumsi bahwa sebagian besar apa yang akan saya bahas juga berlaku untuk kerangka kerja lain.

Beberapa Latar Belakang Masalah

Cara Kerja Pengindeksan

Agar situs web Anda diindeks oleh Google, situs tersebut perlu dirayapi oleh Googlebot (perangkat lunak pengindeksan otomatis yang mengunjungi situs web Anda dan menyimpan konten halaman ke indeksnya) mengikuti tautan di dalam setiap halaman. Googlebot juga mencari file XML Peta Situs khusus di situs web untuk menemukan halaman yang mungkin tidak ditautkan dengan benar dari situs publik Anda dan untuk menerima informasi tambahan tentang seberapa sering halaman di situs web berubah dan kapan terakhir kali berubah.

Sedikit Sejarah

Hingga beberapa tahun yang lalu (sebelum 2009), Google biasa mengindeks konten HTML situs web — tidak termasuk semua konten yang dibuat oleh JavaScript. Sudah menjadi rahasia umum SEO bahwa tautan dan konten penting tidak boleh ditulis oleh JavaScript karena tidak akan diindeks oleh Google, dan itu dapat menyebabkan penalti untuk situs web karena Google mungkin menganggapnya sebagai "konten palsu" seolah-olah pemilik situs web sedang mencoba. untuk menunjukkan kepada pengguna sesuatu yang berbeda dari apa yang ditampilkan ke mesin telusur dan mencoba menipu mesin telusur.

Itu adalah praktik yang sangat umum oleh scammers untuk menempatkan banyak konten ramah SEO di HTML dan menyembunyikannya di JavaScript, misalnya. Google selalu memperingatkan terhadap praktik ini:

“Menyajikan Googlebot konten yang berbeda dari yang dilihat pengguna normal dianggap sebagai penyelubungan, dan akan bertentangan dengan Pedoman Webmaster kami.”

Anda bisa mendapatkan hukuman untuk ini. Dalam beberapa kasus, Anda dapat dihukum karena menyajikan konten yang berbeda ke agen pengguna yang berbeda di sisi server, tetapi juga karena mengalihkan konten melalui JavaScript setelah halaman dimuat. Saya pikir ini menunjukkan kepada kita bahwa Google telah mengindeks situs web yang mengeksekusi JavaScript untuk waktu yang lama - setidaknya untuk membandingkan HTML akhir situs web (setelah eksekusi JavaScript) dan HTML mentah yang diurai untuk indeksnya. Tetapi Googlebot tidak menjalankan JavaScript sepanjang waktu, dan Google tidak menggunakan konten yang dihasilkan JavaScript untuk tujuan pengindeksan.

Kemudian, mengingat peningkatan penggunaan AJAX untuk mengirimkan konten dinamis di situs web, Google mengusulkan "skema perayapan AJAX" untuk membantu pengguna mengindeks situs web berbasis AJAX. Itu sangat rumit; itu pada dasarnya diperlukan situs web untuk menghasilkan rendering halaman dengan konten AJAX disertakan. Saat diminta oleh Google, server akan menyediakan versi halaman dengan semua (atau sebagian besar) konten yang akan dihasilkan secara dinamis oleh JavaScript yang disertakan dalam halaman HTML — yang telah dirender sebelumnya sebagai Cuplikan HTML konten. Proses memiliki solusi sisi server ini mengirimkan konten yang (untuk semua tujuan lain) dimaksudkan untuk dibuat di sisi klien, menyiratkan bahwa mereka yang ingin memiliki situs yang sangat bergantung pada JavaScript yang diindeks di Google harus melalui banyak gangguan teknis.

Misalnya, jika konten yang dibaca oleh AJAX berasal dari layanan web eksternal, perlu untuk menduplikasi panggilan layanan web yang sama di sisi server, dan untuk menghasilkan, sisi server, HTML yang sama yang akan dihasilkan sisi klien oleh JavaScript — atau setidaknya yang sangat mirip. Ini sangat rumit karena, sebelum munculnya Node.js, diperlukan setidaknya sebagian menduplikasi logika rendering yang sama dalam dua bahasa pemrograman yang berbeda: JavaScript untuk frontend, dan PHP, Java, Python, Ruby, dan seterusnya, bagian belakang. Ini disebut " rendering sisi server ", dan ini dapat menyebabkan pemeliharaan yang buruk: jika Anda membuat perubahan penting pada cara Anda merender konten di frontend, Anda harus menduplikasi perubahan tersebut di backend.

Satu-satunya alternatif untuk menghindari duplikasi logika adalah dengan mengurai situs Anda sendiri dengan browser yang menjalankan JavaScript dan menyimpan hasil akhirnya ke server Anda dan menyajikannya ke Googlebot. Ini mirip dengan apa yang sekarang disebut " pra-rendering ".

Google (dengan skema perayapan AJAX-nya) juga menjamin bahwa Anda akan terhindar dari hukuman karena fakta bahwa dalam hal ini Anda menyajikan konten yang berbeda ke Googlebot dan pengguna. Namun, sejak 2015, Google telah menghentikan praktik itu dengan posting blog resmi yang memberi tahu pengelola situs web sebagai berikut:

“Hari ini, selama Anda tidak memblokir Googlebot untuk merayapi file JavaScript atau CSS Anda, kami biasanya dapat merender dan memahami laman web Anda seperti peramban modern.”

Apa yang diberitahukan kepada kami bukanlah bahwa Googlebot tiba-tiba memperoleh kemampuan mengeksekusi JavaScript saat mengindeks halaman web, karena kami tahu bahwa itu telah dilakukan untuk waktu yang sangat lama (setidaknya untuk memeriksa konten palsu dan penipuan). Sebagai gantinya, ia memberi tahu kami bahwa hasil eksekusi JavaScript akan diindeks dan digunakan di SERP.

Tampaknya ini menyiratkan bahwa kita tidak perlu khawatir lagi menyediakan HTML yang dirender sisi server kepada Google. Namun, kami melihat semua jenis alat untuk rendering sisi server dan pra-render tersedia untuk kerangka kerja JavaScript, tampaknya tidak demikian. Juga, ketika berhadapan dengan agensi SEO pada proyek besar, pra-rendering tampaknya dianggap wajib. Bagaimana bisa?

Bagaimana Sebenarnya Google Mengindeks Halaman yang Dibuat Dengan Kerangka Front-End?

Percobaan

Untuk melihat apa yang sebenarnya diindeks oleh Google di situs web yang telah dibuat dengan kerangka kerja front-end, saya membuat sedikit eksperimen. Ini tidak mencakup semua kasus penggunaan, tetapi setidaknya merupakan sarana untuk mengetahui lebih lanjut tentang perilaku Google. Saya membuat situs web kecil dengan Vue.js dan bagian teks yang berbeda dirender secara berbeda.

Isi website diambil dari deskripsi buku Infinite Jest karya David Foster Wallace di Infinite Jest Wiki ( thanks guys! ). Ada beberapa teks pengantar untuk keseluruhan buku, dan daftar karakter dengan biografi masing-masing:

• Beberapa teks dalam HTML statis, di luar wadah utama Vue.js;
• Beberapa teks segera dirender oleh Vue.js karena terkandung dalam variabel yang sudah ada dalam kode aplikasi: mereka didefinisikan dalam objek data komponen;
• #Beberapa teks dirender oleh Vue.js dari objek data , tetapi dengan penundaan 300 md;
• Bios karakter berasal dari serangkaian API lainnya, yang sengaja saya buat menggunakan Sandbox. Karena saya berasumsi bahwa Google akan mengeksekusi kode situs web dan berhenti setelah beberapa saat untuk mengambil snapshot dari keadaan halaman saat ini, saya mengatur setiap layanan web untuk merespons dengan penundaan tambahan, yang pertama dengan 0 md, yang kedua dengan 300 md, yang ketiga dengan 600ms dan seterusnya hingga 2700ms.

Setiap bio karakter dipersingkat dan berisi tautan ke sub-halaman, yang hanya tersedia melalui Vue.js (URL dihasilkan oleh Vue.js menggunakan API riwayat), tetapi bukan sisi server (jika Anda memanggil URL dari halaman secara langsung, Anda tidak mendapat respons dari server), untuk memeriksa apakah itu juga diindeks. Saya berasumsi bahwa ini tidak akan diindeks, karena itu bukan tautan yang tepat yang membuat sisi server, dan tidak mungkin Google dapat mengarahkan pengguna ke tautan tersebut secara langsung. Tapi aku hanya ingin memeriksa.

Saya menerbitkan situs uji kecil ini ke Halaman Github saya dan meminta pengindeksan — lihatlah.

Hasil

Hasil percobaan (tentang beranda) adalah sebagai berikut:

• Konten yang sudah ada dalam konten HTML statis diindeks oleh Google (yang agak jelas);
• Konten yang dihasilkan oleh Vue secara real-time selalu diindeks oleh Google;
• Konten yang dihasilkan oleh Vue, tetapi dirender setelah 300 md juga akan diindeks;
• Konten yang berasal dari layanan web, dengan beberapa penundaan, mungkin akan diindeks, tetapi tidak selalu. Saya telah memeriksa pengindeksan halaman oleh Google pada saat yang berbeda, dan konten yang dimasukkan terakhir (setelah beberapa detik) terkadang diindeks, terkadang tidak. Konten yang dirender cukup cepat sering kali diindeks, bahkan jika itu berasal dari panggilan asinkron ke layanan web eksternal. Hal ini bergantung pada Google yang memiliki anggaran perenderan untuk setiap laman dan situs, yang bergantung pada algoritme internalnya, dan mungkin sangat bervariasi bergantung pada peringkat situs Anda dan status antrean rendering Googlebot saat ini. Jadi Anda tidak dapat mengandalkan konten yang berasal dari layanan web eksternal untuk diindeks;
• Subhalaman (karena tidak dapat diakses sebagai tautan langsung) tidak diindeks seperti yang diharapkan.

Apa yang dikatakan eksperimen ini kepada kita? Pada dasarnya, bahwa Google mengindeks konten yang dihasilkan secara dinamis, meskipun berasal dari layanan web eksternal, tetapi tidak ada jaminan bahwa konten akan diindeks jika "terlambat". Saya memiliki pengalaman serupa dengan situs web produksi nyata lainnya selain eksperimen ini.

SEO Kompetitif

Oke, jadi konten akan diindeks , tetapi eksperimen ini tidak memberi tahu kami: apakah konten akan diberi peringkat secara kompetitif? Akankah Google lebih memilih situs web dengan konten statis daripada situs web yang dibuat secara dinamis? Ini bukan pertanyaan yang mudah untuk dijawab.

Dari pengalaman saya, saya dapat mengatakan bahwa konten yang dihasilkan secara dinamis dapat menempati peringkat teratas di SERP. Saya telah bekerja di situs web untuk model baru perusahaan mobil besar, meluncurkan situs web baru dengan domain tingkat ketiga yang baru. Situs ini sepenuhnya dibuat dengan Vue.js — dengan konten yang sangat sedikit dalam HTML statis selain <title> dan deskripsi meta .

Situs mulai memberi peringkat untuk pencarian kecil dalam beberapa hari pertama setelah publikasi, dan cuplikan teks di SERP melaporkan kata-kata yang datang langsung dari konten dinamis.

Dalam waktu tiga bulan, domain ini menempati peringkat pertama untuk sebagian besar pencarian yang terkait dengan model mobil tersebut — yang relatif mudah karena dihosting di domain resmi milik produsen mobil, dan domain tersebut banyak ditautkan dari situs web terkemuka.

Tetapi mengingat fakta bahwa kami harus menghadapi tentangan keras dari perusahaan SEO yang bertanggung jawab atas proyek tersebut, saya pikir hasilnya masih luar biasa.

Karena tenggat waktu yang ketat dan kurangnya waktu yang diberikan untuk proyek tersebut, kami akan menerbitkan situs tanpa pra-rendering.

Teks Animasi

Apa yang tidak diindeks oleh Google adalah teks dengan animasi berat. Situs salah satu perusahaan tempat saya bekerja, Rabbit Hole Consulting, berisi banyak animasi teks, yang dilakukan saat pengguna menggulir, dan mengharuskan teks untuk dipecah menjadi beberapa bagian di berbagai tag.

Teks utama di halaman beranda situs web tidak dimaksudkan untuk pengindeksan mesin pencari karena tidak dioptimalkan untuk SEO. Mereka tidak terbuat dari tech-speak dan tidak menggunakan kata kunci: mereka hanya dimaksudkan untuk menemani pengguna dalam perjalanan konseptual tentang perusahaan. Teks dimasukkan secara dinamis ketika pengguna memasuki berbagai bagian halaman beranda.

Tidak ada teks di bagian situs web ini yang diindeks oleh Google. Untuk membuat Google menampilkan sesuatu yang berarti di SERP, kami menambahkan beberapa teks statis di footer di bawah formulir kontak, dan konten ini memang ditampilkan sebagai bagian dari konten halaman di SERP.

Teks di footer diindeks dan ditampilkan di SERP, meskipun tidak segera terlihat oleh pengguna kecuali mereka menggulir ke bagian bawah halaman dan mengklik tombol "Pertanyaan" untuk membuka formulir kontak. Ini menegaskan pendapat saya bahwa konten akan diindeks meskipun tidak segera ditampilkan kepada pengguna, selama konten segera dirender ke HTML — bukan dirender sesuai permintaan atau setelah penundaan yang lama.

Bagaimana dengan Pra-Rendering?

Jadi, mengapa harus ribut-ribut tentang pra-rendering — baik itu dilakukan di sisi server atau pada waktu kompilasi proyek? Apakah itu benar-benar perlu? Meskipun beberapa kerangka kerja, seperti Nuxt, membuatnya lebih mudah untuk dilakukan, tetap saja tidak ada piknik, jadi pilihan apakah akan mengaturnya atau tidak bukanlah pilihan yang ringan.

Menurut saya itu tidak wajib . Ini tentu merupakan persyaratan jika banyak konten yang ingin Anda indeks oleh Google berasal dari layanan web eksternal dan tidak segera tersedia pada waktu rendering, dan mungkin — dalam beberapa kasus yang tidak menguntungkan — tidak tersedia sama sekali karena, misalnya , waktu henti layanan web. Jika selama kunjungan Googlebot beberapa konten Anda tiba terlalu lambat, maka konten tersebut mungkin tidak diindeks . Jika Googlebot mengindeks halaman Anda tepat pada saat Anda melakukan pemeliharaan pada layanan web Anda, Googlebot mungkin tidak mengindeks konten dinamis sama sekali.

Selain itu, saya tidak memiliki bukti perbedaan peringkat antara konten statis dan konten yang dibuat secara dinamis. Itu mungkin memerlukan eksperimen lain. Saya pikir sangat mungkin bahwa, jika konten berasal dari layanan web eksternal dan tidak segera dimuat, hal itu dapat berdampak pada persepsi Google tentang kinerja situs Anda, yang merupakan faktor yang sangat penting untuk peringkat.

Bacaan yang disarankan : Bagaimana Desain Web Seluler Mempengaruhi Pencarian Lokal (Dan Apa yang Harus Dilakukan Tentang Ini)

Pertimbangan lainnya

Kesesuaian

Hingga saat ini, Googlebot menggunakan versi Chromium yang cukup lama (proyek sumber terbuka yang menjadi dasar Google Chrome), yaitu versi 41. Ini berarti bahwa beberapa fitur JavaScript atau CSS terbaru tidak dapat dirender oleh Google dengan benar (mis. IntersectionObserver, sintaks ES6, dan seterusnya).

Google baru-baru ini mengumumkan bahwa mereka sekarang menjalankan versi terbaru Chromium (74, pada saat penulisan) di Googlebot, dan bahwa versi tersebut akan diperbarui secara berkala. Fakta bahwa Google menjalankan Chromium 41 mungkin memiliki implikasi besar bagi situs yang memutuskan untuk mengabaikan kompatibilitas dengan IE11 dan browser lama lainnya.

Anda dapat melihat perbandingan dukungan Chromium 41 dan Chromium 74 untuk fitur di sini, namun, jika situs Anda telah melakukan polyfilling fitur yang hilang agar tetap kompatibel dengan browser lama, seharusnya tidak ada masalah.

Selalu gunakan polyfill karena Anda tidak pernah tahu browser mana yang tidak mendukung fitur yang menurut Anda biasa. Misalnya, Safari tidak mendukung fitur baru yang besar dan sangat berguna seperti IntersectionObserver hingga versi 12.1, yang keluar pada Maret 2019.

Kesalahan JavaScript

Jika Anda mengandalkan Googlebot yang mengeksekusi JavaScript Anda untuk merender konten penting, maka kesalahan JavaScript utama yang dapat mencegah konten dari rendering harus dihindari dengan cara apa pun. Sementara bot mungkin mengurai dan mengindeks HTML yang tidak sepenuhnya valid (walaupun selalu lebih baik untuk memiliki HTML yang valid di situs mana pun!), jika ada kesalahan JavaScript yang mencegah pemuatan beberapa konten , maka tidak mungkin Google akan mengindeks konten itu.

Bagaimanapun, jika Anda mengandalkan JavaScript untuk merender konten penting kepada pengguna akhir Anda, kemungkinan besar Anda sudah memiliki pengujian unit ekstensif untuk memeriksa kesalahan pemblokiran dalam bentuk apa pun. Namun, perlu diingat bahwa kesalahan Javascript dapat muncul dari skenario yang tidak terduga, misalnya, dalam hal penanganan kesalahan yang tidak tepat pada respons API.

Lebih baik memiliki beberapa perangkat lunak pemeriksaan kesalahan waktu nyata (seperti Sentry atau LogRocket) yang akan mengingatkan Anda tentang kesalahan tepi-kasus yang mungkin tidak Anda pilih selama pengujian unit atau manual. Ini menambah kerumitan mengandalkan JavaScript untuk konten SEO.

Mesin Pencari Lainnya

Mesin pencari lainnya tidak bekerja sebaik Google dengan konten dinamis. Bing tampaknya tidak mengindeks konten dinamis sama sekali, begitu pula DuckDuckGo atau Baidu. Mungkin mesin pencari tersebut kekurangan sumber daya dan daya komputasi yang dimiliki Google.

Mem-parsing halaman dengan browser tanpa kepala dan menjalankan JavaScript selama beberapa detik untuk mengurai konten yang dirender tentu lebih banyak sumber daya daripada hanya membaca HTML biasa. Atau mungkin mesin pencari ini telah membuat pilihan untuk tidak memindai konten dinamis karena beberapa alasan lain. Apa pun penyebabnya, jika proyek Anda perlu mendukung salah satu mesin pencari tersebut, Anda perlu menyiapkan pra-rendering.

Catatan : Untuk mendapatkan informasi lebih lanjut tentang kemampuan rendering mesin pencari lainnya, Anda dapat memeriksa artikel ini oleh Bartosz Goralewicz. Memang agak tua, tapi menurut pengalaman saya, masih valid.

Bot lainnya

Ingatlah bahwa situs Anda akan dikunjungi oleh bot lain juga. Contoh paling penting adalah Twitter, Facebook, dan bot media sosial lainnya yang perlu mengambil informasi meta tentang halaman Anda untuk menampilkan pratinjau halaman Anda saat ditautkan oleh penggunanya. Bot ini tidak akan mengindeks konten dinamis, dan hanya akan menampilkan informasi meta yang mereka temukan di HTML statis. Ini membawa kita ke pertimbangan berikutnya.

Subhalaman

Jika situs Anda adalah apa yang disebut “situs web Satu Halaman”, dan semua konten yang relevan terletak dalam satu HTML utama, Anda tidak akan kesulitan mengindeks konten tersebut oleh Google. Namun, jika Anda memerlukan Google untuk mengindeks dan menampilkan halaman sekunder apa pun di situs web, Anda masih perlu membuat HTML statis untuk masing-masing halaman tersebut — bahkan jika Anda mengandalkan Kerangka JavaScript untuk memeriksa URL saat ini dan menyediakan konten yang relevan untuk dimasukkan di halaman itu. Saran saya, dalam hal ini, adalah membuat halaman sisi server (atau statis) yang setidaknya memberikan tag title dan deskripsi/informasi meta yang benar.

Kesimpulan

Kesimpulan yang saya dapatkan saat meneliti artikel ini adalah sebagai berikut:

1. Jika Anda hanya menargetkan Google, tidak wajib menggunakan pra-rendering agar situs Anda diindeks sepenuhnya, namun:
2. Anda tidak boleh bergantung pada layanan web pihak ketiga untuk konten yang perlu diindeks, terutama jika mereka tidak membalas dengan cepat.
3. Konten yang Anda masukkan ke dalam HTML segera melalui rendering Vue.js memang diindeks, tetapi Anda tidak boleh menggunakan teks animasi atau teks yang dimasukkan ke dalam DOM setelah tindakan pengguna seperti menggulir, dll.
4. Pastikan Anda menguji kesalahan JavaScript karena dapat mengakibatkan seluruh halaman/bagian tidak diindeks, atau situs Anda tidak diindeks sama sekali.
5. Jika situs Anda memiliki beberapa laman , Anda masih perlu memiliki beberapa logika untuk membuat laman yang, meskipun mengandalkan sistem perenderan front-end yang sama seperti laman beranda, dapat diindeks oleh Google sebagai URL individual.
6. Jika Anda perlu memiliki deskripsi dan gambar pratinjau yang berbeda untuk media sosial di antara halaman yang berbeda, Anda juga perlu mengatasinya, baik di sisi server atau dengan menyusun halaman statis untuk setiap URL.
7. Jika Anda ingin situs Anda tampil di mesin telusur selain Google , Anda pasti memerlukan semacam pra-rendering.