Praktik terbaik SEO untuk situs web e-niaga Bereaksi

React telah muncul sebagai salah satu kerangka kerja JavaScript terkemuka yang digunakan di berbagai situs web yang berbeda, dan khususnya di situs e-commerce.

Karena cara pembuatannya, situs web React memiliki beberapa pertimbangan khusus dalam hal pengoptimalan mesin telusur (SEO), dengan serangkaian praktik terbaik SEO untuk React Single Page Applications (SPA).

Dalam panduan ini kita akan melihat bagaimana memastikan situs e-commerce React dikonfigurasi dengan benar untuk SEO, dan beberapa pro dan kontra menggunakan React pada situs e-commerce yang dioptimalkan untuk pencarian.

Apa itu Bereaksi?

React adalah library JavaScript yang dapat digunakan untuk membangun antarmuka pengguna berdasarkan komponen UI umum. Itu dikelola oleh perusahaan induk Facebook Meta, bersama dengan komunitas pengembang sumber terbuka termasuk perusahaan dan individu.

Karena bersifat open-source, React juga gratis untuk digunakan. Itu dapat membentuk kerangka dasar aplikasi satu halaman (SPA yang disebutkan di atas) atau aplikasi seluler.

Mengapa React bagus untuk e-commerce?

Fokus React pada UI berarti itu adalah alat yang berguna untuk membuat situs web e-commerce yang mulus dan mulus yang menempatkan pengalaman pengguna (UX) di jantung desain.

Konten disajikan di sisi klien dan halaman tidak perlu disegarkan, membuatnya lebih cepat dan lebih mudah bagi pelanggan untuk menavigasi situs web, dengan penundaan server yang lebih sedikit untuk memengaruhi kecepatan pemuatan halaman.

Keserbagunaan React berarti dapat digunakan di seluruh situs e-commerce desktop dan aplikasi seluler, menjadikannya salah satu opsi termudah bagi pengembang yang ingin membuat Progressive Web Apps.

Bisakah mesin pencari merayapi situs web React?

Seperti halnya situs web yang dioptimalkan untuk pencarian, penting untuk memahami bagaimana robot (dan terutama Googlebot) melihat konten di situs React.

Secara umum, Google merayapi situs web dalam dua tahap, mengidentifikasi konten saat berjalan.

Merangkak kode sumbernya

Pertama, Googlebot akan merayapi situs web dan mengambil kode sumber, termasuk HTML, header halaman, dan sebagainya.

Render DOM

Kedua, Googlebot merender Model Objek Domain (DOM) termasuk JavaScript apa pun yang digunakan pada laman – Anda dapat mengidentifikasi ini menggunakan Alat Pengembang bawaan Chrome dan fitur yang setara di peramban lain.

React adalah kerangka kerja JavaScript sisi klien, yang berarti Googlebot mungkin mengalami kesulitan mengidentifikasi halaman. Ini karena tidak seperti situs web tradisional, React tidak mengirim permintaan ke server saat bernavigasi dari satu halaman ke halaman lain – sehingga menyulitkan Google untuk melihat halaman yang berbeda.

Anda dapat mengonfigurasi React untuk menggunakan rendering sisi server, tetapi Googlebot tetap tidak akan merender file JavaScript dan sumber daya berbasis server lainnya saat menavigasi situs Anda. Karena itu, penting untuk menyiapkan situs web e-commerce React Anda untuk SEO sesuai dengan praktik terbaik.

Masalah SEO umum dengan React

Ada beberapa masalah SEO umum dengan situs web e-commerce React:

Konten tidak ditemukan / lambat diindeks

Googlebot mengalokasikan 'anggaran render' untuk setiap situs web yang dirayapinya dan biasanya akan keluar setelah anggaran tersebut habis. Ini memastikan situs web yang lebih kecil mendapatkan bagiannya dari perhatian perayap dan mencegah perayapan tanpa batas, misalnya di situs web yang menghasilkan URL dinamis selama navigasi.

Karena situs web React berfungsi sebagai SPA, seluruh situs harus dirender sebelum semua kontennya dapat dirayapi. Ini dapat menunda penemuan konten dan menghabiskan sumber daya tambahan di sisi perayap, yang dapat menyebabkan lebih sedikit laman yang dirayapi dan diindeks.

Render dan pra-render sisi server dapat mengurangi sebagian beban sumber daya dari robot, membantu meningkatkan kecepatan munculnya halaman baru di indeks.

