GatsbyのSEO

TL;DR — By デフォルト, Gatsby ビルドする あなたの ページs into finished HTML 前に anyone visits (この mode is called SSG), so when Google sどのようにs up, あなたの コンテンツ is already in ページ — no waiting fまたは JavaScript. その gives Gatsby strong SEO head start. Gatsby also 持つ few other レンダリング options fまたは ページs その 必要がある to generate later または 使う per-request data — wまたはth 知るing if あなたの サイト 使うs them. catch: it still sends big React bundle to ブラウザー, どの できる 遅い あなたの ページ するwn, と あなた still 持つ to 設定する metaタグ, サイトマップ, できるonicals, と 画像 altテキスト あなたのself.

Gatsbyとは何か

Gatsby is 私たちbサイト framewまたはk built on React. 大半の React apps ビルドする ページ in あなたの ブラウザー 後に JavaScript loads — どの is problem fまたは SEO, なぜなら 検索エンジン fetching ページ 最初の sees near-空の shell. Gatsby flips その around by デフォルト. When あなた run gatsby build, it turns 大半の ページs into complete HTML file ahead of time. So when Google, Bing, または reader requests one of それらの ページs, コンテンツ is right there 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

“gatsby-seo-beginner-build”（日本語訳：引用内容を日本語で示します）

その デフォルト mode 作るs Gatsby static サイト generatまたは (SSG), と it’s なぜ Gatsby is generally 良い fまたは SEO out of box — much より良い than plain React app. Gatsby also lets individual ページs opt into three other レンダリング modes — generating on 最初の request, generating per-request on server, または レンダリング entirely in ブラウザー — どの Advanced tab covers, since 各 one changes 何 クローラー actually sees.

GatsbyとSEOを心配する人がいる理由（そして多くの場合は心配しなくてよい理由）

大半の よくある myth is “Gatsby is bad for SEO because it uses React.” その’s false. React part runs 後に ページ is already built と delivered — it just 作るs ページ interactive. テキスト, リンク, と headings 検索エンジン cares about are already in HTML from start.

“Gatsby is bad for SEO because it uses React.”（日本語訳：引用内容を日本語で示します）

So Gatsby clears biggest hurdle 自動的に. 何 it するn’t する is all of SEO fまたは あなた.

それでも設定が必要なもの

Gatsby サイト is ない 自動的に optimized. あなた still 必要がある to:

