Guide Storyblok SEO

TL;DR — Storyblok est a “headless” CMS — c’est le placer vous écrire contenu, pas le chose que montre il. A séparé site web (construit avec Suivant.js, Nuxt, or Astro) pulls votre contenu et construit le réel pages. Que signifie presque tout de votre SEO dépend on comment que site web est construit, pas on Storyblok. Le big règle: construire votre pages on a serveur or à construire temps, pas entirely dans le visitor’s navigateur. Et le meta balises, sitemap, et robots.txt vous’d expect a CMS à handle? Vous ont à définir ceux up yourself.

Ce que Storyblok en réalité is

Storyblok est a visual CMS headless. “Headless” signifie il splits deux jobs que a traditional CMS comme WordPress garde ensemble: où vous écrire contenu et où il obtient affiché. Storyblok handles le writing side — il stores votre contenu as reusable bloque et donne editors a drag-et-drop visual editor — et alors hands que contenu à a séparé site web via an API.

Le site web partie est construit avec a framework comme Suivant.js, Nuxt, Astro, or SvelteKit. Que site web récupère votre Storyblok contenu et turns il dans le HTML que Google et Bing lire. Donc quand personnes demander me “est Storyblok bon pour SEO?”, le honest réponse est: Storyblok itself barely affecte votre SEO — le site web votre developers construire on top de il fait.

The un rule que matters la plupart

Quand Googlebot demande pour une page, le finished HTML a à être ready. Là sont deux sûr façons à faire que et un risky façon:

• Construire pages ahead de temps (SSG) — Storyblok contenu est baked dans plain HTML fichiers quand le site deploys. Rapide et recherche-friendly.
• Construire pages on a serveur (SSR) — le serveur assembles le complet page pour chaque requête. Aussi recherche-friendly et toujours fresh.
• Construire pages dans le navigateur (CSR) — le serveur sends a near-empty page et JavaScript fills il dans afterward. Ce est le risky un.

Google peut exécuter JavaScript et eventually lire a navigateur-built page, mais il se produit plus tard et moins reliably — et la plupart AI robots d’exploration (le bots behind ChatGPT et Perplexity) ne pas exécuter JavaScript à tout. Ils simplement voir le vide page. Donc construire votre HTML on le serveur or à construire temps.

The stuff Storyblok won’t do pour vous

Dans WordPress, a plugin comme Yoast quietly handled votre titre balises, meta descriptions, sitemap, et balise canonicals. Storyblok a aucun plugin couche doing que. Storyblok fait offer an SEO Champs App que ajoute titre/description boxes pour editors à fill dans — mais même alors, votre developer a à faire le site web en réalité sortie ceux valeurs dans lune page. Rien est automatic. Vous’ll besoin quelqu’un à:

• Ajouter SEO champs (titre, description, etc.) à votre contenu.
• Wire ceux champs dans lune page’s <head>.
• Construire a sitemap et a robots.txt dans le frontend.
• Ajouter données structurées (schema) dans le frontend.

The chose que quietly breaks: preview pages

Storyblok’s visual editor previews votre pages on a séparé preview adresse. Si que preview site est reachable par Google, il peut obtenir indexé — et maintenant vous avez obtenu a duplicate, draft copy de votre site dans recherche. Le corriger est à bloquer preview/staging depuis indexation en utilisant a serveur-level noindex, pas a JavaScript un (plus on pourquoi que distinction matters dans le Avancé tab).

Vouloir le complet version — le four rendu modes, le SEO Champs App vs. AI SEO App, le preview noindex trap, sitemaps, le /m/ image trick, et AI recherche? Switch à le Avancé tab.

TL;DR — Storyblok est a visual, API-premier CMS headless: il stores bloquer-based contenu et sert il over REST/GraphQL, mais il jamais renders votre pages — le frontend framework fait, donc SEO est a frontend décision. SSG et SSR ship fully-rendu HTML et sont sûr; CSR risques vide HTML et queued-rendre delays. Le built-dans SEO Champs App (seo-metatags) et AI SEO App (sb_ai_seo) seulement supply champ valeurs — le frontend doit encore rendre meta balises, canonicals, sitemaps, robots.txt, et JSON-LD itself. Le plateforme-spécifique trap est preview mode: bloquer draft/preview environments avec serveur-rendu X-Robots-Balise: noindex, jamais JavaScript, parce que Google peut skip JS execution quand il voit a noindex. Utiliser le /m/ image service pour WebP + Core Web Vitals, generate le sitemap depuis le contenu Delivery API, et lean on le structured contenu model pour AI recherche.

Le fundamental split: Storyblok stores, le frontend renders

Storyblok est a backend. Il donne vous a contenu model construit depuis reusable bloque, a visual editor, et a Contenu Delivery API (REST et GraphQL). Ce que il fait pas faire est produce le HTML que moteur de recherches explorer. Que job belongs à a séparé frontend — Suivant.js, Nuxt, Astro, SvelteKit — que récupère Storyblok contenu et renders pages.

Storyblok dit ce plainly: “Since Google ne fait pas charger contenu directement depuis Storyblok, votre team est responsible pour a rapide et performant site web.” Le même point montre up dans leur structured-contenu guidance — “AI ne fait pas voir votre CMS directement. Moteur de recherches et generative models lire qu’est-ce que rendu on votre site web or app, pas le JSON coming depuis Storyblok’s APIs.” Internalize que et presque chaque Storyblok SEO question réponses itself: le CMS est nearly SEO-neutral, et le frontend’s rendu decisions determine tout. Ce est le même architecture reality Je cover dans SEO pour a CMS headless; Storyblok est a spécifique, visual-editing flavor de il.

Rendering strategy: the la plupart important SEO decision

Comment votre frontend renders Storyblok contenu est le unique biggest SEO lever. Four modes, tout de qui récupérer contenu depuis le même Storyblok CDN/GraphQL API:

SSG — Static Site Generation. HTML est construit à deploy temps et servi as static fichiers. Meilleur-case SEO: complet HTML on premier requête, very rapide. Le catch est freshness — nouveau or edited contenu nécessite a rebuild, donc wire Storyblok’s publish webhook à trigger un. Meilleur pour mostly-static contenu. Astro et Gatsby sont SSG-premier; Suivant.js et Nuxt prise en charge il per route.

SSR — Rendu côté serveur. HTML est rendu per requête on a serveur or edge function. Toujours-fresh, fully-rendu HTML. Meilleur pour frequently modification contenu; le tradeoff est infrastructure coût et slightly plus élevé TTFB.

«ISR — Incremental Static Regeneration. Static by default, regenerated on a schedule or on-demand. The recommended middle ground for large Storyblok sites with mixed content types — but note the stale-on-first-request-after-revalidation trap I detail in the headless CMS write-up. » (Traduction) (Résumé en français de la section vingt-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«CSR — Client-Side Rendering (SPA). The server sends a near-empty shell and the browser builds the DOM. Googlebot must queue the page for a later render wave (which “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 see only the shell. Never ship content pages as CSR-only. Google’s own line: “If the content isn’t visible in the rendered HTML, Google won’t be able to index it.” » (Traduction) (Résumé en français de la section trente, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Le décision règle: mostly-static contenu → SSG; toujours-fresh/volatile contenu → SSR; grand mixed sites → ISR; CSR seulement pour logged-dans, non-indexé 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 Champs App (seo-metatags). A native plugin champ que donne editors Titre, Description, OG Titre, OG Description, et OG Image inputs, plus a Google SERP extrait preview dans le editor. Exige a Growth plan, et il a à être ajouté per contenu type — facile à forget on a nouveau contenu type.

AI SEO App (sb_ai_seo). Generates meta titre, description, mots-clés, et author avec an LLM, à travers 22 pris en charge languages. Exige Premium. Vous pouvez bulk-generate à travers tout stories avec a Management API + Node.js script.

Manual champ modeling. Aucun plan requirement: ajouter votre propre seo_title, seo_description, og_title, og_image, noindex (boolean), et canonical_url champs à votre contenu model. La plupart flexible, et ce que je voudrais reach pour on complexe sites.

Le non-negotiable: aucun Storyblok app auto-renders a unique balise. A mondial head/ layout component dans votre framework doit lire le SEO champ valeurs depuis le API réponse et sortie les serveur-side, avec sensible fallback chains (seo_title || story.name).

Balise canonicals

Storyblok a aucun awareness de votre frontend Structure d’URL, donc canonicals ne peut pas come depuis le CMS. Compute les dans le frontend — typically depuis le story’s full_slug plus votre domain — et rendre les serveur-side. Toujours absolute URLs, jamais relative, on chaque page template. (Pour le mechanics, voir canonicalization.)

Preview mode et draft contenu: le defining Storyblok risque

Ce est le plateforme-spécifique pitfall à obtenir correct. Le Visual Editor charge votre pages à l’intérieur an iframe en utilisant preview URLs que carry _storyblok et _storyblok_tk parameters, et le preview environment utilise draft contenu avec a preview accès token. Production doit utiliser publié contenu avec le public accès token. Le clean modèle est deux séparé Storyblok spaces/projects (preview et production) donc le incorrect token ne peut pas leak draft contenu dans le actif indexer.

«The critical part is how you keep preview/staging out of the index. Google warns: “When Google encounters the noindex tag, it may skip rendering and JavaScript execution, which means using JavaScript to change or remove the robots meta tag from noindex may not work as expected.” In other words, a noindex injected by client-side JS is unreliable — Google may never run the JS. So protect non-production environments with a server-rendered response header — X-Robots-Tag: noindex at the CDN/hosting level — and add Disallow: / in that environment’s robots.txt. Watch Search Console for unexpected preview domains showing up; that’s your early warning. » (Traduction) (Résumé en français de la section quarante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Sitemaps and robots.txt » (Traduction) (Résumé en français de la section quarante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Storyblok generates neither. Both are frontend-built: » (Traduction) (Résumé en français de la section quarante-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Sitemap: fetch all published stories from the Content Delivery API and emit XML. Astro: @astrojs/sitemap plus dynamic routes from the Links API. Next.js: app/sitemap.ts or next-sitemap post-build. Scope with starts_with, paginate for large sites, and trigger a rebuild from the Storyblok publish webhook so the sitemap stays in sync. » (Traduction) (Résumé en français de la section quarante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- robots.txt: also frontend-generated. Production should allow crawling of public pages; preview/staging should Disallow: / (and carry the X-Robots-Tag header above). » (Traduction) (Résumé en français de la section quarante-cinq, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Données structurées / JSON-LD

Storyblok stores contenu as structured JSON, mais schema.org JSON-LD a à être generated dans le frontend — Googlebot lit le rendu HTML, pas le API réponse. Construire a JsonLd component que maps contenu champs et story properties (story.published_at, story.updated_at, story.name) dans a serveur-rendu <script type="application/ld+json">. Article, BreadcrumbList, Organization, Produit, et FAQPage sont tout implementable ce façon.

Images et Core Web Vitals

Storyblok assets sont servi via Amazon CloudFront. Le image service est a réel CWV win, mais seulement quand utilisé correctement:

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

Redirections, i18n, and hreflang

Redirections. Storyblok a aucun redirection manager, et modification a slug fait pas créer a 301. Modèle: a redirects_config story avec nestable redirect_entry bloque (source_url, target_story), récupéré à construire/requête temps et injected dans framework routing; utiliser resolve_relations donc targets mettre à jour si slugs modifier, et refresh via le publish webhook.

Internationalization. Storyblok prend en charge champ-, folder-, et space-level traduction, et API réponses inclure an alternates array de tout translated versions. Utiliser il à rendre <link rel="alternate" hreflang="..."> balises serveur-side, et toujours inclure x-default. (Voir hreflang.)

GEO / AI search readiness

Storyblok’s structured, component-based model est genuinely well-suited à AI consumption — “Storyblok était construit autour données structurées depuis day un, thanks à son headless, API-premier design.” Mais le rendu règle encore règles: LLMs lire rendu HTML, donc SSR/SSG, correct JSON-LD, et clean semantic markup sont le price de entry. Vous pouvez aussi generate llms.txt (a markdown indexer de clé pages) et llms-full.txt (a complet contenu archive) à le frontend. (Voir AI recherche et llms.txt.)

L’essentiel

Storyblok est aucun bon nor mauvais pour le SEO — c’est neutral, et il shifts le entier SEO burden sur le frontend. Obtenir rendu correct (SSR/SSG), rendre le meta champs le SEO apps capture, protéger preview avec serveur-side noindex, construire le sitemap et robots.txt yourself, et utiliser le /m/ image service. Faire que et a Storyblok site peut outperform a neglected traditional CMS. Skip il et le manquant-par-default SEO couche est exactly où le site quietly falls apart. Connexe reading lives dans CMS headless SEO et JavaScript SEO.

AI summary

A condensed prendre on the Avancé version:

• Storyblok stores, le frontend renders. Storyblok est a visual, API-premier CMS headless; il sert contenu over REST/GraphQL mais jamais renders pages. Le frontend (Suivant.js, Nuxt, Astro, SvelteKit) decides votre SEO. “Google ne fait pas charger contenu directement depuis Storyblok.”
• Rendu est le #1 décision. SSG et SSR ship fully-rendu HTML et sont sûr; ISR est a bon middle ground (avec a stale-premier-requête trap); CSR est risky — vide HTML, queued rendre wave, invisible à AI robots d’exploration.
• Built-dans SEO fonctionnalités seulement capture champs: SEO Champs App (seo-metatags, Growth plan, per contenu type), AI SEO App (sb_ai_seo, Premium, 22 languages), or manual champ modeling. Le frontend doit encore rendre chaque balise serveur-side.
• Preview mode est le defining risque. Preview URLs utiliser _storyblok tokens et draft contenu. Protéger non-production avec a serveur-rendu X-Robots-Balise: noindex + Disallow: / — jamais JS, parce que Google peut skip JS execution on une page avec noindex.
• Canonicals, sitemap, robots.txt, JSON-LD sont tout frontend-built. Compute absolute canonicals depuis full_slug; generate le sitemap depuis le contenu Delivery API et refresh via le publish webhook.
• Images: append /m/ pour WebP + transforms (CloudFront-cached); définir width/height (CLS), fetchpriority="high" on le hero (LCP), explicit alt champs.
• Redirections/i18n: aucun built-dans redirection manager — slug changements ne pas 301; construire a redirects_config contenu type. Utiliser le alternates array pour hreflang + x-default.
• AI recherche: structured contenu est a strength, mais LLMs lire rendu HTML — donc SSR/SSG + JSON-LD encore appliquer; optionally ship llms.txt.

«## Official documentation » (Traduction) (Résumé en français de la section soixante-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Primary-source documentation from the search engines (the headless/rendering rules that govern Storyblok SEO) and from Storyblok. » (Traduction) (Résumé en français de la section soixante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google » (Traduction) (Résumé en français de la section soixante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Understand JavaScript SEO Basics — the crawl → render → index pipeline, the render-queue delay, the noindex-via-JS warning, and why SSR/pre-rendering is preferred. » (Traduction) (Résumé en français de la section soixante-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Rendering for Content-Driven Web Apps — SSR vs. SSG vs. CSR tradeoffs, directly applicable to choosing a Storyblok frontend mode. » (Traduction) (Résumé en français de la section soixante-sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Dynamic Rendering (deprecated workaround) — why Google no longer recommends dynamic rendering; use SSR, static rendering, or hydration instead. » (Traduction) (Résumé en français de la section soixante-sept, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Robots meta tag, data-nosnippet, and X-Robots-Tag — how to set noindex via the X-Robots-Tag HTTP header (the server-side method for protecting preview/staging). » (Traduction) (Résumé en français de la section soixante-sept, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Block search indexing with noindex — the meta-tag vs. header methods for keeping pages out of the index. » (Traduction) (Résumé en français de la section soixante-sept, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.)

«Bing / Microsoft » (Traduction) (Résumé en français de la section soixante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- The new evergreen Bingbot (Microsoft Edge) — Bingbot renders JavaScript via Edge (Chromium), but less consistently than Google — another reason to prefer SSR/SSG. » (Traduction) (Résumé en français de la section soixante-huit, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- IndexNow / indexnow.org — push protocol to wire to your Storyblok publish webhook so changed URLs are signaled instantly. » (Traduction) (Résumé en français de la section soixante-huit, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«Storyblok » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- FAQ: Headless CMS and SEO — Storyblok’s own framing of where SEO responsibility sits. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- SEO Fields App docs and AI SEO App docs — the native SEO field plugins. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Image Service API — the /m/ transform/WebP service. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Internationalization and Visual Editor concepts. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section soixante-douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Google et depuis Storyblok. Chaque lien est a deep lien que jumps à le quoted passage on le page source.

Google — comment JavaScript pages sont processed

«- “Once Google’s resources allow, a headless Chromium renders the page and executes the JavaScript. The page may stay on this queue for a few seconds, but it can take longer than that.” — Google Search Central docs. Jump to quote » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Keep in mind that 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.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “If the content isn’t visible in the rendered HTML, Google won’t be able to index it.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

Google — pourquoi noindex-via-JS fails (le preview trap)

«- “When Google encounters the noindex tag, it may skip rendering and JavaScript execution, which means using JavaScript to change or remove the robots meta tag from noindex may not work as expected.” — Google Search Central docs. Jump to quote » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Storyblok — où SEO responsibility sits

«- “Since Google doesn’t load content directly from Storyblok, your team is responsible for a fast and performant website.” — Storyblok FAQ: Headless CMS and SEO. Jump to quote » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “AI doesn’t see your CMS directly. Search engines and generative models read what’s rendered on your website or app, not the JSON coming from Storyblok’s APIs.” — Olena Teselko, Storyblok (Structured Content, Oct 2025). Jump to quote » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Laying the foundation for structured content will pay off either way—both search engines and LLMs rely on it.” — Ronny Shani, Storyblok (SEO with Storyblok and Astro, Aug 2025). Jump to quote » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- “headless CMSs and SPAs aren’t inherently SEO-unfriendly; rather, developers gain full markup control but must implement SEO foundations manually.” — Markus Oberlehner, Storyblok (SEO in Times of Headless CMSs and SPAs, 2019). Jump to quote » (Traduction) (Résumé en français de la section soixante-dix-neuf, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

Storyblok SEO checklist

Skip ce que le plateforme ne fait pas faire pour vous et faire le choses il laisse à le frontend.

Rendu

• Public contenu pages rendre leur contenu dans HTML on premier requête (SSG or SSR), pas seulement après client-side JavaScript exécute.
• Aucun contenu page ships as a CSR-seulement SPA (raw HTML maximizes AI-robot coverage).
• Storyblok publish webhook triggers an SSG rebuild / ISR revalidation donc contenu et le sitemap stay actuel.

Metadata & canonicals

• SEO champs exist on chaque contenu type (SEO Champs App est per contenu type, or utiliser manual champs).
• A mondial head component lit SEO champ valeurs et renders titre, description, OG, et Twitter balises serveur-side, avec fallback chains.
• Balise canonicals sont absolute URLs computed depuis full_slug + domain et rendu serveur-side on chaque template.

Preview / staging protection

• Production utilise le publié contenu version + public accès token; preview utilise draft + preview token (ideally séparé spaces).
• Preview/staging renvoie a serveur-rendu X-Robots-Tag: noindex header — pas a JavaScript-injected meta balise.
• Preview/staging robots.txt a Disallow: /.
• Search Console vérifié pour unexpected preview domains dans l’indexer.

Explorer infrastructure

• Sitemap generated depuis le Contenu Delivery API et submitted à GSC + Bing Webmaster Outils.
• Production robots.txt permet exploration de page publiques.
• JSON-LD (Article/BreadcrumbList/Organization/etc.) rendu serveur-side et passing le Résultats enrichis Tester.

Images & i18n

• Image URLs utiliser le /m/ prefix pour WebP + transforms.
• Images carry width/height (CLS), hero utilise fetchpriority="high", ci-dessous-fold utilise loading="lazy", et chaque image a an explicit alt champ.
• hreflang construit depuis le alternates array, notamment x-default.
• A redirects_config contenu type maps modifié slugs à 301s (Storyblok ne va pas).

The mental models

1. Storyblok stores; le frontend renders. Le CMS est nearly SEO-neutral. Avant debugging quelconque Storyblok SEO problème, réponse un question premier: comment est le frontend rendu ce contenu? Presque tout resolves à que.

2. Le rendu-mode décision règle.

• Mostly-static contenu (blog, docs, marketing) → SSG (rebuild via publish webhook).
• Toujours-fresh / volatile contenu (prices, inventory) → SSR.
• Grand site, mixed contenu, vouloir static speed → ISR (mind le stale-premier-requête trap).
• Logged-dans, pas-meant-à-être-indexé surfaces → CSR est acceptable.
• Public contenu vous vouloir ranked or AI-cited → jamais CSR.

3. Apps capture champs; le frontend renders balises. Le SEO Champs App et AI SEO App seulement populate valeurs. Aucun balise reaches le <head> unless votre framework lit le champ et outputs il serveur-side. “Nous installed le SEO app mais balises ne sont pas showing” est presque toujours a manquant rendre étape.

4. noindex doit be server-rendered. Pour preview/staging, the seulement reliable noindex is an HTTP réponse header or SSR-rendered meta tag. A JS-injected noindex may jamais run, parce que Google peut skip JS execution quand it déjà sees noindex. Server header > JS, toujours.

5. Un source de truth pour URLs. Canonicals, sitemap entries, hreflang, et lien internes devrait tout derive depuis le story’s full_slug plus a unique SITE_URL — construit absolute à le rendu couche, jamais hand-assembled or relative.

Storyblok SEO — cheat sheet

Rendering modes En un coup d’œil

Built-in SEO field options

Ce que Storyblok fait vs. what’s on the frontend

Rapide règles

• noindex preview/staging via serveur header (X-Robots-Tag) — jamais JS.
• Production = publié contenu + public token; preview = draft + preview token.
• Image WebP/transforms seulement fire avec le /m/ URL prefix.
• Slug changements ne pas créer 301s — construire a redirects_config contenu type.
• Sitemap = récupérer publié stories depuis le CDN API; refresh via publish webhook.
• AI-robot rendu varies par provider → raw HTML est le safest coverage baseline.

How devrait a Storyblok route render?

Storyblok SEO mistakes

• Assuming SEO champs rendre themselves. Storyblok stores valeurs; le frontend doit sortie titles, canonicals, robots directives, et données structurées.
• Shipping rankable routes as CSR-seulement pages. Rendre principal contenu et liens dans le initial HTML avec SSG or SSR.
• Letting preview URLs indexer. Protéger preview accès et retourner serveur-level noindex; ne faites pas wait pour client JavaScript à ajouter il.
• Publishing contenu sans invalidating le frontend. Connecter publication events à rebuild or cache-revalidation workflows.
• Building sitemaps depuis chaque story. Inclure seulement canonical, public, indexable routes—pas drafts, components, or preview paths.

Publié Storyblok changements are manquant on le site

Probable causer: a failed webhook, stale static construire, or mis en cache API/page réponse. Corriger: trace le publish event via construire or revalidation logs et purge seulement le affected cache. Confirmer: actif raw HTML contient le nouveau contenu et metadata.

Metadata exists in Storyblok but pas in page source

Probable causer: le frontend jamais maps le champ, or mises à jour il seulement après hydration. Corriger: rendre le SEO component on le serveur/construire chemin. Confirmer: curl renvoie le prévu titre, canonical, et robots directive.

Preview pages apparaître in search

Probable causer: le preview host est public et lacks serveur-rendu exclusion. Corriger: exiger authentication et send X-Robots-Tag: noindex or equivalent HTML dans le initial réponse. Confirmer: le actif preview réponse contient le directive avant JavaScript exécute.

«## Storyblok images are slow or oversized » (Traduction) (Résumé en français de la section cent vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Likely cause: original assets are requested without /m/ transformations or dimensions. Fix: generate correctly sized variants and reserve layout space. Confirm: production requests use the transformed asset and rendered dimensions match display needs. » (Traduction) (Résumé en français de la section cent vingt-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Verify Storyblok output in raw HTML » (Traduction) (Résumé en français de la section cent vingt-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

url='https://example.com/page/'
curl -fsSL "$url" | grep -Eio '<title>[^<]+|<link[^>]+rel="canonical"[^>]*|<meta[^>]+name="robots"[^>]*'

«Run this in DevTools Console to inspect the rendered head: » (Traduction) (Résumé en français de la section cent trente, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

({title: document.title, canonical: document.querySelector('link[rel="canonical"]')?.href, robots: document.querySelector('meta[name="robots" i]')?.content});

«Differences between the two outputs point to client-only head changes. » (Traduction) (Résumé en français de la section cent trente-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Outils pour Storyblok QA

• Rendre Gap compare initial et rendu contenu, metadata, liens, et robots signaux.
• Google Indexer Checker vérifications observable status, canonical, et noindex blockers on public routes.
• HTTP Header Checker vérifications preview X-Robots-Tag, mise en cache, et redirection behavior.
• Sitemap Validator vérifications que generated sitemap URLs resolve et ne faites pas expose preview or noncanonical routes.

«## Prove a Storyblok SEO release » (Traduction) (Résumé en français de la section cent trente-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Publish-path tester

Tester à exécuter: publish a controlled story modifier et trace webhook, construire/revalidation, et actif source HTML. Attendu résultat: le canonical production route mises à jour dans le normal publishing window. Échec interpretation: le delivery chain or cache est stale. Monitoring window: le site’s publish SLA. Rollback trigger: production contenu et metadata come depuis différent versions.

Preview-exclusion tester

Tester à exécuter: requête preview URLs avec curl -I et inspect raw HTML. Attendu résultat: accès contrôler et a serveur-visible noindex empêcher indexation. Échec interpretation: exclusion dépend on JavaScript or est absent. Monitoring window: immediate. Rollback trigger: a public preview réponse est indexable.

Rendering tester

Tester à exécuter: comparer raw et rendu sortie pour representative templates. Attendu résultat: principal contenu, liens, titre, canonical, et robots règles agree. Échec interpretation: le frontend relies on client rendu pour essential SEO sortie. Monitoring window: chaque frontend release. Rollback trigger: a clé template loses contenu or head signaux dans raw HTML.

Ressources utiles

Mon writing

• Le Beginner’s Guide à SEO technique — le foundation tout ici sits on.
• JavaScript SEO Problèmes & Meilleur Practices — mon principal référence on rendu modes, JS canonicals, et metadata; directement pertinent à quelconque headless/Storyblok construire.

Mon speaking

• JavaScript SEO — Ungagged 2019 (SlideShare) — comment headless/decoupled CMSes split frontend depuis backend, plus Googlebot’s stateless rendu. (Standing disclaimer: le dynamic-rendu advice dans que deck est maintenant outdated — Google deprecated il; utiliser SSR/SSG.)

On ce site

• SEO pour a CMS headless — le general headless playbook ce article specializes; rendu modes, le ISR trap, canonical fragmentation, migrations.
• JavaScript SEO — le rendu side dans depth.
• Canonicalization — le consolidation mechanism behind frontend canonicals.

«From around the industry » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Storyblok — Headless CMS and SEO FAQ — Storyblok’s own framing of where SEO responsibility lands. » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Storyblok — SEO with Storyblok and Astro (Ronny Shani, Aug 2025) — the current, framework-specific official tutorial. » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Storyblok — Structured Content (Olena Teselko, Oct 2025) — the AI-search/structured-content case for Storyblok. » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Storyblok — Managing Redirects with a Headless CMS — the redirects_config content-type pattern. » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Webstacks — Storyblok SEO Technical Optimization Guide — the strongest independent guide; content modeling, rendering, Core Web Vitals, plus migration case data (TomTom “2x SEO performance,” Unified “84% LCP improvement”). » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- FocusReactive — Typical Next.js SEO Pitfalls (Alex Hramovich) — the server-rendered-metadata failure mode: “if they’re not set server-side, it’s a disaster.” » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- Straffesites — Localized Sitemap with Astro + Storyblok — a worked sitemap/i18n implementation for the Astro + Storyblok stack. » (Traduction) (Résumé en français de la section cent cinquante-deux, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.)

Testez vos connaissances: Storyblok SEO

Five rapide questions on doing SEO avec le Storyblok CMS headless. Pick an réponse pour chaque, alors vérifier.

Journal des modifications