About
A field guide that is also the demo.
Citable exists to answer one question with working code: what does a website look like when it is designed to be read, understood and quoted by machines as well as people?
Why this site exists
Search is splitting in two. A shrinking share of questions end in a click on a blue link; a growing share end inside a generated answer from ChatGPT, Perplexity, Claude, Copilot or Google's AI Overviews. Those systems do not rank pages — they retrieve passages, judge whether a passage answers the question on its own, and cite the source they used.
Most advice about Answer Engine Optimization (AEO) and Generative Engine Optimization (GEO) is written as marketing. Citable is written as engineering. Each guide opens with a direct answer, explains the mechanism, shows the code, and lists the sources it relied on. The site itself is a reference implementation of everything the guides recommend.
It is a personal project by Endrit Krasniqi, built to learn and to document. It is not affiliated with Storyblok, OpenAI, Anthropic, Perplexity or Google.
The stack
Storyblok
Headless CMS. Guides, glossary terms, authors, pages and site settings are Storyblok components. The visual editor works through Next.js Draft Mode.
React 19 + Next.js 16
React Server Components render every page to complete HTML at build time. No content depends on client-side JavaScript.
Tailwind CSS 4
A small token-based design system: two typefaces, one accent, light and dark themes, and a print stylesheet.
Vercel
Static generation with incremental revalidation. A Storyblok webhook purges the cache when content is published.
What happens on every page
- Semantic HTML first. One
<h1>, a logical heading outline,<article>,<nav aria-label>,<time datetime>and<details>for FAQs. No content is hidden behind interaction. - Answer-first structure. Each guide starts with a
Short answerblock of 40–70 words. It is marked withcssSelectorin aSpeakableSpecification, and it is the description used for OpenGraph and the RSS feed. - JSON-LD generated from the CMS.
TechArticle(withauthor,datePublished,dateModified,citation),FAQPage,DefinedTerm/DefinedTermSet,Person,BreadcrumbListandWebSiteare emitted from the Storyblok fields, so they can never drift from the visible content. - Markdown on demand. Append
.mdto a guide URL and a proxy rewrites the request to a route that converts Storyblok richtext to Markdown with YAML front matter; sendAccept: text/markdownto the HTML URL and you are redirected there. - An index for models.
/llms.txtlists every guide and term with a one-line summary;/llms-full.txtconcatenates all guides. Both are regenerated from the CMS. - An explicit crawler policy.
robots.txtlists GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-SearchBot, Claude-User, PerplexityBot, Perplexity-User and Google-Extended and allows all of them, with a link to the sitemap. - Attribution. Every guide names its author, shows published and updated dates, and lists its sources with links. The author page carries
Personmarkup withsameAslinks.
Content model
The Storyblok space has five content types and a handful of nestable blocks.
| Content type | Purpose | Key fields |
|---|---|---|
guide | Long-form, answer-first article | short_answer, key_takeaways, body (richtext), faq, sources, author, related_* |
glossary_term | One quotable definition | term, definition, also_known_as, expanded, faq |
author | E-E-A-T signal | name, role, bio, links (→ sameAs) |
page | Composable landing page | body of hero, feature_grid, guide_collection, faq_section, cta… |
site_config | Global settings | nav, footer_links, ai_policy (→ llms.txt) |
Richtext bodies can embed callout, checklist and stat blocks. The repository ships a seed script that creates the component schema and pushes the starter content into any Storyblok space with a single command.
Read the guides
Start with the fundamentals, or jump straight to the technical guides on llms.txt, robots.txt and Markdown delivery.