SEO SvelteKit: Cara Bikin Google Jatuh Cinta Sama Project Svelte 5 Kamu_

SvelteKit + SEO: Jodoh yang (Akhirnya) Direstui Algoritma

Mari jujur: Membangun aplikasi web yang kencang itu satu hal, tapi membuat Google bot berhenti 'ghosting' situs kamu itu urusan lain. SvelteKit secara default memang sudah punya pondasi SEO yang solid, tapi kalau kamu cuma deploy apa adanya, jangan kaget kalau traffic kamu sepi kayak grup WhatsApp keluarga pas jam kerja.

Dengan rilisnya Svelte 5, kita punya cara baru yang lebih elegant untuk mengelola state menggunakan Runes. Yuk, kita bongkar rahasia SEO SvelteKit versi 2024-2025.

---

1. Metadata Dinamis dengan Runes ($state & $derived)

Zaman dulu kita pakai export let data. Sekarang, kita masuk ke era Svelte 5 Runes. Untuk SEO yang mantap, judul dan deskripsi halaman harus dinamis.

Di Svelte 5, kita menggunakan $props() untuk menerima data dari load function dan $derived() untuk memanipulasi metadata tersebut secara reaktif.

<script>
  let { data } = $props();

  // Menggunakan $derived agar SEO title otomatis update jika data berubah
  let seoTitle = $derived(`${data.post?.title || 'Home'} | Svelte Masterclass`);
  let description = $derived(data.post?.excerpt || 'Belajar SvelteKit dengan cara yang asik.');
</script>

<svelte:head>
  <title>{seoTitle}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={seoTitle} />
</svelte:head>

Pro Tip: Google sangat benci konten duplikat. Pastikan setiap halaman punya <title> unik. Kalau semua halaman judulnya "Home - My App", Google bakal ngira kamu lagi jualan template yang belum jadi.

---

2. Server-Side Rendering (SSR): Harga Mati!

SEO tanpa SSR itu ibarat beli kopi tapi cuma dikasih ampasnya. SvelteKit secara default menyalakan SSR, tapi jangan sampai kamu sengaja mematikannya (ssr = false) hanya karena malas ngurusin browser-only libraries.

Kenapa SSR Penting?

• Bot Ready: Googlebot nggak perlu nunggu JavaScript kamu selesai di-render untuk melihat konten.
• LCP (Largest Contentful Paint): Skor Core Web Vitals kamu bakal hijau royo-royo.

Meme Corner:
Next.js User: "Aduh, konfigurasi SSR-ku ribet banget."
SvelteKit User: "Wait, kalian harus konfigurasi manual?"
(Sambil santai minum boba).

---

3. Prerendering: Turbo Boost untuk Page Load

Untuk halaman yang jarang berubah (seperti Landing Page atau Blog Post), gunakan Prerendering. Ini akan mengubah halaman SvelteKit kamu menjadi file HTML statis saat proses build.

Cukup tambahkan ini di +page.js atau +layout.js:

export const prerender = true;
export const trailingSlash = 'always';

---

4. Structured Data (JSON-LD)

Ingin bintang-bintang muncul di hasil pencarian Google? Kamu butuh JSON-LD. SvelteKit mempermudah ini karena kita bisa memasukkannya langsung ke dalam komponen.

<script>
  let { data } = $props();
  
  const schemaData = $derived({
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": data.post.title,
    "author": { "@type": "Person", "name": "Tech Blogger" }
  });
</script>

<svelte:head>
  {@html `<script type="application/ld+json">${JSON.stringify(schemaData)}<\/script>`}
</svelte:head>

---

5. Optimasi Gambar dengan `svelte-optimized-image` (atau bawaan Cloud)

Jangan pernah upload gambar 5MB hasil jepretan DSLR langsung ke website. Gunakan format WebP atau AVIF. SvelteKit sangat fleksibel, tapi pastikan kamu selalu menyertakan atribut alt yang deskriptif.

Developer Struggle: Menghabiskan 3 jam untuk optimasi SEO, tapi lupa kasih tag alt di gambar hero. Hasilnya? Aksesibilitas skornya merah membara.

---

Kesimpulan

SvelteKit 2 dan Svelte 5 memberikan semua alat yang kamu butuhkan untuk mendominasi Google. Dengan Runes, pengelolaan metadata jadi lebih bersih, dan dengan fitur SSR bawaan, kamu sudah satu langkah di depan pengguna framework sebelah yang masih pusing sama hydration error.

Siap bikin project SvelteKit kamu viral? Gaspol!