SEO Astro: cara membuat situs Astro peringkat di Google dan dikutip oleh AI

Kuis singkat

Apakah SEO cocok untuk Anda, dan bagaimana memulainya?

Pertanyaan 1 dari 425%

Apakah orang mencari apa yang Anda jual di Google?

Ya, saya rasa begituTidak, ini hal baru atau sangat khususSaya tidak tahu

SEO Astro adalah pekerjaan mengubah HTML bersih itu menjadi halaman yang meraih peringkat. Panduan Google tentang dasar-dasar SEO JavaScript menjelaskan bahwa situs JavaScript diproses dalam tiga fase (crawling, rendering, pengindeksan) dan menyatakan bahwa rendering sisi server atau pra-rendering tetap merupakan ide bagus, karena tidak semua bot bisa menjalankan JavaScript. Astro sudah berangkat dari posisi itu secara default. Panduan ini membahas sisanya, satu per satu pengaturan, dan setiap perilaku sudah dicek di dokumentasi resmi Astro. Sebagai catatan, situs sorank.com yang sedang Anda baca berjalan di Astro.

Apakah Astro bagus untuk SEO?

Ya, dari sisi teknis. Astro merender komponen menjadi HTML saat build dan membuang JavaScript yang biasanya dikirim framework seperti React atau Vue ke browser. Dengan begitu Anda terhindar dari masalah klasik yang dijelaskan dalam panduan kami tentang SEO JavaScript: cangkang HTML kosong, konten yang baru muncul setelah rendering, tautan yang bukan tag anchor sungguhan. Anda juga terhindar dari jebakan routing aplikasi satu halaman, karena setiap rute Astro adalah URL nyata dengan file HTML sendiri.

Hal yang tidak dilakukan Astro sama pentingnya. Tidak ada plugin SEO bawaan, tidak ada meta deskripsi otomatis, tidak ada tag canonical otomatis, dan tidak ada data terstruktur. Tabel berikut memisahkan apa yang Anda dapat gratis dari apa yang harus Anda bangun.

Rendering statis atau server: mode mana yang lebih baik untuk SEO?

Dokumentasi Astro tentang rendering sesuai permintaan sangat jelas: secara default, halaman, rute, dan endpoint API dirender lebih dulu saat build sebagai halaman statis. Untuk SEO, output statis adalah pilihan default paling aman: setiap URL adalah file HTML jadi yang disajikan dari CDN, cepat, dan sama untuk setiap pengunjung dan setiap bot.

Rendering sesuai permintaan (di server) memerlukan adapter untuk hosting Anda (misalnya Node, Netlify, Vercel, atau Cloudflare). Setelah itu Anda mengeluarkan satu rute dari pra-rendering dengan export const prerender = false, atau mengubah seluruh proyek dengan output: 'server' lalu mengaktifkan kembali halaman statis satu per satu. Kedua mode menghasilkan HTML lengkap, jadi Google melihat hal yang sama. Perbedaannya ada di tempat lain:

• Kecepatan: file statis langsung disajikan; halaman yang dirender di server bergantung pada waktu respons server, yang memengaruhi Largest Contentful Paint.
• Kesegaran data: rendering server cocok untuk halaman yang terus berubah (stok, harga, hasil pencarian), di mana build ulang seluruh situs terlalu lambat.
• Tools: beberapa integrasi, seperti sitemap, tidak bisa melihat rute dinamis di server (lihat di bawah).

Aturan praktisnya: biarkan halaman pemasaran, artikel blog, dan dokumentasi tetap statis, dan render sesuai permintaan hanya rute yang membutuhkan data langsung. Dokumentasi Astro memberi saran yang sama: pertahankan mode statis default sampai sebagian besar halaman membutuhkan rendering sesuai permintaan.

Bagaimana cara mengatur meta tag dan URL canonical di Astro?

Buat satu komponen SEO (sering dinamai BaseHead atau Seo) dan sertakan di head setiap layout. Komponen ini menerima judul, deskripsi, gambar opsional, dan penanda noindex opsional, lalu menghasilkan:

