Membuat Web Single Page Application (SPA) Ter-index
Single Page Application (SPA) merupakan teknologi javascript dalam aplikasi web atau situs web yang berinteraksi dengan pengguna secara dinamis menampilkan halaman web saat ini dengan data baru dari server web, tanpa metode default browser yaitu mereload halaman. Singkatnya, perbedaan yang signifikan antara website pada umumnya dibanding SPA, adalah web SPA tidak akan mereload browser anda ketika anda bernavigasi ke suatu halaman.
Keuntungan dari SPA adalah navigasi antar halaman akan jauh lebih cepat karena halaman akan ditampilkan tanpa pengguna harus menunggu halaman diload kembali setiap bernavigasi. Hal ini memberikan manfaat yang luar biasa kepada pengguna karena mempersingkat waktu dalam menampilkan suatu halaman.
Ada banyak framework yang mendukung dalam pembuatan suatu aplikasi SPA, seperti React, Vue, dan Angular. Anda dapat memilih salah satu framework ini untuk dapat mengembangkan website berbasis SPA.
Permasalahan
Walaupun memberikan manfaat yang luar biasa, nyatanya web SPA memiliki kekurangan yang paling mendasar. Ada 2 permasalahan yang paling sering ditemui dalam SPA, yaitu dari ukuran assets yang besar dan seo optimization.
1. Assets File Besar
File javascript dan css yang merupakan hasil build dari framework berbasis SPA, terutama pada file javascript, identik berukuran sangat besar karena keseluruhan tampilan dan logika pemrosesan dalam aplikasi dituliskan dalam satu file javascript.
Website berbasis SPA juga sangat tergantung dengan javascript. Sehingga, anda harus benar-benar melakukan pengecekan di tiap browser untuk memastikan website anda berjalan dengan baik untuk user.
Saya akan membahas mengenai cara meminimalisir ukuran dari javascript aplikasi SPA pada artikel berikutnya.
2. Optimasi Seo
Optimasi Seo pada SPA sangat sulit dilakukan karena hanya ada 1 halaman yang bisa diindex oleh mesin pencari. Search engine, akan melakukan crawl sesuai konten yang diload pertama kali ketika website diakses. Halaman yang menggunakan teknologi SPA, akan menampilkan html dasar yang bersumber biasanya dari public/index.html project tersebut. Sebanyak dan sebervariasi apapun halaman SPA anda, halaman yang di first load adalah halaman dasar tersebut.
Inilah yang menyebabkan halaman yang dibagun SPA susah untuk terindex karena setiap url yang dicrawl hanya akan menampilkan tag html sederhana seperti diatas.
Indexing dengan SPA
Setelah mengetahui permasalahan yang terjadi dalam SPA untuk seo, mari kita menyelesaikan masalah tersebut dengan beberapa trik berikut. Cara ini merupakan cara paling sederhana yang dapat anda terapkan apabila anda terlanjut mengembangkan aplikasi SPA namun dipertengahan jalan anda diminta untuk mengatur agar web tersebut seo friendly. Apabila anda mengembangkan web SPA dari awal, saya sarankan anda menggunakan tools yang lebih efektif seperti menggunakan Nuxtjs untuk pengembang Vue atau Nextjs untuk React.
Dapat anda lihat pada gambar diatas, ketika suatu halaman berbasis SPA, hal yang pertama kali diakses oleh browser adalah sebuah halaman kosong biasanya public/index.html yang biasanya hanya berisi tag dasar html dan section kosong yang berisi tag untuk meng-append code SPA. Sebagai contoh apabila anda menggunakan vuejs, maka yang pertama diakses adalah halaman seperti berikut:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %> </title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue. </strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Apapun route path yang anda akses pada SPA, html ini akan tetap ada peroleh yang pertama kali. Anda dapat membuktikannya dengan mengakses path pada web SPA kemudian pilih View Page Source. Tampilan akhir yang anda inginkan tentunya tidak dirender pada saat first load aplikasi, namun saat javascript telah berjalan dan tampilan tersebut akan ditampilkan kepada anda oleh javascript. Nah, inilah yang menyebabkan akan lebih sulih untuk mengoptimasi seo pada halaman berbasis SPA.
Solusi
Saya akan memberikan solusi sederhana yang dapat anda gunakan apabila anda terlanjur menggunakan framework SPA tanpa menggunakan fitur ssr dari framework tersebut. Langkah pertama, anda harus menyiapkan satu backend programming yang akan anda gunakan sebagai base project, anda dapat menggunakan nodejs, php, atau bahasa lainnya yang mendukung web programming. Sebagai contoh, saya akan menggunakan bahasa php dalam kasus ini. Pastikan juga anda telah membuild project SPA anda ke production.
Setelah project SPA anda build ke tahap production, sekarang saatnya anda mengkombinasikannya dengan backend programming yang saya sebutkan sebelumnya. Output folder anda akan seperti berikut.
Selanjutnya, anda akan membuat agar ketika aplikasi diakses, tidak langsung mengarah ke file index.html. Namun akan mengarah ke suatu file php yang selanjutnya mengarahkan ke file index.html tersebut. Buat file index.php pada directory utama project anda kemudian masukan kode berikut
<?php
include 'index.html';
Dengan code diatas, apabila file index.php kita akses pada browser, maka akan menampilkan isi dari hasil build project SPA kita, seperti berikut
Setelah berjalan dengan baik, sekarang saatnya anda menambahkan code untuk keperluan seo. Buka kembali file index.php kemudian masukan code berikut.
<?php
$agent = strtolower($_SERVER["HTTP_USER_AGENT"]);
$agent_list = [
'facebook',
'googlebot',
'sitemap',
'xml',
'bingbot',
'bot'
];
foreach($agent_list as $k => $agent) {
if(
str_contains($userAgent, $agent)
) {
echo '
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Judul</title>
<!-- Tambahkan meta tag lainnya disini -->
</head>
<body>
<h1>Selamat Siang</h1>
<p>Halaman ini dapat dibaca oleh seo</p>
<img src="assets/image/mount.jpg" width="200px" />
</body>
</html>
';
exit();
}
}
include 'index.html';
Dalam code diatas, saya memanfaatkan user agent untuk melakukan custom render terhadap halaman yang akan diload. Konsepnya, setiap search engine memiliki suatu user agent khusus yang dipergunakan untuk melakukan crawl terhadap web anda. Google menggunakan Googlebot, Bing menggunakan Bingbot dan lain sebagainya.
Pada file diatas dapat anda lihat terdapat suatu kondisional, dimana apabila user agent yang dipergunakan mengandung kata googlebot, bingbot, facebook dan lain sebagainya, maka halaman yang direturn adalah code html yang berisi tag-tag yang dipergunakan untuk keperluan seo. Namun apabila diluar itu, yang mengindikasikan halaman diload oleh browser, maka website akan mereturn source SPA awal kita.
Cara ini merupakan cara yang paling sederhana yang dapat anda pergunakan tanpa merubah banyak pada source SPA anda seperti mengintegrasikannya dengan plugin ssr. Tentunya cara ini sudah pernah saya terapkan, anda dapat membuktikannya dengan mengakses halaman portfolio atau code-snippet yang dibangun menggunakan SPA Vuejs
Jika di debug menggunakan Facebook Sharing Debugger, facebook akan mengenali halaman tersebut sebagai halaman biasa (bukan SPA) dan akan tetap menampilkan card sesuai konten.
Namun, apabila saya tidak menggunakan cara optimasi seo pada tahapan diatas, maka halaman tersebut akan tampil seperti berikut.
Sama halnya dengan Google, berikut merupakan hasil pencarian yang telah diindex oleh google melalui website saya pada halaman portfolio.
Penutup
Nah sekian diatas merupakan cara paling sederhana yang dapat anda pergunakan untuk mengakali web SPA anda agar tetap dapat terindex dengan baik. Tentu saja cara ini bukan merupakan cara yang paling optimal. Namun cara ini dapat anda pakai untuk project yang telah selesai namun anda baru berfikir untuk menerapkan seo friendly pada web tersebut.
Apabila anda ingin mengembangkan website dari awal dengan SPA, saya sarankan anda menggunakan framework yang telah terintegrasi dengan ssr seperti Nuxtjs untuk pengembang Vue atau Nextjs untuk React.
