Panduan Astro SEO

TL;DR — Astro adalah sebuah great pilihan untuk SEO. oleh default ini membangun Anda halaman ke plain HTML files ahead dari time, so ketika Google (atau apa pun bot) menampilkan up, Anda konten adalah sudah di sana — Tidak menunggu untuk JavaScript untuk jalankan. ini adalah juga very fast. satu hal untuk know: Astro memberikan Anda bersih HTML, tetapi ini melakukan tidak secara otomatis tambahkan Anda halaman judul, sitemap, atau tag canonical. Anda set itu up yourself (ini adalah easy).

Apa arti “Astro SEO”

Astro adalah sebuah web kerangka kerja untuk membangun situs web. -nya big idea adalah “lebih sedikit JavaScript.” (terjemahan) “lebih sedikit JavaScript.” Di mana kerangka kerja like React atau Berikutnya.js sering bangun halaman di Anda browser menggunakan JavaScript, Astro membangun Anda halaman ke plain HTML files di bangun time dan ships hampir Tidak JavaScript unless sebuah bagian dari halaman sebenarnya perlu ini. Evidence for this claim Astro prerenders pages as static HTML by default and only sends client JavaScript for explicitly hydrated components. Scope: Astro default static output and islands architecture. Confidence: high · Verified: 2026-07-14 Astro: Why Astro

itu single perbedaan adalah mengapa Astro adalah so friendly untuk mesin pencari. Ketika sebuah penelusuran mesin melakukan crawl sebuah halaman, ini ingin untuk baca Anda konten. dengan sebuah JavaScript-berat situs, konten sometimes tidak di halaman namun — bot memiliki untuk jalankan JavaScript pertama, dan itu dapat menjadi delayed. dengan Astro, konten adalah sudah di HTML moment halaman memuat. ada tidak ada apa pun untuk tunggu untuk.

I jalankan my own situs, patrickstox.com, pada Astro — so ini tidak theory untuk me. ini adalah stack I sebenarnya bangun pada.

Mengapa Astro adalah baik untuk SEO

• konten adalah di HTML right away. Tidak rendering delay, Tidak missing konten.
• ini adalah fast. Astro situs adalah lightweight dan tend untuk score very well pada Google’s halaman-experience metrics (Core Web Vitals).
• setiap halaman adalah -nya own nyata URL. Tidak fancy single-halaman-app routing itu dapat confuse crawler.
• JavaScript hanya memuat di mana ini adalah needed. sebuah photo gallery atau sebuah penelusuran box dapat menjadi interactive tanpa slowing down rest dari halaman.

Apa Astro melakukan Tidak melakukan untuk Anda

ini trips orang up. “Astro adalah SEO-optimized” (terjemahan) “Astro adalah SEO-dioptimalkan” adalah hanya half benar. Astro memberikan Anda sebuah bersih foundation, tetapi ini melakukan tidak secara otomatis:

• Tulis Anda halaman judul dan deskripsi meta.
• Generate sebuah sitemap (Anda tambahkan sebuah free official plugin untuk itu). Evidence for this claim Astro's official sitemap integration generates sitemap files from statically generated routes. Scope: Astro @astrojs/sitemap integration. Confidence: high · Verified: 2026-07-14 Astro: Sitemap integration
• tambahkan tag canonical (yang tell Google “official” (terjemahan) “official” versi dari sebuah halaman).
• tambahkan data terstruktur ( code itu powers rich hasil).
• buat robots.txt file.

None dari ini adalah hard — ini adalah hanya pada Anda untuk set ini up. Think dari Astro sebagai sebuah great kitchen: appliances adalah excellent, tetapi Anda masih memiliki untuk cook.

sederhana starter checklist

• tambahkan sebuah sitemap dengan official @astrojs/sitemap plugin.
• Set sebuah title, description, dan canonical URL pada setiap halaman (biasanya dari satu shared layout file).
• gunakan Astro’s dibangun-di <Image /> component untuk photos — ini membuat them muat fast dan mencegah halaman dari jumping sekitar.
• Put sebuah robots.txt file di Anda public/ folder.

ingin deep versi — server Islands, View Transitions, static vs server rendering, dan tepat mistakes untuk hindari? Switch untuk Advanced tab. untuk bigger picture dari bagaimana mesin pencari tangani JavaScript, see JavaScript SEO.

TL;DR — Astro adalah architecturally well siapkan untuk SEO: halaman dan endpoints adalah prerendered untuk static HTML oleh default, so ada Tidak render-queue wave untuk tunggu pada untuk itu konten — tetapi itu’s sebuah default, tidak sebuah universal jaminan, dan static/server HTML tidak oleh itself prove crawlability, pengindeksan, rankings, atau Core Web Vitals untuk Anda production URLs. Islands architecture hydrates hanya components Anda mark dengan sebuah client:* directive — semuanya else ships HTML tanpa -nya own hydration JS, though halaman scripts, lainnya islands, dan router enhancements dapat masih tambahkan JavaScript elsewhere pada halaman. Astro tidak auto-generate meta tags, canonicals, sitemaps, atau data terstruktur — wire itu up explicitly, ideally validated oleh konten Collections + Zod. server Islands (yang memerlukan sebuah adapter) sajikan static shell dengan fallback konten di awal document dan fetch deferred konten independently afterward — verify apa sebuah diberikan crawler sebenarnya retrieves alih-alih assuming. View Transitions gunakan history.pushState dan adalah SEO-safe; Google melakukan crawl underlying MPA halaman biasanya. I jalankan patrickstox.com pada Astro, dan fitur di bawah adalah ones I sebenarnya gunakan — validated terhadap deployed situs, tidak hanya local dev.

Mengapa Astro sidesteps JavaScript rendering masalah entirely

Seluruh alasan JavaScript SEO sulit adalah gelombang kedua. Google mengambil HTML mentah Anda terlebih dahulu, lalu mengantrekan halaman untuk dirender di Chromium tanpa kepala — dan antrean itulah risikonya. Dokumentasi Google menjelaskannya: “Googlebot queues all pages with a 200 HTTP status code for rendering unless a robots meta tag tells Google not to index the page. The page may stay on this queue for a few seconds, but it can take longer than that.” (terjemahan) “Googlebot mengantrekan semua halaman dengan kode status HTTP 200 untuk dirender, kecuali tag meta robots meminta Google untuk tidak mengindeks halaman. Halaman itu mungkin berada dalam antrean selama beberapa detik, tetapi bisa lebih lama.” Pada SPA yang dirender di sisi klien, konten Anda belum ada sampai gelombang rendering itu selesai.

Astro’s default output mode adalah static: halaman dan endpoints adalah prerendered untuk sebuah menyelesaikan HTML file di bangun time. So untuk sebuah route berjalan di itu default, mentah HTML adalah dirender halaman. Evidence for this claim Astro uses static output and prerenders routes at build time by default. Scope: Astro default output mode; routes can opt out of prerendering. Confidence: high · Verified: 2026-07-14 Astro: On-demand rendering ada Tidak kedua wave untuk tunggu pada untuk itu route, karena ada tidak ada apa pun left untuk execute. Googlebot sees penuh konten pada pertama fetch. sebagai Joost de Valk (Yoast’s founder) puts ini, “Dari an SEO perspective, static HTML pada a CDN adalah a better starting point daripada paling CMSes akan ever memberikan Anda.” (terjemahan) “dari sebuah SEO perspective, static HTML pada sebuah CDN adalah sebuah better starting poin daripada sebagian besar CMSes akan ever memberikan Anda.”

itu’s default, though — tidak sebuah universal property dari setiap route. Set output: 'server' dan default flips untuk pada-demand rendering (lebih pada itu di bawah); bahkan di sebuah static-default project, sebuah adapter lets sebuah individual route opt out dengan export const prerender = false. None dari ini adalah guaranteed oleh architecture alone: static atau server HTML, islands, dan adapters jangan oleh themselves jaminan crawlability, pengindeksan, rankings, atau Core Web Vitals — itu bergantung pada deployed route dan spesifik crawler, so verify them alih-alih assuming kerangka kerja menangani ini.

Ini juga membantu crawler yang tidak dapat menjalankan rendering sama sekali. Google menyatakan bahwa “not all bots can run JavaScript” (terjemahan) “tidak semua bot dapat menjalankan JavaScript” — dan itulah kenyataan pada 2026 bagi sebagian besar crawler AI dan banyak alat pihak ketiga. Keluaran Astro yang mengutamakan HTML dapat dibaca oleh semuanya ketika benar-benar diprerender, bukan hanya oleh Googlebot. (Ini adalah poin yang sama poin yang saya sampaikan di SEO untuk sebuah CMS headless: rendering mode adalah product.)

Islands architecture: JS hanya di mana Anda tanyakan untuk ini

Astro renders Anda components untuk HTML dan, di -nya kata, ships “sekadar HTML & CSS, stripping out all client-side JavaScript secara otomatis.” (terjemahan) “hanya HTML & CSS, stripping out semua client-side JavaScript secara otomatis.” Interactivity adalah opt-di. Anda mark sebuah component dengan sebuah client:* directive — client:load, client:idle, atau client:visible — dan hanya itu island hydrates dengan JavaScript. Semuanya else tetap static HTML. Evidence for this claim Astro client directives selectively hydrate interactive islands while other components remain static HTML. Scope: Astro islands and client directives. Confidence: high · Verified: 2026-07-14 Astro: Islands

untuk SEO ini adalah close untuk ideal. konten Googlebot perlu untuk indeks adalah plain HTML, dan Anda interactive widgets jangan drag ini down. client:visible adalah terutama berguna: sebuah di bawah—fold component tidak bahkan begin hydrating until ini scrolls ke view, so ini tidak pernah blocks Anda LCP. concept muncul dari Jason Miller (creator dari Preact), siapa described “rendering HTML halaman pada itu server, dan inject[ing] placeholders atau slots sekitar highly dynamic regions” (terjemahan) “rendering HTML halaman pada server, dan inject[ing] placeholders atau slots sekitar highly dynamic regions” untuk selective hydration.

Dua nuances worth menjadi precise tentang, karena pesaing coverage tends untuk blur them:

• client:only adalah sebuah berbeda animal. Unlike client:load/client:idle/client:visible, sebuah client:only component skips server rendering entirely — ini produces Tidak HTML pada server di semua. Apa pun dapat diindeks placed hanya di dalam sebuah client:only component tidak di document Googlebot fetches; ini hanya ada setelah browser hydrates ini. jangan put utama konten di sana.
• ini adalah selective hydration, tidak resumability. Astro re-berjalan setiap island’s client code dari scratch di browser; ini tidak resume execution state itu adalah serialized pada server cara sebuah resumability model (Qwik’s, misalnya) melakukan. dua mendapatkan conflated di writeups — mereka’re tidak yang sama mechanism.

dan sebuah non-hydrated component tidak seluruh JavaScript picture pada sebuah halaman. “Zero JS” (terjemahan) “Zero JS” mendeskripsikan satu component tanpa sebuah client:* directive — Astro dapat masih ship halaman-tingkat <script> tags, View Transitions router, dan lainnya islands elsewhere pada yang sama halaman. Deskripsikan apa ships per component/route, tidak sebagai sebuah blanket claim tentang halaman.

Apa Astro melakukan Tidak melakukan secara otomatis

Astro generates bersih semantic HTML — dan tidak ada apa pun else, SEO-wise. tidak ada metadata, Tidak canonical, Tidak sitemap, Tidak data terstruktur out dari box. myth itu “Astro adalah secara otomatis SEO-optimized” (terjemahan) “Astro adalah secara otomatis SEO-dioptimalkan” adalah persis itu. Anda own:

• Meta tags (judul, deskripsi, Open Graph, Twitter)
• Canonical URLs
• ** sitemap** (melalui official integration)
• data terstruktur / JSON-LD
• robots.txt

Astro adalah best foundation I’ve digunakan, tetapi ini adalah sebuah foundation, tidak sebuah finished house.

sitemap: @astrojs/sitemap

Install ini dengan npx astro add sitemap. ini melakukan crawl Anda statically-generated routes dan emits sebuah sitemap-index.xml plus chunked sitemap-0.xml files di bangun time. Dua hal bite orang:

• Anda harus set site: di astro.config.mjs. Tanpa ini, integration silently generates tidak ada apa pun. ini adalah single sebagian besar umum “di mana’s my sitemap?” (terjemahan) “di mana’s my sitemap?” penyebab.
• Anda harus tambahkan sitemap line untuk robots.txt yourself. Astro tidak melakukan ini.

untuk control, filter() excludes routes (preview/draft halaman — persis apa I gunakan ini untuk pada ini situs), serialize() lets Anda set lastmod/changefreq/priority, dan i18n option emits hreflang entries di sitemap. ini adalah apa saat ini @astrojs/sitemap docs specify — konfirmasi terhadap Anda installed versi jika Anda’re pada sebuah older rilis, integration perilaku memiliki changed di seluruh major versi sebelum.

** cakupan itu trips orang up:** integration’s penemuan targets statically generated routes. jika apa pun dari Anda URLs hanya exist di runtime — server-dirender (output: 'server') routes, atau routes generated pada demand alih-alih di bangun time — jangan assume mereka’re di sitemap. tambahkan them explicitly dengan customPages, lalu sebenarnya open sitemap-index.xml setelah sebuah bangun untuk konfirmasi mereka’re di sana. jangan take “itu integration menangani it” (terjemahan) “ integration menangani ini” pada faith untuk apa pun itu tidak sebuah bangun-time static route.

Meta tags dan canonicals: BaseLayout pattern

Astro memiliki Tidak special <Head> component — Anda control <head> secara langsung di .astro files. standard pattern (dan apa I melakukan) adalah sebuah single BaseLayout.astro itu takes title, description, dan canonicalURL sebagai props dan menulis head. atur canonical explicitly pada setiap halaman dan pertahankan ini consistent dengan og:url. Anda tidak perlu sebuah library, tetapi community astro-seo package (npm) adalah sebuah convenient satu-component wrapper untuk judul/deskripsi/OG/Twitter/canonical jika Anda ingin ini.

konten Collections sebagai sebuah SEO safety net

ini adalah Astro’s underrated SEO fitur. konten Collections adalah sebuah jenis-safe konten layer untuk Anda Markdown/MDX/JSON, dengan Zod schema validation. itu berarti Anda dapat membuat title dan description diperlukan fields — dan jika sebuah halaman adalah missing satu, bangun fails. Anda dapat’t accidentally ship sebuah halaman dengan Tidak judul. kueri functions (getCollection(), getEntry()) generate static halaman di bangun time, so output adalah plain HTML ketika deployed. dan karena MDX mempertahankan mentah markdown sebagai sumber kebenaran, itu files adalah juga bersih sumber konten untuk AI crawler dan llms.txt-style patterns. ini very situs adalah dibangun pada konten Collections dengan Zod-validated frontmatter.

astro:assets: images selesai right (dengan satu trap)

<Image /> component secara otomatis converts untuk WebP, infers dimensions untuk “avoid Cumulative Layout Shift (CLS),” (terjemahan) “hindari Cumulative Layout Shift (CLS),” sets loading="lazy" oleh default, dan memerlukan alt — sebuah missing alt adalah sebuah compile error. <Picture /> extends ini dengan AVIF/WebP/fallback <source> elements.

trap: automatic loading="lazy" adalah wrong untuk Anda LCP image (biasanya hero). Lazy-memuat Anda sebagian besar penting image delays ini. untuk di atas—fold images, override dengan loading="eager" dan fetchpriority="high". Remote images perlu jelas width dan height.

server Islands: apa crawler sebenarnya see

server Islands (Astro 4.12+) adalah fitur sebagian besar pesaing guides mendapatkan wrong. dengan server:defer, sebuah component renders pada server independently dari main halaman. static shell adalah disajikan immediately; per Astro’s docs, “Anda halaman akan menjadi dirender immediately dengan any specified fallback konten sebagai a placeholder. Lalu, itu component’s own contents adalah fetched pada itu client dan displayed ketika tersedia.” (terjemahan) “Anda halaman akan menjadi dirender immediately dengan apa pun specified fallback konten sebagai sebuah placeholder. lalu, component’s own contents adalah fetched pada client dan displayed ketika tersedia.”

Dua hal untuk menjadi tepat tentang. pertama, server Islands memerlukan sebuah adapter — mereka’re sebuah pada-demand fitur, tidak sesuatu sebuah purely static bangun produces pada -nya own. kedua, sequence adalah: awal document ships dengan whatever Anda configured sebagai fallback konten, dan island’s nyata konten adalah sebuah terpisah, independent permintaan fetched setelah halaman memuat, di atas -nya own endpoint. itu’s sebuah hard floor pada apa pertama document berisi — I tidak akan generalize past itu tentang apa setiap spesifik crawler melakukan berikutnya tanpa testing Anda own deployed URLs secara langsung.

SEO consequence adalah concrete: ** static HTML sebuah crawler membaca pada itu pertama fetch berisi Anda fallback konten, tidak deferred island konten.** itu’s perfect untuk apa server Islands adalah untuk — personalized, session-spesifik stuff (login state, cart count, recommendations) itu tidak seharusnya menjadi cached atau terindeks anyway. ini adalah wrong untuk utama dapat diindeks konten. Put apa pun itu perlu untuk peringkat di main Astro template, dan let server Islands tangani dynamic bits sekitar ini.

