SEO untuk CMS Tanpa Kepala: Hal yang Perlu Diperhatikan

Diterbitkan: 2020-11-30

Daftar Isi

Pada dasarnya, SEO untuk CMS tanpa kepala masih mengikuti aturan yang sama dengan CMS tradisional. Jadi kemampuan merangkak, kecepatan, dan kualitas konten tetap menjadi tujuan saat Anda ingin masuk ke dalamnya. Tetapi meskipun kami memiliki tujuan yang sama untuk dicapai, cara untuk mencapai tujuan ini berbeda dalam CMS tanpa kepala.

Bagaimana SEO berbeda dalam CMS tanpa kepala

Dalam CMS tanpa kepala, sebagian besar pekerjaan SEO harus dilakukan secara manual, karena biasanya tidak ada plugin atau add-on untuk memudahkan seluruh proses—dan ini berarti lebih banyak pekerjaan untuk Anda, dan lebih banyak hal untuk dipelajari dalam proses daripada mengandalkan alat pihak ketiga. Selain itu, karena sebagian besar kerangka kerja CMS dan frontend tanpa kepala saat ini berbasis JavaScript, SEO untuk lingkungan seperti itu bisa menjadi rumit karena sifat perayap yang tidak dapat merender JavaScript dengan mudah.

Meskipun Googlebot dapat merender JavaScript, kami tidak ingin bergantung pada itu.
Martin Splitt, tentang penerapan rendering dinamis

 Bacaan yang disarankan: CMS Tanpa Kepala vs CMS Tradisional

Hal-hal yang harus diperhatikan dalam CMS tanpa kepala

Teks alternatif

Teks alternatif membantu membuat konten gambar Anda dapat dibaca oleh bot Google. Serupa dengan metadata khusus, teks alternatif untuk gambar bukanlah fitur standar di sebagian besar CMS tanpa kepala, dan ini berarti harus diterapkan oleh penyedia CMS Anda.

Untuk CMS tanpa kepala yang tidak memiliki fitur Teks Alt bawaan, kami dapat menambahkan teks alt per gambar secara manual tanpa banyak usaha, karena Anda hanya perlu menambahkan atribut <alt> ke gambar Anda.

 <img src="gambar.png" alt="teks alternatif kami">

Metadata

Tag metadata adalah tag khusus yang dipahami Google Penelusuran. Tag ini menjelaskan konten situs Anda dan membantu mengontrol tampilan halaman Anda di Google Penelusuran. Dan bertentangan dengan CMS tradisional, CMS tanpa kepala biasanya tidak memiliki kemampuan untuk mengedit tag metadata dengan cepat, yang berarti bahwa judul halaman Anda, deskripsi, dan tag meta lainnya harus ditambahkan secara manual ke model konten Anda.

Misalnya, untuk situs web tanpa kepala yang memiliki frontend berbasis React tetapi tanpa dukungan untuk metadata khusus, kami menggunakan react-helmet untuk menambahkan metadata dengan mudah ke <head> kami.

Untuk CMS tanpa kepala yang mendukung metadata khusus, biasanya Anda harus menambahkan bidang yang berisi tag metadata khusus ke dalam model konten Anda atau untuk membuat model SEO khusus yang berisi semua tag meta yang diperlukan. Model SEO yang dibuat harus dikonfigurasi untuk memiliki hubungan dengan semua halaman yang membutuhkannya.

Model SEO di GraphCMS — *Model SEO di* *GraphCMS*

Cuplikan data terstruktur

Cuplikan data terstruktur membantu Google Penelusuran lebih memahami halaman Anda dan semua konten di dalamnya. Dengan memberikan cuplikan data terstruktur yang valid, situs Anda memenuhi syarat untuk hasil kaya.

Untuk membuat cuplikan data terstruktur, kami menggunakan larik JSON-LD yang disimpan di <head> situs Anda. Dan tidak seperti CMS tradisional di mana seluruh proses diotomatisasi dengan plugin (misalnya, Yoast SEO), dalam CMS tanpa kepala, Anda harus:

Pilih tipe data terstruktur yang benar untuk halaman Anda
Tambahkan kode JavaScript khusus yang membantu menghasilkan semua data terstruktur yang diperlukan atau menambahkan lebih banyak informasi ke data terstruktur yang dirender sisi server

 fetch('https://api.example.com/recipes/123')
.then(respons => respon.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = StructureDataText;
  document.head.appendChild(skrip);
});

Uji penerapan Anda menggunakan Uji Hasil Kaya

Masalah pelacakan tayangan halaman

Jika Anda pernah mencoba menerapkan Google Analytics pada situs web tanpa kepala, Anda mungkin memperhatikan bahwa hanya tayangan laman pertama situs web Anda yang dilacak. Hal ini sebagian besar disebabkan oleh fakta bahwa frontend CMS tanpa kepala adalah Aplikasi Halaman Tunggal, yang berarti bahwa halaman hanya dimuat sekali dan hanya satu peristiwa pageView yang dipicu per sesi. Untuk menghindari masalah ini, kami menerapkan API Riwayat untuk mengaktifkan tayangan laman virtual yang kemudian dapat dilacak dengan menggunakan pemicu Perubahan Riwayat di Google Pengelola Tag.

Pemicu perubahan histori melacak perubahan dalam fragmen URL atau objek status histori. Ketika perubahan terjadi di antara keduanya, kami memiliki variabel berikut:

Fragmen URL lama riwayat: Seperti apa fragmen URL dulu.
Sejarah fragmen URL baru: Apa itu fragmen URL sekarang.
Status lama riwayat: Objek status riwayat lama, dikendalikan oleh panggilan situs ke pushState.
Histori status baru: Objek status histori baru, dikendalikan oleh panggilan situs ke pushState.

Untuk membuat pemicu perubahan riwayat, cukup buka Google Pengelola Tag dan:

Pilih Pemicu > Baru
Pilih Konfigurasi Pemicu > Perubahan Riwayat

Setelah ini, kita harus membuat tag Konfigurasi Google Analytics baru untuk diaktifkan pada pemicu Perubahan Riwayat yang baru saja kita buat, seperti:

Dan itu saja. Anda sekarang seharusnya dapat melacak tampilan halaman di situs web tanpa kepala Anda.

Masalah audit SEO

Karena situs web tanpa kepala Anda sebagian besar terbuat dari JavaScript sisi klien, audit SEO mungkin menimbulkan masalah karena perayap yang digunakan di sebagian besar alat audit SEO gratis tidak dilengkapi dengan kemampuan untuk merender JavaScript.

Render JavaScript bukan fitur gratis di sebagian besar alat audit SEO — *Render JavaScript* ***bukan*** *fitur gratis di sebagian besar alat audit SEO*

Masalah ini diharapkan dapat diselesaikan dengan membayar lebih, karena Anda dapat meningkatkan ke paket premium berikutnya untuk mengaktifkan dukungan fitur ini. Anda juga harus memperhatikan bahwa rendering JavaScript tidak diaktifkan secara default di sebagian besar alat audit SEO, yang berarti Anda harus mengaktifkannya secara manual untuk merayapi situs web tanpa kepala Anda.

*Mengaktifkan rendering JavaScript di ScreamingFrog*

Pemisahan kode

Karena CMS tanpa kepala pada umumnya sangat berbasis JavaScript, jumlah kode JavaScript yang digunakan di situs web Anda—terutama saat Anda menggunakan sejumlah besar pustaka pihak ketiga—bisa mencapai titik yang berlebihan.

Waktu boot-up JavaScript terlalu tinggi — Sumber: Kurangi muatan JavaScript dengan pemecahan kode

Dan seperti yang kita semua tahu, kecepatan halaman mempengaruhi SEO, jadi kita tidak bisa membiarkan kode JavaScript kita tetap seperti ini, itulah sebabnya pemisahan kode dibuat untuk menghindari masalah ini. Dengan pemecahan kode, Anda dapat membagi kode JS Anda menjadi bundel yang lebih kecil yang kemudian dapat dimuat secara dinamis saat runtime. Fitur ini saat ini didukung oleh bundler seperti Webpack dan Browserify melalui factor-bundle.

 import React, { Suspense, lazy } dari 'react';
import { BrowserRouter sebagai Router, Route, Switch } dari 'react-router-dom';

const Beranda = malas(() => import('./routes/Home'));
const Tentang = malas(() => import('./routes/Tentang'));

const Aplikasi = () => (
  <Router>
    <Suspense fallback={<div>Memuat...</div>}>
      <Beralih>
        <Rute persis jalur="/" component={Home}/>
        <Rute path="/about" component={Tentang}/>
      </Beralih>
    </Ketegangan>
  </Router>
);

Render dinamis

Karena sebagian besar situs web tanpa kepala bersifat JavaScript, mereka menghadapi tantangan SEO utama yang sama yaitu rendering JavaScript.

[…], sulit untuk memproses JavaScript dan tidak semua perayap mesin telusur dapat memprosesnya dengan sukses atau segera.
Menerapkan Rendering Dinamis, Google

Perayap tidak dapat merender JavaScript secara efektif, oleh karena itu Google sendiri menyarankan Rendering Dinamis sebagai solusi solusi untuk sementara . Diperkenalkan di Google I/O '18, rendering dinamis adalah solusi ideal untuk situs web berbasis JavaScript yang menginginkan cara mudah untuk menyelesaikan tantangan SEO sambil tetap mempertahankan semua manfaat yang datang dengan rendering sisi klien. Dengan metode rendering baru ini, server web Anda mengirimkan konten normal yang dirender sisi klien kepada pengguna, sementara crawler mesin telusur mendapatkan konten HTML statis yang sepenuhnya dirender oleh server.

*Cara kerja rendering dinamis (disederhanakan)*

Artinya, Anda mendapatkan yang terbaik dari kedua dunia dengan perenderan dinamis—kemudahan perayapan dari perenderan sisi server dan perenderan selanjutnya yang cepat dari perenderan sisi klien.

Untuk mengimplementasikan rendering dinamis, kita harus bergantung pada renderer dinamis seperti Rendertron atau Puppeteer untuk mempersingkat keseluruhan proses. Render ini akan mengubah konten situs Anda menjadi HTML statis yang dapat dipahami oleh perayap.

Setelah selesai menginstal dan mengonfigurasi perender dinamis Anda, ikuti langkah-langkah tambahan di dokumen resmi Google untuk mengonfigurasi perilaku agen pengguna.

Kesimpulan

SEO untuk CMS tanpa kepala bukanlah cara yang paling mudah, dan itu akan membutuhkan sedikit kerja dari pengembang Anda untuk mendapatkan semuanya dengan benar. Tetapi begitu Anda memahaminya, CMS tanpa kepala bisa sama efektifnya dengan CMS tradisional dalam hal SEO. Dan terlebih lagi, Anda mendapatkan lebih banyak kebebasan dan fleksibilitas untuk membuat konten seperti yang Anda inginkan.