Skip to content
Citable

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

  1. 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.
  2. Answer-first structure. Each guide starts with a Short answer block of 40–70 words. It is marked with cssSelector in a SpeakableSpecification, and it is the description used for OpenGraph and the RSS feed.
  3. JSON-LD generated from the CMS. TechArticle (with author, datePublished, dateModified, citation), FAQPage, DefinedTerm/DefinedTermSet, Person, BreadcrumbList and WebSite are emitted from the Storyblok fields, so they can never drift from the visible content.
  4. Markdown on demand. Append .md to a guide URL and a proxy rewrites the request to a route that converts Storyblok richtext to Markdown with YAML front matter; send Accept: text/markdown to the HTML URL and you are redirected there.
  5. An index for models. /llms.txt lists every guide and term with a one-line summary; /llms-full.txt concatenates all guides. Both are regenerated from the CMS.
  6. An explicit crawler policy. robots.txt lists 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.
  7. Attribution. Every guide names its author, shows published and updated dates, and lists its sources with links. The author page carries Person markup with sameAs links.

Content model

The Storyblok space has five content types and a handful of nestable blocks.

Content typePurposeKey fields
guideLong-form, answer-first articleshort_answer, key_takeaways, body (richtext), faq, sources, author, related_*
glossary_termOne quotable definitionterm, definition, also_known_as, expanded, faq
authorE-E-A-T signalname, role, bio, links (→ sameAs)
pageComposable landing pagebody of hero, feature_grid, guide_collection, faq_section, cta
site_configGlobal settingsnav, 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.