Türkçe çeviri: Gatsby SEO

TL;DR — tarafından default, Gatsby builds sizin sayfalar -e finished HTML önce anyone visits (bu mode dır called SSG), bu nedenle ne zaman Google shows up, sizin bençerik dır zaten in sayfa — no waiting bençin JavaScript. şu verir Gatsby bir güçlü SEO head başla. Gatsby ayrıca sahiptir bir few diğer rendering options bençin sayfalar şu ihtiyaç duy -e generate later veya kullan per-istek data — worth knowing eğer sizin site kullanır them. catch: o hâlâ sends bir big React bundle -e browser, hangi -ebilir slow sizin sayfa down, ve siz hâlâ sahip -e ayarla up meta tags, sitemaps, canonicals, ve image alt text yourself.

ne Gatsby dır

Gatsby dır bir web sitesi framework oluşturulmuş on React. en çok React apps oluştur sayfa in sizin browser sonra JavaScript loads — bu da bir sorun bençin SEO, çünkü bir arama motoru fetching sayfa ilk sees bir near-empty shell. Gatsby flips şu yaklaşık tarafından default. -dığınızda çalıştır gatsby build, o turns en çok sayfalar -e bir complete HTML file ahead of time. bu nedenle ne zaman Google, Bing, veya bir reader istekler bir of şunlar sayfalar, bençerik dır yapğru orada in 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

şu default mode yapar Gatsby bir static site generator (SSG), ve o’s neden Gatsby dır generally good bençin SEO out of box — much daha iyi -den bir plain React app. Gatsby ayrıca lets individual sayfalar opt -e three diğer rendering modes — generating on ilk istek, generating per-istek on bir server, veya rendering entirely in browser — hangi Advanced tab kapsar, since her bir changes ne bir crawler aslında sees.

neden kişiler worry hakkında Gatsby ve SEO (ve neden onlar mostly shouldn’t)

en çok yaygın myth dır “Gatsby is bad for SEO because it uses React.” şu’s false. React part runs sonra sayfa dır zaten oluşturulmuş ve delivered — o sadece yapar sayfa interactive. text, bağlantılar, ve headings bir arama motoru cares hakkında dır zaten in HTML -den başla.

bu nedenle Gatsby clears biggest hurdle automatically. ne o yapmaz yap dır tümü of SEO bençin siz.

ne siz hâlâ sahip -e ayarla up

bir Gatsby site dır değil automatically optimized. siz hâlâ ihtiyaç duy -e:

• ekle title tags ve meta descriptions -e her sayfa ( modern way dır oluşturulmuş-in 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 bir sitemap ( gatsby-plugin-sitemap plugin).
• ayarla canonical URLs bu nedenle yinelenen sürümler of bir sayfa yapmayın compete.
• yaz alt text bençin images — Gatsby’s image araç resizes ve optimizes images automatically, ama o yapar değil yaz alt text bençin siz.

bir thing şu surprises kişiler

Gatsby hâlâ ships full React runtime (~200KB+) -e browser on her sayfa. o yapmaz hurt whether siz al dizine eklenmiş — HTML dır zaten complete — ama o -ebilir slow sizin sayfa down, hangi affects temel Web Vitals (Google’s sayfa-experience speed metrikler). Lighter frameworks like Astro send almost no JavaScript tarafından comparison.

bir daha thing -e know -erseniz’re choosing Gatsby today: Netlify acquired Gatsby in 2023, ve active development sahiptir slowed bir lot since. bençin bir existing Gatsby site şu’s fine; bençin bir brand-yeni project, o’s worth weighing.

iste teknik sürüm — Head API vs eski react-helmet plugin, sitemap ve canonical gotchas, React-bundle CWV trade-off, ve honest take on Gatsby’s future? Switch -e Advanced tab.

TL;DR — Gatsby sahiptir four rendering options — SSG ( default), DSG, SSR, ve client-yalnızca routes — ve onlar yapmayın tümü put bençerik in raw HTML aynı way. SSG pre-renders -e static HTML at oluştur time (gatsby build), bu nedenle bençerik dır in raw HTML önce ilk crawler istek — no Web Rendering Service, no rendering queue. DSG defers generation -e ilk istek; SSR generates per istek on bir server; client-yalnızca routes render nothing route-specific until browser runs JavaScript. Whichever path serves bir sayfa, Gatsby hydrates bir full React bundle (~200KB+) on client, bu da bir temel Web Vitals maliyet, değil bir crawlability bir. güncel metadata approach dır oluşturulmuş-in Gatsby Head API (v4.19+), hangi çalışır genelinde tümü four rendering paths ve replaces gatsby-plugin-react-helmet. recurring başarısızlık modes dır double canonical tags (Head API + react-helmet her ikisi firing), draft/orphan sayfalar leaking -e sitemaps, production-yalnızca sitemap gotcha, missing alt text on GatsbyImage, trailing-slash inconsistency, ve DSG/SSR/client-yalnızca routes şu never aldı bir production kontrol et. ve elephant in room: since Netlify’s 2023 acquisition, Gatsby’s maintenance sahiptir slowed sharply.

Gatsby’s four rendering options — ve neden onlar önem taşır bençin SEO

Google süreçler JavaScript sayfalar in three phases — tarama, o hâlde rendering, o hâlde dizine ekleme — ve rendering olur in bir separate geç -den bir queue kullanarak headless Chromium. Google’ın kendi rehberlik dır blunt hakkında neden siz shouldn’t lean on şu: “Server-side veya pre-rendering dır hâlâ bir great idea çünkü o yapar sizin web sitesi faster bençin kullanıcılar ve crawlers, ve değil tümü bots -ebilir çalıştır JavaScript.”

bir Gatsby site değildir universally oluştur-time static HTML — Gatsby supports four distinct rendering paths, seçilen per sayfa veya 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 site Generation) — default. gatsby build emits fully rendered static HTML -e /public bençin sayfa. Googlebot’s ilk-wave raw-HTML fetch zaten contains complete bençerik — text, bağlantılar, metadata. bu safe, low-risk path, ve o’s ne en çok Gatsby sayfalar kullan.
• DSG (Deferred Static Generation). Generation dır deferred until sayfa’s ilk istek yerine happening bençin her sayfa at oluştur time — yararlı bençin siteler ile huge numbers of low-trafik sayfalar nerede bir full oluştur -irdi olmak slow. oluştur alone yapmaz söyle siz ne bir crawler sees; sayfa’s HTML yapmaz var ol until something istekler o, bu nedenle ilk-istek ve cached behavior ihtiyaç duy onların kendi kontrol et, değil sadece bir oluştur log.
• SSR (Server-Side Rendering). sayfa dır rendered per istek, kullanarak istek-time data, via Gatsby Functions. çünkü o runs at istek time, SSR sayfalar ihtiyaç duy production kontroller bir oluştur-time sayfa yapmaz: response status, caching headers, timeout behavior, ve ne bir crawler sees on bir empty veya error response — none of bu visible -den bir successful local oluştur.
• Client-yalnızca routes. bunlar render entirely in browser ve yapmayın al route-specific bençerik in initial HTML — aynı profile olarak bir plain client-side React app. yapmayın assume Google (veya herhangi bir crawler) sees anything sayfa-specific burada until JavaScript runs; ele al bunlar olarak JS-dependent tarafından design, bu da fine bençin gated/authenticated bençerik ama yanlış bençin anything siz iste dizine eklenmiş ile bençerik.

