Structured Data and JSON-LD: A Complete Guide to SEO Rich Snippets

前端工程(Updated Jun 7, 2026)

What is Structured Data?

Structured data is a standardized format using the Schema.org vocabulary that helps search engines understand the semantic meaning of page content, enabling Rich Snippets in search results.

Three Embedding Formats Compared

Format Embedding Method Google Recommended Maintainability
JSON-LD <script type="application/ld+json"> Recommended Excellent
Microdata HTML attributes itemscope/itemprop Not recommended Poor
RDFa HTML attributes vocab/property Not recommended Poor

Google officially recommends JSON-LD because it's decoupled from HTML content and easier to maintain.

JSON-LD Basic Syntax

Basic Structure

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "description": "Article description",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "datePublished": "2026-06-07",
  "dateModified": "2026-06-07"
}
</script>

Multiple Types Combined

<script type="application/ld+json">
[
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "..."
  },
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [...]
  }
]
</script>

Common Structured Data Types

1. Article

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Web Animations API and High-Performance Animation",
  "description": "Deep comparison of Web Animations API vs CSS animations",
  "image": "https://toolsku.com/og/blog-animation.png",
  "author": {
    "@type": "Organization",
    "name": "ToolsKu Team",
    "url": "https://toolsku.com"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ToolsKu",
    "logo": {
      "@type": "ImageObject",
      "url": "https://toolsku.com/logo.png"
    }
  },
  "datePublished": "2026-06-06",
  "dateModified": "2026-06-06",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://toolsku.com/blog/web-animations-api-performance"
  }
}

2. FAQPage

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What's the difference between JSON-LD and Microdata?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD uses a separate script tag, decoupled from HTML. Microdata uses inline HTML attributes, making it harder to maintain. Google recommends JSON-LD."
      }
    },
    {
      "@type": "Question",
      "name": "How long until Google recognizes structured data?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Typically days to weeks, depending on crawl frequency. Check Search Console's Enhancements report for status."
      }
    }
  ]
}

3. HowTo

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Add JSON-LD Structured Data",
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "Determine page type",
      "text": "Choose the appropriate Schema.org type based on page content, such as Article, Product, or FAQPage."
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "Write JSON-LD",
      "text": "Follow Schema.org specifications to write JSON-LD data, ensuring all required fields are complete."
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "Embed in page",
      "text": "Place JSON-LD inside a <script type=\"application/ld+json\"> tag in <head> or <body>."
    },
    {
      "@type": "HowToStep",
      "position": 4,
      "name": "Validate and test",
      "text": "Use Google's Rich Results Test tool to verify structured data is correct."
    }
  ]
}

4. BreadcrumbList

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://toolsku.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://toolsku.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Structured Data and JSON-LD",
      "item": "https://toolsku.com/blog/structured-data-json-ld"
    }
  ]
}

5. SoftwareApplication

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "CSS Animation Generator",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web",
  "description": "Online CSS animation code generation and preview tool",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "256"
  }
}

JSON-LD Implementation in Next.js

Using next/script

import Script from 'next/script';

function BlogPost({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.description,
    author: {
      '@type': 'Organization',
      name: 'ToolsKu Team',
    },
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
  };

  return (
    <>
      <Script
        id="json-ld"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{post.content}</article>
    </>
  );
}

Using the metadata API (Next.js 15+)

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
    },
  };
}

Google Rich Snippet Effects

Structured Data Type Rich Snippet Effect CTR Increase
Article Author avatar, publish date +20-30%
FAQPage FAQ expandable sections +30-50%
HowTo Step list +20-40%
BreadcrumbList Breadcrumb path +10-15%
SoftwareApplication Rating, price +25-35%

Validation and Debugging

Google Rich Results Test

Visit Rich Results Test, enter a page URL or paste HTML code.

Schema.org Validator

Visit Schema Markup Validator to validate JSON-LD structure against the specification.

Search Console Monitoring

Search Console → Enhancements → Structured Data

- View valid/invalid item counts
- Identify specific errors
- Monitor Google recognition progress

Common Error Troubleshooting

Error Cause Fix
Missing required field Required property not provided Add headline, datePublished, etc.
Type mismatch Value type doesn't match Schema definition Use ISO 8601 for dates
Duplicate structured data Same content declared multiple times Merge into array or remove duplicates
Invalid URL Malformed or unreachable URL Use full absolute paths

Best Practices

  • Declare only the type matching the page content: Article for blog, SoftwareApplication for tools
  • Use ISO 8601 for dates: 2026-06-07 or 2026-06-07T08:00:00+08:00
  • Use absolute URLs for images: https://toolsku.com/og/image.png
  • Never fabricate data: Google may issue manual actions for misleading structured data
  • Complement with Open Graph: JSON-LD for search engines, OG for social media

Summary

JSON-LD is the optimal approach for structured data, providing semantic information to search engines via Schema.org vocabulary and significantly improving rich snippet display rates and click-through rates. In Next.js, integrate easily via next/script or the metadata API, and continuously monitor with Google Rich Results Test and Search Console.

Use the OG Preview tool to check Open Graph tags, the Sitemap Generator to ensure discoverability, and the Robots.txt Editor to control crawler access.

Try these browser-local tools — no sign-up required →

#JSON-LD#结构化数据#SEO#Schema.org#富摘要