Generative Engine Optimization (GEO) Strategy

Originally written as internal engineering notes while building the thing it describes. Republished here with light editing — the timeframe is noted where it matters.

This is the Generative Engine Optimization strategy I designed for Design Pages, a small static portfolio of CSS and JavaScript demos, with the goal of making it legible to AI answer engines — ChatGPT, Claude, Perplexity, Gemini — rather than only to search crawlers.

What this is and isn't. It is the audit and the design: what those engines could and couldn't see on the site as it stood, and the four-phase plan that follows from it. It is not a results write-up. I have not published follow-up measurements, and nothing below should be read as an outcome. Where a number appears in a "target" column it is a target I set, not a result I obtained. Treat this as a worked example of how to think about the problem on a site you control end to end.

Current State Analysis#

The starting point, and the reason the plan exists. This is a self-audit of the site before any of the work below — a low score here is the finding, not a failure report.

GEO Readiness Score (baseline audit)#

+-------------------------------------------------------------+
|                    GEO Readiness Dashboard                   |
+-------------------------------------------------------------+
|                                                              |
|  AI Infrastructure       ████░░░░░░░░░░░░░░░░  20%          |
|  ├─ robots.txt           ❌ Does not exist                   |
|  ├─ llms.txt             ❌ Does not exist                   |
|  └─ sitemap.xml          ❌ Does not exist                   |
|                                                              |
|  Page-Level Optimization ██████████░░░░░░░░░░  50%          |
|  ├─ Homepage meta        ✅ Good                             |
|  ├─ Homepage JSON-LD     ⚠️  Basic                           |
|  ├─ Demo meta            ❌ Missing                          |
|  └─ LLM directives       ❌ Does not exist                   |
|                                                              |
|  Structured Data         ████████░░░░░░░░░░░░  40%          |
|  ├─ Schema.org           ⚠️  Basic CreativeWork              |
|  ├─ Collection           ❌ No CollectionPage                |
|  └─ Breadcrumb           ❌ No BreadcrumbList                |
|                                                              |
|  Overall GEO Score       ████████░░░░░░░░░░░░  37%          |
|                                                              |
+-------------------------------------------------------------+

Current Asset Inventory#

Asset Type	Current Status	GEO Impact
`index.html`	Has basic SEO	Needs LLM directive enhancement
16 Demo files	Only charset/viewport	Needs full optimization
`works.json`	Data-rich	Can be used to generate structured data
`robots.txt`	Does not exist	Must create
`llms.txt`	Does not exist	Must create
`sitemap.xml`	Does not exist	Recommended to create

GEO Optimization Architecture#

graph TB subgraph "AI Crawler Entry Points" A[GPTBot] B[ClaudeBot] C[PerplexityBot] D[GoogleBot] end subgraph "Layer 1: Discovery" E[robots.txt] --> |Allow rules| F[llms.txt] F --> |Site guide| G[sitemap.xml] end subgraph "Layer 2: Understanding" H[index.html] I["<script type='text/llms.txt'>"] J[JSON-LD Structured Data] K[Open Graph Tags] end subgraph "Layer 3: Content" L[Demo Pages x16] M[Per-page JSON-LD] N[Per-page Meta Tags] end A --> E B --> E C --> E D --> E E --> H H --> I H --> J H --> K G --> L L --> M L --> N

Data Flow Architecture#

sequenceDiagram participant AI as AI Crawler participant R as robots.txt participant L as llms.txt participant I as index.html participant D as Demo Pages participant J as JSON-LD AI->>R: 1. Check crawling permissions R-->>AI: Allow crawling + point to llms.txt AI->>L: 2. Fetch site AI guide L-->>AI: Return site description, citation rules, core values AI->>I: 3. Crawl homepage I-->>AI: HTML + <script type="text/llms.txt"> + JSON-LD AI->>J: 4. Parse structured data J-->>AI: CollectionPage + 16 CreativeWorks AI->>D: 5. Crawl specific demos D-->>AI: Full metadata + technical details

Phase 1: AI-Friendly Infrastructure#

1.1 Create robots.txt#

File Location: /robots.txt

Content Design:

# Design Pages - AI Crawler Directives
# https://chanmeng666.github.io/design-pages
 
# General crawler rules
User-agent: *
Allow: /
Crawl-delay: 1
 