React hydration (ReactDOMClient.hydrateRoot()) olur client-side on top of whichever of bunlar produced HTML, purely -e ekle interactivity — şu part dır aynı regardless of rendering path, ve dır bir separate concern -den hangi path generated sayfa (daha on hydration maliyet below).

Contrast SSG/DSG/SSR ile bir pure client-side React app, hangi serves bir empty <div id="root"> ve depends on browser (veya renderer) -e oluştur sayfa. en çok Gatsby sayfalar ship meaningful HTML tarafından default — şu’s indexability win, ve o’s gerçek, ama o’s bir per-sayfa property, değil bir framework guarantee. Rendering options ve image tooling yapmayın guarantee temel Web Vitals, dizine ekleme, veya sıralamalar on onların kendi; verify gerçek production output bençin whichever path bir route kullanır.

catch ile SSG/DSG/SSR alike dır bir performance bir, değil bir crawlability bir: Gatsby ships full React runtime -e her sayfa ve re-hydrates o. daha on şu, ve Astro comparison, below.

Gatsby Head API ve gatsby-plugin-react-helmet karşılaştırması

bu tek en çok önemli “are you doing it the modern way?” soru in Gatsby SEO.

** legacy approach — gatsby-plugin-react-helmet.** bençin years, standard way -e ayarla <title>, meta description, ve diğer head tags idi react-helmet library plus bu plugin. plugin’s job idi -e ver react-helmet SSR support — olmadan o, sizin title/meta tags -irdi yalnızca görün sonra JS execution, değil in raw HTML, hangi defeats benşaret et. o çalışır, ama o sahiptir known sorunlar ile React Hooks ve concurrent rendering, plus bir background-tab title bug siz patch ile defer={false}.

** modern approach — Gatsby Head API (v4.19+).** Gatsby now sahiptir bir oluşturulmuş-in way -e ekle head elements: bir named Head export -den herhangi bir sayfa veya 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="..." />
  </>
)

o receives yararlı props — location.pathname, params, data (-den sayfa’s GraphQL sorgu), ve pageContext — ve o deduplicates tags şu share bir id prop (son bir wins), gerçben çalışbir two farklı head-tag mechanisms at once (Head API plus bir leftover react-helmet çbirğrı) -ebilir hâlâ conflict hatta ile deduplication. o çalışır yalnızca in sayfa files ve templates, değil in arbitrary components. advantages üzerinde react-helmet: no üçüncü-party bundle, no Provider wrapper, deterministic tag sıra ile React 18 streaming. kullan Head API bençin tümü yeni projects, ve plan bir migration bençin existing ones.

Head API çalışır aynı way genelinde tümü four rendering paths — SSG, DSG, SSR, ve client-yalnızca routes tümü support bir Head export. ne differs dır ne zaman onun output lands in HTML bir crawler -ebilir fetch: on SSG o’s baked in at oluştur time; on DSG ve SSR o’s generated at ilk-istek veya per-istek time; on bir client-yalnızca route o değildir in initial HTML at tümü. yapmayın assume “I added a Head export” dır eşdeğeri -e “this is in the raw HTML for every route” — kontrol et gerçek production output (view-source: veya curl) bençin whichever path her route kullanır, değil sadece bir temsilci sayfa.

** “meta tags in DevTools but not in source” bug.** bir classic Gatsby SEO symptom: sizin title/meta tags göster up in Chrome DevTools ama dır missing -den view-source:. neden ol dır şu DevTools shows hydrated DOM (sonra JS runs), -iken view-kaynak shows raw HTML. eğer sizin tags yalnızca görün in DevTools, sizin SEO component dır rendering client-side yerine olma baked -e Gatsby’s static output — genellikle çünkü o’s kullanılan olarak bir regular component yerine olarak (veya bençinde) sayfa’s Head export. her zaman verify in raw HTML, değil DevTools.

Wiring up bir SEO component ( GraphQL data layer)

Gatsby’s data layer dır GraphQL, ve o’s nasıl siz feed metadata -e sizin sayfalar.