Output modes: static vs server, dan per-route override

Astro’s default output mode adalah static — halaman dan endpoints prerender untuk HTML di bangun time. Set output: 'server' di astro.config.mjs dan default flips untuk pada-demand rendering: halaman render per permintaan (dengan sebuah adapter), berguna untuk auth, nyata-time data, atau personalization beyond apa server Islands cover. Either cara, Anda dapat override default per route: di sebuah static-default project, export const prerender = false opts sebuah route ke pada-demand rendering; di sebuah server-default project, export const prerender = true opts sebuah route back ke bangun-time prerendering. So “my site adalah static” (terjemahan) “my situs adalah static” atau “my site is SSR” (terjemahan) “my situs adalah SSR” adalah rarely benar untuk setiap route — periksa per-route setting, tidak hanya top-tingkat config.

dari sebuah pure SEO standpoint, prerendered dan pada-demand HTML adalah equivalent — keduanya deliver menyelesaikan HTML untuk sebuah crawler’s pertama permintaan, setelah Anda’ve sebenarnya confirmed route mengembalikan sebuah 200 dengan penuh markup. pada-demand routes dapat stream mereka HTML, dan slow data atau network conditions dapat delay kemudian chunks, so sebuah streamed respons tidak automatic proof itu setiap piece dari konten arrived — periksa ini, jangan assume ini. nyata perbedaan antara dua modes adalah operational: prerendered konten adalah fixed until berikutnya bangun (atau sebuah secara terpisah configured runtime refresh) dan menyajikan straight dari CDN edge; pada-demand konten adalah selalu saat ini tetapi bergantung pada Anda adapter dan runtime menjadi healthy di production. jangan treat ini sebagai sebuah SEO decision — choose pada data freshness dan ops, lalu validate deployed routes, statuses, redirects, dan respons headers alih-alih extrapolating dari apa worked di local dev.

View Transitions: SEO-safe, despite SPA feel