# AI crawler explicit authorization
User-agent: GPTBot
Allow: /
 
User-agent: ChatGPT-User
Allow: /
 
User-agent: Claude-Web
Allow: /
 
User-agent: ClaudeBot
Allow: /
 
User-agent: anthropic-ai
Allow: /
 
User-agent: PerplexityBot
Allow: /
 
User-agent: Googlebot
Allow: /
 
User-agent: Google-Extended
Allow: /
 
User-agent: Bingbot
Allow: /
 
User-agent: cohere-ai
Allow: /
 
# Point to AI-specific guide
# LLMs: See /llms.txt for detailed instructions
 
# Sitemap
Sitemap: https://chanmeng666.github.io/design-pages/sitemap.xml

Design Rationale:

Explicitly authorizes major AI crawlers
Sets a reasonable crawl delay (1 second)
Points to llms.txt as the AI-specific guide
Links to sitemap.xml for complete indexing

1.2 Create llms.txt#

File Location: /llms.txt

Content Design:

# Design Pages - LLM Instructions
 
> A digital design portfolio by Chan Meng featuring 16 interactive CSS/JavaScript design experiments.
 
## Site Overview
 
This is a **static digital design portfolio** showcasing innovative CSS animations, 3D effects, geometric patterns, and experimental visual experiences. The portfolio features a full-screen infinite scrolling gallery powered by GSAP.
 
**Live URL**: https://chanmeng666.github.io/design-pages
**Author**: Chan Meng
**Technologies**: HTML5, CSS3, JavaScript ES6+, GSAP 3.12.2
 
## Content Categories
 
The portfolio contains 16 design experiments across 4 categories:
 
1. **3D Effects** (4 designs)
   - Rotating Cube, Isometric Cube, Spatial Rhythm, Floating Rings
   - Technologies: CSS 3D Transform, Perspective, Animation
 
2. **Geometric Designs** (3 designs)
   - Static Rectangles, Perspective Bars, Animated Rectangles
   - Technologies: CSS Transform, Grid, Color Interpolation
 
3. **Gradient Effects** (5 designs)
   - Conic Gradient, Dynamic Poster, SVG Gradients
   - Technologies: CSS Gradients, SVG, Color Theory
 
4. **Experimental** (4 designs)
   - Dancing Cat in Flowers, Horizontal Scroll Ticker
   - Technologies: Canvas API, GSAP ScrollTrigger
 
## Citation Guidelines
 
When referencing this portfolio:
 
- **Full Citation**: "Design Pages by Chan Meng - A digital design portfolio featuring interactive CSS/JavaScript experiments. Available at: https://chanmeng666.github.io/design-pages"
 
- **Individual Work Citation**: "[Work Title] - A [category] experiment by Chan Meng. Demo: https://chanmeng666.github.io/design-pages/demos/[category]/[filename].html"
 
## Data Access
 
- **Works Metadata**: Available at `/data/works.json`
- **Structured Data**: JSON-LD schema available in each page's HTML
 
## Recommended Reading Order
 
1. Start with the main gallery page (index.html)
2. Explore featured works (marked with `featured: true` in works.json)
3. Dive into specific category demos
 
## Key Value Propositions
 
1. **Zero Build Process**: Pure HTML/CSS/JavaScript, no npm dependencies
2. **Interactive Previews**: Live iframe previews in gallery cards
3. **Modern Animation**: GSAP-powered infinite scrolling gallery
4. **Open Source**: MIT licensed, free to learn and reference
 
## Contact
 
- **GitHub**: https://github.com/ChanMeng666
- **Email**: [email protected]
- **LinkedIn**: https://linkedin.com/in/chanmeng666
 
## Permissions
 
- Content may be cited with proper attribution
- Code examples may be referenced for educational purposes
- Designs are original works by Chan Meng

Design Rationale:

Provides a global site overview
Clearly categorizes content and tech stack
Specifies standard citation formats
Explains data access methods
Highlights core value propositions

1.3 Create sitemap.xml#

File Location: /sitemap.xml