• useStaticQuery pulls global defaults -den siteMetadata (title, description, siteUrl) defined in gatsby-config.js.
• sayfa-level GraphQL sorgular geç bir data prop straight -e Head export — no extra wiring gerekli.
• standard pattern dır prop || siteMetadata fallback: kullan per-sayfa değer eğer o vardır, otherwise site default.

bir Head export şu takes sayfa data görünür like:

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

Sitemaps: gatsby-plugin-sitemap (ve onun traps)

Install gatsby-plugin-sitemap ve configure o in gatsby-config.js. bir few things trip kişiler up:

• o generates sitemap-index.xml, değil /sitemap.xml. Submit dizin URL in Google arama Console — yapmayın submit /sitemap.xml ve expect o -e resolve.
• o yalnızca runs in production builds. o yapar nothing in gatsby develop. -e test et o, çalıştır gatsby build && gatsby serve. kişiler file “my sitemap is missing” raporlar şu dır gerçekten sadece “I never ran a production build.”
• createLinkInHead: true tarafından default adds sitemap reference -e HTML head automatically.
• o her zaman excludes /dev-404-page, /404, ve /offline-plugin-app-shell-fallback.
• <priority> ve <changefreq> dır ignored tarafından Google — plugin docs söyle bu nedenle yapğrudan. Focus on bir accurate <lastmod> instead.
• entryLimit defaults -e 45 000 URLs per file.

Excluding drafts dır sizin job. Gatsby builds everything o bulur, bu nedenle draft bençerik sails straight -e sitemap unless siz filter o. yap şu in gatsby-node.js ile bir GraphQL filter (e.g. excluding entries olmadan bir publish date), değil tarafından hiding o in bir React component — tarafından o hâlde o’s zaten oluşturulmuş ve listed.

DSG, SSR, ve client-yalnızca routes ihtiyaç duy bir explicit sitemap decision. gatsby-plugin-sitemap reflects ne o -ebilir see at oluştur time. bir SSG sayfa dır straightforward — o vardır olarak bir static file, bu nedenle o’s naturally sitemap-eligible. bir DSG sayfa’s HTML yapmaz var ol henüz at oluştur time (o generates on ilk istek), bir SSR sayfa never sahiptir düzeltilmiş HTML at tümü, ve bir client-yalnızca route sahiptir no route-specific bençerik -e dizin in ilk place. yapmayın assume herhangi bir of bunlar dır in sitemap (veya -meli olmak) sadece çünkü route vardır — decide, sayfa tarafından sayfa, whether o belongs, ve verify generated sitemap-index.xml aslında reflects şu decision yerine bir oluştur-time guess.

robots.txt: gatsby-plugin-robots-txt eklentisi

gatsby-plugin-robots-txt generates robots.txt at oluştur time. yararlı detail bençin SEO dır environment awareness: o reads process.env.GATSBY_ACTIVE_ENV o hâlde process.env.NODE_ENV, bu nedenle -ebilirsiniz sun farklı kurallar per environment. classic kullan dır blocking crawlers on Netlify preview/branch deploys bu nedenle sizin staging URLs yapmayın al accidentally dizine eklenmiş, -iken leaving production open.

Canonical URLs (ve double-canonical bug)

İki uygulanabilir yaklaşım:

1. gatsby-plugin-canonical-urls adds bir <link rel="canonical"> -e her sayfa. ayarla stripQueryString: true bu nedenle /blog?tag=foo ve /blog yapmayın al ele alınır olarak separate canonicalized sayfalar — recommended bençin en çok siteler.
2. ** Head API**, ayarlama canonicals yourself -den location.pathname:

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

** double canonical bug.** bu bir known, easy—e-hit sorun: -erseniz kullan gatsby-plugin-canonical-urls ve bir react-helmet canonical etiketi at aynı time, siz emit two <link rel="canonical"> tags. seç bir mechanism. (-erseniz’re on react-helmet, gatsby-plugin-react-helmet-canonical-urls dır helmet-aware option; on Head API, ayarla canonical orada ve drop plugin.)

Trailing slashes. Gatsby sayfalar -ebilir olmak reachable ile ve olmadan bir trailing slash, ve Gatsby’s <Link> component kullanır client-side History API routing — hangi bypasses server-side 301 yönlendirmeler siz’d normally kullan -e normalize trailing slashes. Decide on bir form, enforce o at ana makine/CDN level, ve koru canonicals consistent ile o.

Görsel SEO: gatsby-plugin-image

gatsby-plugin-image dır genuinely bir of Gatsby’s strengths. Two components:

• StaticImage — bençin images whose path dır known ve hardcoded at oluştur time.
• GatsbyImage — bençin dynamic images coming -den GraphQL.

ne yaptığı automatically: birden çok sizes, WebP/AVIF formats, lazy loading, ve breakpoints (750/1080/1366/1920px). o ayrıca generates placeholders (blurred, dominant color, veya traced SVG) şu reserve space ve prevent Cumulative Layout Shift — bir temel Web Vitals metric. çünkü dimensions dır ayarla, siz kaçın CLS, ve modern formats plus lazy loading yardım et LCP.

** bir thing o yapmaz yap dır yaz alt text.** şu’s on siz, her time — missing alt text on GatsbyImage dır bir of en çok yaygın Gatsby SEO oversights. (Migrating -den eski gatsby-image package? orada’s bir codemod: npx gatsby-codemods gatsby-plugin-image.)

Structured data (JSON-LD)

Google’s tercih edilen structured-data format dır JSON-LD, ve temiz way -e ekle o in modern Gatsby dır via Head API ile bir 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-oluşturulmuş JSON-LD components -erseniz’d rather değil hand-roll them. bir frequent confusion -e clear up: gatsby-plugin-manifest dır değil bir structured-data plugin — o generates PWA web app manifest (icons, theme color), nothing -e yap ile schema.