1. tag title yang unik per halaman, dengan kata kunci utama di dekat awal;
2. meta deskripsi yang ditulis manual untuk setiap halaman (inilah cuplikan Anda di hasil pencarian);
3. tag canonical berupa URL absolut yang disusun dari Astro.url.pathname dan nilai site di konfigurasi;
4. tag Open Graph dan media sosial (judul, deskripsi, gambar, URL) untuk pratinjau tautan;
5. tag meta robots saat sebuah halaman harus tetap di luar indeks.

Atur dulu opsi site di astro.config.mjs: canonical, sitemap, dan tag sosial bergantung padanya. Lalu pilih kebijakan trailingSlash ('always' atau 'never') dan patuhi, agar /blog/artikel dan /blog/artikel/ tidak pernah bersaing sebagai dua versi halaman yang sama. Hapus query string dari canonical supaya parameter pelacakan tidak memunculkan duplikat.

Bagaimana cara membuat sitemap dan robots.txt dengan Astro?

Gunakan integrasi resmi yang dijelaskan di halaman @astrojs/sitemap. Perintah npx astro add sitemap memasangnya dan menambahkannya ke konfigurasi. Integrasi ini mewajibkan opsi site dan, saat build, menulis file sitemap-index.xml yang menunjuk ke file bernomor (sitemap-0.xml, lalu lebih banyak di situs besar). Setiap file memuat hingga 45.000 entri secara default, diatur lewat opsi entryLimit. Jika format ini baru bagi Anda, entri glosarium kami tentang sitemap XML menjelaskan apa yang dilakukan Google dengannya.

Tiga pengaturan penting untuk SEO:

• filter: fungsi yang menerima URL setiap halaman; kembalikan false untuk halaman terima kasih, pencarian internal, draf, atau apa pun yang ber-noindex, agar sitemap hanya berisi URL yang dapat diindeks.
• i18n: memetakan folder bahasa ke kode bahasa dan menambahkan alternatif hreflang ke setiap entri.
• customPages: menambahkan URL yang tidak bisa ditemukan integrasi dengan sendirinya.

Untuk robots.txt, file statis di folder public sudah cukup bagi sebagian besar situs. Jika isinya berbeda antara staging dan produksi, lebih baik buat dari sebuah endpoint (src/pages/robots.txt.ts). Dalam kedua kasus, tambahkan baris Sitemap yang menunjuk ke sitemap-index.xml, dan uji hasilnya dengan pemeriksa robots.txt sebelum peluncuran. Teknik endpoint yang sama menghasilkan file llms.txt; panduan kami tentang cara memasang file llms.txt menjelaskan isinya.

Bagaimana menangani hreflang dan situs multibahasa di Astro?

Routing i18n bawaan Astro menangani sisi URL. Di konfigurasi, Anda mendeklarasikan defaultLocale dan daftar locales, lalu memilih apakah bahasa default juga mendapat prefiks (prefixDefaultLocale). Fungsi bantu seperti getRelativeLocaleUrl menyusun tautan terlokalisasi, dan Astro.currentLocale memberi tahu setiap halaman bahasa yang sedang dipakai.

Panduan routing tidak membahas tag hreflang di head, jadi rencanakan untuk menulisnya sendiri di komponen SEO: untuk setiap halaman, satu tautan alternate per versi bahasa ditambah x-default, semuanya berupa URL absolut, dan setiap versi wajib mencantumkan semua versi lainnya (tautan balik). Menghasilkannya dari daftar bahasa yang sama dengan routing mencegah kesalahan paling umum, yaitu alternatif yang menunjuk ke halaman yang tidak ada. Untuk mengecek logikanya di beberapa URL, generator hreflang kami menghasilkan set tag lengkap untuk satu halaman. Setelah itu aktifkan opsi i18n sitemap sebagai sinyal kedua.

Bagaimana gambar dan island memengaruhi kecepatan dan Core Web Vitals?

Kecepatan adalah bidang tempat Astro paling unggul, dan itu terlihat pada Core Web Vitals. Panduan gambar Astro menjelaskan komponen Image dari astro:assets: komponen ini mengoptimalkan gambar lokal, mengonversi formatnya, menambahkan lazy loading dan decoding asinkron, serta menyimpulkan dimensi gambar untuk menghindari Cumulative Layout Shift. Atribut alt wajib di komponen ini, sehingga aturan dasar SEO gambar otomatis ditegakkan. Komponen Picture melangkah lebih jauh dengan menyajikan AVIF atau WebP beserta format cadangan.

