Langues

Guide Storyblok SEO

Storyblok is a visual CMS headless — it stores content but jamais renders votre pages, so SEO lives in the frontend. Rendering, meta fields, preview noindex, sitemaps, images.

Première publication : 27 juin 2026 · Dernière mise à jour : 3 août 2026 · Advanced
Langues
AIRédigé parAI v2
1 indice probant sur cette page

Storyblok is a visual CMS headless: it stores block-based content and sert it over REST/GraphQL, but it jamais renders votre pages — votre frontend framework fait, so SEO outcomes are almost entirely a frontend decision. SSG and SSR are safe; CSR risks vide HTML and delayed indexation. The built-in SEO Fields App and AI SEO App seulement ajouter fields; the frontend doit encore render meta tags, canonicals, sitemaps, robots.txt, and JSON-LD itself. The platform-specific trap is preview mode — block draft/preview environments with server-rendered noindex headers, jamais JavaScript. Utiliser the /m/ image service pour WebP and Core Web Vitals, and lean on Storyblok's structured content pour AI search.

TL;DR — Storyblok is a visual, API-first CMS headless: it stores block-based content and sert it over REST/GraphQL, but it jamais renders votre pages — the frontend framework fait, so SEO is a frontend decision. SSG and SSR ship fully-rendered HTML and are safe; CSR risks vide HTML and queued-render delays. The built-in SEO Fields App (seo-metatags) and AI SEO App (sb_ai_seo) seulement supply field valeurs — the frontend doit encore render meta tags, canonicals, sitemaps, robots.txt, and JSON-LD itself. The platform-specific trap is preview mode: block draft/preview environments with server-rendered X-Robots-Tag: noindex, jamais JavaScript, parce que Google may skip JS execution quand it sees a noindex. Utiliser the /m/ image service pour WebP + Core Web Vitals, generate the sitemap from le contenu Delivery API, and lean on the structured content model pour AI search.

Evidence for this claim The article's described storyblok-seo capabilities must be evaluated against the platform's current documentation rather than assumed to be search-engine behavior. Scope: Platform-specific capability documentation. Confidence: high · Verified: Storyblok documentation Evidence for this claim Regardless of platform, Google needs crawlable URLs, accessible rendered content, descriptive metadata, and valid search directives. Scope: Google requirements independent of platform. Confidence: high · Verified: Google Search Central: SEO Starter Guide

The fundamental split: Storyblok stores, the frontend renders

Storyblok is a backend. It donne vous a content model construit from reusable blocks, a visual editor, and a Content Delivery API (REST and GraphQL). Ce que it fait pas do is produce the HTML que moteur de recherches explorer. Que job belongs to a separate frontend — Suivant.js, Nuxt, Astro, SvelteKit — que récupère Storyblok content and renders pages.

Storyblok dit ce plainly: “Since Google doesn’t charger content directement from Storyblok, votre team is responsible pour a fast and performant website.” The même point montre up in leur structured-content guidance — “AI doesn’t voir votre CMS directement. Moteur de recherches and generative models lire what’s rendered on votre website or app, pas the JSON coming from Storyblok’s APIs.” Internalize que and almost every Storyblok SEO question réponses itself: the CMS is nearly SEO-neutral, and the frontend’s rendering decisions determine everything. Ce is the même architecture reality I cover in SEO pour a CMS headless; Storyblok is a spécifique, visual-editing flavor of it.

Rendering strategy: the la plupart important SEO decision

How votre frontend renders Storyblok content is the unique biggest SEO lever. Four modes, tout of qui récupérer content from the même Storyblok CDN/GraphQL API:

SSG — Static Site Generation. HTML is construit at deploy temps and served as static fichiers. Best-case SEO: complet HTML on premier requête, very fast. The catch is freshness — nouveau or edited content nécessite a rebuild, so wire Storyblok’s publish webhook to trigger un. Meilleur pour mostly-static content. Astro and Gatsby are SSG-first; Suivant.js and Nuxt prise en charge it per route.

SSR — Rendu côté serveur. HTML is rendered per requête on a server or edge function. Always-fresh, fully-rendered HTML. Meilleur pour frequently modification content; the tradeoff is infrastructure cost and slightly plus élevé TTFB.

ISR — Incremental Static Regeneration. Static by par défaut, regenerated on a schedule or on-demand. The recommended middle ground pour grand Storyblok sites with mixed content types — but remarque the stale-on-first-request-after-revalidation trap I detail in the CMS headless write-up.

CSR — Rendu côté client (SPA). Le serveur sends a near-empty shell and the navigateur builds the DOM. Googlebot doit queue lune page pour a plus tard render wave (qui “may stay on this queue for a few seconds, but it can take longer than that”). AI-crawler rendering varies by provider, so HTML-only fetchers voir seulement the shell. Jamais ship content pages as CSR-only. Google’s propre line: “Si le contenu isn’t visible in the rendered HTML, Google won’t be able to index it.”

The decision rule: mostly-static content → SSG; always-fresh/volatile content → SSR; grand mixed sites → ISR; CSR seulement pour logged-in, non-indexed surfaces.

Built-in Storyblok SEO fonctionnalités (and leur limites)

Storyblok ships three façons to manage SEO field valeurs. Tout three seulement capture valeurs — the frontend encore has to render les.

SEO Fields App (seo-metatags). A native plugin field que donne editors Title, Description, OG Title, OG Description, and OG Image inputs, plus a Google SERP snippet preview in the editor. Exige a Growth plan, and it has to be ajouté per content type — facile to forget on a nouveau content type.

