Seperti yang Anda ketahui, optimisasi mesin pencari aplikasi satu halaman bukanlah tugas yang mudah dan solusinya mungkin memerlukan biaya tenaga kerja yang signifikan, keterampilan khusus dari pengembang dan biaya keuangan dari pelanggan. Solusi apa yang ditawarkan komunitas untuk membuat mesin pencari situs web
React ramah secepat dan semurah mungkin?
Beberapa hal biasa tentang SEO
Sekitar 92% dari lalu lintas berasal dari halaman pertama hasil permintaan mesin pencari, dengan 75% dari lalu lintas berasal dari lima situs web pertama.
Google menempati lebih dari 90% pasar mesin pencari.
Search Engine Optimization (SEO) adalah proses penataan dan pengorganisasian situs untuk meningkatkan volume dan meningkatkan kualitas lalu lintas dengan meningkatkan posisi dan frekuensi kemunculan dalam hasil mesin pencari, dengan fokus pada kata kunci yang mengungkapkan kekhasan situs.
Tujuan utama dari proses SEO adalah untuk meningkatkan visibilitas situs di Internet dan meningkatkan lalu lintas situs web.
Mesin pencari didasarkan pada caching konten situs tanpa henti. Karena fakta bahwa prosesnya otomatis, sangat penting bahwa konten disusun dan diformat dengan cara yang dimengerti oleh mesin. Proses SEO termasuk mengoptimalkan kinerja situs web, memproses kontennya untuk meningkatkan relevansi konten dengan kata kunci, serta menyediakan situs dengan alat untuk membantu robot pencarian memahaminya.
Ini mungkin tampak cukup sederhana, tetapi dalam kasus situs yang dibangun berdasarkan Bereaksi, ini tidak selalu terjadi.
Bereaksi dan SEO
Secara singkat tentang SPA
Aplikasi satu halaman atau SPA adalah aplikasi web atau situs web yang berinteraksi dengan pengguna dengan secara dinamis mengubah halaman saat ini, daripada memuat halaman baru dari server. SPA bekerja dengan cepat karena sebagian besar sumber daya (HTML + CSS + Script) hanya dimuat satu kali sepanjang hidup mereka. Aplikasi hanya menerima dan mengembalikan data.
Salah satu contoh teknologi yang dapat digunakan untuk membuat SPA adalah ReactJS , perpustakaan yang dioptimalkan dengan baik untuk bekerja pada browser khusus ( lebih lanjut di sini. )
Masalah utama SPA dengan SEO
Sebenarnya, SPA adalah program JavaScript yang berjalan di browser, dan jika bot web pencarian tidak tahu cara menjalankan skrip, ia tidak akan bisa mendapatkan halaman yang dirender dengan benar dan mengindeksnya.
Google pada Oktober 2015 membuat pengumuman penting bahwa botnya akan menjalankan file JS di situs web jika diberi hak untuk melakukannya. Dan, meskipun pernyataan ini terdengar sangat positif, dan bot pencariannya menjadi lebih canggih, mengandalkan kemampuan mereka untuk mengeksekusi JavaScript itu berisiko . Googlebot dapat menolak JavaScript karena berbagai alasan ( detail lebih lanjut di sini ):
- ketidakpatuhan dengan aturan "emas 5 detik" (detail lebih lanjut di sini dan di sini);
- ketidakmampuan untuk merayapi situs: Sistem Google harus dapat merayapi situs, mengingat strukturnya (lebih detail di sini);
- ketidakmungkinan menganalisis situs: sistem Google seharusnya tidak mengalami masalah selama analisis situs menggunakan teknologi yang digunakan untuk membentuk halaman-halamannya (lebih lanjut di sini);
- kesalahan dalam kode, dll.
Bot dari mesin pencari lain seperti Yahoo, Bing, Baidu, dll. Tidak mendukung JavaScript dan melihat halaman SPA kosong.
Untuk alasan ini, Anda harus mencari cara untuk merender situs SPA di sisi server untuk memberikan jaminan kesempatan bagi bot pencarian untuk melihat kontennya dalam bentuk yang benar.
Solusi SEO untuk Situs Web SPA
Ada dua cara utama untuk memecahkan masalah SEO yang dihadapi situs web SPA:
- SPA Isomorfik (universal);
- Pra-rendering.
Alat Peningkatan SEO
Tambahan untuk Situs Web Bereaksi:
- React Router v4 : komponen untuk membuat "rout" yang ramah-SEO dalam aplikasi Bereaksi;
- Helm Bereaksi : mungkin komponen yang paling penting untuk menyediakan aplikasi SEO Bereaksi, memberikan kemampuan untuk mengelola meta-tag aplikasi dan ditandai dengan kemudahan penggunaan.
Bagaimana Bereaksi isomorfik membantu dengan SEO?
Situs Bereaksi isomorfik secara otomatis mendeteksi apakah JavaScript sisi klien dinonaktifkan. Jika JavaScript dinonaktifkan, skrip dieksekusi di server dan hasilnya (HTML + CSS statis) dikirim ke klien. Dalam hal ini, semua atribut dan konten yang diperlukan untuk SEO hadir pada saat boot.
Jika JavaScript diaktifkan, situs Bereaksi isomorfik dalam kasus paling sederhana dapat memuat dengan cara biasa, ketika semuanya dirender di browser, atau secara cerdik : rendering parsial dilakukan di sisi server, yang berarti bahwa hanya rendering DOM pertama yang dilakukan pada server, dan semua yang berikutnya dilakukan secara langsung dalam browser Dengan kata lain, browser menerima DOM asli asli dan JavaScript, dan ketika kondisi aplikasi berubah, ia bertanggung jawab untuk semua pembaruan berikutnya.
Dipercayai bahwa solusi isomorfik adalah metode terbaik untuk memecahkan masalah SEO aplikasi web SPA, tetapi hal yang disayangkan adalah bahwa solusi untuk React SPA, pada saat ini, sulit untuk diterapkan :
- React boilerplate yang populer, misalnya create-react-app , react-boilerplate tidak mendukung isomorfisme. Dan Abramov , pengembang create-react-app :
Pada akhirnya, rendering sisi server sangat sulit untuk ditambahkan dengan cara yang bermakna, tanpa juga membuat keputusan penting. Saat ini, kami tidak akan membuat keputusan seperti itu;
- pelat isomorfik yang ada sulit dipelajari;
- solusi yang ada tidak sempurna:
- seringkali kode di server dan di klien memiliki banyak perbedaan;
- dalam hal kebetulan hampir lengkap dari basis kode, kode menjadi lambat dan rentan terhadap kegagalan.
Tampaknya banyak pengembang akan mendukung pendapat yang diungkapkan oleh MrCheater dalam diskusi artikel "Aplikasi Bereaksi Isomorfik: Kinerja dan Penskalaan" :
Tema "aplikasi web isomorfis" memiliki banyak pembenci. Sayang Meskipun mudah dimengerti mengapa, semuanya sangat sulit diprogram, ratusan artikel tentang topik ini, tetapi hasilnya masih berupa klien yang menakutkan dengan berat 3 megabyte. Tetapi suatu hari nanti semua masalah dan pendekatan untuk solusi mereka akan distandarisasi, dan kami akan memiliki aplikasi halaman tunggal isomorfik yang ringan.
Memecahkan Masalah SEO Melalui Rendering
Pra- perenderan adalah proses pra-perenderan halaman pada situs web untuk mempersiapkan mereka untuk dilihat oleh bot web pencarian. Layanan prerender memotong permintaan ke situs web, menentukan jenis klien dengan permintaan "agen-pengguna", dan jika permintaan itu dibuat oleh bot web, layanan mengirimkan kembali versi statis yang di-cache sebelumnya diberikan situs. Jika permintaan itu dibuat oleh bot web non-pencarian, halaman normal dimuat. Prapenguraian hanya digunakan untuk mengoptimalkan pekerjaan dengan bot web dan, mungkin, browser yang sudah usang. Layanan prerender seperti Prerender.cloud dan sejenisnya menggunakan browser tanpa kepala, paling sering Chrome Tanpa Kepala . Pendekatan ini memungkinkan Anda untuk menggunakan kerangka kerja JavaScript terbaru seperti React, Ember, dan Angular untuk membangun situs web dan tidak bergantung pada rendering sisi server.
Keuntungan dari pra-rendering:
- prerender mampu mengeksekusi semua jenis JavaScript modern dan menghasilkan HTML statis;
- prerender mendukung inovasi web terbaru;
- modifikasi minimal dari basis kode aplikasi web diperlukan, jika sama sekali ;
- biaya pengembangan dan pemeliharaan situs web berkurang ;
- kemudahan implementasi.
Kerugian dari pra-render :
- tidak cocok untuk halaman yang sering menampilkan perubahan data;
- tidak dapat diterima untuk halaman yang berisi data pribadi pengguna. Namun, halaman seperti itu tidak terlalu berguna untuk SEO dan tidak boleh diindeks;
- dalam hal situs besar dengan jumlah halaman yang signifikan, proses pra-rendering bisa memakan waktu yang cukup lama;
- layanan prerender dibayar.
Prerender, di mana mendapatkannya
Komunitas telah mengembangkan sejumlah besar prerender: lihat, misalnya, di sini.
Di antara banyak opsi, OpenSource Prerender menarik - versi open source dari prerender yang digunakan pada layanan prerender.io , yang dapat diimplementasikan pada server Anda sendiri yang mendukung Node.js.
Hal lain yang menarik adalah bahwa ia tidak memerlukan server, prerender adalah Prerender SPA Plugin , yang terhubung dengan hanya memodifikasi webpack.config.js, misalnya, membuat-react-app atau react-boilerplate . Proses pra-rendering dilakukan dalam proses "membangun" situs dan hasilnya ditempatkan di index.html.
Anda dapat menggunakan layanan siap pakai yang menyediakan layanan pra-render, daftar beberapa diberikan di sini dan di sini.
Di sini Anda juga dapat berkenalan dengan pengalaman praktis bekerja dengan prerender.
Yang menarik adalah layanan Roast.io , yang menyediakan layanan CDN dan pra-rendering (!) . Layanan ini juga secara otomatis (jika tidak ada) menambahkan meta tag "tangkapan layar tautan" yang meningkatkan tampilan situs web di jejaring sosial.
Layanan ini terletak pada AWS CDN , berjalan pada protokol HTTPS, dikonfigurasi untuk SPA dan Bereaksi khususnya, sangat mudah digunakan. Ada opsi hosting gratis (bandwidth 10GB, 500 halaman SSR).
Jadi:
Pra-rendering, bukan solusi ideal, terlihat lebih disukai untuk sebagian besar pengembang aplikasi React karena fakta bahwa:
- tidak diperlukan penyelesaian kode aplikasi - Anda dapat dengan aman menggunakan boilerplate favorit Anda;
- ada banyak pilihan implementasi - "middleware", "webpack", "CDN + prerender", "opensource" dan berbayar;
- memperkenalkan pra-rendering adalah proses yang sederhana, terutama dalam kasus implementasi "CDN + prerender" ;
- Ada dukungan serius dari Google dalam bentuk Chrome Tanpa Kepala ;
- Pengembangan aplikasi dan biaya dukungan berkurang.
- ada opsi untuk menggunakan layanan web prerender gratis.
Namun , Anda perlu memikirkan versi isomorfik (universal) situs jika:
- Aplikasi web menampilkan data yang sering berubah;
- Aplikasi web berisi ratusan halaman, karena proses pra-rendering dapat memakan waktu yang cukup lama.
Jika situs web hanya berisi halaman statis (HTML + CSS), maka isomorfisma atau pra-rendering tidak diperlukan .