Aplikasi Web Progresif (PWA) dan Pengoptimalan Mesin Pencari (SEO)

Progressive Web App (PWA) adalah perangkat lunak aplikasi yang dikirimkan melalui web. Itu dibangun menggunakan teknologi web standar seperti HTML, CSS, JavaScript, dll. PWA biasanya digunakan untuk meningkatkan tingkat konversi dan lalu lintas situs web. Mulai tahun 2021, PWA didukung (sepenuhnya atau sebagian) oleh Google Chrome, Apple Safari, Firefox untuk Android, dan Microsoft Edge.

Menjadi perkembangan yang relatif baru, pengoptimalan PWA masih memberikan hasil positif di sebagian besar kasus dan memiliki statistik yang luar biasa. PWA Stats terus melaporkan tentang manfaat yang dicapai oleh layanan yang menerapkan PWA.

Secara umum, menurut laporan TOP 30 PWA, “tingkat konversi rata-rata untuk aplikasi web progresif adalah 36% lebih tinggi daripada aplikasi seluler asli”.

PWA sangat membantu dalam hal pemasaran online. Itu sebabnya mereka populer di kalangan kerumunan SEO. Namun, seperti halnya React dan SEO, kombinasi PWA SEO memiliki kesulitan tersendiri. Pada artikel ini, kami akan menjelaskan cara kerja PWA dengan SEO.

Contoh dan Manfaat Utama PWA

Layanan web apa pun bisa menjadi PWA. Ada tiga persyaratan utama untuk itu:

1. Berjalan di bawah HTTPS.
2. Termasuk Manifes Aplikasi Web.
3. Menerapkan pekerja layanan.

Tujuan utama PWA adalah menyediakan fungsionalitas superior untuk setiap pengguna. Berikut adalah daftar keunggulan utama yang ditawarkan oleh PWA:

1. PWA menghadirkan peluang dan pertumbuhan baru untuk bisnis apa pun. Ini menggabungkan kualitas aplikasi dan web terbaik, responsif dan dapat bekerja di perangkat apa pun, dan tidak memerlukan jaringan yang cepat.
2. Keamanan lapisan transportasi membuatnya aman.
3. Pekerja layanan (skrip khusus yang dijalankan browser Anda di latar belakang) memungkinkan PWA bekerja dalam mode offline.

Mari kita lihat beberapa contoh penerapan PWA terbaik:

Direkomendasikan untuk Anda: Kerangka Kerja Paling Populer untuk Membuat Aplikasi Web Progresif (PWA).

1. Starbucks

Sistem pemesanan PWA Starbucks sederhana dan mudah digunakan. Ini terlihat seperti aplikasi asli mereka tetapi memiliki kemampuan untuk berjalan offline saat pengguna menelusuri menu dan menambahkan item ke keranjang. Manfaat terbaik dari solusi semacam itu adalah kenyataan bahwa PWA hampir dua kali lebih kecil dari aplikasi standar Starbucks. Karena itu, perusahaan secara signifikan meningkatkan jumlah pengguna web.

2.Pinterest

Setelah diketahui bahwa hanya 1% pengguna seluler Pinterest yang mengunduh aplikasi dan masuk karena kinerjanya yang buruk, aplikasi seluler dibuat ulang berdasarkan teknologi PWA. Berkat itu, indikator seperti waktu yang dihabiskan, pendapatan iklan, dan keterlibatan inti telah meningkat hingga 40% – 60%.

3.Uber

Aplikasi web Uber dibangun kembali sebagai PWA dengan tujuan untuk memberikan layanan cepat pada jaringan berkecepatan rendah dan pada smartphone lama yang tidak kompatibel dengan aplikasi asli Uber. Berkat itu, aplikasi inti super ringan dimuat dalam waktu sekitar 3 detik di jaringan 2G.

Pentingnya SEO

SEO adalah tentang mengoptimalkan situs web Anda untuk mesin pencari (SE). Tujuan utamanya adalah untuk meningkatkan peringkat situs web dalam hasil pencarian dan melibatkan pengunjung. Ini didasarkan pada algoritma SE dan menggunakan kata kunci untuk membantu mesin pencari menampilkan konten yang relevan dan menarik audiens yang ditargetkan ke situs web. Ini adalah bagaimana SEO dapat membawa lalu lintas organik ke situs web Anda yang terbaik dari jenisnya. Tidak seperti lalu lintas langsung dan berbayar, ini dapat mengubah sebagian besar pengunjung Anda menjadi klien dan pelanggan Anda.

SEO untuk Aplikasi Web Progresif: Apa Masalahnya?

Terlepas dari semua manfaat yang diberikan oleh PWA, banyak pemilik situs web yang masih ragu untuk menerapkan teknologi tersebut. Ada dua alasan utama untuk itu:

