Panduan Gatsby SEO

TL;DR — oleh default, Gatsby membangun Anda halaman ke finished HTML sebelum anyone visits (ini mode adalah called SSG), so ketika Google menampilkan up, Anda konten adalah sudah di halaman — Tidak menunggu untuk JavaScript. itu memberikan Gatsby sebuah strong SEO head mulai. Gatsby juga memiliki sebuah sedikit lainnya rendering options untuk halaman itu perlu untuk generate kemudian atau gunakan per-permintaan data — worth knowing jika Anda situs menggunakan them. catch: ini masih mengirim sebuah big React bundle untuk browser, yang dapat slow Anda halaman down, dan Anda masih memiliki untuk siapkan meta tags, sitemaps, canonicals, dan image teks alt yourself.

Apa Gatsby adalah

Gatsby adalah sebuah situs web kerangka kerja dibangun pada React. sebagian besar React apps bangun halaman di Anda browser setelah JavaScript memuat — yang adalah sebuah masalah untuk SEO, karena sebuah mesin pencari fetching halaman pertama sees sebuah near-empty shell. Gatsby flips itu sekitar oleh default. Ketika Anda jalankan gatsby build, ini turns sebagian besar halaman ke sebuah menyelesaikan HTML file ahead dari time. So ketika Google, Bing, atau sebuah reader permintaan satu dari itu halaman, konten adalah right di sana di HTML. Evidence for this claim Gatsby creates static HTML files during its production build. Scope: Gatsby static generation; client-side behavior can still be added. Confidence: high · Verified: 2026-07-14 Gatsby: Builds and deploys

itu default mode membuat Gatsby sebuah static situs generator (SSG), dan ini adalah mengapa Gatsby adalah umumnya baik untuk SEO out dari box — banyak better daripada sebuah plain React app. Gatsby juga lets individual halaman opt ke three lainnya rendering modes — generating pada pertama permintaan, generating per-permintaan pada sebuah server, atau rendering entirely di browser — yang Advanced tab covers, since setiap satu perubahan apa sebuah crawler sebenarnya sees.

Mengapa orang worry tentang Gatsby dan SEO (dan mengapa mereka mostly tidak seharusnya)

paling umum myth adalah “Gatsby adalah bad untuk SEO karena it menggunakan React.” (terjemahan) “Gatsby adalah buruk untuk SEO karena ini menggunakan React.” itu’s salah. React bagian berjalan setelah halaman adalah sudah dibangun dan delivered — ini hanya membuat halaman interactive. text, tautan, dan heading sebuah mesin pencari cares tentang adalah sudah di HTML dari mulai.

So Gatsby clears biggest hurdle secara otomatis. Apa ini tidak melakukan adalah semua dari SEO untuk Anda.

Apa Anda masih memiliki untuk siapkan

sebuah Gatsby situs adalah tidak secara otomatis dioptimalkan. Anda masih perlu untuk:

• tambahkan tag judul dan deskripsi meta untuk setiap halaman ( modern cara adalah dibangun-di Gatsby Head API). Evidence for this claim Gatsby's Head API lets pages export document-head metadata. Scope: Gatsby Head API. Confidence: high · Verified: 2026-07-14 Gatsby: Head API
• Generate sebuah sitemap ( gatsby-plugin-sitemap plugin).
• Set canonical URLs so duplicate versi dari sebuah halaman jangan compete.
• Tulis teks alt untuk images — Gatsby’s image alat resizes dan optimizes images secara otomatis, tetapi ini melakukan tidak tulis teks alt untuk Anda.

satu hal itu surprises orang

Gatsby masih ships penuh React runtime (~200KB+) untuk browser pada setiap halaman. ini tidak hurt apakah Anda mendapatkan terindeks — HTML adalah sudah menyelesaikan — tetapi ini dapat slow Anda halaman down, yang memengaruhi Core Web Vitals (Google’s halaman-experience speed metrics). Lebih ringan kerangka kerja like Astro kirim hampir Tidak JavaScript oleh perbandingan.

Satu lebih hal untuk know jika Anda’re choosing Gatsby hari ini: Netlify acquired Gatsby di 2023, dan active development memiliki slowed sebuah lot since. untuk sebuah existing Gatsby situs itu’s fine; untuk sebuah brand-baru project, ini adalah worth weighing.

ingin teknis versi — Head API vs old react-helmet plugin, sitemap dan canonical gotchas, React-bundle CWV trade-off, dan honest take pada Gatsby’s future? Switch untuk Advanced tab.

TL;DR — Gatsby memiliki four rendering options — SSG ( default), DSG, SSR, dan client-hanya routes — dan mereka jangan semua put konten di mentah HTML yang sama cara. SSG pre-renders untuk static HTML di bangun time (gatsby build), so konten adalah di mentah HTML sebelum pertama crawler permintaan — Tidak Web rendering Service, Tidak rendering queue. DSG defers generation untuk pertama permintaan; SSR generates per permintaan pada sebuah server; client-hanya routes render tidak ada apa pun route-spesifik until browser berjalan JavaScript. Whichever path menyajikan sebuah halaman, Gatsby hydrates sebuah penuh React bundle (~200KB+) pada client, yang adalah sebuah Core Web Vitals cost, tidak sebuah crawlability satu. saat ini metadata approach adalah dibangun-di Gatsby Head API (v4.19+), yang berfungsi di seluruh semua four rendering paths dan replaces gatsby-plugin-react-helmet. recurring failure modes adalah double canonical tags (Head API + react-helmet keduanya firing), draft/orphan halaman leaking ke sitemaps, production-hanya sitemap gotcha, missing teks alt pada GatsbyImage, trailing-slash inconsistency, dan DSG/SSR/client-hanya routes itu tidak pernah mendapat sebuah production periksa. dan elephant di room: since Netlify’s 2023 acquisition, Gatsby’s maintenance memiliki slowed sharply.

Gatsby’s four rendering options — dan mengapa mereka penting untuk SEO

Google memproses JavaScript halaman di three phases — crawling, lalu rendering, lalu pengindeksan — dan rendering happens di sebuah terpisah lulus dari sebuah queue menggunakan headless Chromium. Google’s own guidance adalah blunt tentang mengapa Anda tidak seharusnya lean pada itu: “Server-side atau pre-rendering adalah masih a great idea karena it membuat Anda website lebih cepat untuk users dan crawlers, dan tidak all bots dapat jalankan JavaScript.” (terjemahan) “server-side atau pre-rendering adalah masih sebuah great idea karena ini membuat Anda situs web lebih cepat untuk pengguna dan crawler, dan tidak semua bot dapat jalankan JavaScript.”