Astro’s <ClientRouter /> (formerly <ViewTransitions />) memberikan SPA-like soft navigation menggunakan browser’s View Transitions API dan History API. key fact: ini navigates dengan history.pushState, yang adalah persis apa Google recommends untuk client-side navigation — Google warns itu fragment-based (#hash) URLs adalah sesuatu ini “can’t reliably resolve.” (terjemahan) “dapat’t reliably resolve.” Crucially, View Transitions adalah sebuah browser-side enhancement. Ketika Googlebot melakukan crawl, ini permintaan setiap URL dan mendapatkan sebuah wajar, menyelesaikan HTML halaman — MPA underneath adalah untouched. transitions hanya memengaruhi apa sebuah human sees di browser.

So Tidak, View Transitions melakukan tidak turn Anda Astro situs ke sebuah SPA, dan mereka jangan break SEO. sebuah worth-noting kesenjangan: Astro’s View Transitions docs memiliki Tidak SEO bagian, yang adalah probably mengapa “it breaks SEO” (terjemahan) “ini breaks SEO” myth persists. untuk verify pada Anda own situs, fetch sebuah sedikit URLs secara langsung dan konfirmasi setiap mengembalikan penuh HTML — jangan take ini pada faith, periksa Anda own deployment.

umum Astro SEO mistakes

1. Assuming Astro menangani SEO untuk Anda. ini menangani HTML. Meta, canonicals, sitemap, schema adalah yours.
2. Forgetting site: di config — Anda sitemap silently tidak generate.
3. Tidak menambahkan sitemap untuk robots.txt — Astro tidak akan melakukan ini.
4. Lazy-memuat LCP image — override hero dengan eager + fetchpriority.
5. Putting dapat diindeks konten di sebuah server Island — crawler see fallback, tidak konten, dan server Islands memerlukan sebuah adapter di pertama place.
6. Chasing sebuah perfect Lighthouse score dan stopping di sana. Speed adalah sebuah sinyal peringkat, tidak ** sinyal peringkat. sebuah fast empty halaman tidak peringkat — konten, tautan, dan E-E-sebuah-T masih melakukan berat lifting.
7. Putting dapat diindeks konten hanya di dalam sebuah client:only component. Unlike lainnya client:* directives, client:only skips server rendering entirely — ada Tidak HTML untuk itu component until browser hydrates ini.
8. Treating “Astro is static/fast” (terjemahan) “Astro adalah static/fast” sebagai sebuah outcome jaminan. Static atau pada-demand HTML, islands, dan adapters adalah mechanisms — mereka jangan oleh themselves jaminan crawlability, pengindeksan, rankings, atau Core Web Vitals. Validate deployed route, tidak architecture diagram.

Di mana ini fits di cluster

Astro adalah satu spesifik, unusually SEO-friendly jawaban untuk pertanyaan JavaScript SEO raises tentang rendering, dan sebuah popular frontend untuk CMS headless setups. performa side connects secara langsung untuk Core Web Vitals di web-performa cluster, dan “is my content actually in the HTML?” (terjemahan) “adalah my konten sebenarnya di HTML?” testing discipline adalah yang sama satu dari crawling dan pengindeksan clusters.

Astro SEO anti-patterns

Concrete mistakes I sebenarnya see pada Astro situs — tidak hypothetical ones. setiap satu adalah prevention, tidak diagnosis: catch ini sebelum ini ships.

Treating Astro sebagai “SEO-optimized” (terjemahan) “SEO-dioptimalkan” out dari box

Astro memberikan Anda fast, bersih static HTML, dan itu’s genuinely sebuah big head mulai — tetapi ini adalah tidak yang sama sebagai meta tags, canonicals, sebuah sitemap, atau data terstruktur. Mengapa ini adalah wrong: tim ship halaman dengan Tidak <title> variation, Tidak canonical, dan Tidak sitemap karena “Astro handles SEO,” (terjemahan) “Astro menangani SEO,” lalu wonder mengapa tidak ada apa pun’s terindeks sebagai yang diharapkan. Apa untuk melakukan alih-alih: wire up BaseLayout.astro props untuk judul/deskripsi/canonical pada day satu, tambahkan @astrojs/sitemap, dan treat itu sebagai diperlukan bangun langkah, tidak defaults.

Forgetting site: di astro.config.mjs

ini adalah single sebagian besar umum “why is my sitemap empty” (terjemahan) “mengapa adalah my sitemap empty” report. Mengapa ini adalah wrong: @astrojs/sitemap perlu sebuah absolute situs URL untuk bangun absolute <loc> entries — tanpa site: set, integration silently produces tidak ada apa pun (Tidak error, Tidak warning). Apa untuk melakukan alih-alih: set site: di astro.config.mjs sebelum Anda install sitemap integration, dan periksa bahwa sitemap-index.xml sebenarnya memiliki URLs di ini setelah Anda berikutnya bangun.

Leaving sitemap out dari robots.txt

Installing @astrojs/sitemap tidak tambahkan sebuah Sitemap: line untuk robots.txt — itu’s sebuah terpisah manual langkah orang assume adalah automatic. Mengapa ini adalah wrong: mesin pencari dapat masih temukan sitemap jika Anda submit ini di Search Console, tetapi Anda lose passive penemuan path lainnya bot (dan Bing/IndexNow-berdekatan crawler) rely pada. Apa untuk melakukan alih-alih: tambahkan Sitemap: https://yoursite.com/sitemap-index.xml untuk Anda robots.txt di public/ dan konfirmasi ini resolves setelah deploy.

Leaving default loading="lazy" pada hero image

Astro’s <Image /> component lazy-memuat oleh default, yang adalah right panggil untuk di bawah—fold images dan wrong panggil untuk satu image itu biasanya adalah Anda LCP element. Mengapa ini adalah wrong: lazy-memuat hero delays browser dari bahkan starting itu image permintaan, yang secara langsung hurts Anda Largest Contentful Paint score. Apa untuk melakukan alih-alih: override hero/di atas—fold image explicitly dengan loading="eager" dan fetchpriority="high", dan leave setiap lainnya image pada lazy default.

Putting dapat diindeks konten di dalam sebuah server Island

server:defer adalah dibangun untuk personalized, session-spesifik konten — cart counts, login state, recommendations — tidak untuk apa pun Anda ingin diperingkatkan. Mengapa ini adalah wrong: static HTML sebuah crawler membaca berisi fallback konten specified untuk island, tidak apa mendapatkan fetched client-side setelah halaman memuat, so apa pun utama konten placed ada invisible untuk mesin pencari pada pertama crawl. Apa untuk melakukan alih-alih: pertahankan peringkat konten di main Astro template dan reserve server Islands strictly untuk dynamic, personalized bits itu tidak seharusnya menjadi terindeks anyway.

Assuming sebuah fast Lighthouse score adalah finish line

Astro situs post strong Core Web Vitals hampir oleh default, dan ini adalah tempting untuk berhenti di sana. Mengapa ini adalah wrong: speed adalah satu peringkat input among banyak — sebuah fast, empty, atau thin halaman masih tidak outrank sebuah lebih lambat halaman dengan better konten, tautan, dan topical depth. Apa untuk melakukan alih-alih: treat performa sebagai table stakes Anda mendapatkan untuk free dengan Astro, lalu spend sebenarnya optimization effort pada konten quality, internal linking, dan structured-data/meta berfungsi Astro tidak melakukan untuk Anda.

Assuming “static oleh default” (terjemahan) “static oleh default” adalah benar untuk setiap route

Astro’s static output mode adalah default, tetapi ini adalah sebuah default, tidak sebuah universal property — output: 'server' flips ini, dan prerender dapat menjadi set per route di either direction. Mengapa ini adalah wrong: tim deskripsikan mereka seluruh situs sebagai “static” (terjemahan) “static” atau “SSR” (terjemahan) “SSR” dari top-tingkat config dan tidak pernah periksa individual routes, lalu mendapatkan surprised ketika satu route behaves differently di production. Apa untuk melakukan alih-alih: periksa per-route prerender setting untuk apa pun Anda’re reasoning tentang, dan validate sebenarnya respons (kode status, penuh markup, redirect perilaku) pada deployed URL alih-alih config file.

Putting konten hanya di dalam sebuah client:only component

client:only adalah tidak yang sama sebagai client:load/client:idle/client:visible — ini skips server rendering entirely. Mengapa ini adalah wrong: sebuah component menggunakan client:only produces Tidak HTML pada server, so apa pun dapat diindeks placed hanya ada invisible untuk sebuah crawler reading mentah respons, dan ini adalah easy untuk reach untuk client:only untuk “simplicity” (terjemahan) “simplicity” tanpa realizing SEO cost. Apa untuk melakukan alih-alih: render utama konten di sebuah server-dirender component atau halaman template; reserve client:only untuk interaction-hanya widgets dengan tidak ada apa pun dapat diindeks di dalam them.

AI summary

sebuah condensed take pada Advanced versi:

• Astro’s default output mode prerenders untuk static HTML di bangun time — untuk sebuah route di itu default, mentah HTML adalah finished halaman, so Google’s render-queue ( “second wave” (terjemahan) “kedua wave”) masalah tidak apply untuk ini. ini adalah sebuah default, tidak sebuah universal property: output: 'server' flips ini, dan prerender dapat override per route di either direction.
• Islands architecture hydrates hanya components marked dengan client:*; sebuah component tanpa satu ships HTML tanpa -nya own hydration JS (though Astro dapat masih tambahkan halaman scripts, lainnya islands, dan router JS elsewhere). client:only adalah exception — ini skips server rendering entirely, so dapat diindeks konten tidak seharusnya langsung hanya di sana. ini adalah selective hydration, tidak resumability. client:visible mempertahankan di bawah—fold JS dari blocking LCP.
• Astro auto-generates tidak ada apa pun SEO-wise — meta tags, canonicals, sitemap, structured data, dan robots.txt adalah semua deliberate bangun langkah. “Astro adalah auto-SEO-optimized” (terjemahan) “Astro adalah auto-SEO-dioptimalkan” adalah sebuah myth.
• @astrojs/sitemap discovers statically generated routes — tetapi Anda harus set site: di config (atau ini silently melakukan tidak ada apa pun), tambahkan sitemap line untuk robots.txt yourself, dan explicitly tambahkan apa pun runtime-hanya URLs melalui customPages.
• konten Collections + Zod dapat membuat title/description diperlukan, failing bangun jika sebuah halaman adalah missing them — sebuah SEO safety net.
• astro:assets <Image> converts untuk WebP, sets dimensions (mencegah CLS), lazy-memuat oleh default, dan memerlukan alt. Override LCP image dengan loading="eager" + fetchpriority="high".
• server Islands (server:defer) memerlukan sebuah adapter, sajikan static shell + fallback instantly di awal document, lalu fetch island independently afterward. crawler reading itu pertama document see fallback, tidak island — tidak pernah put dapat diindeks konten di sana.
• Static dan pada-demand (server) output adalah SEO-equivalent setelah verified — keduanya deliver penuh HTML untuk crawler pada pertama permintaan, tetapi pada-demand routes dapat stream, so konfirmasi respons sebenarnya arrives menyelesaikan; choose mode pada data freshness dan ops, tidak SEO.
• View Transitions (<ClientRouter />) gunakan history.pushState dan adalah SEO-safe; Google melakukan crawl underlying MPA halaman biasanya. mereka’re sebuah browser-side enhancement, tidak sebuah SPA conversion.
• None dari di atas adalah sebuah outcome jaminan — static/server HTML, islands, dan adapters adalah mechanisms, tidak proof dari crawlability, pengindeksan, rankings, atau Core Web Vitals. Validate deployed route.
• Astro posts strong Core Web Vitals angka di -nya own 2023 benchmark — di atas 50% dari Astro situs lulus Google’s CWV assessment, well di atas industry baseline di time; treat ini sebagai sebuah dated data poin, tidak sebuah langsung jaminan.

Dokumentasi resmi

Utama-sumber documentation dari Astro dan mesin pencari.

Astro

• Islands Architecture — bagaimana Astro strips client-side JS dan hydrates hanya interactive components.
• Template Directives Reference — client:load/idle/visible/only dan server:defer, including apa client:only skips.
• Image Optimization (astro:assets) — <Image>/<Picture> components, WebP, dimensions, dan CLS.
• @astrojs/sitemap — automatic sitemap generation, filter, serialize, dan i18n.
• server Islands — server:defer, adapter requirement, fallback konten, dan deferred client fetching.
• pada-Demand rendering — static/server output modes, per-route prerender, dan HTML streaming.
• Routing Reference — bagaimana halaman dan endpoints prerender oleh default.
• Astro Runtime API Reference — Response/redirect menangani dan default kode status.
• konten Collections — jenis-safe konten dengan Zod schema validation.
• View Transitions — <ClientRouter /> dan History API navigation.

Google

• memahami JavaScript SEO Basics — render queue, dapat di-crawl tautan, History API, dan “tidak all bots jalankan JavaScript” (terjemahan) “tidak semua bot jalankan JavaScript” caveat.
• di-Depth Guide untuk Bagaimana Google Search berfungsi — crawl → render → indeks, dan di mana SSG menghapus render langkah.

Bing / Microsoft

• IndexNow / indexnow.org — push protocol itu pairs well dengan sebuah static Astro deploy (wire ini untuk Anda publish langkah so Bing dan Yandex hear tentang baru halaman immediately).

Quotes dari sumber

pada—record statements dari Astro’s docs, Google, dan named practitioners. setiap penelusuran-mesin dan docs tautan adalah sebuah deep tautan itu jumps untuk quoted passage pada sumber halaman.

Google — antrean rendering yang dihindari Astro

• “Googlebot queues all pages with a 200 HTTP status code for rendering unless a robots meta tag tells Google not to index the page. The page may stay on this queue for a few seconds, but it can take longer than that.” (terjemahan) “Untuk rendering, Googlebot memasukkan semua halaman berkode status HTTP 200 ke antrean, kecuali tag meta robots melarang pengindeksan. Halaman itu bisa menunggu beberapa detik atau lebih lama.” Jump untuk quote
• “not all bots can run JavaScript” (terjemahan) “tidak semua bot dapat menjalankan JavaScript” — itulah sebabnya keluaran yang mengutamakan HTML membantu lebih dari sekadar Googlebot. Jump untuk quote

Astro docs — islands, images, sitemaps, server Islands

• “just HTML & CSS, stripping out all client-side JavaScript automatically.” (terjemahan) “hanya HTML dan CSS, dengan semua JavaScript sisi klien dihapus secara otomatis.” — pada arsitektur islands. Jump untuk quote
• “infers image dimensions to avoid Cumulative Layout Shift (CLS).” (terjemahan) “infers image dimensions untuk hindari Cumulative Layout Shift (CLS).” — pada Image component. Jump untuk quote
• “Your page will be rendered immediately with any specified fallback content as a placeholder. Then, the component’s own contents are fetched on the client and displayed when available.” (terjemahan) “Anda halaman akan menjadi dirender immediately dengan apa pun specified fallback konten sebagai sebuah placeholder. lalu, component’s own contents adalah fetched pada client dan displayed ketika tersedia.” — pada server Islands. Jump untuk quote

Jason Miller (pencetus istilah “islands architecture” dalam Preact)

• Selective hydration berfungsi oleh “rendering HTML pages on the server, and inject[ing] placeholders or slots around highly dynamic regions.” (terjemahan) “rendering HTML halaman pada server, dan inject[ing] placeholders atau slots sekitar highly dynamic regions.” — cited di Astro Docs: Islands Architecture

Joost de Valk (founder dari Yoast SEO)

• “Dari an SEO perspective, static HTML pada a CDN adalah a better starting point daripada paling CMSes akan ever memberikan Anda.” (terjemahan) “dari sebuah SEO perspective, static HTML pada sebuah CDN adalah sebuah better starting poin daripada sebagian besar CMSes akan ever memberikan Anda.” — Joost.blog: Astro SEO Menyelesaikan Guide

Astro SEO checklist

sebuah lulus untuk konfirmasi sebuah Astro situs adalah sebenarnya siapkan untuk penelusuran — tidak hanya sitting pada sebuah baik foundation:

• site: adalah set di astro.config.mjs (sitemap silently tidak akan generate tanpa ini).
• @astrojs/sitemap adalah installed dan sitemap reference adalah ditambahkan untuk robots.txt manually.
• sebuah robots.txt ada di public/ dan tidak block apa pun Anda ingin terindeks.
• setiap halaman sets sebuah unique title dan description (ideally melalui sebuah shared BaseLayout.astro).
• sebuah self-referencing canonical adalah pada setiap halaman dan matches og:url.
• konten Collections gunakan Zod schema itu membuat title/description diperlukan (bangun fails jika missing).
• Images gunakan <Image /> / <Picture />; semua memiliki alt (sebuah missing satu adalah sebuah compile error anyway).
• LCP/hero image overrides default lazy-muat dengan loading="eager" dan fetchpriority="high".
• Tidak dapat diindeks konten lives di sebuah server Island (server:defer) — crawler see fallback, dan server Islands perlu sebuah adapter untuk berfungsi di semua.
• Tidak dapat diindeks konten lives hanya di dalam sebuah client:only component — ini skips server rendering, so ada Tidak HTML untuk ini until browser hydrates.
• untuk apa pun route menggunakan output: 'server' atau sebuah per-route prerender = false, konfirmasi runtime-hanya URLs adalah ditambahkan untuk sitemap explicitly (customPages) — automatic sitemap penemuan targets statically generated routes.
• data terstruktur (JSON-LD) adalah di server-dirender <head>.
• jika <ClientRouter /> adalah enabled, spot-periksa bahwa setiap URL masih mengembalikan penuh HTML pada sebuah direct fetch.
• pada-demand/server routes: fetch sebuah langsung production URL secara langsung dan konfirmasi kode status, redirect perilaku, dan penuh respons HTML — jangan extrapolate dari local dev, since adapter/runtime perilaku dapat differ.

mental models

1. mentah HTML adalah finished halaman — untuk itu route’s default. Astro’s static output mode berarti ada Tidak render wave untuk tunggu pada untuk sebuah prerendered route — apa Googlebot fetches adalah apa mendapatkan terindeks. itu’s sebuah per-route default, tidak sebuah situs-wide jaminan (output: 'server' dan per-route prerender dapat perubahan ini), so periksa route, tidak hanya top-tingkat config. Ketika ini applies, View Sumber adalah truth ( opposite dari sebuah CSR SPA) — tetapi konfirmasi ini applies sebelum treating ini sebagai fact.

2. Foundation, tidak finish, dan tidak sebuah outcome jaminan. Astro memberikan Anda bersih HTML dan strong performa mechanics untuk free. Semuanya itu sinyal meaning untuk mesin pencari — meta, canonical, sitemap, schema — adalah sebuah deliberate langkah Anda tambahkan. “Good architecture” (terjemahan) “baik architecture” ≠ “selesai,” (terjemahan) “selesai,” dan neither satu adalah proof dari crawlability, pengindeksan, atau rankings — itu masih memiliki untuk menjadi validated pada deployed situs.

3. Islands adalah additive — except client:only. Interactivity sits pada top dari HTML, tidak pernah di bawah ini, untuk client:load/client:idle/ client:visible: itu directives tambahkan JS untuk satu component tanpa menghapus konten dari dapat di-crawl base. client:only breaks itu pattern — ini skips server rendering entirely, so ini adalah tidak additive, ini adalah sebuah genuine kesenjangan di static HTML unless Anda plan untuk ini. dan island hydration adalah selective, tidak resumability — jangan conflate dua.

4. static shell adalah apa crawler see. untuk server Islands, crawler membaca fallback di static shell, tidak deferred konten. Decision aturan: dapat diindeks konten goes di main template; personalized/dynamic konten goes di island.

5. browser enhancement ≠ structural perubahan. View Transitions perubahan browser experience (soft navigation melalui history.pushState) tetapi tidak crawl experience (setiap URL adalah masih sebuah penuh HTML halaman). Enhancements itu leave underlying MPA intact adalah SEO-safe.

6. Validate di bangun time. konten Collections + Zod turn “remember untuk add a title” (terjemahan) “remember untuk tambahkan sebuah judul” ke “the build won’t ship without one.” (terjemahan) “ bangun tidak akan ship tanpa satu.” Push SEO requirements ke jenis sistem dan mereka berhenti menjadi hal Anda dapat forget.

Astro SEO — cheat sheet

apa automatic vs. apa pada Anda

Output modes

Islands directives

• client:load — hydrate immediately.
• client:idle — hydrate ketika browser adalah idle.
• client:visible — hydrate ketika scrolled ke view (best untuk di bawah—fold; melindungi LCP).
• client:only — skips server rendering entirely. Tidak HTML untuk ini component until browser hydrates ini; tidak additive like others.

Fast aturan

• site: missing → Tidak sitemap (silent).
• dapat diindeks konten di sebuah server Island → crawler sees fallback; server Islands perlu sebuah adapter.
• dapat diindeks konten hanya di dalam client:only → Tidak HTML untuk ini, period.
• Sitemap covers static routes → tambahkan runtime-hanya URLs melalui customPages.
• View Transitions gunakan history.pushState → SEO-safe, MPA underneath.
• Static/server output dan islands adalah mechanisms, tidak jaminan — validate deployed route, kode status, dan penuh HTML sebelum claiming sebuah outcome.
• sebuah fast empty halaman masih tidak peringkat — speed adalah sebuah sinyal, tidak ** sinyal.

Audit Astro’s dibangun HTML

Jalankan ini setelah astro build. ini memeriksa artifact crawler menerima, tidak sumber component tree:

find dist -name '*.html' -type f | while IFS= read -r file; do
  canonicals=$(grep -Eio '<link[^>]+rel=["'"']canonical["'"'][^>]*>' "$file" | wc -l | tr -d ' ')
  titles=$(grep -Eio '<title>[^<]*</title>' "$file" | wc -l | tr -d ' ')
  if [ "$canonicals" -ne 1 ] || [ "$titles" -ne 1 ]; then
    printf '%s\ttitles=%s\tcanonicals=%s\n' "$file" "$titles" "$canonicals"
  fi
done

sebuah empty hasil berarti setiap generated HTML file memiliki persis satu judul dan canonical; ini melakukan tidak validate apakah mereka nilai adalah correct, so sample itu secara terpisah. ini hanya memeriksa bangun artifact — ini says tidak ada apa pun tentang pada-demand (output: 'server') routes atau server Islands, yang jangan exist sebagai static files.

Spot-periksa langsung routes di production

untuk apa pun itu renders pada demand — output: 'server' routes, per-route prerender = salah, atau server Islands — bangun-output periksa di atas tidak apply. periksa sebenarnya deployed respons alih-alih:

# Replace with your real URLs
for url in "https://example.com/" "https://example.com/some-server-route/"; do
  echo "== $url =="
  curl -sS -D - -o /dev/null "$url" | grep -Ei '^(HTTP|location|cache-control):'
done

cari kode status Anda expect (200 untuk sebuah langsung halaman, sebuah nyata redirect code jika ini redirects — jangan assume 302 vs 301 tanpa memeriksa), dan konfirmasi curl -sS "$url" mengembalikan penuh markup, tidak sebuah fallback shell, jika Anda’re memeriksa sebuah halaman itu mencakup sebuah server Island. melakukan ini terhadap production, tidak astro dev — adapter dan runtime perilaku dapat differ dari local.

alat untuk sebuah Astro situs

• @astrojs/sitemap — official sitemap integration (astro add sitemap). jangan forget site: di config.
• astro-seo (npm) — opsional community component itu bundles judul, deskripsi, Open Graph, Twitter cards, dan canonical ke satu tag.
• astro-seo-schema (npm) — typed JSON-LD structured-data helper untuk Astro.
• astro:assets <Image> / <Picture> — dibangun-di image optimization (WebP/AVIF, dimensions, lazy-muat, alt enforcement).
• pemeriksaan URL (Google Search Console) — konfirmasi Anda konten adalah di di-crawl HTML (dengan Astro ini seharusnya menjadi di View Sumber sudah — sebuah quick sanity periksa).
• sebuah JS-rendering crawler — Ahrefs situs Audit atau Screaming Frog untuk verify mentah vs. dirender parity di seluruh situs (pada prerendered routes mereka seharusnya match — konfirmasi ini, jangan assume ini, dan periksa secara terpisah untuk apa pun pada-demand atau server Island routes).
• IndexNow — pair dengan Anda deploy/publish langkah so Bing dan Yandex hear tentang baru static halaman immediately.

Uji pemahaman Anda: Astro SEO

Five quick pertanyaan pada bagaimana Astro’s architecture memengaruhi SEO. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My related writing

• JavaScript SEO: sebuah Definitive Guide — rendering fundamentals behind mengapa Astro’s HTML-pertama output adalah such sebuah advantage.
• Beginner’s Guide untuk SEO teknis — di mana kerangka kerja pilihan fits di bigger picture.

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat — pipeline Astro’s SSG default pendek-circuits. (Standing disclaimer: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)

Dari sumber industri

• Dokumentasi Astro: Arsitektur Islands — penjelasan kanonis tentang cara Astro menghapus JavaScript sisi klien.
• Dokumentasi Astro: @astrojs/sitemap — penyiapan resmi, persyaratan site:, serta opsi filter/serialize/i18n.
• Dokumentasi Astro: Server Islands — perilaku server:defer, konten fallback, dan pengambilan konten oleh klien yang tidak dilihat crawler.
• Panduan SEO Astro lengkap karya Joost de Valk — panduan praktisi yang sangat berwenang dari pendiri Yoast, dengan pola modern yang siap untuk AI dan IndexNow.
• Panduan Google tentang dasar JavaScript SEO — antrean rendering, tautan yang dapat dirayapi, serta panduan History API yang diikuti View Transitions Astro.
• Laporan performa kerangka kerja web Astro 2023 — data Core Web Vitals yang membandingkan Astro dengan kerangka kerja lain.
• Jurnal Mesin Pencari: Core Web Vitals, WordPress, dan Astro — liputan independen tentang perbandingan performa Astro dan WordPress.

Stats worth citing

semua figures di bawah come dari Astro’s 2023 Web kerangka kerja performa Report (dan SEJ’s coverage dari ini); treat them sebagai 2023-era benchmarks alih-alih langsung angka.

• di atas 50% dari Astro situs lulus Google’s Core Web Vitals Assessment — di atas industry average dari ~40,5%, dan Astro dan SvelteKit adalah satu-satunya major kerangka kerja beating itu baseline (Berikutnya.js ~25%, Nuxt ~20%). Sumber
• INP lulus rate dari 68,8% untuk Astro — credited untuk MPA architecture (Tidak JS-driven navigation), yang mempertahankan main utas free. Sumber
• Median halaman weight dari 1,65 MB — lightest di dataset. Sumber
• LCP: Astro ~0,44s vs WordPress ~0,81s — roughly 46% lebih cepat, di report’s perbandingan. Coverage

Log perubahan