Dua kebiasaan melengkapinya. Simpan gambar yang perlu dioptimalkan di src (file di public disajikan apa adanya tanpa diproses). Dan jangan lazy-load gambar utama di bagian atas halaman: muat langsung agar tidak memperlambat Largest Contentful Paint.

Arsitektur island menjaga JavaScript tetap terkendali. Sebuah komponen tetap HTML statis sampai Anda menambahkan directive klien: client:load menghidrasinya segera, client:idle saat browser senggang, client:visible hanya ketika masuk ke area tampilan. Memakai client:load hanya untuk elemen yang harus langsung merespons (menu, keranjang) adalah cara paling sederhana melindungi Interaction to Next Paint. Server island (server:defer) memuat blok yang dipersonalisasi setelah halaman dari cache, tanpa memperlambat konten utama.

Bagaimana cara menambahkan data terstruktur ke situs Astro?

Astro tidak punya fitur schema, sehingga Anda memegang kendali penuh. Buat objek JavaScript untuk setiap jenis halaman (Article, Product, Organization, BreadcrumbList, FAQPage) dan tampilkan di tag script bertipe application/ld+json, dengan directive set:html dan JSON.stringify agar JSON tidak di-escape. Isi dengan data frontmatter atau koleksi yang sama dengan halaman yang terlihat: dengan begitu markup selalu sesuai dengan apa yang dilihat pengguna, sebuah syarat dalam pedoman Google tentang markup schema.

Untuk menyusun JSON bagi jenis halaman baru, generator schema gratis kami memberi blok awal yang valid untuk Anda ubah menjadi template. Validasi sampel halaman hasil build dengan Uji Hasil Kaya dari Google setiap kali template berubah.

Bagaimana menangani redirect saat migrasi ke Astro?

Migrasi dari WordPress atau Next.js adalah momen paling berisiko bagi situs Astro. Pertahankan setiap URL yang punya trafik atau backlink, dan petakan sisanya satu per satu ke padanan terdekat dengan redirect permanen, seperti dijelaskan dalam panduan kami tentang redirect SEO.

Konfigurasi Astro menerima objek redirects yang memetakan path lama ke path baru. Dengan adapter, semuanya menjadi redirect HTTP sungguhan. Pada build yang sepenuhnya statis, Astro justru menulis halaman HTML dengan meta refresh, yang diikuti Google tetapi dianggap sinyal lebih lemah daripada 301 di sisi server. Untuk situs statis, deklarasikan redirect dalam format hosting Anda (file _redirects di Netlify atau Cloudflare Pages, file vercel.json di Vercel) agar crawler menerima 301 sungguhan.

Bagaimana Astro membantu SEO dan GEO?

Dikutip oleh ChatGPT, Perplexity, atau Gemini dimulai dari mudah dibaca. Banyak crawler AI mengambil HTML mentah tanpa menjalankan JavaScript, jadi situs yang menyerahkan seluruh teksnya di respons pertama, seperti Astro secara default, menghapus hambatan yang masih dimiliki situs yang dirender di klien. Subjudul yang jelas, paragraf yang langsung menjawab, data terstruktur, dan file llms.txt kemudian membuat setiap halaman lebih mudah dikutip.

Setelah peluncuran, ukur alih-alih menebak. Dasbor GEO / SEO Sorank menyatukan data Search Console dan kunjungan dari asisten AI, sehingga Anda bisa melihat apakah situs baru mempertahankan posisinya.

Kualitas teknis baru membuahkan hasil jika ada konten untuk diperingkatkan. Generator Artikel Blog Sorank menulis dan menerbitkan artikel yang dioptimalkan untuk Google dan asisten AI, serta terhubung lewat webhook ke situs kustom seperti proyek Astro.

Astro memberi Anda HTML yang cepat dan bisa di-crawl secara default; peringkat tetap bergantung pada tag head, sitemap, hreflang, data terstruktur, dan redirect yang Anda tambahkan. Siapkan dulu komponen SEO bersama dan sitemap, lalu periksa tabel di atas satu per satu sebelum peluncuran.