--- 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 ( <>
{/* Page content */} > ); } ``` ### Method 3: Server-Side Rendering (Recommended) For frameworks supporting SSR (Next.js, Nuxt, etc.), include structured data in the rendered HTML output for best reliability. ```javascript // Next.js getServerSideProps example export async function getServerSideProps({ params }) { const product = await fetchProduct(params.id); return { props: { product, structuredData: { "@context": "https://schema.org", "@type": "Product", "name": product.name, // ... complete structured data } } }; } ``` ### JavaScript Generation: Important Considerations **Testing Requirements:** - Always use **URL input** in Rich Results Test (not code input) - Code input has JavaScript limitations - Test the actual rendered page, not source code **Product Markup Warning:** Dynamically-generated Product markup can: - Reduce shopping crawl frequency - Affect reliability for fast-changing content (price, availability) - Require sufficient server resources for increased Google traffic **Best Practices:** 1. Use GTM variables to extract data from page (avoid duplication) 2. Ensure JavaScript executes before Google renders 3. Test with Mobile-Friendly Test to verify rendering 4. Consider SSR for critical structured data 5. Monitor Search Console for rendering issues --- ## Implementation Checklist ### Before Deployment - [ ] Use JSON-LD format (recommended) - [ ] Include all required properties for type - [ ] Add recommended properties for quality - [ ] Use most specific Schema.org type - [ ] Markup matches visible page content - [ ] Images are crawlable and indexable - [ ] Dates use ISO 8601 with timezone - [ ] URLs are fully qualified ### Testing - [ ] Validate with [Rich Results Test](https://search.google.com/test/rich-results) - [ ] Check [Schema.org validator](https://validator.schema.org/) - [ ] Test with URL Inspection tool in Search Console - [ ] Verify no manual actions in Search Console ### After Deployment - [ ] Submit sitemap for recrawling - [ ] Monitor Rich Results report in Search Console - [ ] Allow several days for indexing - [ ] Track performance changes --- ## Common Mistakes to Avoid 1. **Marking up invisible content** - Only mark up content users can see 2. **Misleading markup** - Content must match what's marked up 3. **Missing required properties** - Each type has mandatory fields 4. **Wrong timezone format** - Always include UTC offset 5. **Using midnight (00:00:00)** - Only if event actually starts at midnight 6. **Low-quality images** - Use high-res images meeting size requirements 7. **Blocking Googlebot** - Don't use robots.txt or noindex on structured data pages 8. **Duplicate markup inconsistency** - All versions of a page need identical markup 9. **Using deprecated formats** - Don't use data-vocabulary.org --- ## Validation Tools 1. **Rich Results Test**: https://search.google.com/test/rich-results 2. **Schema.org Validator**: https://validator.schema.org/ 3. **Search Console URL Inspection**: Test live URLs 4. **Search Console Rich Results Report**: Monitor status --- ## Resources - [Google Search Central - Structured Data](https://developers.google.com/search/docs/appearance/structured-data) - [Generate Structured Data with JavaScript](https://developers.google.com/search/docs/appearance/structured-data/generate-structured-data-with-javascript) - [Schema.org Full Hierarchy](https://schema.org/docs/full.html) - [Google Structured Data Guidelines](https://developers.google.com/search/docs/appearance/structured-data/sd-policies) - [Rich Results Gallery](https://developers.google.com/search/docs/appearance/structured-data/search-gallery) --- ## Notes - Rich results are not guaranteed even with correct markup - Google's algorithms determine when to show rich results - Violations can result in manual actions (loss of rich result eligibility) - Keep markup updated when page content changes - Test after any significant changes --- **Source**: Google Search Central Documentation **Last Updated**: January 2026 **Version**: 1.1 ### Changelog - **1.1**: Added JavaScript generation section (GTM, custom JS, React/Next.js, SSR) - **1.0**: Initial release with 8 structured data types