Gatsby SEO: Jak vytěžit maximum ze statických stránek
Gatsby je jedním z nejpopulárnějších frameworků pro vytváření statických webových stránek. Díky pre-renderingu a optimalizacím přímo v jádru nabízí vynikající výchozí pozici pro SEO. Ale jak z něj vytěžit skutečné maximum?
V tomto průvodci vám ukážu konkrétní kroky, pluginy a kódové příklady, které posunou vaše Gatsby stránky na první místa ve vyhledávání.
Co je Gatsby a proč je tak rychlý?
Gatsby je open-source framework postavený na Reactu, který generuje statické HTML stránky během build procesu. Na rozdíl od tradičních CMS nebo server-side renderovaných aplikací se vše připraví předem.
JAMstack architektura
Gatsby je postavený na JAMstack principech:
- JavaScript: Dynamická funkcionalita na klientu
- API: Serverové operace přes API (headless CMS, e-commerce)
- Markup: Pre-renderované HTML stránky
Proč je to rychlé:
Když uživatel navštíví vaši stránku, server nemusí nic generovat. Pouze pošle hotový HTML soubor z CDN. Výsledek? Načítání v řádu milisekund.
Tradiční web:
Požadavek → Server → Databáze → Render → Odpověď (500-2000 ms)
Gatsby:
Požadavek → CDN → Hotový HTML (50-100 ms)
Gatsby vs Next.js: Kdy zvolit který?
Moje doporučení: Gatsby je ideální pro obsahové weby s méně častými změnami. Pokud potřebujete real-time data nebo e-shop se stovkami produktů, zvažte Next.js s ISR (Incremental Static Regeneration).
Základní SEO nastavení v Gatsby
gatsby-plugin-react-helmet
Pro správu meta tagů v Gatsby používáme knihovnu react-helmet v kombinaci s oficiálním pluginem.
Instalace:
npm install gatsby-plugin-react-helmet react-helmet
Konfigurace v gatsby-config.js:
module.exports = {
plugins: [
'gatsby-plugin-react-helmet',
],
}
SEO komponenta pattern
Nejlepší praxí je vytvořit univerzální SEO komponentu, kterou použijete na každé stránce:
// src/components/SEO.jsx
import React from 'react'
import { Helmet } from 'react-helmet'
import { useStaticQuery, graphql } from 'gatsby'
const SEO = ({ title, description, image, article, pathname }) => {
const { site } = useStaticQuery(query)
const {
defaultTitle,
defaultDescription,
siteUrl,
defaultImage,
twitterUsername,
} = site.siteMetadata
const seo = {
title: title || defaultTitle,
description: description || defaultDescription,
image: `${siteUrl}${image || defaultImage}`,
url: `${siteUrl}${pathname || ''}`,
}
return (
<Helmet title={seo.title}>
<meta name="description" content={seo.description} />
<meta name="image" content={seo.image} />
{/* Open Graph */}
<meta property="og:url" content={seo.url} />
<meta property="og:type" content={article ? 'article' : 'website'} />
<meta property="og:title" content={seo.title} />
<meta property="og:description" content={seo.description} />
<meta property="og:image" content={seo.image} />
{/* Twitter */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content={twitterUsername} />
<meta name="twitter:title" content={seo.title} />
<meta name="twitter:description" content={seo.description} />
<meta name="twitter:image" content={seo.image} />
</Helmet>
)
}
const query = graphql`
query SEO {
site {
siteMetadata {
defaultTitle: title
defaultDescription: description
siteUrl
defaultImage: image
twitterUsername
}
}
}
`
export default SEO
Použití v šabloně článku:
// src/templates/blog-post.jsx
import React from 'react'
import { graphql } from 'gatsby'
import SEO from '../components/SEO'
const BlogPost = ({ data, location }) => {
const post = data.markdownRemark
return (
<>
<SEO
title={post.frontmatter.title}
description={post.frontmatter.description}
image={post.frontmatter.image?.publicURL}
pathname={location.pathname}
article
/>
<article>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</article>
</>
)
}
export default BlogPost
Meta tagy a Open Graph
Klíčové meta tagy pro SEO v Gatsby:
Technické SEO pluginy pro Gatsby
gatsby-plugin-sitemap
Automaticky generuje XML sitemap při každém buildu:
// gatsby-config.js
module.exports = {
siteMetadata: {
siteUrl: 'https://vasedomena.cz',
},
plugins: [
{
resolve: 'gatsby-plugin-sitemap',
options: {
query: `
{
allSitePage {
nodes {
path
}
}
}
`,
resolveSiteUrl: () => 'https://vasedomena.cz',
resolvePages: ({ allSitePage: { nodes: allPages } }) => {
return allPages.map(page => ({
path: page.path,
changefreq: 'weekly',
priority: page.path === '/' ? 1.0 : 0.7,
}))
},
serialize: ({ path, changefreq, priority }) => ({
url: path,
changefreq,
priority,
}),
},
},
],
}
gatsby-plugin-robots-txt
Generuje robots.txt s pravidly pro crawlery:
// gatsby-config.js
{
resolve: 'gatsby-plugin-robots-txt',
options: {
host: 'https://vasedomena.cz',
sitemap: 'https://vasedomena.cz/sitemap-index.xml',
policy: [
{
userAgent: '*',
allow: '/',
disallow: ['/admin/', '/private/']
}
],
},
}
gatsby-plugin-canonical-urls
Automaticky přidává kanonické URL ke všem stránkám:
{
resolve: 'gatsby-plugin-canonical-urls',
options: {
siteUrl: 'https://vasedomena.cz',
stripQueryString: true,
},
}
Proč je to důležité: Kanonické URL zabraňují problémům s duplicitním obsahem a konsolidují link juice na jednu verzi stránky.
Gatsby Image a rychlost načítání
Rychlost načítání je klíčová pro Core Web Vitals a tím pádem pro SEO. Gatsby nabízí pokročilé nástroje pro optimalizaci obrázků.
gatsby-plugin-image (Gatsby 3+)
Nová generace optimalizace obrázků:
import { StaticImage, GatsbyImage, getImage } from 'gatsby-plugin-image'
// Statický obrázek (cesta známá při buildu)
const Hero = () => (
<StaticImage
src="../images/hero.jpg"
alt="Popis obrázku pro SEO"
placeholder="blurred"
layout="fullWidth"
formats={['auto', 'webp', 'avif']}
/>
)
// Dynamický obrázek (z GraphQL query)
const BlogPost = ({ data }) => {
const image = getImage(data.markdownRemark.frontmatter.featuredImage)
return (
<GatsbyImage
image={image}
alt={data.markdownRemark.frontmatter.imageAlt}
loading="lazy"
/>
)
}
Co Gatsby Image dělá automaticky
Performance benchmark
Srovnání načítání stránky s 10 obrázky:
Strukturovaná data v Gatsby
Schema markup pomáhá vyhledávačům lépe pochopit obsah vašich stránek a může vést k rich snippets ve výsledcích vyhledávání.
JSON-LD implementace
Nejčistší způsob je vytvořit komponenty pro různé typy schema:
// src/components/SchemaOrg.jsx
import React from 'react'
import { Helmet } from 'react-helmet'
export const ArticleSchema = ({
title,
description,
image,
datePublished,
dateModified,
author,
url
}) => {
const schema = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description: description,
image: image,
datePublished: datePublished,
dateModified: dateModified || datePublished,
author: {
'@type': 'Person',
name: author,
},
publisher: {
'@type': 'Organization',
name: 'Vaše firma',
logo: {
'@type': 'ImageObject',
url: 'https://vasedomena.cz/logo.png',
},
},
mainEntityOfPage: {
'@type': 'WebPage',
'@id': url,
},
}
return (
<Helmet>
<script type="application/ld+json">
{JSON.stringify(schema)}
</script>
</Helmet>
)
}
export const FAQSchema = ({ questions }) => {
const schema = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: questions.map(q => ({
'@type': 'Question',
name: q.question,
acceptedAnswer: {
'@type': 'Answer',
text: q.answer,
},
})),
}
return (
<Helmet>
<script type="application/ld+json">
{JSON.stringify(schema)}
</script>
</Helmet>
)
}
export const BreadcrumbSchema = ({ items }) => {
const schema = {
'@context': 'https://schema.org',
'@type': 'BreadcrumbList',
itemListElement: items.map((item, index) => ({
'@type': 'ListItem',
position: index + 1,
name: item.name,
item: item.url,
})),
}
return (
<Helmet>
<script type="application/ld+json">
{JSON.stringify(schema)}
</script>
</Helmet>
)
}
Použití v šabloně
import { ArticleSchema, FAQSchema } from '../components/SchemaOrg'
const BlogPost = ({ data, location }) => {
const post = data.markdownRemark
const siteUrl = data.site.siteMetadata.siteUrl
return (
<>
<ArticleSchema
title={post.frontmatter.title}
description={post.frontmatter.description}
image={`${siteUrl}${post.frontmatter.image}`}
datePublished={post.frontmatter.date}
author="Jan Novák"
url={`${siteUrl}${location.pathname}`}
/>
{post.frontmatter.faq && (
<FAQSchema questions={post.frontmatter.faq} />
)}
{/* Obsah článku */}
</>
)
}
Data sourcing a SEO
Integrace s bezhlavým CMS (headless CMS)
Gatsby exceluje v propojení s bezhlavými CMS systémy (headless CMS):
GraphQL pro SEO data
GraphQL vrstva v Gatsby umožňuje efektivně získávat SEO data:
query BlogPostSEO($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
frontmatter {
title
description
date(formatString: "YYYY-MM-DD")
image {
publicURL
childImageSharp {
gatsbyImageData(width: 1200, height: 630)
}
}
keywords
author
}
excerpt(pruneLength: 160)
tableOfContents
}
}
Tip: Využijte excerpt jako fallback pro meta description, pokud není explicitně definován.
Build a deployment
Gatsby Cloud
Gatsby Cloud je optimalizovaná platforma pro Gatsby projekty:
Výhody:
- Inkrementální buildy (jen změněné stránky)
- Preview prostředí pro CMS
- Automatické deploye z Gitu
- Integrované CDN
Čas buildu srovnání (500 stránek):
Netlify a Vercel
Obě platformy podporují Gatsby, ale s drobnými rozdíly:
Netlify:
# netlify.toml
[build]
command = "gatsby build"
publish = "public"
[[plugins]]
package = "netlify-plugin-gatsby-cache"
Vercel:
// vercel.json
{
"framework": "gatsby",
"buildCommand": "gatsby build",
"outputDirectory": "public"
}
Incremental builds
Pro velké weby je klíčové nastavit inkrementální buildy:
// gatsby-config.js
module.exports = {
flags: {
FAST_DEV: true,
PARALLEL_SOURCING: true,
PRESERVE_FILE_DOWNLOAD_CACHE: true,
},
// ...
}
Praktické tipy pro Gatsby SEO
1. Prefetching pro rychlou navigaci
Gatsby automaticky prefetchuje odkazy, které jsou viditelné na stránce:
import { Link } from 'gatsby'
// Prefetch se aktivuje při hover
<Link to="/dalsi-clanek/">Další článek</Link>
2. Offline podpora
// gatsby-config.js
{
resolve: 'gatsby-plugin-offline',
options: {
precachePages: ['/blog/*', '/kontakt/'],
},
}
3. Web Vitals monitoring
// gatsby-browser.js
export const onClientEntry = () => {
if ('web-vital' in window) {
import('web-vitals').then(({ getCLS, getFID, getLCP }) => {
getCLS(console.log)
getFID(console.log)
getLCP(console.log)
})
}
}
Závěr: Je Gatsby stále relevantní v roce 2026?
Gatsby prošel za poslední roky výrazným vývojem. Přestože Next.js získal větší popularitu díky flexibilitě, Gatsby zůstává vynikající volbou pro:
- Obsahové weby a blogy s předvídatelným obsahem
- Dokumentace a knowledge base
- Portfolio a prezentační weby
- Marketing landing pages s důrazem na rychlost
Klíčové výhody pro SEO:
- Bleskurychlé načítání díky SSG
- Automatická optimalizace obrázků
- Bohatý plugin ekosystém
- Snadná integrace schema markup
Pokud váš projekt odpovídá těmto kritériím, Gatsby vám poskytne solidní základ pro SEO úspěch.
Potřebujete pomoct s technickým SEO pro Gatsby?
Pomáhám firmám optimalizovat weby na Gatsby a dosáhnout lepších výsledků. Bez složitých smluv, jen výsledky.
Související články
- SSR vs CSR vs SSG: Který rendering zvolit pro lepší SEO?
- JavaScript SEO: CSR vs SSR a jak zlepšit indexaci
- Core Web Vitals: Kompletní průvodce
- Optimalizace obrázků pro SEO
- Schema markup: Strukturovaná data pro vyšší CTR
Často kladené otázky (FAQ)
1. Je Gatsby lepší než Next.js pro blog?
Záleží na vašich potřebách. Gatsby je lepší volba, pokud:
- Publikujete obsah méně často (1-10 článků týdně)
- Nepotřebujete real-time data
- Chcete maximální rychlost bez kompromisů
- Preferujete GraphQL data layer
Next.js je lepší, pokud:
- Máte stovky stránek a potřebujete ISR
- Kombinujete statický a dynamický obsah
- Plánujete rozšíření o e-commerce nebo SaaS funkce
Pro čistě blogový projekt s důrazem na SEO je Gatsby stále vynikající volba.
2. Jak přidat meta tagy v Gatsby?
Nejlepší způsob je vytvořit univerzální SEO komponentu pomocí react-helmet:
- Nainstalujte
gatsby-plugin-react-helmetareact-helmet - Vytvořte SEO komponentu (viz příklad výše v článku)
- Importujte a použijte komponentu na každé stránce
<SEO
title="Název stránky"
description="Popis pro vyhledávače"
image="/og-image.jpg"
/>
Komponenta automaticky přidá title, meta description, Open Graph a Twitter Card tagy.
3. Proč je Gatsby tak rychlý?
Gatsby je rychlý ze tří hlavních důvodů:
- Pre-rendering: Všechny HTML stránky se generují při buildu, ne při každém požadavku
- Automatické optimalizace: Minifikace, code splitting, lazy loading jsou vestavěné
- CDN distribuce: Statické soubory se servírují z nejbližšího edge serveru
V praxi to znamená, že první contentful paint (FCP) je často pod 1 sekundu, což výrazně zlepšuje Core Web Vitals skóre.
4. Mohu použít Gatsby pro e-shop?
Ano, ale s omezeními. Gatsby funguje dobře pro:
- Menší katalogy (desítky až stovky produktů)
- Statické prezentace produktů
- Integrace s bezhlavým e-commerce (headless) jako Shopify, Saleor, Medusa
Problémy nastávají u:
- Velkých katalogů (stovky produktů = dlouhé build časy)
- Časté změny cen a dostupnosti
- Real-time funkce (košík, checkout)
Pro větší e-shopy doporučuji Next.js s ISR nebo hybridní přístup, kde je Gatsby jen pro marketingové stránky.
5. Je Gatsby stále aktuální v roce 2026?
Ano, Gatsby je stále relevantní, i když jeho pozice se změnila:
Aktuální stav (2026):
- Gatsby 5 přinesl Partial Hydration a Slice API pro lepší výkon
- Gatsby Cloud nabízí inkrementální buildy
- Komunita je stále aktivní, ale menší než u Next.js
Kdy Gatsby zvolit:
- Obsahové weby, blogy, dokumentace
- Projekty s důrazem na maximální rychlost
- Týmy preferující GraphQL
Kdy hledat alternativy:
- Velké dynamické aplikace
- E-shopy s tisíci produkty
- Projekty vyžadující SSR
Gatsby není mrtvý, ale našel své místo jako specializovaný nástroj pro statické weby, nikoliv univerzální řešení.
O autorce
Ing. Jana Hrabalová
SEO specialistka
SEO se věnuji od roku 2012. Pomáhám firmám získat více zákazníků z Google a přežít každý algoritmus update bez škrábnutí.
📚 Čtěte dále
Získejte SEO článek zdarma
Publikuji váš článek na kvalitním webu s vysokou autoritou
- Publikace na webu s DA 50+
- Dofollow odkaz na váš web
- Profesionální copywriting
Vyzkoušejte také mé bezplatné SEO nástroje: