Jadikan Situs Web JavaScript Anda SEO Friendly Dengan Solusi ini

Diterbitkan: 2022-01-19

Sebagian besar situs web modern berisi JavaScript, menjadikannya dinamis dan interaktif. Meskipun bot mesin telusur cukup cerdas, bot tersebut mungkin masih tidak merender banyak konten JavaScript, yang memengaruhi peringkat halaman.

Konten JavaScript sangat bergantung pada bagaimana situs web Anda merender kode.

Misalnya, dalam rendering sisi server , server berisi konten situs web. Atas permintaan, browser menerima HTML yang dirender sepenuhnya.

Namun, dalam rendering sisi klien , JavaScript dirender oleh browser menggunakan DOM.

Opsi ketiga untuk rendering adalah rendering dinamis , di mana konten yang dirender di sisi klien menuju ke browser, sedangkan konten yang dirender di sisi server menuju ke mesin telusur.

Teknik rendering memengaruhi bagaimana JS dirender dan karenanya peringkat halaman.

Untuk memastikan semua kode JS situs web Anda dirender, Anda harus mengikuti praktik SEO JavaScript yang tepat. Tapi pertama-tama, mari kita pahami apa itu SEO JavaScript.

Apa itu SEO JavaScript?

JavaScript SEO memudahkan mesin pencari untuk merayapi dan mengindeks kode JavaScript (konten dinamis) dari sebuah situs web (atau halaman web). Google atau mesin pencari lainnya memproses JavaScript dalam tiga tahap, yaitu crawl, render, dan index. Agar Google dapat melakukan semua ini, konten JavaScript harus SEO friendly, yaitu terlihat dan tersedia.

Bagaimana Google memproses konten JavaScript di halaman

Berikut adalah langkah-langkah yang diikuti Googlebot untuk memproses JavaScript:

  • Mengambil URL dari antrian perayapan melalui permintaan HTTP
  • Memeriksa file robots.txt untuk menemukan URL yang tidak diizinkan untuk dirayapi oleh situs
  • Melewati URL 'tidak diizinkan', mem-parsing respons untuk URL lain, dan menambahkannya ke antrean perayapan
  • Mengantrekan halaman untuk dirender, kecuali halaman yang ditandai untuk tidak diindeks
  • Chromium merender halaman, menjalankan JavaScript, dan mengindeks halaman
  • Mem-parsing HTML yang dirender lagi untuk tautan
  • Mengantrekan URL untuk dirayapi

Kapan Google tidak mengindeks Konten JavaScript?

google dan javascript

Google dapat mengindeks JavaScript jika diterapkan dengan benar. Misalnya, jika beberapa file JS dan CSS Anda disembunyikan, Google mungkin tidak dapat merayapi situs web dengan benar. Demikian pula, jika Anda memiliki tautan dalam HTML mentah yang tidak ada dalam HTML yang dirender, Google dapat melewatkan tautan tersebut agar tidak dirayapi atau diindeks.

Juga, jika JavaScript tidak langsung disematkan dalam HTML, Google harus mengunduh file untuk dieksekusi. Lebih lanjut, mesin telusur mungkin memiliki versi halaman web yang di-cache (untuk kinerja yang lebih baik), dan JavaScript pada halaman tersebut mungkin tidak sinkron dengannya.

Karena setiap bit kode JavaScript harus dibaca, penggunaan JavaScript yang berlebihan dapat memperlambat kecepatan halaman atau menyebabkan kesalahan batas waktu.

Mengapa JavaScript SEO penting?

SEO JavaScript penting karena memengaruhi banyak elemen di halaman dan faktor peringkat yang dipindai Google (atau mesin pencari) untuk SEO:

