JSON-LD Schema Generator - Usage Examples

Note: This module generates structured data for SoftwareApplication, AggregateRating, FAQPage, and VideoObject schemas optimized for AI tools and web applications.

1. Basic SoftwareApplication Schema

JavaScript Usage:

// Import the module
import { renderAppJsonLd } from './js/jsonld.js';
// OR in browser: const { renderAppJsonLd } = window.JsonLD;

// Basic app data
const app = {
    name: "ChatGPT",
    description: "OpenAI's conversational AI assistant for text generation and Q&A",
    url: "https://chat.openai.com",
    category: "AI Chat & Q&A",
    subcategory: "Chatbots", 
    pricing: "freemium",
    company: "OpenAI"
};

// Generate JSON-LD
const jsonLd = renderAppJsonLd(app);
console.log(jsonLd);

Output:


    


    
2. Complete Schema with Rating, FAQ, and Video

    

        
JavaScript Usage:

        
const app = {
    name: "Midjourney", 
    description: "AI image generation tool for creating stunning artwork",
    url: "https://www.midjourney.com",
    category: "AI Art & Drawing",
    subcategory: "Image Generation",
    pricing: "paid",
    price: "10.00",
    currency: "USD",
    company: "Midjourney Inc",
    features: ["Text-to-image generation", "Style customization", "High-resolution output"],
    videoPreview: {
        type: "youtube",
        videoId: "yM5d_JnrjKw", 
        title: "Midjourney Tutorial: Create Amazing AI Art",
        source: "third-party",
        duration: 600, // 10 minutes
        uploadDate: "2024-01-15"
    }
};

const options = {
    rating: {
        value: 4.7,
        count: 1250,
        reviewCount: 890
    },
    faqs: [
        {
            q: "What is Midjourney?",
            a: "Midjourney is an AI image generation tool that creates stunning artwork from text descriptions."
        },
        {
            q: "How much does Midjourney cost?", 
            a: "Midjourney offers paid subscription plans starting at $10/month with different usage tiers."
        },
        {
            q: "What are the main features of Midjourney?",
            a: "Key features include text-to-image generation, style customization, high-resolution output, and artistic control."
        }
    ]
};

const jsonLd = renderAppJsonLd(app, options);

    


    

        
Output:

        

    


    
3. Inject into HTML Head

    

        
Method 1: Direct Injection

        
// Inject JSON-LD directly into the page head
import { injectJsonLd } from './js/jsonld.js';

const app = { /* your app data */ };
const options = { /* rating, faqs, video */ };

// This creates and appends a <script type="application/ld+json"> tag
const scriptElement = injectJsonLd(app, options);


        
Method 2: Manual HTML Insertion

        
<head>
    <!-- Other meta tags -->
    <script type="application/ld+json" id="app-jsonld"></script>
</head>

<script>
    // Generate and insert JSON-LD
    const jsonLd = renderAppJsonLd(app, options);
    document.getElementById('app-jsonld').textContent = jsonLd;
</script>


        
Method 3: Update Existing Schema

        
// Remove existing JSON-LD and inject new one
import { updateJsonLd } from './js/jsonld.js';

// This removes all existing JSON-LD scripts and adds new ones
updateJsonLd(app, options);

    


    
4. Advanced Configuration Examples

    

        
Free Tool with Community Video:

        
const freeApp = {
    name: "Stable Diffusion",
    description: "Open-source AI image generation with extensive customization",
    url: "https://stability.ai", 
    category: "AI Art & Drawing",
    pricing: "free",
    videoPreview: {
        type: "youtube",
        videoId: "5_XeHJK4j4Q",
        title: "Stable Diffusion: Complete Beginner Tutorial", 
        source: "third-party"
    }
};


        
Paid Tool with Detailed Pricing:

        
const paidApp = {
    name: "Jasper AI",
    description: "AI writing assistant for marketing copy and content creation",
    url: "https://www.jasper.ai",
    category: "AI Writing & Content", 
    pricing: "paid",
    price: "29.00",
    currency: "USD",
    billingPeriod: "P1M", // Monthly
    offerValidUntil: "2024-12-31"
};


        
Freemium Tool with Multiple Tiers:

        
const freemiumApp = {
    name: "Grammarly", 
    description: "AI writing assistant for grammar and style improvement",
    url: "https://www.grammarly.com",
    category: "AI Writing & Content",
    pricing: "freemium",
    premiumPrice: "12.00",
    currency: "USD"
};

    


    
5. Integration with Existing Tool Pages

    

        
Integration Example:

        
// In your existing tool page JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // Get tool data from your existing system
    const tool = getToolData(); // Your existing function
    
    // Transform to JSON-LD format
    const app = {
        name: tool.name,
        description: tool.description, 
        url: tool.url,
        category: tool.category,
        subcategory: tool.subcategory,
        pricing: tool.pricing,
        videoPreview: tool.videoPreview
    };
    
    // Add rating data if available
    const options = {};
    if (tool.rating) {
        options.rating = {
            value: tool.rating.average,
            count: tool.rating.total
        };
    }
    
    // Add FAQ data
    options.faqs = generateToolFAQs(tool);
    
    // Inject JSON-LD
    injectJsonLd(app, options);
});

    


    
6. Validation and Error Handling

    

        
try {
    const jsonLd = renderAppJsonLd(app, options);
    
    // Validate JSON before injection
    const parsed = JSON.parse(jsonLd);
    console.log('Generated valid JSON-LD:', parsed);
    
    // Inject into page
    injectJsonLd(app, options);
    
} catch (error) {
    console.error('JSON-LD generation failed:', error);
    // Fallback: inject basic schema without optional data
    const basicJsonLd = renderAppJsonLd({
        name: app.name,
        description: app.description,
        url: app.url,
        category: app.category,
        pricing: app.pricing
    });
    
    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.textContent = basicJsonLd;
    document.head.appendChild(script);
}

    


    

        SEO Benefits: