--- name: google-structured-data description: Google Search structured data implementation - Schema.org markup for rich results, JSON-LD templates, JavaScript generation, and SEO best practices version: "1.1" --- # Google Structured Data Skill Implement Schema.org structured data markup for Google Search rich results. This skill provides JSON-LD templates, required/recommended properties, and best practices for all major structured data types. ## When to Use This Skill Trigger this skill when: - Adding structured data to web pages for SEO - Implementing JSON-LD markup for rich results - Creating Schema.org markup for articles, products, events, FAQs, recipes, videos, or local businesses - Generating structured data dynamically with JavaScript or Google Tag Manager - Debugging structured data issues - Optimizing search appearance in Google Search, News, or Discover ## Quick Reference ### Supported Formats - **JSON-LD** (Recommended) - Embedded in ` ``` **GTM Variable Setup:** - Create Data Layer variables or Custom JavaScript variables - Extract values from page elements or data layer - Reduces duplication between page content and markup ### Method 2: Custom JavaScript **Best for:** SPAs, API-driven content, custom implementations **Basic DOM Injection:** ```javascript // Create and inject structured data function injectStructuredData(data) { const script = document.createElement('script'); script.setAttribute('type', 'application/ld+json'); script.textContent = JSON.stringify(data); document.head.appendChild(script); } // Example: Article structured data const articleData = { "@context": "https://schema.org", "@type": "Article", "headline": document.querySelector('h1').textContent, "image": document.querySelector('article img')?.src, "datePublished": document.querySelector('time')?.getAttribute('datetime'), "author": { "@type": "Person", "name": document.querySelector('.author-name')?.textContent } }; injectStructuredData(articleData); ``` **API-Driven Generation:** ```javascript // Fetch data from API and inject structured data fetch('https://api.example.com/recipes/123') .then(response => response.json()) .then(recipe => { const structuredData = { "@context": "https://schema.org/", "@type": "Recipe", "name": recipe.title, "image": recipe.images, "author": { "@type": "Person", "name": recipe.author.name }, "datePublished": recipe.publishedAt, "description": recipe.summary, "recipeIngredient": recipe.ingredients, "recipeInstructions": recipe.steps.map((step, i) => ({ "@type": "HowToStep", "position": i + 1, "text": step.instruction })) }; const script = document.createElement('script'); script.setAttribute('type', 'application/ld+json'); script.textContent = JSON.stringify(structuredData); document.head.appendChild(script); }); ``` **React/Next.js Example:** ```jsx import Head from 'next/head'; function ProductPage({ product }) { const structuredData = { "@context": "https://schema.org", "@type": "Product", "name": product.name, "image": product.images, "description": product.description, "brand": { "@type": "Brand", "name": product.brand }, "offers": { "@type": "Offer", "url": `https://example.com/products/${product.slug}`, "priceCurrency": "USD", "price": product.price, "availability": product.inStock ? "https://schema.org/InStock" : "https://schema.org/OutOfStock" } }; return ( <>