1. Takut mengubah sistem yang sudah berjalan dengan baik.
2. Pemahaman yang buruk tentang cara kerja PWA dengan SEO.

Seperti yang dinyatakan oleh John Mueller (analis di Google), "PWA saat ini tidak memiliki keunggulan apa pun di Google Penelusuran."

Banyak PWA dibangun menggunakan kerangka kerja JS yang tidak dikenal karena sifatnya yang ramah SEO.

Jadi, tidak seperti situs web tradisional berbasis HTML, PWA yang bergantung pada JavaScript menantang untuk SEO. Itu sebabnya mereka tidak menawarkan keuntungan apa pun dalam hal kemampuan pencarian. Namun, bertentangan dengan kepercayaan umum, bukan berarti aplikasi web progresif tidak dapat diindeks oleh mesin telusur. Anda hanya perlu menggunakan teknik yang berbeda untuk itu.

Rendering Sisi Server dan Rendering Sisi Klien

Sebagian besar situs web menggunakan Server-Side Rendering (SSR). Ini adalah pendekatan paling sederhana di mana halaman dirender di sisi server alih-alih dirender di browser. Namun, seluruh HTML dimuat setiap kali pengguna meminta halaman yang mungkin bermasalah saat koneksi internet tidak stabil atau cukup cepat.

PWA berbasis JavaScript menggunakan rendering sisi klien (CSR), tempat konten dirender di browser klien. Itu tidak mengirim seluruh halaman HTML setiap kali pengguna meminta halaman. File JavaScript hanya menampilkan bagian informasi yang diperlukan dari halaman di browser klien. Itu sebabnya halaman memuat lebih cepat bahkan dengan koneksi internet yang buruk.

Namun, mengapa masih banyak pemilik website yang menolak menggunakan CSR? Masalahnya adalah bot Google. Itu dapat membaca konten situs web dalam kode yang sepenuhnya terlihat dalam dokumen HTML. CSR, dalam hal ini, sepenuhnya bergantung pada kemampuan mesin pencari untuk memproses JavaScript. Itu sebabnya ada anggapan bahwa aplikasi CSR tidak bisa diindeks. Namun nyatanya, di antara semua mesin pencari, Google adalah yang terbaik dalam mengolah JavaScript.

Namun demikian, ini tetap tidak berarti bahwa masalah JavaScript dan SEO teratasi: Google mengakui bahwa pemrosesan JS tidak sempurna. Yakni, proses perayapan halaman berbasis JavaScript membutuhkan waktu lebih lama daripada proses perayapan halaman HTML. Faktanya, ini berarti Anda harus menunggu lebih lama agar konten JavaScript muncul di halaman hasil mesin pencari.

Semua ini mempersulit pemilik situs web untuk meningkatkan pengalaman pengguna pengunjung mereka dan membuat konten mereka dioptimalkan untuk mesin pencari.

Bagaimana Menerapkan PWA Tanpa Kehilangan Search Engine Optimization Anda?

Anda mungkin menyukai: Magento PWA Studio: Alat Aplikasi Web Progresif untuk Magento!

1. Terapkan Rendering Dinamis

Rendering dinamis menunjukkan versi konten yang berbeda ke sumber yang berbeda. Pengunjung mendapatkan versi CSR, dan perayap mendapatkan versi yang dirender di sisi server. Ini memungkinkan peningkatan pengindeksan halaman berbasis JavaScript oleh bot Google. Dengan cara ini, Anda akan memberikan pengalaman pengguna yang paling nyaman bagi klien Anda tanpa mempertaruhkan SEO situs web.

2. Gabungkan RSK dan CSR

Pastikan perayap akan melihat bagian terpenting dari konten (yang pasti perlu diteruskan ke mesin telusur) menggunakan rendering sisi server. Informasi ini akan diambil oleh perayap segera setelah menemukan halaman. Informasi yang tersisa akan diproses secara otomatis melalui rendering sisi klien selama proses tahap kedua.

3. Bangun PWA Anda menggunakan kerangka kerja JavaScript yang ramah SEO

Rekomendasi hebat kami adalah GatsbyJS. Cukup mudah untuk membangun situs web PWA menggunakan kerangka kerja ini (serta mengubah situs web Gatsby yang ada menjadi PWA). Ini melakukan pra-render situs web Anda dalam langkah pembuatan untuk kinerja yang brilian dan bebas lag, bahkan jika koneksi internet lambat. Berkat itu, pengunjung Anda mendapatkan pengalaman menjelajah seperti aplikasi.

4. Menggunakan Solusi PWA Siap Pakai