Elemen di halaman Potensi masalah SEO Kemungkinan solusi SEO
Konten yang dirender Mesin telusur (seperti Google) tidak dapat merender laman Anda jika sumber dayanya diblokir di file robots.txt situs Anda. Selain itu, Google tidak dapat mengindeks atau merender file JS dan CSS, yang diblokir atau disembunyikan. Kurangi JavaScript pada konten inti halaman, ikuti pendekatan alternatif untuk rendering sisi klien, seperti rendering sisi server, rendering dinamis, rendering hybrid (kombinasi sisi klien dan sisi server)
Tautan Jika beberapa tautan bersifat internal atau JavaScript menghasilkan tautan ke URL saat pengguna mengekliknya, Google tidak dapat menemukan tautan tersebut. Gunakan tautan jangkar dengan atribut href, teks jangkar deskriptif untuk tautan. Tautan palsu seperti tag <div> dan <span> tidak dirayapi
Metadata Kecuali jika situs menggunakan paket Node.js seperti vue-meta, mesin telusur mungkin merayapi hal yang sama atau, lebih buruk lagi, tidak ada metadata untuk setiap tampilan atau halaman. Gunakan paket Node.js seperti react-helmet, vue-meta, react-meta-tags
Gambar yang dimuat lambat Perayap mesin telusur tidak memilih konten apa pun yang ditandai sebagai pemuatan lambat. Mesin pencari tidak dapat menggulir konten, dan karenanya beberapa konten mungkin tidak pernah ditampilkan. Gunakan IntersectionObserver API, yang memahami visibilitas dan posisi elemen DOM setelah tersedia. Anda juga dapat menggunakan fitur pemuatan lambat asli dari browser (Chrome).
Waktu muat halaman Halaman dengan banyak konten JavaScript mungkin lambat dimuat, yang dapat memengaruhi peringkat pencariannya. Tambahkan kode JS penting sebaris dan tunda kode JS non-kritis hingga konten utama dirender, mengurangi kode JS keseluruhan.

Praktik terbaik untuk SEO JavaScript

Dengan mengikuti beberapa praktik terbaik, kami dapat membuat mesin telusur merayapi dan membuat laman lebih baik:

Tambahkan tautan dan gambar sesuai standar web yang ditentukan

Tambahkan semua tautan menggunakan tag ahref daripada onclick , #pageurl , atau window.location.href='/page-url . Google dapat dengan mudah merayapi tautan dan mengikutinya.

 <a href=”http://geekflare.com”>Welcome to Geek world</a>

Cara yang sama, tambahkan gambar menggunakan tag img src dan bukan tag img data-src :

 <img src=”myimg.png” />

Lebih suka rendering sisi server

Pastikan konten situs web Anda tersedia di server selain dari browser pengguna.

Pastikan HTML yang Anda render memiliki semua konten penting yang ingin Anda tampilkan

HTML yang dirender harus memiliki judul, robot meta, deskripsi meta, gambar, data terstruktur, dan tag kanonik yang benar.

Membuat situs web JavaScript Anda SEO friendly

kode javascript

Untuk menguji implementasi JavaScript SEO di halaman web Anda, Anda dapat mengikuti langkah-langkah di bawah ini:

  • Ketahui berapa banyak JavaScript yang digunakan situs web Anda: Untuk ini, Anda cukup menonaktifkan JavaScript di browser Anda. Jika Anda tidak melihat banyak konten, itu berarti situs web Anda sangat bergantung pada JavaScript.
  • Periksa apakah Googlebot mendapatkan semua konten dan tag penting: Anda dapat menggunakan alat uji ramah seluler Google atau alat uji hasil kaya untuk memeriksa bagaimana Googlebot menggunakan HTML mentah untuk merender konten.
  • Anda juga dapat menggunakan ekstensi chrome seperti View Rendered Source untuk memahami bagaimana JavaScript mengubah halaman dan membandingkan HTML sumber dan yang dirender.
  • Anda dapat memeriksa tag penting (judul, deskripsi meta, dll.) pada HTML yang dirender menggunakan ekstensi SEO Pro Chrome.

Kesimpulan

Dalam artikel ini, kita belajar tentang bagaimana JavaScript dapat membuat penanganan SEO menjadi sedikit rumit dan pendekatan untuk memecahkan potensi masalah yang disebabkan oleh penambahan banyak JavaScript ke kode Anda.

Kami juga melihat beberapa praktik dan alat terbaik untuk membuat situs web JavaScript Anda SEO friendly. Alat hebat lainnya yang membantu Google mengenali dan merayapi konten dinamis Anda adalah Prerender, AngularJS, dan Huckabuy.

Anda juga dapat memeriksa beberapa cara terbaik untuk mengurangi waktu pemuatan situs web.