Robot pencarian lambat untuk melihat konten yang diperbarui

Ini adalah bagian dari masalah di atas – saat Anda mengubah halaman, mungkin perlu beberapa saat sebelum perubahan tersebut masuk ke hasil pencarian.

Sekali lagi, ini karena bagaimana halaman dirender saat menggunakan React, yang dapat menyebabkan halaman yang diperbarui tidak diperhatikan lebih lama oleh sumber daya crawler Google yang terbatas.

Halaman 'dalam' jarang dirayapi (atau tidak pernah)

Laman yang terkubur jauh di dalam hierarki situs Anda cenderung tidak dijangkau oleh Googlebot, terutama jika laman tersebut telah menghabiskan anggaran perenderan yang signifikan lebih tinggi dalam hierarki Anda.

Sekali lagi, pra-rendering dapat menjadi alat yang berharga untuk membantu perayap pencarian menembus lebih dalam ke dalam struktur folder situs web Anda, sebelum mereka kehabisan anggaran perayapan yang ditetapkan.

[Ebook] Kemampuan Perayapan

Pastikan situs web Anda memenuhi persyaratan mesin telusur untuk kemampuan perayapan guna meningkatkan kinerja SEO.

Baca ebooknya

Cara mengoptimalkan situs e-commerce Bereaksi

Dengan beberapa praktik terbaik untuk React e-commerce SEO, Anda dapat memberikan situs Anda – dan halaman individual Anda – prospek yang lebih baik untuk membuatnya menjadi indeks pencarian.

URL Halaman Unik

Mitra praktik terbaik untuk masalah URL dinamis yang disebutkan di atas adalah memberikan setiap halaman URL unik dan statisnya sendiri di situs web Anda. Konten kemudian dikaitkan dengan satu lokasi permanen – URL kanonik untuk halaman tersebut – yang dapat dirayapi, diindeks, dan diberi peringkat oleh mesin pencari dengan percaya diri di halaman hasil mereka.

React Router adalah cara untuk mencapai ini di situs web React. React Router dapat memberikan setiap halaman di situs URL permanennya sendiri, serta menyelaraskan UI dengan URL tertentu.

Reaksi isomorfik

Isomorphic React adalah cara untuk mengaktifkan rendering sisi server, untuk mengurangi tekanan pada anggaran render crawler. Ini bekerja dengan mendeteksi ketika JavaScript dinonaktifkan di sisi klien, dan membuat bentuk HTML situs web yang dirender di sisi server. Jika rendering sisi klien tersedia, situs web akan dimuat sebagai React SPA dengan cara biasa.

Dengan melakukan ini, Isomorphic React mengatasi masalah visibilitas untuk perayap pencarian, meningkatkan kemampuan menemukan halaman, tanpa mengurangi pengalaman React yang mulus dan mulus untuk pengunjung manusia dengan JavaScript sisi klien diaktifkan.

Pra-Rendering

Pra-rendering adalah cara lain untuk mencapai hasil yang serupa dengan Isomorphic React. Ini bekerja dengan menghasilkan versi cache dari HTML yang dirender, yang kemudian dapat diakses oleh perayap alih-alih kode sumber yang tidak dirender.

Pengunjung manusia menerima situs web React sisi klien, sekali lagi memberi mereka semua manfaat SPA yang mulus dan secepat kilat. Ada banyak layanan pra-rendering yang dapat dipilih, termasuk Google Puppeteer, Prerender.io dan SEO4Ajax.

Mengoptimalkan Metadata

Terakhir, pastikan konten Anda telah mengoptimalkan metadata – masih merupakan elemen penting dalam SEO on-page, bahkan setelah bertahun-tahun.

Selain URL yang unik dan dioptimalkan, setiap halaman harus memiliki tag judul unik dan tag meta lain yang relevan, membantu halaman menonjol, dan menandai robot pencari untuk mengaitkan halaman dengan topik atau kata kunci utama tertentu.

React Helmet adalah cara yang baik untuk mencapai ini, dengan memberikan akses langsung untuk mengedit metadata SEO di situs web e-commerce React. Dengan cara ini, Anda dapat menggabungkan praktik terbaik SEO jadul dan kata kunci metadata klasik, dengan semua manfaat dari situs web e-commerce React yang modern dan ramah seluler.