AI SEO App (sb_ai_seo). Generates meta title, description, keywords, and author with an LLM, à travers 22 pris en charge languages. Exige Premium. Vous pouvez bulk-generate à travers tout stories with a Management API + Node.js script.

Manual field modeling. Aucun plan requirement: ajouter votre propre seo_title, seo_description, og_title, og_image, noindex (boolean), and canonical_url fields to votre content model. La plupart flexible, and ce que I’d reach pour on complex sites.

The non-negotiable: aucun Storyblok app auto-renders a unique tag. A global head/ layout component in votre framework doit lire the SEO field valeurs from the API réponse and output les server-side, with sensible fallback chains (seo_title || story.name).

Balise canonicals

Storyblok has aucun awareness of votre frontend Structure d’URL, so canonicals can’t come from the CMS. Compute les in the frontend — typically from the story’s full_slug plus votre domain — and render les server-side. Toujours absolute URLs, jamais relative, on every page template. (Pour the mechanics, voir canonicalization.)

Preview mode and draft content: the defining Storyblok risk

Ce is the platform-specific pitfall to obtenir correct. The Visual Editor loads votre pages à l’intérieur an iframe en utilisant preview URLs que carry _storyblok and _storyblok_tk parameters, and the preview environment uses draft content with a preview accès token. Production doit utiliser publié content with the public accès token. The clean pattern is two separate Storyblok spaces/projects (preview and production) so the incorrect token can’t leak draft content into the live index.

The critical partie is how vous garder preview/staging out of the index. Google warns: “Quand Google encounters the noindex tag, it may skip rendering and JavaScript execution, qui signifie en utilisant JavaScript to modifier or supprimer the robots meta tag from noindex may pas fonctionner as attendu.” En d’autres termes, a noindex injected by client-side JS is unreliable — Google may jamais run the JS. So protéger non-production environments with a server-rendered réponse header — X-Robots-Tag: noindex at the CDN/hosting level — and ajouter Disallow: / in que environment’s robots.txt. Watch Search Console pour unexpected preview domains showing up; that’s votre early warning.

Sitemaps and robots.txt

Storyblok generates neither. Les deux are frontend-built:

  • Sitemap: récupérer tout publié stories from le contenu Delivery API and emit XML. Astro: @astrojs/sitemap plus dynamic routes from the Liens API. Suivant.js: app/sitemap.ts or next-sitemap post-build. Scope with starts_with, paginate pour grand sites, and trigger a rebuild from the Storyblok publish webhook so le sitemap stays in sync.
  • robots.txt: aussi frontend-generated. Production devrait autoriser exploration of page publiques; preview/staging devrait Disallow: / (and carry the X-Robots-Tag header ci-dessus).

Données structurées / JSON-LD

Storyblok stores content as structured JSON, but schema.org JSON-LD has to be generated in the frontend — Googlebot reads the rendered HTML, pas the API réponse. Construire a JsonLd component que maps content fields and story properties (story.published_at, story.updated_at, story.name) into a server-rendered <script type="application/ld+json">. Article, BreadcrumbList, Organization, Product, and FAQPage are tout implementable ce façon.

Images and Core Web Vitals

Storyblok assets are served via Amazon CloudFront. The image service is a réel CWV win, but seulement quand utilisé correctement:

  • WebP + transforms activate quand vous append /m/ to the image URL — e.g. https://a.storyblok.com/f/xxxxx/image.jpg/m/800x600. Resize, crop, quality, and smart-crop are tout URL parameters; results are edge-cached après premier requête. Forget the /m/ and vous obtenir the unoptimized original.
  • Définir width and height on every image to prevent layout shift (CLS).
  • fetchpriority="high" + loading="eager" on the LCP hero image; loading="lazy" ci-dessous the fold.
  • Ajouter alt text as an explicit field on every image component — the filename field n’est pas texte alternatif. (Voir texte alternatif.)

Redirections, i18n, and hreflang

Redirections. Storyblok has aucun redirection manager, and modification a slug fait pas créer a 301. Pattern: a redirects_config story with nestable redirect_entry blocks (source_url, target_story), récupéré at construire/requête temps and injected into framework routing; utiliser resolve_relations so targets mettre à jour si slugs modifier, and refresh via the publish webhook.

Internationalization. Storyblok supports field-, folder-, and space-level translation, and API réponses inclure an alternates array of tout translated versions. Utiliser it to render <link rel="alternate" hreflang="..."> tags server-side, and toujours inclure x-default. (Voir hreflang.)

GEO / AI search readiness

Storyblok’s structured, component-based model is genuinely well-suited to AI consumption — “Storyblok was construit autour données structurées from day un, thanks to its headless, API-first design.” But the rendering rule encore rules: LLMs lire rendered HTML, so SSR/SSG, correct JSON-LD, and clean semantic markup are the price of entry. Vous pouvez aussi generate llms.txt (a markdown index of clé pages) and llms-full.txt (a complet content archive) at the frontend. (Voir AI search and llms.txt.)

L’essentiel

Storyblok is neither bon nor bad pour le SEO — it’s neutral, and it shifts the entier SEO burden onto the frontend. Obtenir rendering correct (SSR/SSG), render the meta fields the SEO apps capture, protéger preview with server-side noindex, construire le sitemap and robots.txt yourself, and utiliser the /m/ image service. Do que and a Storyblok site peut outperform a neglected traditional CMS. Skip it and the missing-by-default SEO couche is exactly où le site quietly falls apart. Connexe reading lives in CMS headless SEO and JavaScript SEO.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.