Storyblok SEO
Storyblok is a visual headless CMS — it stores content but never renders your pages, so SEO lives in the frontend. Rendering, meta fields, preview noindex, sitemaps, images.
1 evidence signal on this page
- Related live toolRaw vs. Rendered HTML Checker
Storyblok is a visual headless CMS: it stores block-based content and serves it over REST/GraphQL, but it never renders your pages — your frontend framework does, so SEO outcomes are almost entirely a frontend decision. SSG and SSR are safe; CSR risks empty HTML and delayed indexing. The built-in SEO Fields App and AI SEO App only add fields; the frontend must still 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, never JavaScript. Use the /m/ image service for WebP and Core Web Vitals, and lean on Storyblok's structured content for 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 GuideTL;DR — Storyblok is a “headless” CMSA content management system (CMS) is software that lets users create, manage, and publish digital content — like blog posts and pages — without writing raw code. WordPress, Drupal, and Joomla are the most common open-source CMS platforms. — it’s the place you write content, not the thing that shows it. A separate website (built with Next.js, Nuxt, or Astro) pulls your content and builds the actual pages. That means almost all of your SEO depends on how that website is built, not on Storyblok. The big rule: build your pages on a server or at build time, not entirely in the visitor’s browser. And the meta tagsMeta tags are HTML elements in a page's head that pass metadata about the page to search engines and browsers. For SEO only a few matter — the title element, the meta description, and the robots meta tag — while meta keywords and most others are ignored., sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing., and robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere. you’d expect a CMS to handle? You have to set those up yourself.
What Storyblok actually is
Storyblok is a visual headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages.. “Headless” means it splits two jobs that a traditional CMS like WordPress keeps together: where you write content and where it gets shown. Storyblok handles the writing side — it stores your content as reusable blocks and gives editors a drag-and-drop visual editor — and then hands that content to a separate website through an API.
The website part is built with a framework like Next.js, Nuxt, Astro, or SvelteKit. That website fetches your Storyblok content and turns it into the HTML that Google and Bing read. So when people ask me “is Storyblok good for SEO?”, the honest answer is: Storyblok itself barely affects your SEO — the website your developers build on top of it does.
The one rule that matters most
When GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer. asks for a page, the finished HTML has to be ready. There are two safe ways to do that and one risky way:
- Build pages ahead of time (SSG) — Storyblok content is baked into plain HTML files when the site deploys. Fast and search-friendly.
- Build pages on a server (SSR) — the server assembles the full page for each request. Also search-friendly and always fresh.
- Build pages in the browser (CSR) — the server sends a near-empty page and JavaScript fills it in afterward. This is the risky one.
Google can run JavaScript and eventually read a browser-built page, but it happens later and less reliably — and most AI crawlersAI crawlers are bots from AI companies that fetch web pages to train language models, build AI-search indexes, or answer live user questions. They come in three categories, each with its own user-agent tokens and its own robots.txt controls. (the botsA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. behind ChatGPT and Perplexity) don’t run JavaScript at all. They just see the empty page. So build your HTML on the server or at build time.
The stuff Storyblok won’t do for you
In WordPress, a plugin like Yoast quietly handled your title tagsThe title tag is the HTML title element in a page's head that specifies the document's title. It's the primary source for the SERP title link and a confirmed light ranking factor — but since August 2021 Google doesn't always show it verbatim., meta descriptions, sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing., and canonical tagsA rel=\"canonical\" annotation — in the HTML <head> or an HTTP Link header — that tells search engines which URL is the preferred version of duplicate or near-duplicate content.. Storyblok has no plugin layer doing that. Storyblok does offer an SEO Fields App that adds title/description boxes for editors to fill in — but even then, your developer has to make the website actually output those values into the page. Nothing is automatic. You’ll need someone to:
- Add SEO fields (title, description, etc.) to your content.
- Wire those fields into the page’s
<head>. - Build a sitemap and a robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere. in the frontend.
- Add structured dataStructured data is a standardized way of labeling page content (using the schema.org vocabulary in JSON-LD, Microdata, or RDFa) so search engines can understand its meaning. It's not a direct ranking factor — its value is rich results and entity understanding. (schema) in the frontend.
The thing that quietly breaks: preview pages
Storyblok’s visual editor previews your pages on a separate preview address. If
that preview site is reachable by Google, it can get indexed — and now you’ve got a
duplicate, draft copy of your site in search. The fix is to block preview/staging
from indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. using a server-level noindex, not a JavaScript one (more on why
that distinction matters in the Advanced tab).
Want the full version — the four renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. modes, the SEO Fields App vs. AI SEO
App, the preview noindex trap, sitemaps, the /m/ image trick, and AI searchAI search uses large language models and retrieval-augmented generation (RAG) to synthesize an answer from multiple sources rather than returning a ranked list of links. Examples include Google AI Overviews, ChatGPT Search, and Perplexity.?
Switch to the Advanced tab.
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 GuideTL;DR — Storyblok is a visual, API-first headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages.: it stores block-based content and serves it over REST/GraphQL, but it never renders your pages — the frontend framework does, so SEO is a frontend decision. SSG and SSR ship fully-rendered HTML and are safe; CSR risks empty HTML and queued-render delays. The built-in SEO Fields App (
seo-metatags) and AI SEOAI search optimization is the practice of making your brand and content visible, citable, and accurately represented across AI-powered search — Google AI Overviews, ChatGPT, Perplexity, Copilot. It's built on traditional SEO plus a heavier emphasis on off-site brand mentions and content AI systems can cite. App (sb_ai_seo) only supply field values — the frontend must still render meta tagsMeta tags are HTML elements in a page's head that pass metadata about the page to search engines and browsers. For SEO only a few matter — the title element, the meta description, and the robots meta tag — while meta keywords and most others are ignored., canonicals, sitemapsA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing., robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere., and JSON-LDJSON-LD (JavaScript Object Notation for Linked Data) is a script-based structured data format, typically paired with the schema.org vocabulary to describe page content for search engines and AI systems. Google recommends it over Microdata and RDFa because it's the easiest format to implement and maintain at scale — but all three work, and structured data isn't a ranking signal. itself. The platform-specific trap is preview mode: block draft/preview environments with server-renderedX-Robots-Tag: noindex, never JavaScript, because Google may skip JS execution when it sees anoindex. Use the/m/image service for WebP + Core Web VitalsGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data., generate the sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. from the Content Delivery API, and lean on the structured content model for AI searchAI search uses large language models and retrieval-augmented generation (RAG) to synthesize an answer from multiple sources rather than returning a ranked list of links. Examples include Google AI Overviews, ChatGPT Search, and Perplexity..
The fundamental split: Storyblok stores, the frontend renders
Storyblok is a backend. It gives you a content model built from reusable blocks, a visual editor, and a Content Delivery API (REST and GraphQL). What it does not do is produce the HTML that search engines crawl. That job belongs to a separate frontend — Next.js, Nuxt, Astro, SvelteKit — that fetches Storyblok content and renders pages.
Storyblok says this plainly: “Since Google doesn’t load content directly from Storyblok, your team is responsible for a fast and performant website.” The same point shows up in their structured-content guidance — “AI doesn’t see your CMSA content management system (CMS) is software that lets users create, manage, and publish digital content — like blog posts and pages — without writing raw code. WordPress, Drupal, and Joomla are the most common open-source CMS platforms. directly. Search engines and generative models read what’s rendered on your website or app, not the JSON coming from Storyblok’s APIs.” Internalize that and almost every Storyblok SEOStoryblok SEO is the practice of making sites built on Storyblok — a visual, API-first headless CMS — discoverable in search and AI answers. Because Storyblok only stores content and the frontend framework renders it, SEO outcomes are decided almost entirely by how that frontend is built. question answers itself: the CMS is nearly SEO-neutral, and the frontend’s renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. decisions determine everything. This is the same architecture reality I cover in SEO for a Headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages.; Storyblok is a specific, visual-editing flavor of it.
Rendering strategy: the most important SEO decision
How your frontend renders Storyblok content is the single biggest SEO lever. Four modes, all of which fetch content from the same Storyblok CDN/GraphQL API:
SSG — Static Site Generation. HTML is built at deploy time and served as static files. Best-case SEO: complete HTML on first request, very fast. The catch is freshness — new or edited content needs a rebuild, so wire Storyblok’s publish webhook to trigger one. Best for mostly-static content. Astro and Gatsby are SSG-first; Next.js and Nuxt support it per route.
SSR — Server-Side Rendering. HTML is rendered per request on a server or edge function. Always-fresh, fully-rendered HTML. Best for frequently changing content; the tradeoff is infrastructure cost and slightly higher TTFBTime to First Byte — the time from the start of a request to when the first byte of the response arrives. It's a diagnostic metric (not a Core Web Vital) and a major input to FCP and LCP; ≤0.8 s is good..
ISR — Incremental Static Regeneration. Static by default, regenerated on a schedule or on-demand. The recommended middle ground for large Storyblok sites with mixed contentMixed content is when a page served over HTTPS loads a sub-resource — a script, stylesheet, image, iframe, or similar — over insecure HTTP. Browsers' current taxonomy is upgradable versus blockable; active mixed content (scripts, styles, iframes) is blocked, and passive mixed content (images, audio, video) is warned about or increasingly auto-upgraded, with exceptions like CORS-enabled images and srcset/picture candidates that are blockable, not upgradable. types — but note the stale-on-first-request-after-revalidation trap I detail in the headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages. write-up.
CSR — Client-Side Rendering (SPA). The server sends a near-empty shell and the browser builds the DOM. GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer. 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-crawlerA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. 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.”
The decision rule: mostly-static content → SSG; always-fresh/volatile content → SSR; large mixed sites → ISR; CSR only for logged-in, non-indexed surfaces.
Built-in Storyblok SEO features (and their limits)
Storyblok ships three ways to manage SEO field values. All three only capture values — the frontend still has to render them.
SEO Fields App (seo-metatags). A native plugin field that gives editors
Title, Description, OG Title, OG Description, and OG Image inputs, plus a Google
SERP snippet preview in the editor. Requires a Growth plan, and it has to be added
per content type — easy to forget on a new content type.
AI SEO App (sb_ai_seo). Generates meta title, description, keywords, and
author with an LLM, across 22 supported languages. Requires Premium. You can bulk-generate
across all stories with a Management API + Node.js script.
Manual field modeling. No plan requirement: add your own seo_title,
seo_description, og_title, og_image, noindex (boolean), and canonical_url
fields to your content model. Most flexible, and what I’d reach for on complex
sites.
The non-negotiable: no Storyblok app auto-renders a single tag. A global head/
layout component in your framework must read the SEO field values from the API
response and output them server-side, with sensible fallback chains
(seo_title || story.name).
Canonical tags
Storyblok has no awareness of your frontend URL structureURL structure is how the parts of a web address — scheme, domain, path, query string, and fragment — are organized and formatted. It mostly affects crawling, usability, and how engines understand a page, not rankings directly., so canonicals can’t come
from the CMS. Compute them in the frontend — typically from the story’s full_slug
plus your domain — and render them server-side. Always absolute URLs, never
relative, on every page template. (For the mechanics, see
canonicalizationHow search engines pick one canonical URL among duplicates and consolidate signals onto it..)
Preview mode and draft content: the defining Storyblok risk
This is the platform-specific pitfall to get right. The Visual Editor loads your
pages inside an iframeHTML element that displays one webpage inside another — how embeds work. using preview URLs that carry _storyblok and _storyblok_tk
parameters, and the preview environment uses draft content with a preview
access token. Production must use published content with the public access
token. The clean pattern is two separate Storyblok spaces/projects (preview and
production) so the wrong token can’t leak draft content into the live index.
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.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere..
Watch Search ConsoleGoogle's free tool for monitoring crawling, indexing, and search performance. for unexpected preview domains showing up; that’s your early
warning.
Sitemaps and robots.txt
Storyblok generates neither. Both are frontend-built:
- Sitemap: fetch all published stories from the Content Delivery API and emit
XML. Astro:
@astrojs/sitemapplus dynamic routes from the Links API. Next.js:app/sitemap.tsornext-sitemappost-build. Scope withstarts_with, paginate for large sites, and trigger a rebuild from the Storyblok publish webhook so the sitemap stays in sync. - robots.txt: also frontend-generated. Production should allow crawlingCrawling is how search engines use automated bots (like Googlebot and Bingbot) to discover URLs and download pages. A page has to be crawlable to be indexed, but crawling on its own isn't a ranking factor. of
public pages; preview/staging should
Disallow: /(and carry theX-Robots-Tagheader above).
Structured data / JSON-LD
Storyblok stores content as structured JSON, but schema.org JSON-LDJSON-LD (JavaScript Object Notation for Linked Data) is a script-based structured data format, typically paired with the schema.org vocabulary to describe page content for search engines and AI systems. Google recommends it over Microdata and RDFa because it's the easiest format to implement and maintain at scale — but all three work, and structured data isn't a ranking signal. has to be
generated in the frontend — Googlebot reads the rendered HTML, not the API
response. Build a JsonLd component that 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 all implementable this way.
Images and Core Web Vitals
Storyblok assets are served via Amazon CloudFront. The image service is a real CWV win, but only when used correctly:
- WebP + transforms activate when you 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 all URL parametersThe `?key=value` data tacked onto the end of a URL after a question mark — used for tracking, sessions, filtering, sorting, and search — and one of the biggest sources of duplicate URLs and wasted crawling in SEO.; results are edge-cached after first request. Forget the/m/and you get the unoptimized original. - Set
widthandheighton every image to prevent layout shift (CLSCumulative Layout Shift — a unitless score for unexpected visual movement, taken from the largest burst (session window) of layout shifts, not the lifetime sum. ≤0.1 is good.). fetchpriority="high"+loading="eager"on the LCPLargest Contentful Paint — render time of the largest visible image or text block, relative to when the page started loading. ≤2.5 s (at the 75th percentile) is good. hero image;loading="lazy"below the fold.- Add
alttext as an explicit field on every image component — thefilenamefield is not alt textAlt text is the value of the `alt` attribute on an HTML `<img>` element — a short text substitute chosen for the image's purpose and context, not a literal description of what it shows. It makes images accessible to screen-reader users and helps search engines understand images, mainly for image search.. (See alt textAlt text is the value of the `alt` attribute on an HTML `<img>` element — a short text substitute chosen for the image's purpose and context, not a literal description of what it shows. It makes images accessible to screen-reader users and helps search engines understand images, mainly for image search..)
Redirects, i18n, and hreflang
RedirectsA redirect sends browsers and crawlers from a requested URL to a different one. An HTTP redirect specifically is a 3xx status code paired with a Location header; meta refresh and JavaScript redirects achieve a similar navigation without being a 3xx response themselves. Permanent redirects (301/308) are Google's signal the target should be canonical; temporary ones (302/303/307) aren't.. Storyblok has no redirect manager, and changing a slug does not
create a 301. Pattern: a redirects_config story with nestable redirect_entry
blocks (source_url, target_story), fetched at build/request time and injected
into framework routing; use resolve_relations so targets update if slugs change,
and refresh via the publish webhook.
Internationalization. Storyblok supports field-, folder-, and space-level
translation, and API responses include an alternates array of all translated
versions. Use it to render <link rel="alternate" hreflang="..."> tags
server-side, and always include x-default. (See
hreflangHreflang is an annotation (in HTML, HTTP headers, or XML sitemaps) that tells search engines which language and optional region a page targets, and which alternate versions exist. It only works when every page in the cluster references all the others..)
GEO / AI search readiness
Storyblok’s structured, component-based model is genuinely well-suited to AI
consumption — “Storyblok was built around structured dataStructured data is a standardized way of labeling page content (using the schema.org vocabulary in JSON-LD, Microdata, or RDFa) so search engines can understand its meaning. It's not a direct ranking factor — its value is rich results and entity understanding. from day one, thanks to
its headless, API-first design.” But the rendering rule still rules: LLMs read
rendered HTML, so SSR/SSG, correct JSON-LD, and clean semantic markup are the price
of entry. You can also generate llms.txt (a markdown index of key pages) and
llms-full.txt (a full content archive) at the frontend. (See
AI searchAI search uses large language models and retrieval-augmented generation (RAG) to synthesize an answer from multiple sources rather than returning a ranked list of links. Examples include Google AI Overviews, ChatGPT Search, and Perplexity. and llms.txtllms.txt is a proposed (not adopted) Markdown file at /llms.txt that gives AI systems a curated map of a site's most important pages. Proposed by Jeremy Howard in 2024, it's read mostly by coding agents like Claude Code — not search crawlers — and Google ignores it..)
The bottom line
Storyblok is neither good nor bad for SEO — it’s neutral, and it shifts the entire
SEO burden onto the frontend. Get rendering right (SSR/SSG), render the meta fields
the SEO apps capture, protect preview with server-side noindex, build the sitemap
and robots.txt yourself, and use the /m/ image service. Do that and a Storyblok
site can outperform a neglected traditional CMS. Skip it and the missing-by-default
SEO layer is exactly where the site quietly falls apart. Related reading lives in
headless CMS SEOA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages. and
JavaScript SEOMaking sure search engines can crawl, render, and index content that depends on JavaScript..
AI summary
A condensed take on the Advanced version:
- Storyblok stores, the frontend renders. Storyblok is a visual, API-first headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages.; it serves content over REST/GraphQL but never renders pages. The frontend (Next.js, Nuxt, Astro, SvelteKit) decides your SEO. “Google doesn’t load content directly from Storyblok.”
- RenderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. is the #1 decision. SSG and SSR ship fully-rendered HTML and are safe; ISR is a good middle ground (with a stale-first-request trap); CSR is risky — empty HTML, queued render wave, invisible to AI crawlersAI crawlers are bots from AI companies that fetch web pages to train language models, build AI-search indexes, or answer live user questions. They come in three categories, each with its own user-agent tokens and its own robots.txt controls..
- Built-in SEO features only capture fields: SEO Fields App (
seo-metatags, Growth plan, per content type), AI SEOAI search optimization is the practice of making your brand and content visible, citable, and accurately represented across AI-powered search — Google AI Overviews, ChatGPT, Perplexity, Copilot. It's built on traditional SEO plus a heavier emphasis on off-site brand mentions and content AI systems can cite. App (sb_ai_seo, Premium, 22 languages), or manual field modeling. The frontend must still render every tag server-side. - Preview mode is the defining risk. Preview URLs use
_storybloktokensA token is the smallest unit of text (or image/audio/video) an LLM processes — roughly 4 characters, or about ¾ of an English word. A context window is the maximum number of tokens (input plus output) a model can hold at once, like its short-term memory. and draft content. Protect non-production with a server-renderedX-Robots-Tag: noindex+Disallow: /— never JS, because Google may skip JS execution on a page withnoindex. - Canonicals, sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing., robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere., JSON-LDJSON-LD (JavaScript Object Notation for Linked Data) is a script-based structured data format, typically paired with the schema.org vocabulary to describe page content for search engines and AI systems. Google recommends it over Microdata and RDFa because it's the easiest format to implement and maintain at scale — but all three work, and structured data isn't a ranking signal. are all frontend-built. Compute
absolute canonicals from
full_slug; generate the sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. from the Content Delivery API and refresh via the publish webhook. - Images: append
/m/for WebP + transforms (CloudFront-cached); setwidth/height(CLSCumulative Layout Shift — a unitless score for unexpected visual movement, taken from the largest burst (session window) of layout shifts, not the lifetime sum. ≤0.1 is good.),fetchpriority="high"on the hero (LCPLargest Contentful Paint — render time of the largest visible image or text block, relative to when the page started loading. ≤2.5 s (at the 75th percentile) is good.), explicitaltfields. - RedirectsA redirect sends browsers and crawlers from a requested URL to a different one. An HTTP redirect specifically is a 3xx status code paired with a Location header; meta refresh and JavaScript redirects achieve a similar navigation without being a 3xx response themselves. Permanent redirects (301/308) are Google's signal the target should be canonical; temporary ones (302/303/307) aren't./i18n: no built-in redirect manager — slug changes don’t 301; build a
redirects_configcontent type. Use thealternatesarray for hreflangHreflang is an annotation (in HTML, HTTP headers, or XML sitemaps) that tells search engines which language and optional region a page targets, and which alternate versions exist. It only works when every page in the cluster references all the others. +x-default. - AI searchAI search uses large language models and retrieval-augmented generation (RAG) to synthesize an answer from multiple sources rather than returning a ranked list of links. Examples include Google AI Overviews, ChatGPT Search, and Perplexity.: structured content is a strength, but LLMs read rendered HTML — so
SSR/SSG + JSON-LDJSON-LD (JavaScript Object Notation for Linked Data) is a script-based structured data format, typically paired with the schema.org vocabulary to describe page content for search engines and AI systems. Google recommends it over Microdata and RDFa because it's the easiest format to implement and maintain at scale — but all three work, and structured data isn't a ranking signal. still apply; optionally ship
llms.txt.
Official documentation
Primary-source documentation from the search engines (the headless/renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. rules that govern Storyblok SEOStoryblok SEO is the practice of making sites built on Storyblok — a visual, API-first headless CMS — discoverable in search and AI answers. Because Storyblok only stores content and the frontend framework renders it, SEO outcomes are decided almost entirely by how that frontend is built.) and from Storyblok.
- Understand JavaScript SEO Basics — the crawl → render → indexStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. pipeline, the render-queue delay, the
noindex-via-JS warning, and why SSR/pre-renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. is preferred. - Rendering for Content-Driven Web Apps — SSR vs. SSG vs. CSR tradeoffs, directly applicable to choosing a Storyblok frontend mode.
- Dynamic Rendering (deprecated workaround) — why Google no longer recommends dynamic rendering; use SSR, static rendering, or hydrationActivating server-rendered HTML in the browser by attaching JavaScript handlers. instead.
- Robots meta tag, data-nosnippet, and X-Robots-Tag — how to set
noindexvia theX-Robots-TagHTTP header (the server-side method for protecting preview/staging). - Block search indexing with noindex — the meta-tag vs. header methods for keeping pages out of the index.
Bing / Microsoft
- The new evergreen Bingbot (Microsoft Edge) — BingbotBingbot is Microsoft Bing's primary web crawler — the bot that discovers, fetches, and renders pages to build the Bing index. That index also powers Yahoo, DuckDuckGo, Ecosia, and Microsoft Copilot, so Bingbot's reach is far wider than Bing's own search-market share. renders JavaScript via Edge (Chromium), but less consistently than Google — another reason to prefer SSR/SSG.
- IndexNow / indexnow.org — push protocol to wire to your Storyblok publish webhook so changed URLs are signaled instantly.
Storyblok
- FAQ: Headless CMS and SEO — Storyblok’s own framing of where SEO responsibility sits.
- SEO Fields App docs and AI SEO App docs — the native SEO field plugins.
- Image Service API — the
/m/transform/WebP service. - Internationalization and Visual Editor concepts.
Quotes from the source
On-the-record statements from Google and from Storyblok. Each link is a deep link that jumps to the quoted passage on the source page.
Google — how JavaScript pages are 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
- “Keep in mind that server-side or pre-renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. is still a great idea because it makes your website faster for users and crawlersA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index., and not all bots can run JavaScript.” Jump to quote
- “If the content isn’t visible in the rendered HTML, Google won’t be able to indexStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. it.” Jump to quote
Google — why noindexNoindex is a directive that tells search engines to keep a page out of their index, so it won't appear in search results. It works only on pages a crawler can actually fetch — a page blocked in robots.txt can never be noindexed.-via-JS fails (the preview trap)
- “When Google encounters the
noindextag, it may skip renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. and JavaScript execution, which means using JavaScript to change or remove the robotsmetatag fromnoindexmay not work as expected.” — Google Search Central docs. Jump to quote
Storyblok — where 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 CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages. and SEO. Jump to quote
- “AI doesn’t see your CMSA content management system (CMS) is software that lets users create, manage, and publish digital content — like blog posts and pages — without writing raw code. WordPress, Drupal, and Joomla are the most common open-source CMS platforms. 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
- “Laying the foundation for structured content will pay off either way—both search engines and LLMsA large language model (LLM) is a deep-learning model trained on massive text corpora to predict the next token and generate human-like text. LLMs use the transformer architecture and power AI search features like Google's AI Overviews (Gemini) and Bing Copilot (GPT-4). rely on it.” — Ronny Shani, Storyblok (SEO with Storyblok and Astro, Aug 2025). Jump to quote
- “headless CMSsA content management system that separates the content repository from the presentation layer, delivering content via API to any front-end framework rather than rendering HTML server-side itself. It doesn't specify the rendering mode, hosting, cache, preview security, or publishing workflow — those are separate decisions. 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
Storyblok SEO checklist
Skip what the platform doesn’t do for you and do the things it leaves to the frontend.
RenderingTurning HTML, CSS, and JavaScript into the final visual page and DOM.
- Public content pages render their content in HTML on first request (SSG or SSR), not only after client-side JavaScript runs.
- No content page ships as a CSR-only SPA (raw HTML maximizes AI-crawlerA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. coverage).
- Storyblok publish webhook triggers an SSG rebuild / ISR revalidation so content and the sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. stay current.
Metadata & canonicals
- SEO fields exist on every content type (SEO Fields App is per content type, or use manual fields).
- A global head component reads SEO field values and renders title, description, OG, and Twitter tags server-side, with fallback chains.
- Canonical tagsA rel=\"canonical\" annotation — in the HTML <head> or an HTTP Link header — that tells search engines which URL is the preferred version of duplicate or near-duplicate content. are absolute URLs computed from
full_slug+ domain and rendered server-side on every template.
Preview / staging protection
- Production uses the published content version + public access tokenA token is the smallest unit of text (or image/audio/video) an LLM processes — roughly 4 characters, or about ¾ of an English word. A context window is the maximum number of tokens (input plus output) a model can hold at once, like its short-term memory.; preview uses draft + preview token (ideally separate spaces).
- Preview/staging returns a server-rendered
X-Robots-Tag: noindexheader — not a JavaScript-injected meta tag. - Preview/staging robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere. has
Disallow: /. - Search ConsoleA free Google service that reports how a site performs in Google Search and surfaces problems with how Google crawls, indexes, and serves it. It's first-party data straight from Google — but you don't need it to appear in results. checked for unexpected preview domains in the indexStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed..
Crawl infrastructure
- SitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. generated from the Content Delivery API and submitted to GSC + Bing Webmaster Tools.
- Production robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere. allows crawlingCrawling is how search engines use automated bots (like Googlebot and Bingbot) to discover URLs and download pages. A page has to be crawlable to be indexed, but crawling on its own isn't a ranking factor. of public pages.
- JSON-LDJSON-LD (JavaScript Object Notation for Linked Data) is a script-based structured data format, typically paired with the schema.org vocabulary to describe page content for search engines and AI systems. Google recommends it over Microdata and RDFa because it's the easiest format to implement and maintain at scale — but all three work, and structured data isn't a ranking signal. (Article/BreadcrumbList/Organization/etc.) rendered server-side and passing the Rich ResultsRich results (formerly 'rich snippets') are enhanced search listings — stars, images, prices, breadcrumbs, video thumbnails, and more — that Google and Bing build from structured data. They're a display feature, not a ranking factor, and eligibility never guarantees they'll show. Test.
Images & i18n
- Image URLs use the
/m/prefix for WebP + transforms. - Images carry
width/height(CLSCumulative Layout Shift — a unitless score for unexpected visual movement, taken from the largest burst (session window) of layout shifts, not the lifetime sum. ≤0.1 is good.), hero usesfetchpriority="high", below-fold usesloading="lazy", and every image has an explicitaltfield. - hreflangHreflang is an annotation (in HTML, HTTP headers, or XML sitemaps) that tells search engines which language and optional region a page targets, and which alternate versions exist. It only works when every page in the cluster references all the others. built from the
alternatesarray, includingx-default. - A
redirects_configcontent type maps changed slugs to 301s (Storyblok won’t).
The mental models
1. Storyblok stores; the frontend renders. The CMSA content management system (CMS) is software that lets users create, manage, and publish digital content — like blog posts and pages — without writing raw code. WordPress, Drupal, and Joomla are the most common open-source CMS platforms. is nearly SEO-neutral. Before debugging any Storyblok SEOStoryblok SEO is the practice of making sites built on Storyblok — a visual, API-first headless CMS — discoverable in search and AI answers. Because Storyblok only stores content and the frontend framework renders it, SEO outcomes are decided almost entirely by how that frontend is built. issue, answer one question first: how is the frontend renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. this content? Almost everything resolves to that.
2. The renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM.-mode decision rule.
- Mostly-static content (blog, docs, marketing) → SSG (rebuild via publish webhook).
- Always-fresh / volatile content (prices, inventory) → SSR.
- Large site, mixed contentMixed content is when a page served over HTTPS loads a sub-resource — a script, stylesheet, image, iframe, or similar — over insecure HTTP. Browsers' current taxonomy is upgradable versus blockable; active mixed content (scripts, styles, iframes) is blocked, and passive mixed content (images, audio, video) is warned about or increasingly auto-upgraded, with exceptions like CORS-enabled images and srcset/picture candidates that are blockable, not upgradable., want static speed → ISR (mind the stale-first-request trap).
- Logged-in, not-meant-to-be-indexedStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed. surfaces → CSR is acceptable.
- Public content you want ranked or AI-cited → never CSR.
3. Apps capture fields; the frontend renders tags.
The SEO Fields App and AI SEOAI search optimization is the practice of making your brand and content visible, citable, and accurately represented across AI-powered search — Google AI Overviews, ChatGPT, Perplexity, Copilot. It's built on traditional SEO plus a heavier emphasis on off-site brand mentions and content AI systems can cite. App only populate values. No tag reaches the <head>
unless your framework reads the field and outputs it server-side. “We installed the
SEO app but tags aren’t showing” is almost always a missing render step.
4. noindexNoindex is a directive that tells search engines to keep a page out of their index, so it won't appear in search results. It works only on pages a crawler can actually fetch — a page blocked in robots.txt can never be noindexed. must be server-rendered.
For preview/staging, the only reliable noindex is an HTTP response header or
SSR-rendered meta tag. A JS-injected noindex may never run, because Google can
skip JS execution when it already sees noindex. Server header > JS, always.
5. One source of truth for URLs.
Canonicals, sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. entries, hreflangHreflang is an annotation (in HTML, HTTP headers, or XML sitemaps) that tells search engines which language and optional region a page targets, and which alternate versions exist. It only works when every page in the cluster references all the others., and internal linksAn internal link is a hyperlink from one page on a website to another page on the same website. Internal links help search engines discover your pages and pass ranking signals (PageRank and anchor-text context) between them. should all derive from the
story’s full_slug plus a single SITE_URL — built absolute at the rendering layer,
never hand-assembled or relative.
Storyblok SEO — cheat sheet
RenderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. modes at a glance
| Mode | Where HTML is built | SEO | Best for | Watch out for |
|---|---|---|---|---|
| SSG | Build time → static files | ✅ Best | Mostly-static content | Stale until rebuild — wire the publish webhook |
| SSR | Server, per request | ✅ Best | Always-fresh contentContent freshness is how recent or up-to-date a page is — by its original publish date, its last substantive revision, or the currency of the facts inside it. It only helps rankings when the query itself benefits from recent results (Query Deserves Freshness), and cosmetic date changes with no real update don't count. | Higher infra cost; slightly higher TTFBTime to First Byte — the time from the start of a request to when the first byte of the response arrives. It's a diagnostic metric (not a Core Web Vital) and a major input to FCP and LCP; ≤0.8 s is good. |
| ISR | Static + background regen | ✅ Good | Large mixed sites | First request after revalidation gets stale page |
| CSR | In the browser | ⚠️ Risky | Logged-in dashboards | Empty HTML to AI crawlersAI crawlers are bots from AI companies that fetch web pages to train language models, build AI-search indexes, or answer live user questions. They come in three categories, each with its own user-agent tokens and its own robots.txt controls.; render-wave delay |
Built-in SEO field options
| Option | Field ID | Plan | Notes |
|---|---|---|---|
| SEO Fields App | seo-metatags | Growth | Title/desc/OG + SERP preview; add per content type |
| AI SEOAI search optimization is the practice of making your brand and content visible, citable, and accurately represented across AI-powered search — Google AI Overviews, ChatGPT, Perplexity, Copilot. It's built on traditional SEO plus a heavier emphasis on off-site brand mentions and content AI systems can cite. App | sb_ai_seo | Premium | LLMA large language model (LLM) is a deep-learning model trained on massive text corpora to predict the next token and generate human-like text. LLMs use the transformer architecture and power AI search features like Google's AI Overviews (Gemini) and Bing Copilot (GPT-4).-generated meta, 22 languages; bulk via Management API |
| Manual fields | (your own) | Any | Most flexible; seo_title, noindex, canonical_url, etc. |
What Storyblok does vs. what’s on the frontend
| Handled by Storyblok | Left to the frontend |
|---|---|
| Stores content + serves API | RenderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. mode (SSG/SSR/ISR/CSR) |
| SEO field values (via apps) | Rendering meta tagsMeta tags are HTML elements in a page's head that pass metadata about the page to search engines and browsers. For SEO only a few matter — the title element, the meta description, and the robots meta tag — while meta keywords and most others are ignored. into <head> |
Image transforms via /m/ | Applying /m/, width/height, alt, lazy-load |
alternates data | hreflangHreflang is an annotation (in HTML, HTTP headers, or XML sitemaps) that tells search engines which language and optional region a page targets, and which alternate versions exist. It only works when every page in the cluster references all the others. + x-default tags |
| — | Canonicals, sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing., robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere., JSON-LDJSON-LD (JavaScript Object Notation for Linked Data) is a script-based structured data format, typically paired with the schema.org vocabulary to describe page content for search engines and AI systems. Google recommends it over Microdata and RDFa because it's the easiest format to implement and maintain at scale — but all three work, and structured data isn't a ranking signal., redirectsA redirect sends browsers and crawlers from a requested URL to a different one. An HTTP redirect specifically is a 3xx status code paired with a Location header; meta refresh and JavaScript redirects achieve a similar navigation without being a 3xx response themselves. Permanent redirects (301/308) are Google's signal the target should be canonical; temporary ones (302/303/307) aren't. |
Fast rules
- noindexNoindex is a directive that tells search engines to keep a page out of their index, so it won't appear in search results. It works only on pages a crawler can actually fetch — a page blocked in robots.txt can never be noindexed. preview/staging via server header (
X-Robots-Tag) — never JS. - Production = published content + public token; preview = draft + preview token.
- Image WebP/transforms only fire with the
/m/URL prefix. - Slug changes don’t create 301s — build a
redirects_configcontent type. - Sitemap = fetch published stories from the CDN API; refresh via publish webhook.
- AI-crawlerA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. rendering varies by provider → raw HTML is the safest coverage baseline.
How should a Storyblok route render?
Choose the frontend rendering path
Storyblok SEO mistakes
- Assuming SEO fields render themselves. Storyblok stores values; the frontend must output titles, canonicals, robots directives, and structured dataStructured data is a standardized way of labeling page content (using the schema.org vocabulary in JSON-LD, Microdata, or RDFa) so search engines can understand its meaning. It's not a direct ranking factor — its value is rich results and entity understanding..
- Shipping rankable routes as CSR-only pages. Render primary content and links into the initial HTML with SSG or SSR.
- Letting preview URLs indexStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed.. Protect preview access and return server-level
noindex; do not wait for client JavaScript to add it. - Publishing content without invalidating the frontend. Connect publication events to rebuild or cache-revalidation workflows.
- Building sitemapsA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. from every story. Include only canonical, public, indexable routes—not drafts, components, or preview paths.
Published Storyblok changes are missing on the site
Likely cause: a failed webhook, stale static build, or cached API/page response. Fix: trace the publish event through build or revalidation logs and purge only the affected cache. Confirm: live raw HTML contains the new content and metadata.
Metadata exists in Storyblok but not in page source
Likely cause: the frontend never maps the field, or updates it only after hydrationTurning HTML, CSS, and JavaScript into the final visual page and DOM.. Fix: render the SEO component on the server/build path. Confirm: curl returns the intended title, canonical, and robots directive.
Preview pages appear in search
Likely cause: the preview host is public and lacks server-rendered exclusion. Fix: require authentication and send X-Robots-Tag: noindex or equivalent HTML in the initial response. Confirm: the live preview response contains the directive before JavaScript runs.
Storyblok images are slow or oversized
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.
Verify Storyblok output in raw HTML
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:
({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.
Patrick's relevant free tools
- Staging vs. Production SEO Diff — Compare matched release URLs across redirects, canonicals, robots directives, hreflang, selected headers, schema eligibility, and raw or optionally rendered content with honest not-evaluated states.
Tools for Storyblok QA
- Render Gap compares initial and rendered content, metadata, links, and robots signals.
- Google Index Checker checks observable status, canonical, and noindexNoindex is a directive that tells search engines to keep a page out of their index, so it won't appear in search results. It works only on pages a crawler can actually fetch — a page blocked in robots.txt can never be noindexed. blockers on public routes.
- HTTP Header Checker checks preview
X-Robots-Tag, cachingCaching stores a copy of a page or resource — in a browser, a CDN edge node, or a search crawler's own cache — so it can be served again without regenerating or re-downloading it. It isn't a direct ranking factor, but it feeds page speed and crawl efficiency., and redirectA redirect sends browsers and crawlers from a requested URL to a different one. An HTTP redirect specifically is a 3xx status code paired with a Location header; meta refresh and JavaScript redirects achieve a similar navigation without being a 3xx response themselves. Permanent redirects (301/308) are Google's signal the target should be canonical; temporary ones (302/303/307) aren't. behavior. - Sitemap Validator checks that generated sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing. URLs resolve and do not expose preview or noncanonical routes.
Prove a Storyblok SEO release
Publish-path test
Test to run: publish a controlled story change and trace webhook, build/revalidation, and live source HTML. Expected result: the canonical production route updates within the normal publishing window. Failure interpretation: the delivery chain or cache is stale. Monitoring window: the site’s publish SLA. Rollback trigger: production content and metadata come from different versions.
Preview-exclusion test
Test to run: request preview URLs with curl -I and inspect raw HTML. Expected result: access control and a server-visible noindex prevent indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed.. Failure interpretation: exclusion depends on JavaScript or is absent. Monitoring window: immediate. Rollback trigger: a public preview response is indexable.
Rendering test
Test to run: compare raw and rendered output for representative templates. Expected result: primary content, links, title, canonical, and robots rules agree. Failure interpretation: the frontend relies on client renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. for essential SEO output. Monitoring window: every frontend release. Rollback trigger: a key template loses content or head signals in raw HTML.
Resources worth your time
My writing
- The Beginner’s Guide to Technical SEO — the foundation everything here sits on.
- JavaScript SEO Issues & Best Practices — my primary reference on renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. modes, JS canonicals, and metadata; directly relevant to any headless/Storyblok build.
My speaking
- JavaScript SEO — Ungagged 2019 (SlideShare) — how headless/decoupled CMSes split frontend from backend, plus GooglebotGooglebot is Google's web crawler — the software that fetches pages so Google can index and rank them. It comes in two variants, Googlebot Smartphone (primary, under mobile-first indexing) and Googlebot Desktop, and runs an evergreen Chromium renderer.’s stateless renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM.. (Standing disclaimer: the dynamic-rendering advice in that deck is now outdated — Google deprecated it; use SSR/SSG.)
On this site
- SEO for a Headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages. — the general headless playbook this article specializes; rendering modes, the ISR trap, canonical fragmentation, migrations.
- JavaScript SEOMaking sure search engines can crawl, render, and index content that depends on JavaScript. — the rendering side in depth.
- CanonicalizationHow search engines pick one canonical URL among duplicates and consolidate signals onto it. — the consolidation mechanism behind frontend canonicals.
From around the industry
- Storyblok — Headless CMS and SEO FAQ — Storyblok’s own framing of where SEO responsibility lands.
- Storyblok — SEO with Storyblok and Astro (Ronny Shani, Aug 2025) — the current, framework-specific official tutorial.
- Storyblok — Structured Content (Olena Teselko, Oct 2025) — the AI-search/structured-content case for Storyblok.
- Storyblok — Managing Redirects with a Headless CMS — the
redirects_configcontent-type pattern. - Webstacks — Storyblok SEO Technical Optimization Guide — the strongest independent guide; content modeling, rendering, Core Web VitalsGoogle's three real-user UX metrics — LCP (loading), INP (responsiveness), and CLS (visual stability) — used by Google's ranking systems, with no official weight attached, measured on field data., plus migration case data (TomTom “2x SEO performance,” Unified “84% LCPLargest Contentful Paint — render time of the largest visible image or text block, relative to when the page started loading. ≤2.5 s (at the 75th percentile) is good. improvement”).
- 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.”
- Straffesites — Localized Sitemap with Astro + Storyblok — a worked sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing./i18n implementation for the Astro + Storyblok stack.
Test yourself: Storyblok SEO
Five quick questions on doing SEO with the Storyblok headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages.. Pick an answer for each, then check.
Storyblok SEO
Storyblok SEO is the practice of making sites built on Storyblok — a visual, API-first headless CMS — discoverable in search and AI answers. Because Storyblok only stores content and the frontend framework renders it, SEO outcomes are decided almost entirely by how that frontend is built.
Related: Headless CMS SEO, JavaScript SEO
Storyblok SEO
Storyblok SEO is the set of practices that get a website built on Storyblok — a block-based, API-first visual headless CMSA headless CMS decouples content storage and editing (the backend) from how that content is rendered and delivered (the frontend), serving content over an API instead of a built-in templated 'head'. Its SEO outcomes come almost entirely from how the separate frontend renders pages. — to rank in search engines and surface in AI answers. The defining fact is that Storyblok never renders your pages. It stores structured content and serves it over a REST or GraphQL API; a separate JavaScript framework (Next.js, Nuxt, Astro, SvelteKit) turns that content into the HTML search engines actually see. As Storyblok puts it, “since Google doesn’t load content directly from Storyblok, your team is responsible for a fast and performant website.”
That split means the frontend’s renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. mode decides everything. Server-side renderingTurning HTML, CSS, and JavaScript into the final visual page and DOM. (SSR) and static generation (SSG) ship fully-rendered HTML and are search-safe; client-side rendering (CSR) hands crawlersA crawler — also called a spider or bot — is an automated program that fetches web pages, extracts their links, and queues new URLs to visit. Search engines use crawlers to discover and download content for their index. an empty shell and risks delayed or missing indexingStoring a crawled page in the search index so it can appear in results. Crawled is not the same as indexed — Google selects what to keep, and indexing isn't guaranteed.. Storyblok offers built-in help — the SEO Fields App and AI SEOAI search optimization is the practice of making your brand and content visible, citable, and accurately represented across AI-powered search — Google AI Overviews, ChatGPT, Perplexity, Copilot. It's built on traditional SEO plus a heavier emphasis on off-site brand mentions and content AI systems can cite. App add metadata fields and a SERP preview — but those are only inputs. The frontend still has to read the field values and render the <meta> tags, canonical, sitemapA sitemap is a file that lists the pages, images, videos, and other files on your site so search engines can discover them. It helps discovery, but submitting a sitemap doesn't guarantee crawling or indexing., robots.txtA plain-text file at the root of a host that tells crawlers which URLs they may and may not request. It controls crawling, not indexing — a blocked URL can still be indexed if it's linked from elsewhere., and JSON-LDJSON-LD (JavaScript Object Notation for Linked Data) is a script-based structured data format, typically paired with the schema.org vocabulary to describe page content for search engines and AI systems. Google recommends it over Microdata and RDFa because it's the easiest format to implement and maintain at scale — but all three work, and structured data isn't a ranking signal. itself; none of it is automatic.
The platform-specific risk is preview mode. Storyblok’s Visual Editor loads pages with _storyblok preview tokens, and draft/preview environments must be kept out of the production index with server-rendered noindex headers — not JavaScript, which Google may skip when it sees a noindex. Used well, Storyblok’s structured content model is a strength for both classic SEO and AI searchAI search uses large language models and retrieval-augmented generation (RAG) to synthesize an answer from multiple sources rather than returning a ranked list of links. Examples include Google AI Overviews, ChatGPT Search, and Perplexity.; used carelessly, the missing-by-default SEO layer is where sites quietly fall apart.
Related: Headless CMS SEO, JavaScript SEO
Build-time retrieval analysis plus live signals for this exact article. The automatic chunk report includes a deterministic readiness score and is ready without a model download.
Search Console
sampleGA4 traffic (28d)
sampleCloudflare traffic (7d)
sampledCrUX field data (28d, phone)
sampleGoogle NLP entities
localChangelog
Revision history
Compare the published article with an archived editorial snapshot. Added and removed words are shown only after you open a comparison.
Updated Jul 18, 2026.
Editorial summary and recorded change details.Summary
Corrected the AI SEO App's supported-language count after verifying it live against Storyblok's current docs.
Change details
-
AI SEO App (`sb_ai_seo`) supports 22 languages, not 25+, per Storyblok's current docs (verified live 2026-07-18).