• 追加する titleタグ と meta description to すべての ページ ( 最新の way is built-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 サイトマップ ( gatsby-plugin-sitemap plugin).
• Set できるonical URL so duplicate versions of ページ するn’t compete.
• Write altテキスト fまたは 画像 — Gatsbyの 画像 tool resizes と optimizes 画像 自動的に, ただし it する ない write altテキスト fまたは あなた.

“gatsby-seo-beginner-head”（日本語訳：引用内容を日本語で示します）

多くの人を驚かせる1つのこと

Gatsby still ships 完全な React runtime (~200KB+) to ブラウザー on すべての ページ. It するn’t hurt whether あなた get インデックス登録された — HTML is already complete — ただし it できる 遅い あなたの ページ するwn, どの affects Cまたはe 私たちb Vitals (Google’s ページ-experience speed 指標s). Lighter framewまたはks like Astro send al大半の no JavaScript by comparison.

One mまたはe thing to 知る if あなた’re choosing Gatsby today: Netlify 買収した Gatsby in 2023, と active 開発 持つ slo私たちd lot since. Fまたは 既存の Gatsby サイト その’s fine; fまたは brと-new project, it’s wまたはth 私たちighing.

Want technical version — Head API vs old React-helmet plugin, サイトマップ と できるonical gotc持つ, React-bundle CWV trade-off, と 正直な take on Gatsbyの 将来? Switch to Advanced tab.

TL;DR — Gatsby 持つ four レンダリング options — SSG ( デフォルト), DSG, SSR, と クライアント専用ルート — と それら するn’t all put コンテンツ in raw HTML 同じ way. SSG pre-レンダリングs to 静的HTML at ビルド時 (gatsby build), so コンテンツ is in raw HTML 前に 最初の クローラー request — no 私たちb レンダリング Service, no レンダリング queue. DSG defers generation to 最初の request; SSR generates per request on server; クライアント専用ルート レンダリング ないhing route-specific until > ブラウザー runs JavaScript. どのever path serves ページ, Gatsby hydrates 完全な React bundle (~200KB+) on client, どの is Cまたはe 私たちb Vitals コスト, ない > クロール可能性 one. current metadata approach is built-in Gatsby Head API (v4,19+), どの wまたはks across all four レンダリング方式 と replaces gatsby-plugin-react-helmet. recurring failure modes are するuble できるonical tags (Head API + React-helmet both firing), draft/またはphan ページs leaking into サイトマップ, 本番-only サイトマップ gotcha, missing altテキスト on GatsbyImage, trailing-slash inconsistency, と DSG/SSR/クライアント専用ルート その 決して got > 本番 check. と elephant in room: since Netlify’s 2023 買収, Gatsbyの メンテナンス 持つ slo私たちd sharply.

Gatsbyの4つのレンダリング方式 — SEOに重要な理由

Google processes JavaScript ページs in three p持つes — crawling, then レンダリング, then インデックス登録 — と レンダリング happens in separate pass from queue 使用する headless Chromium. Google’s own guidance is blunt about なぜ あなた すべきn’t lean on その: “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.”

“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.”（日本語訳：引用内容を日本語で示します）

Gatsby サイト isn’t universally ビルドする-time 静的HTML — Gatsby suppまたはts four distinct レンダリング方式, chosen per ページ または 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 :

“gatsby-seo-advanced-build”（日本語訳：引用内容を日本語で示します）

• SSG (静的サイト生成) — デフォルト. gatsby build emits 完全なy レンダリングされた 静的HTML into /public fまたは ページ. Googlebot’s 最初の-wave raw-HTML fetch already contains complete コンテンツ — テキスト, リンク, metadata. この is safe, low-リスク path, と it’s 何 大半の Gatsby ページs 使う.
• DSG (遅延静的生成). Generation is deferred until ページ’s 最初の request rather than happening fまたは すべての ページ at ビルド時 — 使うful fまたは サイトs with huge numbers of low-traffic ページs where 完全な ビルドする する be 遅い. ビルドする alone する ない tell あなた 何 クローラー sees; ページ’s HTML するn’t exist until something requests it, so 最初の-request と cached behaviまたは 必要がある their own check, ない just ビルドする log.
• SSR (Server-Side レンダリング). ページ is レンダリングされた per request, 使用する request-time data, via Gatsby Functions. なぜなら it runs at request time, SSR ページs 必要がある 本番 checks ビルドする-time ページ するn’t: response status, caching headers, timeout behaviまたは, と 何 クローラー sees on 空の または errまたは response — none of その is visible from successful local ビルドする.
• クライアント専用ルート. これらの レンダリング entirely in ブラウザー と するn’t get route-specific コンテンツ in initial HTML — 同じ profile as plain クライアント側 React app. するn’t assume Google (または any クローラー) sees anything ページ-specific here until JavaScript runs; treat これらの as JS-dependent by design, どの is fine fまたは gated/authenticated コンテンツ ただし wrong fまたは anything あなた want インデックス登録された with コンテンツ.

React hydration (ReactDOMClient.hydrateRoot()) happens クライアント側 on top of どのever of これらの produced HTML, purely to 追加する interactivity — その part is 同じ regardless of レンダリング方式, と is separate concern from どの path generated ページ (mまたはe on hydration コスト below).

Contrast SSG/DSG/SSR with pure クライアント側 React app, どの serves 空の <div id="root"> と depends on ブラウザー (または レンダリングer) to ビルドする ページ. 大半の Gatsby ページs ship 意味するingful HTML by デフォルト — その’s インデックス可能性 win, と it’s real, ただし it’s per-ページ property, ない framewまたはk guarantee. レンダリング options と 画像 tooling するn’t guarantee Cまたはe 私たちb Vitals, インデックス登録, または rankings on their own; verify actual 本番 output fまたは どのever path route 使うs.

catch with SSG/DSG/SSR alike is パフォーマンス one, ない クロール可能性 one: Gatsby ships 完全な React runtime to すべての ページ と re-hydrates it. Mまたはe on その, と Astro comparison, below.

Gatsby Head APIとgatsby-plugin-react-helmetの比較

この is 単一の 大半の 重要な “are you doing it the modern way?” question in Gatsby SEO.

“are you doing it the modern way?”（日本語訳：引用内容を日本語で示します）

** 従来の approach — gatsby-plugin-react-helmet.** Fまたは years, stとard way to set <title>, meta description, と other headタグ was react-helmet library plus この plugin. plugin’s job was to give React-helmet SSR suppまたはt — なしで it, あなたの title/metaタグ する only appear 後に JS execution, ない in raw HTML, どの defeats point. It wまたはks, ただし it 持つ 知るn 問題s with React Hooks と concurrent レンダリング, plus background-tab title bug あなた patch with defer={false}.

** 最新の approach — Gatsby Head API (v4,19+).** Gatsby now 持つ built-in way to 追加する head elements: named Head expまたはt from any ページ または 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

“gatsby-seo-advanced-head”（日本語訳：引用内容を日本語で示します）

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

It receives 使うful props — location.pathname, params, data (from ページ’s GraphQL query), と pageContext — と it deduplicates tags その share id prop (last one wins), though running two 異なる head-tag mechanisms at once (Head API plus leftover React-helmet call) できる still conflict even with deduplication. It wまたはks only in ページ files と templates, ない in arbitrary components. advantages over React-helmet: no third-party bundle, no Provider wrapper, deterministic tag またはder with React 18 streaming. 使う Head API fまたは all new projects, と plan migration fまたは 既存の ones.

Head API wまたはks 同じ way across all four レンダリング方式 — SSG, DSG, SSR, と クライアント専用ルート all suppまたはt Head expまたはt. 何 differs is when its output lとs in HTML クローラー できる fetch: on SSG it’s baked in at ビルド時; on DSG と SSR it’s generated at 最初の-request または per-request time; on client-only route it isn’t in initial HTML at all. するn’t assume “I added a Head export” is equivalent to “this is in the raw HTML for every route” — check actual 本番 output (view-source: または curl) fまたは どのever path 各 route 使うs, ない just one representative ページ.

“I added a Head export”（日本語訳：引用内容を日本語で示します） “this is in the raw HTML for every route”（日本語訳：引用内容を日本語で示します）

** “meta tags in DevTools but not in source” bug.** classic Gatsby SEO symptom: あなたの title/metaタグ sどのように up in Chrome DevTools ただし are missing from view-source:. ca使う is その DevTools sどのようにs hydrated するM (後に JS runs), 一方で view-source sどのようにs raw HTML. If あなたの tags only appear in DevTools, あなたの SEO component is レンダリング クライアント側 instead of being baked into Gatsbyの static output — usually なぜなら it’s 使うd as regular component rather than as (または inside) ページ’s Head expまたはt. 常に verify in raw HTML, ない DevTools.

“meta tags in DevTools but not in source”（日本語訳：引用内容を日本語で示します）

SEOコンポーネントの接続（GraphQLデータレイヤー）

Gatsbyの データレイヤー is GraphQL, と it’s どのように あなた feed metadata into あなたの ページs.

• useStaticQuery pulls global デフォルトs from siteMetadata (title, description, siteUrl) defined in gatsby-config.js.
• ページ-level GraphQL queries pass data prop straight to Head expまたはt — no extra wiring 必要があるed.
• stとard pattern is prop || サイトMetadata fallback: 使う per-ページ value if it exists, otherwise サイト デフォルト.

Head expまたはt その takes ページ data looks like:

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

サイトマップ：gatsby-plugin-sitemap（落とし穴を含む）

Install gatsby-plugin-sitemap と configure it in gatsby-config.js. few things trip people up:

• It generates sitemap-index.xml, ない /sitemap.xml. Submit インデックス URL in Google 検索 Console — するn’t submit /sitemap.xml と expect it to resolve.
• It only runs in 本番 ビルドする. It する ないhing in gatsby develop. To test it, run gatsby build && gatsby serve. People file “my sitemap is missing” repまたはts その are really just “I never ran a production build.”
• createLinkInHead: true by デフォルト 追加するs サイトマップ reference to HTML head 自動的に.
• It 常に excludes /dev-404-page, /404, と /offline-plugin-app-shell-fallback.
• <priority> と <changefreq> are ignまたはed by Google — plugin するcs say so directly. Focus on accurate <lastmod> instead.
• entryLimit デフォルトs to 45 000 URL per file.

“my sitemap is missing”（日本語訳：引用内容を日本語で示します） “I never ran a production build.”（日本語訳：引用内容を日本語で示します）

Excluding drafts is あなたの job. Gatsby ビルドする すべてのthing it 見つけるs, so draft コンテンツ sails straight into サイトマップ unless あなた filter it. する その in gatsby-node.js with GraphQL filter (e.g. excluding entries なしで publish date), ない by hiding it in React component — by then it’s already built と listed.

DSG, SSR, と クライアント専用ルート 必要がある explicit サイトマップ decision. gatsby-plugin-sitemap reflects 何 it できる see at ビルド時. SSG ページ is straightfまたはward — it exists as static file, so it’s naturally サイトマップ-eligible. DSG ページ’s HTML するn’t exist yet at ビルド時 (it generates on 最初の request), SSR ページ 決して 持つ fixed HTML at all, と クライアント専用ルート 持つ no route-specific コンテンツ to インデックス in 最初の place. するn’t assume any of これらの are in サイトマップ (または すべき be) just なぜなら route exists — decide, ページ by ページ, whether it belongs, と verify generated sitemap-index.xml actually reflects その decision rather than ビルドする-time guess.

robots.txt：gatsby-plugin-robots-txt

gatsby-plugin-robots-txt generates robots.txt at ビルド時. 使うful detail fまたは SEO is environment awareness: it reads process.env.GATSBY_ACTIVE_ENV then process.env.NODE_ENV, so あなた できる serve 異なる rules per environment. classic 使う is blocking クローラー on Netlify preview/branch deploys so あなたの staging URL するn’t get accidentally インデックス登録された, 一方で leaving 本番 open.

canonical URL（canonicalが二重になるバグを含む）

利用できるアプローチは2つです：

1. gatsby-plugin-canonical-urls 追加するs <link rel="canonical"> to すべての ページ. Set stripQueryString: true so /blog?tag=foo と /blog するn’t get treated as separate できるonical化された ページs — 推奨 fまたは 大半の サイトs.
2. ** Head API**, setting できるonicals あなたのself from location.pathname:

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

** するuble できるonical bug.** この is 知るn, easy-to-hit 問題: if あなた 使う gatsby-plugin-canonical-urls と React-helmet できるonical tag at 同じ time, あなた emit two <link rel="canonical"> tags. Pick one mechanism. (If あなた’re on React-helmet, gatsby-plugin-react-helmet-canonical-urls is helmet-aware option; on Head API, set できるonical there と drop plugin.)

Trailing slashes. Gatsby ページs できる be r各able with と なしで trailing slash, と Gatsbyの <Link> component 使うs クライアント側 Histまたはy API routing — どの bypasses server-side 301 redirects あなた’d nまたはmally 使う to nまたはmalize trailing slashes. Decide on one fまたはm, enfまたはce it at host/CDN level, と keep できるonicals consistent with it.

画像SEO：gatsby-plugin-image

gatsby-plugin-image is genuinely one of Gatsbyの strengths. Two components:

• StaticImage — fまたは 画像 whose path is 知るn と hardcoded at ビルド時.
• GatsbyImage — fまたは dynamic 画像 coming from GraphQL.

何 it する 自動的に: multiple sizes, 私たちbP/AVIF fまたはmats, lazy loading, と breakpoints (750/1080/1366/1920px). It also generates placeholders (blurred, するminant colまたは, または traced SVG) その reserve space と prevent Cumulative Laあなたt Shift — Cまたはe 私たちb Vitals 指標. なぜなら dimensions are set, あなた avoid CLS, と 最新の fまたはmats plus lazy loading help LCP.

** one thing it する ない する is write altテキスト.** その’s on あなた, すべての time — missing altテキスト on GatsbyImage is one of 大半の よくある Gatsby SEO oversights. (Migrating from old gatsby-image package? There’s codemod: npx gatsby-codemods gatsby-plugin-image.)

構造化データ（JSON-LD）

Google’s preferred structured-data fまたはmat is JSON-LD, と clean way to 追加する it in 最新の Gatsby is via Head API with 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-built JSON-LD components if あなた’d rather ない hと-roll them. One frequent confusion to clear up: gatsby-plugin-manifest is ない structured-data plugin — it generates PWA 私たちb app manifest (icons, theme colまたは), ないhing to する with schema.

ReactバンドルとCore Web Vitals

Here’s Gatsbyの real 私たちakness relative to zero-JS generatまたはs.

• 完全な hydration ( Gatsby 1–4 デフォルト) hydrates entire React tree と ships 200KB+ React runtime to すべての ページ. HTML is pre-レンダリングされた, so この するn’t hurt クロール可能性 — ただし it absolutely affects load speed と CWV.
• Partial hydration (Gatsby 5, experimental) hydrates only components marked "use client" と leaves rest as 静的HTML, cutting JS shipped と directly improving TTI と CWV. limitations are real: 本番 ビルドする only, still beta, と incompatible with emotion, styled-components, と gatsby-plugin-offline.

takeaway: Gatsbyの JS payload is パフォーマンス problem, ない インデックス可能性 one. Googlebot still レンダリングs JS to assess ページ-experience signals, so bundle できる コスト あなた on CWV even though あなたの コンテンツ インデックスes fine.

SEOにおけるGatsbyとAstroの比較

If あなた’re choosing static framewまたはk today, この is comparison その matters 大半の fまたは SEO.

Both pre-レンダリング インデックスable HTML — その’s wash. difference is JS tax: Astro’s islとs ship fraction of JavaScript, どの Vaihe comparison frames as “Reduced JavaScript execution conserves crawl budget and accelerates page scanning.” (One histまたはical caveat on other side: Astro’s 画像 hとling lacked automatic width/height at time of その comparison, どの produced Lightho使う warnings — check current Astro するcs, as it may be resolved.)

“Reduced JavaScript execution conserves crawl budget and accelerates page scanning.”（日本語訳：引用内容を日本語で示します）

Fまたは conテキスト on どのように whole field compares, see static サイト generatまたはs hub.

正直な話：Gatsbyのメンテナンス状況

I won’t sugarcoat この, と I won’t catastrophize it either.

Netlify 買収した Gatsby Inc. in 2月 2023. Gatsby Cloud was sunset と customers 私たちre moved to Netlify; Netlify stated 買収 する “not impact Gatsby JS.” Since then, activity 持つ slo私たちd markedly. widely-read community GitHub discussion (#39062) argues Gatsby is effectively abとoned — minimal commits, no React 19 suppまたはt, 2024 roadmap その wasn’t delivered, と telemetry service shut するwn. Maintainers 持つ framed current state as security fixes, limited dependency updates, と low-hanging-fruit bug fixes.

“not impact Gatsby JS.”（日本語訳：引用内容を日本語で示します）

何 その 意味する fまたは SEO teams. Fまたは 既存の Gatsby サイト, none of この is emergency — it ビルドする, it インデックスes, it wまたはks. リスク is ecosystem decay over time: SEO depends on plugins (gatsby-plugin-sitemap, 画像, できるonical-URL), と aging plugins (e.g. gatsby-source-shopify facing API deprecation) できる eventually break in ways その quietly degrade インデックス登録. Fまたは new project, 私たちigh その seriously — framewまたはks people are migrating to are Astro と Next.js.

本番チェックリスト：すべてのレンダリング方式を検証する

local gatsby develop session または even clean gatsby build log するn’t prove 何 クローラー actually receives. なぜなら SSG, DSG, SSR, と クライアント専用ルート 各 generate HTML 異なるly, check 本番 behaviまたは per path rather than assuming one representative ページ covers all of them:

• Raw HTML コンテンツ. Fまたは 各 レンダリング方式 in 使う, fetch real 本番 URL with curl -s <url> または view-source: — ない DevTools — と confirm コンテンツ, title, と metaタグ クローラー する see are actually there.
• Metadata (Head expまたはt output). Confirm Head expまたはt’s tags lと in その raw HTML fまたは path in question. この is where DSG/SSR differ 大半の from SSG: tags exist in あなたの source either way, ただし only 本番 fetch proves それら made it into response.
• HTTP status. Check response status code on 本番, especially fまたは SSR と DSG routes — ページ その レンダリングs fine locally できる 500 in 本番 on 最初の request または under load in ways ビルドする 決して surfaces.
• Caching behaviまたは. SSG output is static file with predictable caching. DSG caches 後に 最初の request — confirm second request is 高速な と cまたはrect, ない just 最初の. SSR responses depend on あなたの caching headers と hosting layer; verify stale または per-request コンテンツ isn’t served to wrong visitまたは.
• Failure と 空の-state behaviまたは. Fまたは SSR と DSG ページs backed by request-time または 最初の-request data, check 何 クローラー sees if その data fetch fails または returns 空の — unhとled errまたは state is ない 同じ ページ あなた tested locally with 良い data.
• サイトマップ generation と exclusions. Re-confirm この only happens on 本番 ビルドする (gatsby build && gatsby serve, 決して gatsby develop), と その exclusions あなた expect — drafts, クライアント専用ルート, anything あなた decided すべきn’t be listed — are actually absent from generated sitemap-index.xml, ない just absent from あなたの intent.

None of この is optional per レンダリング方式 — wまたはking gatsby build proves SSG output, ない DSG, SSR, または client-only behaviまたは.

Gatsby SEOでよくある間違い

1. Still 使用する gatsby-plugin-react-helmet — 従来の; migrate to Head API.
2. metaタグ in DevTools ただし ない in ページ source — SEO component is レンダリング クライアント側; check view-source:, ない DevTools.
3. Draft コンテンツ in サイトマップ — filter drafts in gatsby-node.js with GraphQL, ない in React component.
4. またはphan ページs from src/pages — Gatsby auto-routes すべてのthing there; stale files ビルドする と lと in サイトマップ.
5. するuble できるonical tags — gatsby-plugin-canonical-urls + React-helmet both firing.
6. Trailing-slash inconsistency — <Link> client-routing bypasses server-side trailing-slash redirects.
7. ない stripping query strings from できるonicals — set stripQueryString: true.
8. altテキスト omitted on GatsbyImage — it isn’t auto-generated.
9. Submitting /sitemap.xml — real file is /sitemap-index.xml.
10. Testing サイトマップ in gatsby develop — it only generates on gatsby build.
11. Noインデックス toggled by React state — Google may 持つ already processed raw HTML; と when it sees noindex in raw HTML it may skip レンダリング entirely. Keep noインデックス decisions in 静的HTML または server headers.

Fまたは JavaScript-レンダリング fundamentals behind all of この, see parent JavaScript SEO hub.

AI要約

condensed take on Advanced version:

• Gatsby 持つ four レンダリング方式 — SSG, DSG, SSR, と クライアント専用ルート. SSG is デフォルト: gatsby build pre-レンダリングs ページ to 静的HTML, so クローラー get 完全な コンテンツ on 最初の fetch — no レンダリング queue, と strongest インデックス可能性 baseline. DSG defers generation to 最初の request; SSR generates per request; クライアント専用ルート レンダリング ないhing route-specific until JavaScript runs in ブラウザー (同じ profile as plain クライアント側 React app). Verify 本番 HTML per path — successful gatsby build only proves SSG behaviまたは.
• ** React-bundle コスト is パフォーマンス, ない クロール可能性, と applies regardless of レンダリング方式.** Gatsby hydrates 完全な React runtime (~200KB+) on client, どの hits Cまたはe 私たちb Vitals. zero-JS generatまたはs (Hugo, Jekyll, Eleventy) するn’t 持つ この; Astro ships ~5KB via islとs.
• 使う Gatsby Head API (v4,19+), named Head expまたはt from ページ/template files, fまたは titles/meta/できるonical/JSON-LD. It wまたはks across all four レンダリング paths と replaces 従来の gatsby-plugin-react-helmet. It wまたはks only in ページs/templates と dedupes by id.
• 本番 checklist per path: raw HTML コンテンツ, Head-expまたはt metadata, HTTP status, caching behaviまたは, と failure/空の-state hとling — check all five fまたは どのever レンダリング方式 route actually 使うs, plus confirm サイトマップ generation と exclusions only on 本番 ビルドする.
• サイトマップ: gatsby-plugin-sitemap generates sitemap-index.xml (submit その, ない /sitemap.xml) と only runs on gatsby build, ない in dev. Google ignまたはes <priority>/<changefreq> — focus on <lastmod>. Filter drafts in gatsby-node.js. DSG, SSR, と クライアント専用ルート 各 必要がある explicit サイトマップ-inclusion decision — するn’t assume それら’re covered 同じ way SSG ページ is.
• できるonicals: Head API + location.pathname, または gatsby-plugin-canonical-urls with stripQueryString: true — 決して both (するuble できるonical bug).
• 画像: gatsby-plugin-image auto-hとles sizes/私たちbP/lazy-load と prevents CLS, ただし する ない write altテキスト — その’s manual.
• ** “DevTools but not view-source” bug** = SEO component レンダリング クライアント側 instead of via Head expまたはt.
• メンテナンス リスク: Netlify 買収した Gatsby in 2023; activity 持つ slo私たちd (no React 19, undelivered roadmap). Fine fまたは 既存の サイトs; fまたは new projects 私たちigh Astro/Next.js.

“DevTools but not view-source”（日本語訳：引用内容を日本語で示します）

公式ドキュメント

Primary-source するcumentation from Gatsby と from Google.

Gatsby

• レンダリング options — overview of Gatsbyの four レンダリング方式: SSG, DSG, SSR, と クライアント専用ルート.
• 使用する 遅延静的生成 — DSG’s 最初の-request generation behaviまたは.
• 使用する Server-Side レンダリング — SSR’s request-time output via Gatsby Functions.
• クライアント専用ルート と 使うr authentication — なぜ クライアント専用ルート するn’t expose route-specific コンテンツ in initial HTML.
• 追加するing SEO component — 推奨 SEO-component pattern.
• Gatsby Head API reference — 最新の, built-in way to manage headタグ.
• Introducing Gatsby Head API — なぜ it replaced React-helmet.
• Gatsby-plugin-サイトマップ — サイトマップ generation (本番 ビルドする only).
• Gatsby-plugin-画像 — StaticImage/GatsbyImage, fまたはmats, CLS prevention.
• Gatsby-plugin-robots-txt — environment-aware robots.txt.
• Gatsby-plugin-できるonical-URL — サイト-wide できるonical tags と stripQueryString.
• Gatsby-plugin-React-helmet — 従来の metadata approach.
• Gatsby-plugin-next-SEO — pre-built JSON-LD/schema components.
• React hydration in Gatsby — どのように 静的HTML becomes interactive.

Google

• Understと JavaScript SEO basics — crawl → レンダリング → インデックス p持つes, と なぜ pre-レンダリング helps.

出典からの引用

On—recまたはd statements その apply directly to Gatsbyの architecture. Gatsby is JavaScript SSG, so relevant primary sources are Google’s JavaScript-レンダリング guidance と Google reps on 同じ.

Google 検索 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.” — case fまたは exactly 何 Gatsby する at ビルド時.
• “The page may stay on this queue for a few seconds, but it can take longer than that.” — on レンダリング queue その pre-レンダリングされた HTML lets あなた skip.

“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.”（日本語訳：引用内容を日本語で示します） “The page may stay on this queue for a few seconds, but it can take longer than that.”（日本語訳：引用内容を日本語で示します）

GoogleのDeveloper Advocate、Martin Splitt

• “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 reason “DevTools vs view-source” Gatsby bug conf使うs people. (Via SEJ.)
• “The median time in the render queue is only five seconds.” — ないe この is median; tail latency できる be far longer. (BrightonSEO, via SEJ.)

“Even though Googlebot can render JavaScript, we don’t want to rely on that.”（日本語訳：引用内容を日本語で示します） “A lot of people are still looking at view source. That is not what we use for indexing. We use the rendered HTML.”（日本語訳：引用内容を日本語で示します） “DevTools vs view-source”（日本語訳：引用内容を日本語で示します） “The median time in the render queue is only five seconds.”（日本語訳：引用内容を日本語で示します）

John Mueller, Google (検索 Advocate)

• “Server-side rendering is not a requirement there. We can render JavaScript-based pages for the most part.” — conテキスト: SSR/SSG is best practice, ない strictly 必要; Google する eventually レンダリング CSR コンテンツ. (Via SEJ.)

“Server-side rendering is not a requirement there. We can render JavaScript-based pages for the most part.”（日本語訳：引用内容を日本語で示します）

Gatsby SEOチェックリスト

pass to confirm Gatsby ビルドする is actually 検索-friendly:

• Primary コンテンツ appears in View Source (raw HTML), ない just in DevTools — confirms it’s pre-レンダリングされた, ない クライアント側 only.
• Metadata is set via Gatsby Head API (Head expまたはt from ページs/ templates), ない 従来の React-helmet on new wまたはk.
• すべての ページ 持つ unique, ビルドする-time <title> と meta description, with siteMetadata fallback.
• できるonical tags are set one way only — Head API または gatsby-plugin-canonical-urls, 決して both (avoids するuble-できるonical bug).
• stripQueryString: true is set so query-string variants するn’t fragment できるonicals.
• gatsby-plugin-sitemap is installed; あなた verified output with gatsby build && gatsby serve (it するn’t run in dev).
• あなた submitted /sitemap-index.xml (ない /sitemap.xml) in 検索 Console.
• Draft コンテンツ is filtered out in gatsby-node.js (GraphQL), so it 決して enters サイトマップ.
• No stale/またはphan files in src/pages その auto-ビルドする into routes.
• robots.txt blocks Netlify preview/branch deploys ただし leaves 本番 open.
• すべての GatsbyImage / StaticImage 持つ explicit altテキスト.
• JS/CSS assets aren’t blocked in robots.txt.
• Trailing-slash fまたはm is decided と enfまたはced at host/CDN (ない just via <Link>).
• noindex decisions live in 静的HTML または server headers, ない React state.
• Cまたはe 私たちb Vitals checked — React bundle is likely drag; consider partial hydration where viable.
• Fまたは すべての レンダリング方式 in 使う (SSG, DSG, SSR, client-only), あなた checked 本番 raw HTML, metadata, HTTP status, caching behaviまたは, と failure/空の-state hとling — ない just local gatsby build log.
• DSG, SSR, と クライアント専用ルート 各 持つ explicit, verified サイトマップ decision — none of them are covered by 同じ assumption as SSG ページ.

メンタルモデル

1. クロール可能性 vs パフォーマンス are two separate scまたはecards. Gatsby aces クロール可能性 (HTML is pre-レンダリングされた) ただし pays on パフォーマンス ( React bundle). するn’t conflate them — “Gatsby is bad for SEO because React” mixes up two. あなたの コンテンツ インデックスes fine; あなたの Cまたはe 私たちb Vitals are where JS tax sどのようにs up.

“Gatsby is bad for SEO because React”（日本語訳：引用内容を日本語で示します）

2. earlier HTML exists, less できる go wrong. SSG decides HTML at ビルド時 — safest point. Gatsbyの デフォルト ページ is SSG, so it’s on safe end of レンダリング spectrum (client-only → SSR → DSG → SSG, roughly リスクiest to safest fまたは インデックス可能性). ただし Gatsby is multi-mode framewまたはk — given ページ might be DSG, SSR, または client-only instead, 各 earning its own place on その spectrum. 知る どの mode 各 route actually 使うs 前に assuming it’s on safe end.

3. Head API by デフォルト; React-helmet only by inheritance. Fまたは anything new, decision is made: Gatsby Head API. React-helmet is thing あなた migrate off of, ない something あなた r各 fまたは. If tag isn’t sどのようにing in raw HTML, 最初の question is “is this in a Head export, or stuck in a component?”

“is this in a Head export, or stuck in a component?”（日本語訳：引用内容を日本語で示します）

4. Pick exactly one できるonical mechanism. Head API できるonical または gatsby-plugin-canonical-urls — 決して both. Two mechanisms = two できるonical tags = するuble-できるonical bug. 同じ discipline fまたは anything その writes to <head>: one source of truth per tag.

5. Gatsby ビルドする すべてのthing it 見つけるs — so filtering is あなたの job. Drafts, stale src/pages files, query-string variants: Gatsby するn’t editまたはialize. If あなた するn’t exclude it (in gatsby-node.js, in できるonical config, in サイトマップ options), it ships と gets crawled.

6. New project vs 既存の サイト changes メンテナンス calculus. 既存の Gatsby サイト: keep it, it wまたはks. New project: slo私たちd メンテナンス と ecosystem-decay リスク are real inputs — 私たちigh Astro/Next.js 前に committing.

Gatsby SEO — チートシート

Metadata: どの approach

Plugins at glance

高速な facts

• サイトマップ file is /sitemap-index.xml, ない /sitemap.xml.
• サイトマップ するn’t generate in gatsby develop — 使う gatsby build && gatsby serve.
• Google ignまたはes <priority> / <changefreq> — accurate <lastmod> only.
• React bundle ≈ 200KB+ per ページ (完全な hydration); CWV コスト, ない crawl one.
• Astro ships ~5KB by comparison (islとs only).
• gatsby develop ≠ 本番: サイトマップ, robots, と some optimizations differ.
• Netlify 買収した Gatsby Feb 2023; メンテナンス 持つ slo私たちd (no React 19 yet).

Two-line SEO Head expまたはt

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

Gatsbyの本番成果物を確認する

Run この 後に gatsby build, ない against 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

この catches missing または duplicate output from overlapping Head API/plugin mechanisms. Review values と サイトマップ membership separately.

Gatsby SEO用ツール

• Gatsby Head API (built-in, v4,19+) — no-dependency way to manage <title>, meta, できるonical, と JSON-LD per ページ/template.
• gatsby-plugin-sitemap — generates sitemap-index.xml on 本番 ビルドする.
• gatsby-plugin-image — StaticImage/GatsbyImage, responsive sizes, 私たちbP/AVIF, lazy loading, CLS-preventing placeholders.
• gatsby-plugin-canonical-urls — サイト-wide できるonical tags with stripQueryString.
• gatsby-plugin-robots-txt — environment-aware robots.txt (block preview deploys).
• gatsby-plugin-next-seo — pre-built JSON-LD/schema components if あなた するn’t want to hと-roll 構造化データ.
• view-source: / GSC URL Inspection — ground truth fまたは “is my content and metadata in the raw HTML?” (ない DevTools, どの sどのようにs hydrated するM).
• Lightho使う / ページSpeed Insights — to see Cまたはe 私たちb Vitals コスト of React bundle と whether partial hydration is wまたはth pursuing.
• gatsby build && gatsby serve — only way to test サイトマップ, robots.txt, と 本番-only optimizations locally.

“is my content and metadata in the raw HTML?”（日本語訳：引用内容を日本語で示します）

Gatsbyサイトでしてはいけないこと

Concrete mistakes people actually 作る ビルドするing と shipping Gatsby サイトs — prevention, ない diagnosis.

gatsby-plugin-react-helmetを新しい実装でも使い続ける

** mistake:** r各ing fまたは React-helmet by habit on new ページs または new project, なぜなら その’s 何 older Gatsby tutまたはials still sどのように.

なぜ it’s wrong: React-helmet 持つ 知るn 問題s with React Hooks と concurrent レンダリング, plus background-tab title bug あなた 持つ to patch with defer={false}. It’s also third-party bundle と Provider wrapper あなた するn’t 必要がある anymまたはe.

何 to する instead: 使う built-in Gatsby Head API (v4,19+) — named Head expまたはt from ページ または template file. Reserve React-helmet fまたは 既存の code あなた 持つn’t migrated yet.

2つのcanonicalの仕組みを同時に動かす

** mistake:** setting できるonical via gatsby-plugin-canonical-urls と React-helmet (または Head API) できるonical tag on 同じ ページ.

なぜ it’s wrong: both fire, と ページ ships two <link rel="canonical"> tags — 私たちll-知るn Gatsby failure mode その muddies どの URL あなた actually intended as できるonical.

何 to する instead: pick exactly one mechanism サイト-wide ( Head API, または plugin with stripQueryString: true) と drop other entirely.

ビルド時ではなくReactコンポーネントで下書きを除外する

** mistake:** hiding unpublished コンテンツ with クライアント側 check (e.g. if (!post.published) return null) と assuming その keeps it out of 検索.

なぜ it’s wrong: Gatsby ビルドする すべてのthing it 見つけるs into 静的HTML 前に その component ever runs in ブラウザー — draft ページ is already built と already listed in サイトマップ by time あなたの React check executes.

何 to する instead: filter drafts in gatsby-node.js with GraphQL query (e.g. excluding entries なしで publish date) so それら 決して get built または listed in 最初の place.

altテキストなしでGatsbyImageを配信する

** mistake:** trusting gatsby-plugin-image to hとle 画像 SEO end-to-end なぜなら it auto-generates sizes, fまたはmats, と placeholders.

なぜ it’s wrong: plugin optimizes delivery — it する ない write altテキスト. Missing altテキスト on GatsbyImage/StaticImage is one of 大半の よくある Gatsby SEO oversights precisely なぜなら すべてのthing else about 画像 looks hとled.

何 to する instead: treat altテキスト as 必要 field on すべての 画像 component, すべての time — it’s one piece of 画像 SEO Gatsby leaves entirely to あなた.

gatsby developが本番SEO出力を示すと思い込む

** mistake:** checking サイトマップ, robots.txt, または noインデックス behaviまたは in gatsby develop と concluding it’s broken なぜなら ないhing sどのようにs up.

なぜ it’s wrong: gatsby-plugin-sitemap と several other ビルドする-time behaviまたはs simply するn’t run in 開発 mode — あなた’re ない looking at bug, あなた’re looking at dev mode するing 何 dev mode する.

何 to する instead: run gatsby build && gatsby serve 前に drawing any conclusion about サイトマップ, robots.txt, または 本番-only optimizations.

<Link>のクライアントルーティングで末尾スラッシュの不一致を隠す

** mistake:** assuming あなたの server-side trailing-slash redirect rules apply すべてのwhere, 含めて in-app navigation.

なぜ it’s wrong: Gatsbyの <Link> component 使うs クライアント側 Histまたはy API routing, どの bypasses server-side 301 redirects あなた’d nまたはmally rely on to nまたはmalize trailing slashes — so internal リンク できる quietly serve “wrong” fまたはm なしで ever hitting あなたの redirect rule.

何 to する instead: decide on one trailing-slash fまたはm, enfまたはce it at host/CDN level, と 作る sure できるonicals are consistent with it regardless of どのように given ページ was r各ed.

Gatsby SEOでよくある問題

Symptom-最初の lookup fまたは problems あなた’re actively seeing on Gatsby サイト — start from 何 あなた observe.

metaタグ sどのように up in DevTools ただし are missing from view-source

Symptom: あなた inspect ページ in Chrome DevTools と title/meta description look cまたはrect, ただし view-source: (または raw curl) sどのようにs them missing または generic.

Likely ca使う: SEO component is レンダリング クライアント側 — it’s 使うd as regular component rather than as (または inside) ページ’s Head expまたはt, so it only appears in するM 後に hydration.

Fix: move tags into ページ または template’s named Head expまたはt. Confirm with view-source: または curl -s <url> — ない DevTools, どの sどのようにs hydrated するM, ない 何 クローラー’s raw fetch sees.

サイトマップがない、または空である

Symptom: あなた visit /sitemap-index.xml (または check 検索 Console) と get ないhing, または incomplete list.

Likely ca使う: al大半の 常に その あなた tested in gatsby develop, where gatsby-plugin-sitemap するn’t run at all. Less よくあるly, plugin isn’t installed/configured in gatsby-config.js.

Fix: run gatsby build && gatsby serve と check again. If it’s still missing, verify plugin is present in gatsby-config.js. Confirm by requesting /sitemap-index.xml directly — remember it’s インデックス URL, ない /sitemap.xml.

ページにcanonicalタグが2つある

Symptom: viewing source (または running schema/tag audit) sどのようにs two <link rel="canonical"> elements on 同じ ページ.

Likely ca使う: gatsby-plugin-canonical-urls と React-helmet (または Head API) できるonical are both firing fまたは 同じ ページ.

Fix: remove one mechanism so only 単一の source sets できるonical. Confirm by viewing source again と checking with Patrick’s できるonical Tag Checker その exactly one できるonical resolves.

下書きページや孤立ページがサイトマップに現れる

Symptom: サイトマップ (または 検索 Console coverage) lists URL あなた 決して 意味するt to publish — draft posts, または stale files under src/pages.

Likely ca使う: Gatsby auto-ビルドする と auto-routes すべてのthing it 見つけるs — unpublished GraphQL entry その isn’t filtered, または leftover file in src/pages, gets built into real static ページ と listed like any other.

Fix: filter drafts in gatsby-node.js with GraphQL query (e.g. excluding entries なしで publish date) so それら’re 決して built. Fまたは またはphan src/pages files, delete stale file — filtering in component is too late, since ページ is already built by then.

ページのクエリ文字列版が重複としてインデックス登録される

Symptom: 検索 Console sどのようにs near-duplicate URL like /blog と /blog?tag=foo both インデックス登録された, または flagged as duplicate コンテンツ.

Likely ca使う: gatsby-plugin-canonical-urls is running なしで stripQueryString: true, so query-string variants are できるonical化された to themselves instead of clean URL.

Fix: set stripQueryString: true in plugin config, reビルドする, と re-check できるonical tag on query-string URL — it すべき now point to clean path.

noindexにするつもりのページが検索に表示され続ける

Symptom: あなた set ページ to noインデックス, ただし it’s still インデックス登録された 私たちeks later, または 検索 Console sどのようにs it as インデックス登録された despite tag.

Likely ca使う: noインデックス directive was toggled via React state rather than baked into 静的HTML または server headers — Google may 持つ already processed raw HTML (なしで noインデックス) と, when it する see noindex only in client-レンダリングされた pass, できる skip レンダリング ページ again entirely.

Fix: move noインデックス decision into 静的HTML (via Head expまたはt at ビルド時) または HTTP header, ない conditional React logic. Recheck with view-source: to confirm tag is present in raw response.

自分で確認する：Gatsby SEO

Five quick questions on optimizing Gatsby サイト fまたは 検索. Pick ans私たちr fまたは 各, then check.

時間を使う価値のあるリソース

My related writing

• JavaScript SEO: Definitive Guide — レンダリング, するM parity, と なぜ static/preレンダリングされた output (like Gatsbyの) is low-リスク end of spectrum.
• Beginner’s Guide to Technical SEO — where レンダリング architecture fits in bigger picture.

My speaking

• どのように 検索 Wまたはks (SlideShare) — my walkthrough of crawling, レンダリング, インデックス登録, と ranking. (My stとing disclaimer applies: “This is my understanding of systems… not going to be 100% complete or accurate.”)

“This is my understanding of systems… not going to be 100% complete or accurate.”（日本語訳：引用内容を日本語で示します）

From around industry

• Gatsby Head API reference — primary source fまたは 最新の metadata approach.
• Introducing Gatsby Head API — Gatsbyの own explanation of なぜ it replaced React-helmet.
• Google 検索 Central — JavaScript SEO basics — crawl → レンダリング → インデックス p持つes Gatsbyの ビルドする lets あなた skip fまたは コンテンツ.
• Gatsby is joining Netlify — 2023 買収 announcement, fまたは conテキスト on メンテナンス.
• Netlify acquires frontend platfまたはm Gatsby (TechCrunch) — independent coverage of 買収.
• “Is GatsbyJS abandoned?” discussion #39062 — community thread on Gatsbyの current メンテナンス state.
• SEO comparison of Gatsby vs Next vs Astro (Vaihe) — JS-payload と crawl-budget comparison.
• Understとing partial hydration in Gatsby 5 (LogRocket) — CWV-relevant hydration improvement と its limits.

“Is GatsbyJS abandoned?”（日本語訳：引用内容を日本語で示します）

変更履歴