Making Your Site AI-Discoverable: A Technical Deep Dive into Modern SEO

This article shows how I implemented comprehensive JSON-LD structured data and AI feed capabilities to transform StackShelf into an AI-crawler-friendly creator discovery platform.

For a step‑by‑step implementation guide for your site, read the full tutorial here.

Hi, I’m Karo 🤗.
Each week, I share awesome insights from the world of AI product management and building in public. If you’re new here - welcome! Here’s a peek at what you might have missed:
- Vibecoding, Spec-driven, And The New AI Development Lexicon: A Definitive Guide for Modern Product Builders
- Vibecoding, But Smarter: The PRD Prompt That Audits Itself For Hallucinations and Failure Modes

And here’s how we can upskill in AI together:
- Free Resources
- Premium Resources

A huge thank you to everyone who read, commented on, and shared my last post!

The Challenge: Being Found by AI

In today’s digital landscape, discoverability isn’t just about traditional search engines anymore. AI crawlers, recommendation systems, and intelligent agents are increasingly becoming the gatekeepers of content discovery.

For creator platforms like StackShelf, this presents both an opportunity and a challenge: how do I ensure that our talented Substack creators are discoverable by both human visitors and AI systems?

The stakes are high. When someone asks ChatGPT “Who are some great newsletter creators in productivity space?” or when an AI agent is helping someone find digital products for their business, I want StackShelf creators to be part of that conversation. But traditional web development practices often leave platforms invisible to AI crawlers, buried in JavaScript-heavy SPAs that these systems struggle to parse.

The Solution: A Hybrid Approach to AI Discoverability

I developed a comprehensive strategy that makes StackShelf creators discoverable through multiple channels while maintaining our existing React SPA architecture. This solution consists of three key components:

1. Server-Side AI Feeds

I created dedicated JSON-LD endpoints that serve structured creator data directly to AI crawlers:

- **`/api/ai/creators.jsonld`** - Complete catalog of all creators with Person schemas

- **`/api/ai/featured.jsonld`** - Curated feed of featured creators for premium visibilty

These feeds transform our creator database into rich, semantic data that AI systems can easily understand and process.

2. Client-Side Schema Injection

Every creator profile page dynamically injects Schema.org structured data directly into the HTML head. This ensures that when AI crawlers visit individual creator pages, they find comprehensive, contextual information about each creator.

3. Person Schema Implementation

I implemented full Schema.org Person schemas for every creator, mapping our database fields to standardized semantic properties that AI systems recognize:

```json

{

  “@type”: “Person”,

  “@id”: “https://stackshelf.com/shelf/david-perell#creator”,

  “name”: “David Perell”,

  “jobTitle”: “Newsletter Creator”,

  “description”: “Helping people think and write better...”,

  “image”: “https://stackshelf.com/uploads/profiles/david.jpg”,

  “sameAs”: [

    “https://www.instagram.com/david.perell”,

    “https://www.linkedin.com/in/david-perell”

  ],

  “knowsAbout”: [”Writing”, “Education”, “Content Creation”],

  “url”: “https://stackshelf.com/shelf/david-perell”

}

```

Technical Architecture: Zero Database Changes, Maximum Impact

One of the key architectural decisions was implementing this system without requiring any database schema changes. Here’s how I achieved this:

Smart Data Mapping

Leveraged existing creator data fields, intelligently mapping them to Schema.org properties:

```typescript
// Existing database fields → Schema.org mapping
name → Person.name
description/bio → Person.description
profile_image → Person.image
newsletter_title → Person.jobTitle (when applicable)
social_links → Person.sameAs[]
products → Person.knowsAbout[] (derived from product categories)
```

Hybrid URL Strategy

This implementation works seamlessly with both our existing React routing and new AI-focused endpoints:

Human visitors: `/shelf/creator-name` → Full React SPA experience
AI crawlers: `/api/ai/creators.jsonld` → Structured data feeds
Both: Every page includes embedded JSON-LD for maximum compatibility

Performance Optimizations

I built the system with performance as a first-class concern:

Caching: AI feeds are cached and regenerated only when creator data changes
Lazy Loading: Schema injection happens asynchronously to avoid blocking page renders
Efficient Queries: Single database queries power multiple schema objects
CDN-Ready: All feeds are designed for edge caching and global distribution

Real-World Implementation Details

Server-Side Feed Generation

AI feeds dynamically generate comprehensive creator catalogs:

``typescript
// Generate Person schema for all creators
const creators = await storage.getAllCreators();
const personSchemas = creators.map(creator => ({
  “@type”: “Person”,
  “@id”: `${baseUrl}/shelf/${creator.slug}#creator`,
  name: creator.name,
  description: creator.description || creator.bio,
  image: creator.profileImage ? `${baseUrl}${creator.profileImage}` : undefined,
  url: `${baseUrl}/shelf/${creator.slug}`,
  sameAs: creator.socialLinks?.map(link => link.url) || [],
  knowsAbout: deriveTopicsFromProducts(creator.products)
}));
```

Client-Side Dynamic Injection

Each creator profile page builds and injects a complete JSON-LD graph:

```typescript
const buildCreatorProfileGraph = (): JsonLdGraph => {
  return {
    “@context”: “https://schema.org”,
    “@graph”: [
      organizationSchema,    // StackShelf as Organization
      websiteSchema,         // StackShelf website
      profilePageSchema,     // Individual creator page
      personSchema          // The creator themselves
    ]
  };
};
```

Consistent id Patterns

Established a consistent identifier pattern across all surfaces:

Creator Person ID: `/shelf/{slug}#creator`
Profile Page ID: `/shelf/{slug}#page`
Organization ID: `/#organization`
Website ID: `/#website`