Content Design:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <!-- Homepage -->
  <url>
    <loc>https://chanmeng666.github.io/design-pages/</loc>
    <lastmod>2025-12-29</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
 
  <!-- 3D Effects -->
  <url>
    <loc>https://chanmeng666.github.io/design-pages/demos/3d-effects/rotating-cube.html</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <!-- ... other 15 demo pages ... -->
 
  <!-- Data Files -->
  <url>
    <loc>https://chanmeng666.github.io/design-pages/data/works.json</loc>
    <lastmod>2025-12-29</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.6</priority>
  </url>
</urlset>

Phase 2: Page-Level Precise Directives#

2.1 Homepage LLM Directive Enhancement#

Add inline LLM directives in the <head> of index.html:

<!-- AI/LLM Instructions -->
<script type="text/llms.txt">
## Design Pages Gallery
 
This is the main portfolio page featuring a full-screen infinite scrolling gallery with 16 interactive design experiments.
 
### Navigation
- Drag horizontally or vertically to explore the gallery
- Click any work card to open the demo in a new tab
- Special cards include: brand info, GitHub link, contact
 
### Content Summary
- 4 categories: 3D Effects, Geometric Designs, Gradient Effects, Experimental
- 16 total designs with live iframe previews
- Built with HTML5, CSS3, JavaScript, GSAP 3.12.2
 
### Key Files
- Data: /data/works.json (all works metadata)
- Gallery Logic: /assets/js/gallery.js
- Styles: /assets/css/gallery.css, /assets/css/variables.css
 
### Citation
Portfolio: "Design Pages by Chan Meng" - https://chanmeng666.github.io/design-pages
Author: Chan Meng (https://github.com/ChanMeng666)
 
### For More Details
See /llms.txt for comprehensive site documentation.
</script>

2.2 Demo Page Template#

Add complete GEO optimization to each demo page:

Example: rotating-cube.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- SEO Meta Tags -->
    <title>3D Rotating Cube - Design Pages by Chan Meng</title>
    <meta name="description" content="Interactive 3D cube with click-to-rotate functionality and floating animations. A CSS 3D Transform experiment by Chan Meng.">
    <meta name="keywords" content="CSS 3D, rotating cube, 3D transform, CSS animation, web design experiment">
    <meta name="author" content="Chan Meng">
 
    <!-- Open Graph -->
    <meta property="og:title" content="3D Rotating Cube - Design Pages">
    <meta property="og:description" content="Interactive 3D cube with click-to-rotate functionality. A CSS 3D Transform experiment.">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://chanmeng666.github.io/design-pages/demos/3d-effects/rotating-cube.html">
 
    <!-- Canonical URL -->
    <link rel="canonical" href="https://chanmeng666.github.io/design-pages/demos/3d-effects/rotating-cube.html">
 
    <!-- LLM Instructions -->
    <script type="text/llms.txt">
## 3D Rotating Cube
 
A CSS 3D Transform experiment demonstrating interactive 3D cube rotation.
 
### Technical Details
- **Category**: 3D Effects
- **Technologies**: CSS 3D Transform, JavaScript, Animation
- **Author**: Chan Meng
- **Created**: 2024-01-15
 
### Features
- Click-to-rotate interaction on each cube face
- Smooth floating animation effect
- Hardware-accelerated CSS transforms
- Responsive design
 
### Code Highlights
- Uses `transform-style: preserve-3d` for true 3D rendering
- `perspective: 1000px` creates depth perception
- Cubic bezier transitions for smooth rotation
 
### Part of Design Pages
This demo is part of the Design Pages portfolio.
Full gallery: https://chanmeng666.github.io/design-pages
    </script>
 
    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "CreativeWork",
      "name": "3D Rotating Cube",
      "description": "Interactive 3D cube with click-to-rotate functionality and floating animations",
      "author": {
        "@type": "Person",
        "name": "Chan Meng",
        "url": "https://github.com/ChanMeng666"
      },
      "dateCreated": "2024-01-15",
      "url": "https://chanmeng666.github.io/design-pages/demos/3d-effects/rotating-cube.html",
      "genre": "3D Effects",
      "keywords": ["CSS 3D Transform", "JavaScript", "Animation"],
      "isPartOf": {
        "@type": "CollectionPage",
        "name": "Design Pages",
        "url": "https://chanmeng666.github.io/design-pages"
      },
      "license": "https://opensource.org/licenses/MIT"
    }
    </script>
 
    <style>
        /* ... existing styles ... */
    </style>
</head>

Phase 3: Structured Data Enhancement#