Saat ini, PWA lebih terjangkau dari sebelumnya. Jadi, jika Anda tidak ingin membuang banyak waktu dan sumber daya untuk pengembangan PWA, Anda dapat menggunakan beberapa solusi PWA siap pakai yang dibuat sesuai dengan prinsip SEO dan diuji secara menyeluruh, sehingga Anda dapat yakin akan kualitasnya. dari kode.

5. Studio PWA

Studio PWA dirilis pada 2019 sebagai standar teknologi web yang dirancang untuk memberikan pengalaman seperti aplikasi. Faktanya, ini bukan solusi siap pakai: ini lebih merupakan kumpulan alat dan fitur untuk pengembangan PWA. Solusi ini cukup rumit dan mengesankan tetapi membutuhkan penyesuaian tambahan.

6.SkandiPWA

ScandiPWA adalah solusi sumber terbuka, berdasarkan React dan Redux. Ini dirancang dengan tujuan untuk meningkatkan situs web dengan kecepatan dan kemampuan untuk bekerja secara offline. Itu juga terus diperbarui, jadi Anda akan selalu mendapatkan fungsi baru.

7. Etalase Vue

Ini adalah salah satu solusi PWA pertama yang tersedia di pasar. Sebenarnya, Vue Storefront adalah solusi universal dan lengkap, tetapi membutuhkan sumber daya pemeliharaan tambahan.

Bagaimana Menghindari Kesalahan Terkait SEO Selama Implementasi PWA?

Untuk mengembangkan PWA yang dibuat dengan baik yang akan membantu Anda memenangkan SEO dengan memberikan pengalaman pengguna yang lebih baik, Anda harus:

1. Lakukan audit SEO. Ini akan membantu menemukan dan memperbaiki semua masalah terkait SEO.
2. Konsultasikan dengan spesialis SEO. Saat Anda membuat PWA menggunakan React (misalnya), spesialis SEO Anda harus tahu persis cara menggabungkan React dan SEO. Dengan cara ini Anda akan menghindari sebagian besar masalah yang mungkin muncul setelah implementasi.
3. Tetap berpegang pada prinsip dasar SEO saat mengembangkan PWA. Dalam artikel terkait Progressive Web Apps SEO yang diterbitkan oleh Google, perusahaan tersebut memberikan tips tentang cara membangun PWA yang dapat diindeks. Beberapa di antaranya seperti:
   • Setiap halaman harus tersedia melalui URL tertentu. Berkat itu, setiap halaman akan dirayapi secara mandiri.
   • Situs web harus memiliki desain yang responsif dan dioptimalkan untuk perangkat seluler.
   • Gunakan peningkatan progresif. Berkat strategi itu, PWA berfungsi dengan baik bahkan di browser lama.
   • Periksa bagaimana Google merender halaman Anda menggunakan Google Search Console secara teratur. Dengan demikian, Anda akan selalu tahu kapan waktunya untuk meningkatkan atau mengubah sesuatu.
   • Perhatikan waktu muat halaman. Google mengukur kecepatan pemuatan setiap halaman, dan jika kecepatan pemuatan halaman Anda melambat, Google akan menurunkan peringkatnya.

Anda mungkin juga menyukai: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

Garis bawah

Pengoptimalan PWA menawarkan banyak peluang untuk pemasaran online dan membawa pertumbuhan bagi sebagian besar bisnis. Faktanya, praktik SEO terbaik yang biasanya diterapkan oleh PWA adalah antarmuka yang ramah pengguna: responsif, terstruktur, dan dirender dengan cepat. Namun, PWA masih belum memberikan keuntungan langsung pada SEO, dan masalah terkait SEO inilah yang menghentikan banyak pedagang untuk menerapkan PWA ke situs web mereka. Itulah mengapa penting untuk berhati-hati dan menggunakan teknik yang berbeda seperti rendering dinamis, kombinasi SSR dan CSR, atau solusi PWA siap pakai. Anda juga harus melibatkan spesialis SEO dalam prosesnya sejak awal.

Seperti yang Anda lihat, Anda dapat menggunakan SEO dan PWA dengan berhasil menggabungkannya. Perlu juga dicatat bahwa PWA adalah jenis perangkat lunak yang masih muda dan inovatif, sehingga diharapkan adanya peningkatan.

 Artikel ini ditulis oleh Ivan Jones. Ivan adalah spesialis SEO di Clockwise.Software dengan pengalaman lebih dari 5 tahun di industri ini. Dia mengetahui nuansa yang telah membantunya mempertahankan situs web di atas hasil penelusuran Google selama bertahun-tahun. Menjadi pembelajar yang rajin, dia tertarik untuk menguji pendekatan baru yang dapat menguntungkan hasil SEO.