sebuah Gatsby situs tidak universally bangun-time static HTML — Gatsby mendukung four distinct rendering paths, chosen per halaman atau template Evidence for this claim gatsby build writes production output, including generated HTML, to the public directory. Scope: Gatsby production builds. Confidence: high · Verified: 2026-07-14 Gatsby CLI: build :

• SSG (Static situs Generation) — default. gatsby build emits fully dirender static HTML ke /public untuk halaman. Googlebot’s pertama-wave mentah-HTML fetch sudah berisi menyelesaikan konten — text, tautan, metadata. ini adalah safe, rendah-risk path, dan ini adalah apa sebagian besar Gatsby halaman gunakan.
• DSG (Deferred Static Generation). Generation adalah deferred until halaman’s pertama permintaan alih-alih happening untuk setiap halaman di bangun time — berguna untuk situs dengan huge angka dari rendah-traffic halaman di mana sebuah penuh bangun akan menjadi slow. bangun alone melakukan tidak tell Anda apa sebuah crawler sees; halaman’s HTML tidak exist until sesuatu permintaan ini, so pertama-permintaan dan cached perilaku perlu mereka own periksa, tidak hanya sebuah bangun log.
• SSR (rendering sisi server). halaman adalah dirender per permintaan, menggunakan permintaan-time data, melalui Gatsby Functions. Karena ini berjalan di permintaan time, SSR halaman perlu production memeriksa sebuah bangun-time halaman tidak: respons status, caching headers, timeout perilaku, dan apa sebuah crawler sees pada sebuah empty atau error respons — none dari itu adalah terlihat dari sebuah successful local bangun.
• Client-hanya routes. ini render entirely di browser dan jangan mendapatkan route-spesifik konten di awal HTML — yang sama profile sebagai sebuah plain client-side React app. jangan assume Google (atau apa pun crawler) sees apa pun halaman-spesifik di sini until JavaScript berjalan; treat ini sebagai JS-dependent oleh design, yang adalah fine untuk gated/authenticated konten tetapi wrong untuk apa pun Anda ingin terindeks dengan konten.

React hydration (ReactDOMClient.hydrateRoot()) happens client-side pada top dari whichever dari ini produced HTML, purely untuk tambahkan interactivity — itu bagian adalah yang sama regardless dari rendering path, dan adalah sebuah terpisah concern dari yang path generated halaman (lebih pada hydration cost di bawah).

Contrast SSG/DSG/SSR dengan sebuah pure client-side React app, yang menyajikan sebuah empty <div id="root"> dan bergantung pada browser (atau renderer) untuk bangun halaman. sebagian besar Gatsby halaman ship bermakna HTML oleh default — itu’s indexability win, dan ini adalah nyata, tetapi ini adalah sebuah per-halaman property, tidak sebuah kerangka kerja jaminan. rendering options dan image tooling jangan jaminan Core Web Vitals, pengindeksan, atau rankings pada mereka own; verify sebenarnya production output untuk whichever path sebuah route menggunakan.

catch dengan SSG/DSG/SSR alike adalah sebuah performa satu, tidak sebuah crawlability satu: Gatsby ships penuh React runtime untuk setiap halaman dan re-hydrates ini. Lebih pada itu, dan Astro perbandingan, di bawah.

Gatsby Head API vs gatsby-plugin-react-helmet

ini adalah single sebagian besar penting “adalah Anda melakukan it itu modern way?” (terjemahan) “adalah Anda melakukan ini modern cara?” pertanyaan di Gatsby SEO.

** legacy approach — gatsby-plugin-react-helmet.** untuk tahun, standard cara untuk set <title>, deskripsi meta, dan lainnya head tags adalah react-helmet library plus ini plugin. plugin’s job adalah untuk memberikan react-helmet SSR mendukung — tanpa ini, Anda judul/meta tags akan hanya muncul setelah JS execution, tidak di mentah HTML, yang defeats poin. ini berfungsi, tetapi ini memiliki known issues dengan React Hooks dan concurrent rendering, plus sebuah background-tab judul bug Anda patch dengan defer={false}.

** modern approach — Gatsby Head API (v4.19+).** Gatsby now memiliki sebuah dibangun-di cara untuk tambahkan head elements: sebuah named Head export dari apa pun halaman atau template file. Evidence for this claim Gatsby pages and templates can export a named Head function to add head elements. Scope: Gatsby Head API. Confidence: high · Verified: 2026-07-14 Gatsby: Head API

export const Head = () => (
  <>
    <title>Page Title</title>
    <meta name="description" content="..." />
  </>
)

ini menerima berguna props — location.pathname, params, data (dari halaman’s GraphQL kueri), dan pageContext — dan ini deduplicates tags itu share sebuah id prop (terakhir satu wins), though berjalan dua berbeda head-tag mechanisms di setelah (Head API plus sebuah leftover react-helmet panggil) dapat masih conflict bahkan dengan deduplication. ini berfungsi hanya di halaman files dan templates, tidak di arbitrary components. advantages di atas react-helmet: Tidak ketiga-party bundle, Tidak Provider wrapper, deterministic tag order dengan React 18 streaming. gunakan Head API untuk semua baru projects, dan plan sebuah migration untuk existing ones.

Head API berfungsi yang sama cara di seluruh semua four rendering paths — SSG, DSG, SSR, dan client-hanya routes semua mendukung sebuah Head export. Apa differs adalah ketika -nya output lands di HTML sebuah crawler dapat fetch: pada SSG ini adalah baked di di bangun time; pada DSG dan SSR ini adalah generated di pertama-permintaan atau per-permintaan time; pada sebuah client-hanya route ini tidak di awal HTML di semua. jangan assume “I added a Head export” (terjemahan) “Saya menambahkan export Head” adalah equivalent untuk “ini adalah di itu mentah HTML untuk setiap route” (terjemahan) “ini adalah di HTML mentah untuk setiap route” — periksa sebenarnya production output (view-source: atau curl) untuk whichever path setiap route menggunakan, tidak hanya satu representative halaman.