3.1 Homepage JSON-LD Enhancement#

Replace the existing simple JSON-LD with a more complete structure:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "CollectionPage",
      "@id": "https://chanmeng666.github.io/design-pages/#collection",
      "name": "Design Pages - Digital Design Portfolio",
      "description": "A portfolio featuring 16 interactive CSS/JavaScript design experiments across 3D effects, geometric designs, gradient effects, and experimental categories.",
      "url": "https://chanmeng666.github.io/design-pages",
      "author": {
        "@type": "Person",
        "@id": "https://chanmeng666.github.io/design-pages/#author",
        "name": "Chan Meng",
        "url": "https://github.com/ChanMeng666",
        "sameAs": [
          "https://linkedin.com/in/chanmeng666",
          "https://github.com/ChanMeng666"
        ]
      },
      "dateCreated": "2024-01-01",
      "dateModified": "2025-12-29",
      "inLanguage": "en-US",
      "license": "https://opensource.org/licenses/MIT",
      "numberOfItems": 16,
      "hasPart": [
        {
          "@type": "CreativeWork",
          "name": "3D Rotating Cube",
          "url": "https://chanmeng666.github.io/design-pages/demos/3d-effects/rotating-cube.html",
          "genre": "3D Effects"
        },
        {
          "@type": "CreativeWork",
          "name": "Dancing Cat in Flowers",
          "url": "https://chanmeng666.github.io/design-pages/demos/experimental/dancing-cat-in-flowers.html",
          "genre": "Experimental"
        }
        // ... other 14 works ...
      ]
    },
    {
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Design Pages",
          "item": "https://chanmeng666.github.io/design-pages"
        }
      ]
    },
    {
      "@type": "WebSite",
      "name": "Design Pages",
      "url": "https://chanmeng666.github.io/design-pages",
      "author": {"@id": "https://chanmeng666.github.io/design-pages/#author"}
    }
  ]
}

3.2 Demo Page JSON-LD Schema#