This ensures that AI systems can understand the relationships between different entities and avoid duplicate content issues.

Measurable Impact and Benefits

Immediate SEO Improvements

Rich Snippets: Creator profiles now generate rich search results with photos, descriptions, and structured data
Knowledge Graph Integration**: Creators become eligible for inclusion in Google’s Knowledge Graph
Featured Snippets: Well-structured data increases chances of appearing in featured search results

AI Discoverability

ChatGPT Integration: Creators are now discoverable when users ask AI systems for recommendations
AI Agent Compatibility: Structured data enables AI agents to understand and recommend our creators
Semantic Search: AI-powered search engines can better understand creator expertise and match them with relevant queries

Platform Advantages

Competitive Differentiation: Most creator platforms lack comprehensive structured data
Creator Value Add: Enhanced discoverability becomes a selling point for attracting creators
Future-Proofing: Ready for emerging AI-powered discovery mechanisms

Code Examples and Implementation

Building Person Schemas

```typescript

export function buildPersonSchema(creator: Creator, baseUrl: string): Person {

  const creatorUrl = `${baseUrl}/shelf/${creator.slug}`;

  return {

    “@type”: “Person”,

    “@id”: `${creatorUrl}#creator`,

    name: creator.name,

    description: creator.description || creator.bio || `Creator and content producer focused on ${deriveTopicsFromProducts(creator.products).join(’, ‘)}`,

    image: creator.profileImage ? `${baseUrl}${creator.profileImage}` : undefined,

    url: creatorUrl,

    sameAs: creator.socialLinks?.filter(link => link.url).map(link => link.url) || [],

    knowsAbout: deriveTopicsFromProducts(creator.products),

    jobTitle: creator.newsletterTitle || “Newsletter Creator”

  };

}

```

Dynamic Schema Injection Hook

```typescript

export function useJsonLd(data: JsonLdGraph | null, id: string) {

  useEffect(() => {

    if (!data) return;

    const script = document.createElement(’script’);

    script.type = ‘application/ld+json’;

    script.id = `jsonld-${id}`;

    script.textContent = JSON.stringify(data, null, 2);

    document.head.appendChild(script);

    return () => {

      document.getElementById(`jsonld-${id}`)?.remove();

    };

  }, [data, id]);

}

```

AI Feed Endpoint

```typescript

app.get(’/api/ai/creators.jsonld’, async (req, res) => {

  try {

    const creators = await storage.getAllCreators();

    const baseUrl = getBaseUrl(req);

    const jsonLdGraph = {

      “@context”: “https://schema.org”,

      “@graph”: [

        buildOrganizationSchema(baseUrl),

        buildWebSiteSchema(baseUrl),

        ...creators.map(creator => buildPersonSchema(creator, baseUrl))

      ]

    };

    res.setHeader(’Content-Type’, ‘application/ld+json’);

    res.setHeader(’Cache-Control’, ‘public, max-age=3600’); // 1 hour cache

    res.json(jsonLdGraph);

  } catch (error) {

    res.status(500).json({ error: ‘Failed to generate AI feed’ });

  }

});

```

Business Value and Competitive Advantages

For Creator Platforms

1. Enhanced Creator Attraction: Improved discoverability becomes a key selling point

2. Increased Platform Visibility: Better SEO leads to more organic traffic

3. Future-Ready Architecture: Prepared for the AI-first discovery landscape

For Individual Creators

1. Expanded Reach: Discoverable through AI-powered recommendations

2. Professional Presence: Rich, structured online profiles

3. Cross-Platform Visibility: Consistent data across multiple discovery channels

4. Long-term Growth: Investment in sustainable, standards-based discoverability

Lessons Learned and Best Practices

What Worked Well

Incremental Implementation: Building the system without breaking existing functionality
Standards Compliance: Following Schema.org specifications exactly
Performance Focus: Ensuring AI enhancements don’t impact user experience
Flexible Architecture: Designing for future expansion and additional schema types

Key Takeaways

1. Start with Standards: Schema.org provides a robust foundation for structured data

2. Hybrid Approaches Work: Combining server-side feeds with client-side injection maximizes compatibility

3. Performance Matters: AI discoverability enhancements shouldn’t slow down human users

4. Consistency is Key: Uniform @id patterns and data structures prevent confusion

Conclusion

Making creator platforms AI-discoverable isn’t just about technical implementation, it’s about recognizing that the future of content discovery is increasingly automated and intelligent. By implementing comprehensive JSON-LD structured data and AI-friendly feeds, I’ve positioned StackShelf and its creators for success in this new landscape.

The hybrid approach I developed - combining server-side AI feeds with client-side schema injection - proves that you don’t need to sacrifice user experience or rebuild your entire platform to become AI-crawler-friendly. Sometimes the most powerful solutions are the ones that work seamlessly within existing architectures while opening doors to new possibilities.

For creator platforms looking to implement similar capabilities, remember: start with standards, prioritize performance, and build incrementally. The AI discovery revolution is happening now, and the platforms that embrace structured data today will be the ones that thrive in tomorrow’s AI-powered creator economy.

Updated Oct 2025