React bundle ve temel Web Vitals

burada’s Gatsby’s gerçek weakness relative -e zero-JS generators.

• Full hydration ( Gatsby 1–4 default) hydrates entire React tree ve ships bir 200KB+ React runtime -e her sayfa. HTML dır pre-rendered, bu nedenle bu yapmaz hurt crawlability — ama o absolutely affects load speed ve CWV.
• Partial hydration (Gatsby 5, experimental) hydrates yalnızca components marked "use client" ve leaves rest olarak static HTML, cutting JS shipped ve yapğrudan improving TTI ve CWV. limitations dır gerçek: production builds yalnızca, hâlâ beta, ve incompatible ile emotion, styled-components, ve gatsby-plugin-offline.

takeaway: Gatsby’s JS payload dır bir performance sorun, değil bir indexability bir. Googlebot hâlâ renders JS -e assess sayfa-experience sinyaller, bu nedenle bundle -ebilir maliyet siz on CWV hatta gerçben sizin bençerik indexes fine.

Gatsby vs Astro bençin SEO

-erseniz’re choosing bir static framework today, bu comparison şu önem taşır en çok bençin SEO.

her ikisi pre-render indexable HTML — şu’s bir wash. difference dır JS tax: Astro’s islands ship bir fraction of JavaScript, hangi bir Vaihe comparison frames olarak “Reduced JavaScript execution conserves tarama bütçesi ve accelerates sayfa scanning.” (bir historical caveat on diğer side: Astro’s image handling lacked automatic width/height at time of şu comparison, hangi produced Lighthouse warnings — kontrol et güncel Astro docs, olarak o -ebilir olmak resolved.)

bençin context on nasıl whole field compares, see static site generators hub.

honest part: Gatsby’s maintenance trajectory

ben won’t sugarcoat bu, ve ben won’t catastrophize o either.

