DEV Community

Cover image for I built GEO Tarot: 22 interactive SVG cards explaining Generative Engine Optimization
Shinobis IA
Shinobis IA

Posted on

I built GEO Tarot: 22 interactive SVG cards explaining Generative Engine Optimization

EO optimizes for a list of links. GEO optimizes for being included in the answer.

I have been implementing Generative Engine Optimization on my own blog for the past three months. llms.txt, JSON-LD Knowledge Graphs, citable content structure, distributed presence across authority platforms. The more I documented, the more I realized there are about 22 core concepts that make GEO work.

22 concepts. 22 tarot major arcana. The metaphor was too perfect to ignore.

So I built it: GEO Tarot

How it works

22 cards laid out in a grid, face down. Each back shows a generative pattern built from the same hash-based algorithm I use for my blog post images. Click any card to flip it with a CSS 3D animation. The front reveals the GEO concept with an abstract SVG illustration and a short explanation.

The stack

Vanilla PHP. CSS animations for the flip. JavaScript for interaction. SVG for all illustrations. No frameworks. No external JS libraries. No AI-generated art. Every geometric illustration is hand-coded.

The tool is trilingual (English, Spanish, Japanese) with URL-based language switching and proper hreflang tags.

Some of my favorite cards

The Hierophant (V) — llms.txt: The file at your domain root that tells AI models who you are. The equivalent of robots.txt for machines that generate answers.

The Emperor (IV) — Knowledge Graph: JSON-LD connecting your articles with relatedLink, marking topics with about, detecting tools with mentions. Your blog becomes a knowledge network, not isolated pages.

The High Priestess (II) — Sentiment Mapping: LLMs distinguish between content that asserts with authority and content that speculates. The tone of your writing directly affects whether you get cited.

The Star (XVII) — First ChatGPT citation: The moment you ask ChatGPT about your topic and it cites you instead of someone with more followers. That moment justifies everything.

The Devil (XV) — Generic AI content: Articles written by ChatGPT without editing, without real experience. There are thousands. LLMs already recognize them and give them less weight.

Every card that corresponds to a published blog post links directly to it for deeper reading.

Why I built this

Most GEO guides are walls of text that nobody bookmarks. I wanted something visual that people would share, come back to, and actually remember. Each card works as a standalone social media post too. 22 cards, 22 posts, zero extra writing.

If you are thinking about GEO for your own site, start with cards V (llms.txt), IV (Knowledge Graph), and III (citable content). Those three alone put you ahead of 95% of blogs.

Try it here


Built by Shinobis — a UX/UI designer with 10+ years in banking and fintech, documenting everything about building with AI.

Top comments (0)