Strategi SEO untuk website berbasis Javascript (Single Page Application) atau Ajax

Teknologi web tahun ini yang sedang tren salah satunya adalah teknologi single page application. Apa itu Single Page Application? Single page application (SPA) adalah istilah untuk aplikasi berbasis web, yang menggunakan satu halaman web saja sebagai tampilan dari aplikasinya. Semua aksi klik atau pun penyajian data tidak akan membuat halaman secara utuh dimuat ulang (reload), tetapi hanya beberapa saja yang diupdate dari server atau dari hasil proses aplikasi di sisi klien. Akibat dari penggunaan teknologi ini menjadikan web yang dibuat menjadi lebih ringan dan lebih cepat ketika digunakan.

Teknologi SPA ini menggunakan javascript sebagai alat utamanya dan HTML5 & CSS3 sebagai pendukungnya. HTML5 & CSS3 digunakan untuk membentuk layout dan mempercantik halamannya. Javascript untuk perubahan halaman serta alat komunikasi dengan server. Adapun teknik yang digunakan dari javascript itu ada yang menggunakan AJAX, beberapa aplikasi modern yang memerlukan komunikasi data realtime seperti aplikasi chat, WebSocket digunakan sebagai protokol yang lebih cepat dan ringan. Ada juga yang menggunakan framework yang sudah ada seperti angularjs atau knockoutjs atau menggunakan view library serperti ReactJs.

single-page-application

Gambar 1. Single Page Application

 

Cara kerjanya seperti terlihat gambar diatas adalah saat pertama dibuka, semua kebutuhan untuk aplikasi seperti HTML, CSS dan JavaScript dimuat di awal. Ketika aplikasi membutuhkan data atau tampilan baru, maka data dan tampilan diambil dari server secara terpisah tanpa harus berpindah dari halaman utama. Setelah data diterima, maka tampilan akan diganti secara dinamis menggunakan JavaScript.

Namun, terlalu bergantung dengan JavaScript untuk menampilkan suatu halaman berpengaruh kepada SEO secara teknis. Pengaruhnya ada pada proses indexing dan crawling data. Bisa dibilang SPA tidak support SEO, tapi tunggu dulu, seperti dijelaskan Webmaster dalam blognya pada bulan Oktober 2015:

Today, as long as you’re not blocking Googlebot from crawling your JavaScript or CSS files, we are generally able to render and understand your web pages like modern browsers. To reflect this improvement, we recently updated our technical Webmaster Guidelines to recommend against disallowing Googlebot from crawling your site’s CSS or JS files.

Begitu juga seperti ditulis pada artikel Search Engine Land pada bulan Mei 2015:

We ran a series of tests that verified Google is able to execute and index JavaScript with a multitude of implementations. We also confirmed Google is able to render the entire page and read the DOM, thereby indexing dynamically generated content.

SEO signals in the DOM (page titles, meta descriptions, canonical tags, meta robots tags, etc.) are respected. Content dynamically inserted in the DOM is also crawlable and indexable. Furthermore, in certain cases, the DOM signals may even take precedence over contradictory statements in HTML source code. This will need more work, but was the case for several of our tests.

2 sumber ini memberitahukan bahwa konten web yang dimasukkan kedalam DOM juga bisa dibaca dan di index oleh google, hal ini mengindikasikan bahwa tentu saja aman untuk menggunakan teknologi berbasis client-side redered (SPA) dilihat dari sisi SEO. Berikut gambaran singkat cara kerjanya:

spa-seo-workflow

Gambar 2 SPA SEO Workflow

 

Beberapa strategi berikut akan memberikan solusi SEO untuk website SPA:

  1. Optimisasi SPA untuk SEO no.1: URL Sexy!

Biasanya pada penggunaan url web SPA ditemukan hasbang “#” atau “#!” disebut juga Fragment identifiers. Hal ini sangat efektif untuk menampilkan konten tanpa me-reload sebuah halaman. Namun teknologi ini tidak kompatibel dengan beberapa tool web seperti Facebook OG (Open Graph).

Disinilah teknologi pushSate HTML5 berperan, juga dengan menggunakan HTML5 History API, url dapat diupdate secara otomatis tanpa teknologi Fragment identifiers, menampilkan konten secara asyncronous tanpa me-reload sebuah halaman.

Sebelumnya:
http://myapp.com/#/view1

Sekarang menjadi:

http://myapp.com/view1

  1. Optimisas SPA untuk SEO no.2: Progressive Enhancement

Proses render server-side merupakan salah satu solusi SPA untuk SEO. React saat ini telah mendukung teknologi ini. Yang harus dilakukan adalah memastikan halaman kita memilki link dan konten yang bisa dibaca oleh google.

  1. Optimisas SPA untuk SEO no.3: Sitemap.xml

Selalu gunakan sitemap untuk meng-index url halaman-halaman kita. Tentunya dengan teknologi JavaScript Progressive Enhancement.

Dan juga tips-tips lain yang dijelaskan oleh John Mueller, berikut:

https://plus.google.com/+JohnMueller/posts/LT4fU7kFB8W

Kesimpulannya tidak ada yang salah membuat halaman web menggunakan teknologi JavaScript dilihat dari sisi SEO, selama kita mengikuti konsep dasar SEO berikut:

  1. Render komponen sebelum melakukan sesuatu secara asyncronous
  2. Lakukan testing setiap halaman menggunakan “Fetch as Google” untuk memastikan Googlebot menemukan konten yang kita tampilkan

Last thanks for reading J

Sumber:

http://craigshoemaker.net/blog/seo-strategies-for-single-page-applications

https://www.frontendjournal.com/html5-pushstate-and-single-page-apps/

https://medium.freecodecamp.com/seo-vs-react-is-it-neccessary-to-render-react-pages-in-the-backend-74ce5015c0c9#.j9lxtk6xi

https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html

Video: SEO best practices and requirements for modern sites by John Mueller:


https://www.youtube.com/watch?v=JlP5rBynK3E

 

Comments

comments

fathanfisabilillah

You Might Also Like

No Comment

Leave your thought