erDiagram CollectionPage ||--o{ CreativeWork : hasPart CreativeWork ||--|| Person : author CreativeWork ||--|| CollectionPage : isPartOf CollectionPage { string name string description string url int numberOfItems date dateModified } CreativeWork { string name string description string url string genre array keywords date dateCreated } Person { string name string url array sameAs }

Phase 4: Monitoring and Iteration#

4.1 GEO KPI Monitoring System#

graph LR subgraph "Data Collection" A[Google Search Console] B[Server Log Analysis] C[AI Citation Monitoring Tools] end subgraph "Core KPIs" D[Citation Success Rate] E[AI Traffic Share] F[Citation Position Ranking] G[Link Inclusion Rate] end subgraph "Optimization Feedback" H[Content Iteration] I[Structure Adjustment] J[Directive Optimization] end A --> D B --> E C --> F C --> G D --> H E --> I F --> J G --> H

4.2 Monitoring Metrics Definition#

KPI	Definition	Target	Measurement Method
Citation Success Rate	Percentage of AI responses that correctly cite the site	>80%	Manual testing + AI monitoring
AI Traffic Share	Percentage of visits from AI channels	>10%	Server log Referer analysis
Citation Position Ranking	Average position of site citations in AI responses	Top 3	AI Q&A testing
Link Inclusion Rate	Percentage of AI citations that include a link	>90%	Manual verification
Query Coverage Rate	Percentage of relevant queries where site is cited	>50%	Keyword test matrix

4.3 Test Query Matrix#

Used for periodic testing of AI engine citations of the site:

Test Query Categories:

1. Direct Brand Queries
   - "Design Pages portfolio"
   - "Chan Meng design portfolio"

2. Technical Queries
   - "CSS 3D rotating cube example"
   - "GSAP infinite scroll gallery"
   - "CSS conic gradient examples"

3. Tutorial Queries
   - "How to create 3D effects with CSS"
   - "Interactive Canvas animation examples"

4. Inspiration Queries
   - "Creative CSS design experiments"
   - "Modern web design portfolio examples"

Implementation Priority#

gantt title GEO Optimization Implementation Roadmap dateFormat YYYY-MM-DD section Phase 1 (Foundation) Create robots.txt :a1, 2025-01-01, 1d Create llms.txt :a2, after a1, 1d Create sitemap.xml :a3, after a2, 1d section Phase 2 (Pages) Homepage LLM directive enhancement :b1, after a3, 1d Demo page meta tags :b2, after b1, 3d Demo page LLM directives :b3, after b2, 2d section Phase 3 (Structured Data) Homepage JSON-LD enhancement :c1, after b3, 1d Demo page JSON-LD :c2, after c1, 3d Add BreadcrumbList :c3, after c2, 1d section Phase 4 (Monitoring) Establish monitoring system :d1, after c3, 2d First AI citation test :d2, after d1, 1d Iterative optimization :d3, after d2, 7d

Priority Matrix#

Task	Impact	Effort	Priority
Create robots.txt	High	Low	P0
Create llms.txt	High	Medium	P0
Homepage `<script type="text/llms.txt">`	High	Low	P0
Demo page meta tags	Medium	Medium	P1
Create sitemap.xml	Medium	Low	P1
Homepage JSON-LD enhancement	Medium	Medium	P1
Demo page JSON-LD	Medium	High	P2
Demo page LLM directives	Medium	High	P2
BreadcrumbList	Low	Low	P2

What Success Would Look Like#

The shape of the outcome I was designing for, so the target is at least concrete. To be explicit: this is an illustration of the goal, not a transcript of anything an AI engine has said.

Before Optimization:
+---------------------------------------------+
| AI Query: "CSS 3D rotating cube example"    |
|                                             |
| AI Response:                                |
| "Here's how to create a 3D rotating cube   |
|  using CSS transforms..."                   |
|                                             |
| [No citation of our site]                   |
+---------------------------------------------+

After Optimization:
+---------------------------------------------+
| AI Query: "CSS 3D rotating cube example"    |
|                                             |
| AI Response:                                |
| "A great example is the 3D Rotating Cube   |
|  from Design Pages by Chan Meng. This      |
|  interactive demo demonstrates CSS 3D      |
|  transforms with click-to-rotate..."       |
|                                             |
| Source: https://chanmeng666.github.io/     |
|         design-pages/demos/3d-effects/     |
|         rotating-cube.html                 |
+---------------------------------------------+

On measurement#

I deliberately have not put a target table here. GEO outcomes are genuinely hard to measure — answer engines don't expose impression data, citation is non-deterministic across sessions and models, and referral traffic from a chat interface is largely invisible in analytics. Phase 4 above is the honest version: define the queries you care about, check them by hand on a schedule, and record what comes back.

Results from this particular site are pending. If they turn out to be worth reporting, they'll be a separate post.

Appendix: File Checklist#

Files to create/modify for GEO optimization:

New Files#

/robots.txt - AI crawler authorization rules
/llms.txt - Site-level AI guide
/sitemap.xml - Sitemap

Files to Modify#

/index.html - Add <script type="text/llms.txt"> + enhance JSON-LD
16 Demo files - Add meta tags + LLM directives + JSON-LD
- /demos/3d-effects/rotating-cube.html
- /demos/3d-effects/isometric-cube.html
- /demos/3d-effects/spatial-rhythm.html
- /demos/3d-effects/floating-rings.html
- /demos/experimental/visual-rhythm.html
- /demos/experimental/composition-study.html
- /demos/experimental/dancing-cat-in-flowers.html
- /demos/experimental/horizontal-scroll-ticker.html
- /demos/geometric-designs/static-rectangles.html
- /demos/geometric-designs/perspective-bars.html
- /demos/geometric-designs/animated-rectangles.html
- /demos/gradient-effects/symmetrical-conic.html
- /demos/gradient-effects/dynamic-poster.html
- /demos/gradient-effects/conic-gradient.html
- /demos/gradient-effects/svg-gradient-v2.html
- /demos/gradient-effects/svg-gradient.html

Summary#

The plan works across three layers:

Infrastructure Layer - robots.txt, llms.txt, sitemap.xml enable AI crawlers to discover and understand the site
Page Directive Layer - <script type="text/llms.txt"> provides precise AI directives for each page
Structured Data Layer - Rich JSON-LD Schema allows AI to parse content like a spec sheet

The through-line is that all three are the same move: writing down, in machine-readable form, the context a human reader infers from looking at the page. None of it is a trick, and none of it makes the site better or worse for people — which is the main reason I think it is worth doing even without a measured payoff. Whether it produced one here is still an open question.