** “meta tags di DevTools tetapi tidak di sumber” (terjemahan) “meta tags di DevTools tetapi tidak di sumber” bug.** sebuah classic Gatsby SEO symptom: Anda judul/meta tags tampilkan up di Chrome DevTools tetapi adalah missing dari view-source:. penyebab adalah itu DevTools menampilkan hydrated DOM (setelah JS berjalan), sementara view-sumber menampilkan mentah HTML. jika Anda tags hanya muncul di DevTools, Anda SEO component adalah rendering client-side alih-alih menjadi baked ke Gatsby’s static output — biasanya karena ini adalah digunakan sebagai sebuah regular component alih-alih sebagai (atau di dalam) halaman’s Head export. selalu verify di mentah HTML, tidak DevTools.

Wiring up sebuah SEO component ( GraphQL data layer)

Gatsby’s data layer adalah GraphQL, dan ini adalah bagaimana Anda feed metadata ke Anda halaman.

• useStaticQuery pulls global defaults dari siteMetadata (judul, deskripsi, siteUrl) didefinisikan di gatsby-config.js.
• halaman-tingkat GraphQL kueri lulus sebuah data prop straight untuk Head export — Tidak extra wiring needed.
• standard pattern adalah prop || siteMetadata fallback: gunakan per-halaman nilai jika ini ada, jika tidak situs default.

sebuah Head export itu takes halaman data looks like:

export const Head = ({ data }) => (
  <>
    <title>{data.post.title}</title>
    <meta name="description" content={data.post.excerpt} />
  </>
)

Sitemaps: gatsby-plugin-sitemap (dan -nya traps)

Install gatsby-plugin-sitemap dan configure ini di gatsby-config.js. sebuah sedikit hal trip orang up:

• ini generates sitemap-index.xml, tidak /sitemap.xml. Submit indeks URL di Google Search Console — jangan submit /sitemap.xml dan expect ini untuk resolve.
• ini hanya berjalan di production membangun. ini melakukan tidak ada apa pun di gatsby develop. untuk test ini, jalankan gatsby build && gatsby serve. Orang file “my sitemap adalah missing” (terjemahan) “my sitemap adalah missing” reports itu adalah benar-benar hanya “I never ran a production build.” (terjemahan) “I tidak pernah ran sebuah production bangun.”
• createLinkInHead: true oleh default menambahkan sitemap reference untuk HTML head secara otomatis.
• ini selalu excludes /dev-404-page, /404, dan /offline-plugin-app-shell-fallback.
• <priority> dan <changefreq> adalah ignored oleh Google — plugin docs say so secara langsung. Focus pada sebuah accurate <lastmod> alih-alih.
• entryLimit defaults untuk 45 000 URLs per file.

Excluding drafts adalah Anda job. Gatsby membangun semuanya ini menemukan, so draft konten sails straight ke sitemap unless Anda filter ini. melakukan itu di gatsby-node.js dengan sebuah GraphQL filter (e.g. excluding entries tanpa sebuah publish date), tidak oleh hiding ini di sebuah React component — oleh lalu ini adalah sudah dibangun dan listed.

DSG, SSR, dan client-hanya routes perlu sebuah jelas sitemap decision. gatsby-plugin-sitemap reflects apa ini dapat see di bangun time. sebuah SSG halaman adalah straightforward — ini ada sebagai sebuah static file, so ini adalah naturally sitemap-eligible. sebuah DSG halaman’s HTML tidak exist namun di bangun time (ini generates pada pertama permintaan), sebuah SSR halaman tidak pernah memiliki fixed HTML di semua, dan sebuah client-hanya route memiliki Tidak route-spesifik konten untuk indeks di pertama place. jangan assume apa pun dari ini adalah di sitemap (atau seharusnya menjadi) hanya karena route ada — decide, halaman oleh halaman, apakah ini belongs, dan verify generated sitemap-index.xml sebenarnya reflects itu decision alih-alih sebuah bangun-time guess.

robots.txt: gatsby-plugin-robots-txt

gatsby-plugin-robots-txt generates robots.txt di bangun time. berguna detail untuk SEO adalah environment awareness: ini membaca process.env.GATSBY_ACTIVE_ENV lalu process.env.NODE_ENV, so Anda dapat sajikan berbeda aturan per environment. classic gunakan adalah blocking crawler pada Netlify preview/branch deploys so Anda staging URLs jangan mendapatkan accidentally terindeks, sementara leaving production open.

Canonical URLs (dan double-canonical bug)

Dua viable approaches:

1. gatsby-plugin-canonical-urls menambahkan sebuah <link rel="canonical"> untuk setiap halaman. Set stripQueryString: true so /blog?tag=foo dan /blog jangan mendapatkan treated sebagai terpisah canonicalized halaman — recommended untuk sebagian besar situs.
2. ** Head API**, setting canonicals yourself dari location.pathname:

export const Head = ({ location }) => (
  <link rel="canonical" href={`https://example.com${location.pathname}`} />
)

** double canonical bug.** ini adalah sebuah known, easy-untuk-hit issue: jika Anda gunakan gatsby-plugin-canonical-urls dan sebuah react-helmet tag canonical di yang sama time, Anda emit dua <link rel="canonical"> tags. Pick satu mechanism. (jika Anda’re pada react-helmet, gatsby-plugin-react-helmet-canonical-urls adalah helmet-aware option; pada Head API, atur canonical di sana dan drop plugin.)

Trailing slashes. Gatsby halaman dapat menjadi reachable dengan dan tanpa sebuah trailing slash, dan Gatsby’s <Link> component menggunakan client-side History API routing — yang bypasses server-side 301 redirects Anda’d biasanya gunakan untuk normalize trailing slashes. Decide pada satu form, enforce ini di host/CDN tingkat, dan pertahankan canonicals consistent dengan ini.

Image SEO: gatsby-plugin-image

gatsby-plugin-image adalah genuinely satu dari Gatsby’s strengths. Dua components:

• StaticImage — untuk images milik siapa path adalah known dan hardcoded di bangun time.
• GatsbyImage — untuk dynamic images coming dari GraphQL.

Apa ini melakukan secara otomatis: multiple sizes, WebP/AVIF formats, lazy memuat, dan breakpoints (750/1080/1366/1920px). ini juga generates placeholders (blurred, dominant color, atau traced SVG) itu reserve space dan mencegah Cumulative Layout Shift — sebuah Core Web Vitals metric. Karena dimensions adalah set, Anda hindari CLS, dan modern formats plus lazy memuat help LCP.

** satu hal ini melakukan tidak melakukan adalah tulis teks alt.** itu’s pada Anda, setiap time — missing teks alt pada GatsbyImage adalah satu dari paling umum Gatsby SEO oversights. (Migrating dari old gatsby-image package? ada sebuah codemod: npx gatsby-codemods gatsby-plugin-image.)

data terstruktur (JSON-LD)

Google’s preferred structured-data format adalah JSON-LD, dan bersih cara untuk tambahkan ini di modern Gatsby adalah melalui Head API dengan sebuah script tag:

export const Head = ({ data }) => (
  <script type="application/ld+json">
    {JSON.stringify({
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": data.post.title,
    })}
  </script>
)

gatsby-plugin-next-seo offers pre-dibangun JSON-LD components jika Anda’d rather tidak hand-roll them. Satu frequent confusion untuk jelas up: gatsby-plugin-manifest adalah tidak sebuah structured-data plugin — ini generates PWA web app manifest (icons, theme color), tidak ada apa pun untuk melakukan dengan schema.

React bundle dan Core Web Vitals

Di sini’s Gatsby’s nyata weakness relative untuk zero-JS generators.

• Penuh hydration ( Gatsby 1–4 default) hydrates entire React tree dan ships sebuah 200KB+ React runtime untuk setiap halaman. HTML adalah pre-dirender, so ini tidak hurt crawlability — tetapi ini absolutely memengaruhi muat speed dan CWV.
• Sebagian hydration (Gatsby 5, experimental) hydrates hanya components marked "use client" dan leaves rest sebagai static HTML, cutting JS shipped dan secara langsung improving TTI dan CWV. limitations adalah nyata: production membangun hanya, masih beta, dan incompatible dengan emotion, styled-components, dan gatsby-plugin-offline.

takeaway: Gatsby’s JS payload adalah sebuah performa masalah, tidak sebuah indexability satu. Googlebot masih renders JS untuk assess halaman-experience sinyal, so bundle dapat cost Anda pada CWV bahkan though Anda konten indeks fine.

Gatsby vs Astro untuk SEO

jika Anda’re choosing sebuah static kerangka kerja hari ini, ini adalah perbandingan itu penting sebagian besar untuk SEO.

Keduanya pre-render dapat diindeks HTML — itu’s sebuah wash. perbedaan adalah JS tax: Astro’s islands ship sebuah fraction dari JavaScript, yang sebuah Vaihe perbandingan frames sebagai “Reduced JavaScript execution conserves anggaran crawling dan accelerates halaman scanning.” (terjemahan) “Reduced JavaScript execution conserves anggaran crawling dan accelerates halaman scanning.” (Satu historical caveat pada lainnya side: Astro’s image menangani lacked automatic width/height di time dari itu perbandingan, yang produced Lighthouse warnings — periksa saat ini Astro docs, sebagai ini dapat menjadi resolved.)

untuk context pada bagaimana seluruh field compares, see static situs generators hub.

honest bagian: Gatsby’s maintenance trajectory

I tidak akan sugarcoat ini, dan I tidak akan catastrophize ini either.