Netlify acquired Gatsby Inc. in February 2023. Gatsby Cloud idi sunset ve customers idi moved -e Netlify; Netlify stated acquisition -irdi “değil impact Gatsby JS.” Since o hâlde, activity sahiptir slowed markedly. bir widely-okuyun community GitHub discussion (#39062) argues Gatsby dır effectively abandoned — minimal commits, no React 19 support, bir 2024 roadmap şu wasn’t delivered, ve telemetry service shut down. Maintainers sahip framed güncel state olarak security düzeltmeler, limited dependency updates, ve low-hanging-fruit bug düzeltmeler.

ne şu anlamına gelir bençin SEO ekipler. bençin bir existing Gatsby site, none of bu bir emergency — o builds, o indexes, o çalışır. risk dır ecosystem decay üzerinde time: SEO depends on plugins (gatsby-plugin-sitemap, image, canonical-urls), ve aging plugins (e.g. gatsby-source-shopify facing API deprecation) -ebilir eventually break in ways şu quietly degrade dizine ekleme. bençin bir yeni project, weigh şu seriously — frameworks kişiler dır migrating -e dır Astro ve sonraki.js.

Production checklist: verify her rendering path

bir local gatsby develop session veya hatta bir temiz gatsby build log yapmaz prove ne bir crawler aslında receives. çünkü SSG, DSG, SSR, ve client-yalnızca routes her generate HTML differently, kontrol et production behavior per path yerine assuming bir temsilci sayfa kapsar tümü of them:

• Raw HTML bençerik. her biri bençin rendering path in kullan, fetch bir gerçek production URL ile curl -s <url> veya view-source: — değil DevTools — ve yapğrula bençerik, title, ve meta tags bir crawler -irdi see dır aslında orada.
• Metadata (Head export output). yapğrula Head export’s tags land in şu raw HTML bençin path in soru. bu nerede DSG/SSR differ en çok -den SSG: tags var ol in sizin kaynak either way, ama yalnızca bir production fetch proves onlar yapılmış o -e response.
• HTTP status. kontrol et response status code on production, especially bençin SSR ve DSG routes — bir sayfa şu renders fine locally -ebilir 500 in production on ilk istek veya altında load in ways bir oluştur never surfaces.
• Caching behavior. SSG output dır bir static file ile predictable caching. DSG caches sonra ilk istek — yapğrula ikinci istek dır fast ve correct, değil sadece ilk. SSR responses depend on sizin caching headers ve hosting layer; verify stale veya per-istek bençerik değildir sunulan -e yanlış ziyaretçben.
• başarısızlık ve empty-state behavior. bençin SSR ve DSG sayfalar backed tarafından istek-time veya ilk-istek data, kontrol et ne bir crawler sees eğer şu data fetch fails veya döndürür empty — bir unhandled error state değildir aynı sayfa siz tested locally ile good data.
• Sitemap generation ve exclusions. Re-yapğrula bu yalnızca olur on bir production oluştur (gatsby build && gatsby serve, never gatsby develop), ve şu exclusions siz expect — drafts, client-yalnızca routes, anything siz decided shouldn’t olmak listed — dır aslında absent -den generated sitemap-index.xml, değil sadece absent -den sizin intent.

None of bu optional per rendering path — bir working gatsby build proves SSG output, değil DSG, SSR, veya client-yalnızca behavior.

yaygın Gatsby SEO mistakes

1. hâlâ kullanarak gatsby-plugin-react-helmet — legacy; migrate -e Head API.
2. Meta tags in DevTools ama değil in sayfa kaynak — SEO component dır rendering client-side; kontrol et view-source:, değil DevTools.
3. Draft bençerik in sitemaps — filter drafts in gatsby-node.js ile GraphQL, değil in bir React component.
4. Orphan sayfalar -den src/pages — Gatsby auto-routes everything orada; stale files oluştur ve land in sitemap.
5. Double canonical tags — gatsby-plugin-canonical-urls + react-helmet her ikisi firing.
6. Trailing-slash inconsistency — <Link> client-routing bypasses server-side trailing-slash yönlendirmeler.
7. değil stripping sorgu strings -den canonicals — ayarla stripQueryString: true.
8. Alt text omitted on GatsbyImage — o değildir auto-generated.
9. Submitting /sitemap.xml — gerçek file dır /sitemap-index.xml.
10. Testing sitemap in gatsby develop — o yalnızca generates on gatsby build.
11. Noindex toggled tarafından React state — Google -ebilir sahip zaten processed raw HTML; ve ne zaman o sees noindex in raw HTML o -ebilir skip rendering entirely. koru noindex decisions in static HTML veya server headers.

bençin JavaScript-rendering fundamentals behind tümü of bu, see parent JavaScript SEO hub.

AI özet

bir condensed take on Advanced sürüm:

• Gatsby sahiptir four rendering paths — SSG, DSG, SSR, ve client-yalnızca routes. SSG dır default: gatsby build pre-renders sayfa -e static HTML, bu nedenle crawlers al full bençerik on ilk fetch — no rendering queue, ve strongest indexability baseline. DSG defers generation -e ilk istek; SSR generates per istek; client-yalnızca routes render nothing route-specific until JavaScript runs in browser (aynı profile olarak bir plain client-side React app). Verify production HTML per path — bir successful gatsby build yalnızca proves SSG behavior.
• ** React-bundle maliyet dır performance, değil crawlability, ve uygulanır regardless of rendering path.** Gatsby hydrates bir full React runtime (~200KB+) on client, hangi hits temel Web Vitals. zero-JS generators (Hugo, Jekyll, Eleventy) yapmayın sahip bu; Astro ships ~5KB via islands.
• kullan Gatsby Head API (v4.19+), bir named Head export -den sayfa/template files, bençin titles/meta/canonical/JSON-LD. o çalışır genelinde tümü four rendering paths ve replaces legacy gatsby-plugin-react-helmet. o çalışır yalnızca in sayfalar/templates ve dedupes tarafından id.
• Production checklist per path: raw HTML bençerik, Head-export metadata, HTTP status, caching behavior, ve başarısızlık/empty-state handling — kontrol et tümü five bençin whichever rendering path bir route aslında kullanır, plus yapğrula sitemap generation ve exclusions yalnızca on bir production oluştur.
• Sitemaps: gatsby-plugin-sitemap generates sitemap-index.xml (submit şu, değil /sitemap.xml) ve yalnızca runs on gatsby build, değil in dev. Google ignores <priority>/<changefreq> — focus on <lastmod>. Filter drafts in gatsby-node.js. DSG, SSR, ve client-yalnızca routes her ihtiyaç duy bir explicit sitemap-inclusion decision — yapmayın assume onlar’re covered aynı way bir SSG sayfa dır.
• Canonicals: Head API + location.pathname, veya gatsby-plugin-canonical-urls ile stripQueryString: true — never her ikisi (double canonical bug).
• Images: gatsby-plugin-image auto-handles sizes/WebP/lazy-load ve prevents CLS, ama yapmaz yaz alt text — şu’s manual.
• ** “DevTools but not view-source” bug** = SEO component rendering client-side yerine via Head export.
• Maintenance risk: Netlify acquired Gatsby in 2023; activity sahiptir slowed (no React 19, undelivered roadmap). Fine bençin existing siteler; bençin yeni projects weigh Astro/sonraki.js.

resmî dokümantasyon

birincil-kaynak dokümantasyon -den Gatsby ve -den Google.

Gatsby

• Rendering options — overview of Gatsby’s four rendering paths: SSG, DSG, SSR, ve client-yalnızca routes.
• kullanarak Deferred Static Generation — DSG’s ilk-istek generation behavior.
• kullanarak Server-Side Rendering — SSR’s istek-time output via Gatsby Functions.
• Client-yalnızca routes ve kullanıcı authentication — neden client-yalnızca routes yapmayın expose route-specific bençerik in initial HTML.
• Adding bir SEO component — recommended SEO-component pattern.
• Gatsby Head API reference — modern, oluşturulmuş-in way -e manage head tags.
• Introducing Gatsby Head API — neden o replaced react-helmet.
• gatsby-plugin-sitemap — sitemap generation (production builds yalnızca).
• gatsby-plugin-image — StaticImage/GatsbyImage, formats, CLS prevention.
• gatsby-plugin-robots-txt — environment-aware robots.txt.
• gatsby-plugin-canonical-urls — site-wide canonical tags ve stripQueryString.
• gatsby-plugin-react-helmet — legacy metadata approach.
• gatsby-plugin-sonraki-seo — pre-oluşturulmuş JSON-LD/schema components.
• React hydration in Gatsby — nasıl static HTML olur interactive.

Google

• Understand JavaScript SEO basics — tarama → render → dizin phases, ve neden pre-rendering yardımcı olur.

Quotes -den kaynak

On—record statements şu uygula yapğrudan -e Gatsby’s architecture. Gatsby dır bir JavaScript SSG, bu nedenle relevant birincil kaynaklar dır Google’s JavaScript-rendering rehberlik ve Google reps on aynı.

Google arama Central — JavaScript SEO basics

• “Server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers, and not all bots can run JavaScript.” — durum bençin tam olarak ne Gatsby yapar at oluştur time.
• “The page may stay on this queue for a few seconds, but it can take longer than that.” — on rendering queue şu pre-rendered HTML lets siz skip.

Martin Splitt, Google (Developer Advocate)

• “Even though Googlebot can render JavaScript, we don’t want to rely on that.” — principle behind preferring SSG/SSR. (Via 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.” — exact neden “DevTools vs view-source” Gatsby bug confuses kişiler. (Via SEJ.)
• “The median time in the render queue is only five seconds.” — note bu median; tail latency -ebilir olmak far longer. (BrightonSEO, via SEJ.)

John Mueller, Google (arama Advocate)

• “Server-side rendering is not a requirement there. We can render JavaScript-based pages for the most part.” — context: SSR/SSG dır en iyi practice, değil strictly required; Google -ecek eventually render CSR bençerik. (Via SEJ.)

Gatsby SEO kontrol listesi

bir geç -e yapğrula bir Gatsby oluştur dır aslında arama-friendly:

• birincil bençerik görünür in View kaynak (raw HTML), değil sadece in DevTools — confirms o’s pre-rendered, değil client-side yalnızca.
• Metadata dır ayarla via Gatsby Head API (Head export -den sayfalar/ templates), değil legacy react-helmet on yeni çalışır.
• her sayfa sahiptir bir unique, oluştur-time <title> ve meta description, ile bir siteMetadata fallback.
• Canonical tags dır ayarla bir way yalnızca — Head API veya gatsby-plugin-canonical-urls, never her ikisi (avoids double-canonical bug).
• stripQueryString: true dır ayarla bu nedenle sorgu-string varyantlar yapmayın fragment canonicals.
• gatsby-plugin-sitemap dır installed; siz verified output ile gatsby build && gatsby serve (o yapmaz çalıştır in dev).
• siz submitted /sitemap-index.xml (değil /sitemap.xml) in arama Console.
• Draft bençerik dır filtered out in gatsby-node.js (GraphQL), bu nedenle o never enters sitemap.
• No stale/orphan files in src/pages şu auto-oluştur -e routes.
• robots.txt blocks Netlify preview/branch deploys ama leaves production open.
• her GatsbyImage / StaticImage sahiptir explicit alt text.
• JS/CSS assets değildir blocked in robots.txt.
• Trailing-slash form dır decided ve enforced at ana makine/CDN (değil sadece via <Link>).
• noindex decisions live in static HTML veya server headers, değil React state.
• temel Web Vitals checked — React bundle dır muhtemel drag; düşün partial hydration nerede viable.
• bençin her rendering path in kullan (SSG, DSG, SSR, client-yalnızca), siz checked production raw HTML, metadata, HTTP status, caching behavior, ve başarısızlık/empty-state handling — değil sadece bir local gatsby build log.
• DSG, SSR, ve client-yalnızca routes her sahip bir explicit, verified sitemap decision — none of them dır covered tarafından aynı assumption olarak bir SSG sayfa.

mental models

1. Crawlability vs performance dır two separate scorecards. Gatsby aces crawlability (HTML dır pre-rendered) ama pays on performance ( React bundle). yapmayın conflate them — “Gatsby is bad for SEO because React” mixes up two. sizin bençerik indexes fine; sizin temel Web Vitals dır nerede JS tax shows up.

2. earlier HTML vardır, daha az -ebilir go yanlış. SSG decides HTML at oluştur time — safest benşaret et. Gatsby’s default sayfa dır bir SSG, bu nedenle o’s on safe end of rendering spectrum (client-yalnızca → SSR → DSG → SSG, kabaca riskiest -e safest bençin indexability). ama Gatsby dır bir multi-mode framework — bir given sayfa -ebilir olmak DSG, SSR, veya client-yalnızca instead, her earning onun kendi place on şu spectrum. Know hangi mode her route aslında kullanır önce assuming o’s on safe end.

3. Head API tarafından default; react-helmet yalnızca tarafından inheritance. bençin anything yeni, decision dır yapılmış: Gatsby Head API. react-helmet dır bir thing siz migrate off of, değil something siz ulaş bençin. eğer bir tag değildir gösterme in raw HTML, ilk soru dır “is this in a Head export, or stuck in a component?”

4. seç tam olarak tek canonical mechanism. Head API canonical veya gatsby-plugin-canonical-urls — never her ikisi. Two mechanisms = two canonical tags = double-canonical bug. aynı discipline bençin anything şu writes -e <head>: bir kaynak of truth per tag.

5. Gatsby builds everything o bulur — bu nedenle filtering dır sizin job. Drafts, stale src/pages files, sorgu-string varyantlar: Gatsby yapmaz editorialize. -erseniz yapmayın exclude o (in gatsby-node.js, in canonical config, in sitemap options), o ships ve alır tarandı.

6. yeni project vs existing site changes maintenance calculus. Existing Gatsby site: koru o, o çalışır. yeni project: slowed maintenance ve ecosystem-decay risk dır gerçek inputs — weigh Astro/sonraki.js önce committing.

Gatsby SEO — kısa başvuru

Metadata: hangi approach

Plugins at bir glance

Kısa bilgiler

• Sitemap file dır /sitemap-index.xml, değil /sitemap.xml.
• Sitemap yapmaz generate in gatsby develop — kullan gatsby build && gatsby serve.
• Google ignores <priority> / <changefreq> — accurate <lastmod> yalnızca.
• React bundle ≈ 200KB+ per sayfa (full hydration); bir CWV maliyet, değil bir tarama bir.
• Astro ships ~5KB tarafından comparison (islands yalnızca).
• gatsby develop ≠ production: sitemap, robots, ve bazı optimizations differ.
• Netlify acquired Gatsby Feb 2023; maintenance sahiptir slowed (no React 19 henüz).

İki satırlı SEO Head dışa aktarımı

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

kontrol et Gatsby’s production artifacts

çalıştır bu sonra gatsby build, değil karşı 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

bu catches missing veya yinelenen output -den overlapping Head API/plugin mechanisms. Review values ve sitemap membership separately.

araçlar bençin Gatsby SEO

• Gatsby Head API (oluşturulmuş-in, v4.19+) — no-dependency way -e manage <title>, meta, canonical, ve JSON-LD per sayfa/template.
• gatsby-plugin-sitemap — generates sitemap-index.xml on production builds.
• gatsby-plugin-image — StaticImage/GatsbyImage, responsive sizes, WebP/AVIF, lazy loading, CLS-preventing placeholders.
• gatsby-plugin-canonical-urls — site-wide canonical tags ile stripQueryString.
• gatsby-plugin-robots-txt — environment-aware robots.txt (block preview deploys).
• gatsby-plugin-next-seo — pre-oluşturulmuş JSON-LD/schema components -erseniz yapmayın iste -e hand-roll structured data.
• view-source: / GSC URL Inspection — ground truth bençin “dır benim bençerik ve metadata in raw HTML?” (değil DevTools, hangi shows hydrated DOM).
• Lighthouse / PageSpeed Insights — -e see temel Web Vitals maliyet of React bundle ve whether partial hydration dır worth pursuing.
• gatsby build && gatsby serve — yalnızca way -e test et sitemap, robots.txt, ve production-yalnızca optimizations locally.

ne değil -e yap on bir Gatsby site

Concrete mistakes kişiler aslında yap building ve shipping Gatsby siteler — prevention, değil diagnosis.

tutma gatsby-plugin-react-helmet on yeni çalışır

** mistake:** reaching bençin react-helmet tarafından habit on yeni sayfalar veya bir yeni project, çünkü şu’s ne older Gatsby tutorials hâlâ göster.

neden o’s yanlış: react-helmet sahiptir known sorunlar ile React Hooks ve concurrent rendering, plus bir background-tab title bug siz sahip -e patch ile defer={false}. o’s ayrıca bir üçüncü-party bundle ve Provider wrapper siz yapmayın ihtiyaç duy anymore.

ne yapılacağı instead: kullan oluşturulmuş-in Gatsby Head API (v4.19+) — bir named Head export -den sayfa veya template file. Reserve react-helmet bençin existing code siz haven’t migrated henüz.

çalışbir two canonical mechanisms at once

** mistake:** ayarlama bir canonical via gatsby-plugin-canonical-urls ve bir react-helmet (veya Head API) canonical etiketi on aynı sayfa.

neden o’s yanlış: her ikisi fire, ve sayfa ships two <link rel="canonical"> tags — bir well-known Gatsby başarısızlık mode şu muddies hangi URL siz aslında intended olarak canonical.

ne yapılacağı instead: seç tam olarak bir mechanism site-wide ( Head API, veya plugin ile stripQueryString: true) ve drop diğer entirely.

Filtering drafts in bir React component yerine at oluştur time

** mistake:** hiding unpublished bençerik ile bir client-side kontrol et (e.g. if (!post.published) return null) ve assuming şu keeps o out of arama.

neden o’s yanlış: Gatsby builds everything o bulur -e static HTML önce şu component ever runs in browser — draft sayfa dır zaten oluşturulmuş ve zaten listed in sitemap tarafından time sizin React kontrol et executes.

ne yapılacağı instead: filter drafts in gatsby-node.js ile bir GraphQL sorgu (e.g. excluding entries olmadan bir publish date) bu nedenle onlar never al oluşturulmuş veya listed in ilk place.

Shipping GatsbyImage olmadan alt text

** mistake:** trusting gatsby-plugin-image -e ele al image SEO end—e-end çünkü o auto-generates sizes, formats, ve placeholders.

neden o’s yanlış: plugin optimizes delivery — o yapmaz yaz alt text. Missing alt text on GatsbyImage/StaticImage dır bir of en çok yaygın Gatsby SEO oversights precisely çünkü everything else hakkında image görünür ele alınır.

ne yapılacağı instead: ele al alt text olarak bir required field on her image component, her time — o’s bir piece of image SEO Gatsby leaves entirely -e siz.

Assuming gatsby develop shows siz production SEO output

** mistake:** checking sitemap, robots.txt, veya noindex behavior in gatsby develop ve concluding o’s broken çünkü nothing shows up.

neden o’s yanlış: gatsby-plugin-sitemap ve several diğer oluştur-time behaviors basitçe yapmayın çalıştır in development mode — siz’re değil looking at bir bug, siz’re looking at dev mode doing ne dev mode yapar.

ne yapılacağı instead: çalıştır gatsby build && gatsby serve önce drawing herhangi bir conclusion hakkında sitemap, robots.txt, veya production-yalnızca optimizations.

<Link> istem yönlendirmesinin eğik çizgi tutarsızlığını gizlemesine izin verme

** mistake:** assuming sizin server-side trailing-slash yönlendirme kurallar uygula everywhere, dahil in-app navigation.

neden o’s yanlış: Gatsby’s <Link> component kullanır client-side History API routing, hangi bypasses server-side 301 yönlendirmeler siz’d normally rely on -e normalize trailing slashes — bu nedenle benç bağlantılar -ebilir quietly sun “wrong” form olmadan ever hitting sizin yönlendirme kural.

ne yapılacağı instead: decide on bir trailing-slash form, enforce o at ana makine/CDN level, ve emin olun canonicals dır consistent ile o regardless of nasıl bir given sayfa idi ulaşılan.

yaygın Gatsby SEO sorunlar

Symptom-ilk lookup bençin problems siz’re actively seeing on bir Gatsby site — başla -den ne siz observe.

Meta tags göster up in DevTools ama dır missing -den view-kaynak

Symptom: siz inspect sayfa in Chrome DevTools ve title/meta description bak correct, ama view-source: (veya bir raw curl) shows them missing veya generic.

muhtemel neden ol: SEO component dır rendering client-side — o’s kullanılan olarak bir regular component yerine olarak (veya bençinde) sayfa’s Head export, bu nedenle o yalnızca görünür in DOM sonra hydration.

düzelt: move tags -e sayfa veya template’s named Head export. yapğrula ile view-source: veya curl -s <url> — değil DevTools, hangi shows hydrated DOM, değil ne bir crawler’s raw fetch sees.

sitemap dır missing veya empty

Symptom: siz visit /sitemap-index.xml (veya kontrol et arama Console) ve al nothing, veya bir incomplete liste.

muhtemel neden ol: almost her zaman şu siz tested in gatsby develop, nerede gatsby-plugin-sitemap yapmaz çalıştır at tümü. daha az commonly, plugin değildir installed/configured in gatsby-config.js.

düzelt: çalıştır gatsby build && gatsby serve ve kontrol et yeniden. eğer o’s hâlâ missing, verify plugin dır present in gatsby-config.js. yapğrula tarafından requesting /sitemap-index.xml yapğrudan — remember o’s dizin URL, değil /sitemap.xml.

bir sayfa sahiptir two canonical tags

Symptom: viewing kaynak (veya çalışbir bir schema/tag denetim) shows two <link rel="canonical"> elements on aynı sayfa.

muhtemel neden ol: gatsby-plugin-canonical-urls ve bir react-helmet (veya Head API) canonical dır her ikisi firing bençin aynı sayfa.

düzelt: kaldır bir mechanism bu nedenle yalnızca bir tek kaynak sets canonical. yapğrula tarafından viewing kaynak yeniden ve checking ile Patrick’s canonical etiketi Checker şu tam olarak tek canonical resolves.

Draft veya orphan sayfalar görün in sitemap

Symptom: sitemap (veya arama Console coverage) listeler URLs siz never meant -e publish — draft posts, veya stale files altında src/pages.

muhtemel neden ol: Gatsby auto-builds ve auto-routes everything o bulur — bir unpublished GraphQL entry şu değildir filtered, veya bir leftover file in src/pages, alır oluşturulmuş -e bir gerçek static sayfa ve listed like herhangi bir diğer.

düzelt: filter drafts in gatsby-node.js ile bir GraphQL sorgu (e.g. excluding entries olmadan bir publish date) bu nedenle onlar’re never oluşturulmuş. bençin orphan src/pages files, delete stale file — filtering in bir component dır de late, since sayfa dır zaten oluşturulmuş tarafından o hâlde.

sorgu-string varyantlar of bir sayfa dır getting dizine eklenmiş olarak duplicates

Symptom: arama Console shows yakın kopya URLs like /blog ve /blog?tag=foo her ikisi dizine eklenmiş, veya flagged olarak yinelenen bençerik.

muhtemel neden ol: gatsby-plugin-canonical-urls dır çalışbir olmadan stripQueryString: true, bu nedenle sorgu-string varyantlar dır canonicalized -e themselves yerine temiz URL.

düzelt: ayarla stripQueryString: true in plugin config, rebuild, ve re-kontrol et canonical etiketi on bir sorgu-string URL — o -meli now benşaret et -e temiz path.

bir sayfa siz intended -e noindex dır hâlâ görünme in arama

Symptom: siz ayarla bir sayfa -e noindex, ama o’s hâlâ dizine eklenmiş weeks later, veya arama Console shows o olarak dizine eklenmiş despite tag.

muhtemel neden ol: noindex directive idi toggled via React state yerine baked -e static HTML veya server headers — Google -ebilir sahip zaten processed raw HTML (olmadan noindex) ve, ne zaman o yapar see noindex yalnızca in bir client-rendered geç, -ebilir skip rendering sayfa yeniden entirely.

düzelt: move noindex decision -e static HTML (via Head export at oluştur time) veya bir HTTP header, değil conditional React logic. Recheck ile view-source: -e yapğrula tag dır present in raw response.

test et yourself: Gatsby SEO

Five quick questions on optimizing bir Gatsby site bençin arama. seç bir yanıt her biri bençin, o hâlde kontrol et.

kaynaklar worth sizin time

benim related yazma

• JavaScript SEO: bir Definitive rehber — rendering, DOM parity, ve neden static/prerendered output (like Gatsby’s) dır low-risk end of spectrum.
• Beginner’s rehber -e teknik SEO — nerede rendering architecture fits in bigger picture.

benim speaking

• nasıl arama çalışır (SlideShare) — benim walkthrough of tarama, rendering, dizine ekleme, ve sıralama. (benim standing disclaimer uygulanır: “This is my understanding of systems… not going to be 100% complete or accurate.”)

-den yaklaşık industry

• Gatsby Head API reference — birincil kaynak bençin modern metadata approach.
• Introducing Gatsby Head API — Gatsby’s kendi explanation of neden o replaced react-helmet.
• Google arama Central — JavaScript SEO basics — tarama → render → dizin phases Gatsby’s oluştur lets siz skip bençin bençerik.
• Gatsby dır joining Netlify — 2023 acquisition announcement, bençin context on maintenance.
• Netlify acquires frontend platform Gatsby (TechCrunch) — independent coverage of acquisition.
• “Is GatsbyJS abandoned?” discussion #39062 — community thread on Gatsby’s güncel maintenance state.
• SEO comparison of Gatsby vs sonraki vs Astro (Vaihe) — JS-payload ve tarama-budget comparison.
• Understanding partial hydration in Gatsby 5 (LogRocket) — CWV-relevant hydration improvement ve onun limits.

Değişiklik günlüğü