Netlify acquired Gatsby Inc. di February 2023. Gatsby Cloud adalah sunset dan customers adalah moved untuk Netlify; Netlify stated acquisition akan “tidak impact Gatsby JS.” (terjemahan) “tidak impact Gatsby JS.” Since lalu, activity memiliki slowed markedly. sebuah widely-baca community GitHub discussion (#39062) argues Gatsby adalah effectively abandoned — minimal commits, Tidak React 19 mendukung, sebuah 2024 roadmap itu tidak delivered, dan telemetry service shut down. Maintainers memiliki dibingkai saat ini state sebagai security memperbaiki, limited dependency memperbarui, dan rendah-hanging-fruit bug memperbaiki.

Apa itu berarti untuk SEO tim. untuk sebuah existing Gatsby situs, none dari ini adalah sebuah emergency — ini membangun, ini indeks, ini berfungsi. risk adalah ecosystem decay di atas time: SEO bergantung pada plugins (gatsby-plugin-sitemap, image, canonical-urls), dan aging plugins (e.g. gatsby-source-shopify facing API deprecation) dapat eventually break di cara itu diam-diam degrade pengindeksan. untuk sebuah baru project, weigh itu seriously — kerangka kerja orang adalah migrating untuk adalah Astro dan Berikutnya.js.

Production checklist: verify setiap rendering path

sebuah local gatsby develop session atau bahkan sebuah bersih gatsby build log tidak prove apa sebuah crawler sebenarnya menerima. Karena SSG, DSG, SSR, dan client-hanya routes setiap generate HTML differently, periksa production perilaku per path alih-alih assuming satu representative halaman covers semua dari them:

• Mentah HTML konten. untuk setiap rendering path di gunakan, fetch sebuah nyata production URL dengan curl -s <url> atau view-source: — tidak DevTools — dan konfirmasi konten, judul, dan meta tags sebuah crawler akan see adalah sebenarnya di sana.
• Metadata (Head export output). Konfirmasi Head export’s tags land di itu mentah HTML untuk path di pertanyaan. ini adalah di mana DSG/SSR differ sebagian besar dari SSG: tags exist di Anda sumber either cara, tetapi hanya sebuah production fetch proves mereka dibuat ini ke respons.
• HTTP status. periksa respons kode status pada production, terutama untuk SSR dan DSG routes — sebuah halaman itu renders fine locally dapat 500 di production pada pertama permintaan atau di bawah muat di cara sebuah bangun tidak pernah surfaces.
• Caching perilaku. SSG output adalah sebuah static file dengan predictable caching. DSG caches setelah pertama permintaan — konfirmasi kedua permintaan adalah fast dan correct, tidak hanya pertama. SSR respons bergantung pada Anda caching headers dan hosting layer; verify stale atau per-permintaan konten tidak disajikan untuk wrong pengunjung.
• Failure dan empty-state perilaku. untuk SSR dan DSG halaman backed oleh permintaan-time atau pertama-permintaan data, periksa apa sebuah crawler sees jika itu data fetch fails atau mengembalikan empty — sebuah unhandled error state adalah tidak yang sama halaman Anda tested locally dengan baik data.
• Sitemap generation dan exclusions. Re-konfirmasi ini hanya happens pada sebuah production bangun (gatsby build && gatsby serve, tidak pernah gatsby develop), dan itu exclusions Anda expect — drafts, client-hanya routes, apa pun Anda decided tidak seharusnya menjadi listed — adalah sebenarnya absent dari generated sitemap-index.xml, tidak hanya absent dari Anda intent.

None dari ini adalah opsional per rendering path — sebuah berfungsi gatsby build proves SSG output, tidak DSG, SSR, atau client-hanya perilaku.

umum Gatsby SEO mistakes

1. masih menggunakan gatsby-plugin-react-helmet — legacy; migrate untuk Head API.
2. Meta tags di DevTools tetapi tidak di halaman sumber — SEO component adalah rendering client-side; periksa view-source:, tidak DevTools.
3. Draft konten di sitemaps — filter drafts di gatsby-node.js dengan GraphQL, tidak di sebuah React component.
4. Orphan halaman dari src/pages — Gatsby auto-routes semuanya di sana; stale files bangun dan land di sitemap.
5. Double tag canonical — gatsby-plugin-canonical-urls + react-helmet keduanya firing.
6. Trailing-slash inconsistency — <Link> client-routing bypasses server-side trailing-slash redirects.
7. Tidak stripping kueri strings dari canonicals — set stripQueryString: true.
8. teks alt omitted pada GatsbyImage — ini tidak auto-generated.
9. Submitting /sitemap.xml — nyata file adalah /sitemap-index.xml.
10. Testing sitemap di gatsby develop — ini hanya generates pada gatsby build.
11. Noindex toggled oleh React state — Google dapat memiliki sudah processed mentah HTML; dan ketika ini sees noindex di mentah HTML ini dapat skip rendering entirely. pertahankan noindex decisions di static HTML atau server headers.

untuk JavaScript-rendering fundamentals behind semua dari ini, see parent JavaScript SEO hub.

AI summary

sebuah condensed take pada Advanced versi:

• Gatsby memiliki four rendering paths — SSG, DSG, SSR, dan client-hanya routes. SSG adalah default: gatsby build pre-renders halaman untuk static HTML, so crawler mendapatkan penuh konten pada pertama fetch — Tidak rendering queue, dan strongest indexability baseline. DSG defers generation untuk pertama permintaan; SSR generates per permintaan; client-hanya routes render tidak ada apa pun route-spesifik until JavaScript berjalan di browser (sama profile sebagai sebuah plain client-side React app). Verify production HTML per path — sebuah successful gatsby build hanya proves SSG perilaku.
• ** React-bundle cost adalah performa, tidak crawlability, dan applies regardless dari rendering path.** Gatsby hydrates sebuah penuh React runtime (~200KB+) pada client, yang hits Core Web Vitals. zero-JS generators (Hugo, Jekyll, Eleventy) jangan memiliki ini; Astro ships ~5KB melalui islands.
• gunakan Gatsby Head API (v4.19+), sebuah named Head export dari halaman/template files, untuk judul/meta/canonical/JSON-LD. ini berfungsi di seluruh semua four rendering paths dan replaces legacy gatsby-plugin-react-helmet. ini berfungsi hanya di halaman/templates dan dedupes oleh id.
• Production checklist per path: mentah HTML konten, Head-export metadata, HTTP status, caching perilaku, dan failure/empty-state menangani — periksa semua five untuk whichever rendering path sebuah route sebenarnya menggunakan, plus konfirmasi sitemap generation dan exclusions hanya pada sebuah production bangun.
• Sitemaps: gatsby-plugin-sitemap generates sitemap-index.xml (submit itu, tidak /sitemap.xml) dan hanya berjalan pada gatsby build, tidak di dev. Google ignores <priority>/<changefreq> — focus pada <lastmod>. Filter drafts di gatsby-node.js. DSG, SSR, dan client-hanya routes setiap perlu sebuah jelas sitemap-inclusion decision — jangan assume mereka’re covered yang sama cara sebuah SSG halaman adalah.
• Canonicals: Head API + location.pathname, atau gatsby-plugin-canonical-urls dengan stripQueryString: true — tidak pernah keduanya (double canonical bug).
• Images: gatsby-plugin-image auto-menangani sizes/WebP/lazy-muat dan mencegah CLS, tetapi melakukan tidak tulis teks alt — itu’s manual.
• ** “DevTools but not view-source” (terjemahan) “DevTools tetapi tidak view-sumber” bug** = SEO component rendering client-side alih-alih melalui Head export.
• Maintenance risk: Netlify acquired Gatsby di 2023; activity memiliki slowed (Tidak React 19, undelivered roadmap). Fine untuk existing situs; untuk baru projects weigh Astro/Berikutnya.js.

Dokumentasi resmi

Utama-sumber documentation dari Gatsby dan dari Google.

Gatsby

• rendering options — overview dari Gatsby’s four rendering paths: SSG, DSG, SSR, dan client-hanya routes.
• menggunakan Deferred Static Generation — DSG’s pertama-permintaan generation perilaku.
• menggunakan rendering sisi server — SSR’s permintaan-time output melalui Gatsby Functions.
• Client-hanya routes dan pengguna authentication — mengapa client-hanya routes jangan expose route-spesifik konten di awal HTML.
• menambahkan sebuah SEO component — recommended SEO-component pattern.
• Gatsby Head API reference — modern, dibangun-di cara untuk manage head tags.
• Introducing Gatsby Head API — mengapa ini replaced react-helmet.
• gatsby-plugin-sitemap — sitemap generation (production membangun hanya).
• gatsby-plugin-image — StaticImage/GatsbyImage, formats, CLS prevention.
• gatsby-plugin-robots-txt — environment-aware robots.txt.
• gatsby-plugin-canonical-urls — situs-wide tag canonical dan stripQueryString.
• gatsby-plugin-react-helmet — legacy metadata approach.
• gatsby-plugin-berikutnya-seo — pre-dibangun JSON-LD/schema components.
• React hydration di Gatsby — bagaimana static HTML becomes interactive.

Google

• memahami JavaScript SEO basics — crawl → render → indeks phases, dan mengapa pre-rendering helps.

Quotes dari sumber

pada—record statements itu apply secara langsung untuk Gatsby’s architecture. Gatsby adalah sebuah JavaScript SSG, so relevant utama sources adalah Google’s JavaScript-rendering guidance dan Google reps pada yang sama.

Google Search Central — JavaScript SEO basics

• “Server-side atau pre-rendering adalah masih a great idea karena it membuat Anda website lebih cepat untuk users dan crawlers, dan tidak all bots dapat jalankan JavaScript.” (terjemahan) “server-side atau pre-rendering adalah masih sebuah great idea karena ini membuat Anda situs web lebih cepat untuk pengguna dan crawler, dan tidak semua bot dapat jalankan JavaScript.” — case untuk persis apa Gatsby melakukan di bangun time.
• “The page may stay on this queue for a few seconds, but it can take longer than that.” (terjemahan) “ halaman dapat stay pada ini queue untuk sebuah sedikit seconds, tetapi ini dapat take lebih lama daripada itu.” — pada rendering queue itu pre-dirender HTML lets Anda skip.

Martin Splitt, Google (Developer Advocate)

• “Even though Googlebot dapat render JavaScript, we jangan ingin untuk rely pada itu.” (terjemahan) “bahkan though Googlebot dapat render JavaScript, kami jangan ingin untuk rely pada itu.” — principle behind preferring SSG/SSR. (Melalui SEJ / Botify coverage.)
• “A lot of people are still looking at view source. That is not what we use for indexing. We use the rendered HTML.” (terjemahan) “sebuah lot dari orang adalah masih looking di view sumber. itu adalah tidak apa kami gunakan untuk pengindeksan. kami gunakan dirender HTML.” — tepat alasan “DevTools vs view-source” (terjemahan) “DevTools vs view-sumber” Gatsby bug confuses orang. (Melalui SEJ.)
• “The median time in the render queue is only five seconds.” (terjemahan) “ median time di render queue adalah hanya five seconds.” — note ini adalah median; tail latency dapat menjadi far lebih lama. (BrightonSEO, melalui SEJ.)

John Mueller, Google (Penelusuran Advocate)

• “Server-side rendering adalah tidak a requirement di sana. We dapat render JavaScript-based halaman untuk itu paling part.” (terjemahan) “rendering sisi server adalah tidak sebuah requirement di sana. kami dapat render JavaScript-based halaman untuk paling bagian.” — context: SSR/SSG adalah best practice, tidak strictly diperlukan; Google akan eventually render CSR konten. (Melalui SEJ.)

Gatsby SEO checklist

sebuah lulus untuk konfirmasi sebuah Gatsby bangun adalah sebenarnya penelusuran-friendly:

• Utama konten muncul di View Sumber (mentah HTML), tidak hanya di DevTools — mengonfirmasi ini adalah pre-dirender, tidak client-side hanya.
• Metadata adalah set melalui Gatsby Head API (Head export dari halaman/ templates), tidak legacy react-helmet pada baru berfungsi.
• setiap halaman memiliki sebuah unique, bangun-time <title> dan deskripsi meta, dengan sebuah siteMetadata fallback.
• tag canonical adalah set satu cara hanya — Head API atau gatsby-plugin-canonical-urls, tidak pernah keduanya (menghindari double-canonical bug).
• stripQueryString: true adalah set so kueri-string variants jangan fragment canonicals.
• gatsby-plugin-sitemap adalah installed; Anda verified output dengan gatsby build && gatsby serve (ini tidak jalankan di dev).
• Anda submitted /sitemap-index.xml (tidak /sitemap.xml) di Search Console.
• Draft konten adalah filtered out di gatsby-node.js (GraphQL), so ini tidak pernah enters sitemap.
• Tidak stale/orphan files di src/pages itu auto-bangun ke routes.
• robots.txt blocks Netlify preview/branch deploys tetapi leaves production open.
• setiap GatsbyImage / StaticImage memiliki jelas teks alt.
• JS/CSS assets tidak blocked di robots.txt.
• Trailing-slash form adalah decided dan enforced di host/CDN (tidak hanya melalui <Link>).
• noindex decisions langsung di static HTML atau server headers, tidak React state.
• Core Web Vitals diperiksa — React bundle adalah mungkin drag; pertimbangkan sebagian hydration di mana viable.
• untuk setiap rendering path di gunakan (SSG, DSG, SSR, client-hanya), Anda diperiksa production mentah HTML, metadata, HTTP status, caching perilaku, dan failure/empty-state menangani — tidak hanya sebuah local gatsby build log.
• DSG, SSR, dan client-hanya routes setiap memiliki sebuah jelas, verified sitemap decision — none dari them adalah covered oleh yang sama assumption sebagai sebuah SSG halaman.

mental models

1. Crawlability vs performa adalah dua terpisah scorecards. Gatsby aces crawlability (HTML adalah pre-dirender) tetapi pays pada performa ( React bundle). jangan conflate them — “Gatsby adalah bad untuk SEO karena React” (terjemahan) “Gatsby adalah buruk untuk SEO karena React” mixes up dua. Anda konten indeks fine; Anda Core Web Vitals adalah di mana JS tax menampilkan up.

2. sebelumnya HTML ada, lebih sedikit dapat go wrong. SSG decides HTML di bangun time — safest poin. Gatsby’s default halaman adalah sebuah SSG, so ini adalah pada safe end dari rendering spectrum (client-hanya → SSR → DSG → SSG, roughly riskiest untuk safest untuk indexability). tetapi Gatsby adalah sebuah multi-mode kerangka kerja — sebuah diberikan halaman mungkin menjadi DSG, SSR, atau client-hanya alih-alih, setiap earning -nya own place pada itu spectrum. Know yang mode setiap route sebenarnya menggunakan sebelum assuming ini adalah pada safe end.

3. Head API oleh default; react-helmet hanya oleh inheritance. untuk apa pun baru, decision adalah dibuat: Gatsby Head API. react-helmet adalah sebuah hal Anda migrate off dari, tidak sesuatu Anda reach untuk. jika sebuah tag tidak menunjukkan di mentah HTML, pertama pertanyaan adalah “adalah ini di a Head export, atau stuck di a component?” (terjemahan) “apakah ini berada di export Head, atau tersangkut di sebuah component?”

4. Pick persis satu canonical mechanism. Head API canonical atau gatsby-plugin-canonical-urls — tidak pernah keduanya. Dua mechanisms = dua tag canonical = double-canonical bug. sama discipline untuk apa pun itu menulis untuk <head>: satu sumber kebenaran per tag.

5. Gatsby membangun semuanya ini menemukan — so filtering adalah Anda job. Drafts, stale src/pages files, kueri-string variants: Gatsby tidak editorialize. jika Anda tidak exclude ini (di gatsby-node.js, di canonical config, di sitemap options), ini ships dan mendapatkan di-crawl.

6. baru project vs existing situs perubahan maintenance calculus. Existing Gatsby situs: pertahankan ini, ini berfungsi. baru project: slowed maintenance dan ecosystem-decay risk adalah nyata inputs — weigh Astro/Berikutnya.js sebelum committing.

Gatsby SEO — cheat sheet

Metadata: yang approach

Plugins di sebuah glance

Fast facts

• Sitemap file adalah /sitemap-index.xml, tidak /sitemap.xml.
• Sitemap tidak generate di gatsby develop — gunakan gatsby build && gatsby serve.
• Google ignores <priority> / <changefreq> — accurate <lastmod> hanya.
• React bundle ≈ 200KB+ per halaman (penuh hydration); sebuah CWV cost, tidak sebuah crawl satu.
• Astro ships ~5KB oleh perbandingan (islands hanya).
• gatsby develop ≠ production: sitemap, robots, dan beberapa optimizations differ.
• Netlify acquired Gatsby Feb 2023; maintenance memiliki slowed (Tidak React 19 namun).

Dua-line SEO Head export

export const Head = ({ data, location }) => (
  <>
    <title>{data.post.title}</title>
    <link rel="canonical" href={`https://example.com${location.pathname}`} />
  </>
)

periksa Gatsby’s production artifacts

Jalankan ini setelah gatsby build, tidak terhadap gatsby develop:

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

ini catches missing atau duplicate output dari overlapping Head API/plugin mechanisms. Review nilai dan sitemap membership secara terpisah.

alat untuk Gatsby SEO

• Gatsby Head API (dibangun-di, v4.19+) — Tidak-dependency cara untuk manage <title>, meta, canonical, dan JSON-LD per halaman/template.
• gatsby-plugin-sitemap — generates sitemap-index.xml pada production membangun.
• gatsby-plugin-image — StaticImage/GatsbyImage, responsive sizes, WebP/AVIF, lazy memuat, CLS-preventing placeholders.
• gatsby-plugin-canonical-urls — situs-wide tag canonical dengan stripQueryString.
• gatsby-plugin-robots-txt — environment-aware robots.txt (block preview deploys).
• gatsby-plugin-next-seo — pre-dibangun JSON-LD/schema components jika Anda tidak ingin untuk hand-roll data terstruktur.
• view-source: / GSC pemeriksaan URL — ground truth untuk “adalah my konten dan metadata di itu mentah HTML?” (terjemahan) “adalah my konten dan metadata di mentah HTML?” (tidak DevTools, yang menampilkan hydrated DOM).
• Lighthouse / PageSpeed Insights — untuk see Core Web Vitals cost dari React bundle dan apakah sebagian hydration adalah worth pursuing.
• gatsby build && gatsby serve — satu-satunya cara untuk test sitemap, robots.txt, dan production-hanya optimizations locally.

Apa tidak untuk melakukan pada sebuah Gatsby situs

Concrete mistakes orang sebenarnya membuat membangun dan shipping Gatsby situs — prevention, tidak diagnosis.

Mempertahankan gatsby-plugin-react-helmet pada baru berfungsi

** mistake:** reaching untuk react-helmet oleh habit pada baru halaman atau sebuah baru project, karena itu’s apa older Gatsby tutorials masih tampilkan.

Mengapa ini adalah wrong: react-helmet memiliki known issues dengan React Hooks dan concurrent rendering, plus sebuah background-tab judul bug Anda memiliki untuk patch dengan defer={false}. ini adalah juga sebuah ketiga-party bundle dan Provider wrapper Anda tidak perlu anymore.

Apa untuk melakukan alih-alih: gunakan dibangun-di Gatsby Head API (v4.19+) — sebuah named Head export dari halaman atau template file. Reserve react-helmet untuk existing code Anda haven’t migrated namun.

Berjalan dua canonical mechanisms di setelah

** mistake:** setting sebuah canonical melalui gatsby-plugin-canonical-urls dan sebuah react-helmet (atau Head API) tag canonical pada yang sama halaman.

Mengapa ini adalah wrong: keduanya fire, dan halaman ships dua <link rel="canonical"> tags — sebuah well-known Gatsby failure mode itu muddies yang URL Anda sebenarnya yang dimaksud sebagai canonical.

Apa untuk melakukan alih-alih: pick persis satu mechanism situs-wide ( Head API, atau plugin dengan stripQueryString: true) dan drop lainnya entirely.

Filtering drafts di sebuah React component alih-alih di bangun time

** mistake:** hiding unpublished konten dengan sebuah client-side periksa (e.g. if (!post.published) return null) dan assuming itu mempertahankan ini out dari penelusuran.

Mengapa ini adalah wrong: Gatsby membangun semuanya ini menemukan ke static HTML sebelum itu component ever berjalan di browser — draft halaman adalah sudah dibangun dan sudah listed di sitemap oleh time Anda React periksa executes.

Apa untuk melakukan alih-alih: filter drafts di gatsby-node.js dengan sebuah GraphQL kueri (e.g. excluding entries tanpa sebuah publish date) so mereka tidak pernah mendapatkan dibangun atau listed di pertama place.

Shipping GatsbyImage tanpa teks alt

** mistake:** trusting gatsby-plugin-image untuk tangani image SEO end-untuk-end karena ini auto-generates sizes, formats, dan placeholders.

Mengapa ini adalah wrong: plugin optimizes pengiriman — ini melakukan tidak tulis teks alt. Missing teks alt pada GatsbyImage/StaticImage adalah satu dari paling umum Gatsby SEO oversights precisely karena semuanya else tentang image looks handled.

Apa untuk melakukan alih-alih: treat teks alt sebagai sebuah diperlukan field pada setiap image component, setiap time — ini adalah satu piece dari image SEO Gatsby leaves entirely untuk Anda.

Assuming gatsby develop menampilkan Anda production SEO output

** mistake:** memeriksa sitemap, robots.txt, atau noindex perilaku di gatsby develop dan concluding ini adalah rusak karena tidak ada apa pun menampilkan up.

Mengapa ini adalah wrong: gatsby-plugin-sitemap dan several lainnya bangun-time behaviors sekadar jangan jalankan di development mode — Anda’re tidak looking di sebuah bug, Anda’re looking di dev mode melakukan apa dev mode melakukan.

Apa untuk melakukan alih-alih: jalankan gatsby build && gatsby serve sebelum drawing apa pun conclusion tentang sitemap, robots.txt, atau production-hanya optimizations.

Letting <Link> client-routing hide trailing-slash inconsistency

** mistake:** assuming Anda server-side trailing-slash redirect aturan apply di mana-mana, including di-app navigation.

Mengapa ini adalah wrong: Gatsby’s <Link> component menggunakan client-side History API routing, yang bypasses server-side 301 redirects Anda’d biasanya rely pada untuk normalize trailing slashes — so tautan internal dapat diam-diam sajikan “wrong” (terjemahan) “wrong” form tanpa ever hitting Anda redirect aturan.

Apa untuk melakukan alih-alih: decide pada satu trailing-slash form, enforce ini di host/CDN tingkat, dan pastikan canonicals adalah consistent dengan ini regardless dari bagaimana sebuah diberikan halaman adalah reached.

umum Gatsby SEO issues

Symptom-pertama lookup untuk masalah Anda’re actively seeing pada sebuah Gatsby situs — mulai dari apa Anda observe.

Meta tags tampilkan up di DevTools tetapi adalah missing dari view-sumber

Symptom: Anda inspect halaman di Chrome DevTools dan judul/deskripsi meta look correct, tetapi view-source: (atau sebuah mentah curl) menampilkan them missing atau generic.

mungkin penyebab: SEO component adalah rendering client-side — ini adalah digunakan sebagai sebuah regular component alih-alih sebagai (atau di dalam) halaman’s Head export, so ini hanya muncul di DOM setelah hydration.

Perbaiki: move tags ke halaman atau template’s named Head export. Konfirmasi dengan view-source: atau curl -s <url> — tidak DevTools, yang menampilkan hydrated DOM, tidak apa sebuah crawler’s mentah fetch sees.

sitemap adalah missing atau empty

Symptom: Anda visit /sitemap-index.xml (atau periksa Search Console) dan mendapatkan tidak ada apa pun, atau sebuah incomplete list.

mungkin penyebab: hampir selalu itu Anda tested di gatsby develop, di mana gatsby-plugin-sitemap tidak jalankan di semua. Lebih sedikit commonly, plugin tidak installed/configured di gatsby-config.js.

Perbaiki: jalankan gatsby build && gatsby serve dan periksa again. jika ini adalah masih missing, verify plugin adalah present di gatsby-config.js. Konfirmasi oleh requesting /sitemap-index.xml secara langsung — remember ini adalah indeks URL, tidak /sitemap.xml.

sebuah halaman memiliki dua tag canonical

Symptom: viewing sumber (atau berjalan sebuah schema/tag audit) menampilkan dua <link rel="canonical"> elements pada yang sama halaman.

mungkin penyebab: gatsby-plugin-canonical-urls dan sebuah react-helmet (atau Head API) canonical adalah keduanya firing untuk yang sama halaman.

Perbaiki: hapus satu mechanism so hanya sebuah single sumber sets canonical. Konfirmasi oleh viewing sumber again dan memeriksa dengan Patrick’s tag canonical Checker itu persis satu canonical resolves.

Draft atau orphan halaman muncul di sitemap

Symptom: sitemap (atau Search Console coverage) lists URLs Anda tidak pernah dimaksudkan untuk publish — draft posts, atau stale files di bawah src/pages.

mungkin penyebab: Gatsby auto-membangun dan auto-routes semuanya ini menemukan — sebuah unpublished GraphQL entry itu tidak filtered, atau sebuah leftover file di src/pages, mendapatkan dibangun ke sebuah nyata static halaman dan listed like apa pun lainnya.

Perbaiki: filter drafts di gatsby-node.js dengan sebuah GraphQL kueri (e.g. excluding entries tanpa sebuah publish date) so mereka’re tidak pernah dibangun. untuk orphan src/pages files, delete stale file — filtering di sebuah component adalah too late, since halaman adalah sudah dibangun oleh lalu.

kueri-string variants dari sebuah halaman adalah getting terindeks sebagai duplicates

Symptom: Search Console menampilkan near-duplicate URLs like /blog dan /blog?tag=foo keduanya terindeks, atau flagged sebagai duplicate konten.

mungkin penyebab: gatsby-plugin-canonical-urls adalah berjalan tanpa stripQueryString: true, so kueri-string variants adalah canonicalized untuk themselves alih-alih bersih URL.

Perbaiki: set stripQueryString: true di plugin config, rebuild, dan re-periksa tag canonical pada sebuah kueri-string URL — ini seharusnya now poin untuk bersih path.

sebuah halaman Anda yang dimaksud untuk noindex adalah masih menunjukkan up di penelusuran

Symptom: Anda set sebuah halaman untuk noindex, tetapi ini adalah masih terindeks weeks kemudian, atau Search Console menampilkan ini sebagai terindeks despite tag.

mungkin penyebab: noindex directive adalah toggled melalui React state alih-alih baked ke static HTML atau server headers — Google dapat memiliki sudah processed mentah HTML (tanpa noindex) dan, ketika ini melakukan see noindex hanya di sebuah client-dirender lulus, dapat skip rendering halaman again entirely.

Perbaiki: move noindex decision ke static HTML (melalui Head export di bangun time) atau sebuah header HTTP, tidak conditional React logic. Recheck dengan view-source: untuk konfirmasi tag adalah present di mentah respons.

Uji pemahaman Anda: Gatsby SEO

Five quick pertanyaan pada optimizing sebuah Gatsby situs untuk penelusuran. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My related writing

• JavaScript SEO: sebuah Definitive Guide — rendering, DOM parity, dan mengapa static/prerendered output (like Gatsby’s) adalah rendah-risk end dari spectrum.
• Beginner’s Guide untuk SEO teknis — di mana rendering architecture fits di bigger picture.

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat. (My standing disclaimer applies: “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 sekitar industri

• Gatsby Head API reference — utama sumber untuk modern metadata approach.
• Introducing Gatsby Head API — Gatsby’s own explanation dari mengapa ini replaced react-helmet.
• Google Search Central — JavaScript SEO basics — crawl → render → indeks phases Gatsby’s bangun lets Anda skip untuk konten.
• Gatsby adalah joining Netlify — 2023 acquisition announcement, untuk context pada maintenance.
• Netlify acquires frontend platform Gatsby (TechCrunch) — independent coverage dari acquisition.
• “Adalah GatsbyJS abandoned?” (terjemahan) “adalah GatsbyJS abandoned?” discussion #39062 — community utas pada Gatsby’s saat ini maintenance state.
• SEO perbandingan dari Gatsby vs Berikutnya vs Astro (Vaihe) — JS-payload dan crawl-budget perbandingan.
• Understanding sebagian hydration di Gatsby 5 (LogRocket) — CWV-relevant hydration improvement dan -nya limits.

Log perubahan