Implementing Structured Data with JSON-LD

Structured data helps search engines understand your content better and can lead to rich results in search - those eye-catching snippets with stars, prices, images, and more. Let's learn how to implement it correctly using JSON-LD.

What is Structured Data?

Structured data is a standardized format for providing information about a page and classifying its content. It helps search engines understand context and display your content more prominently in search results.

Why JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) is Google's recommended format because:

• Easy to implement and maintain
• Doesn't interfere with HTML structure
• Can be added dynamically with JavaScript
• Centralized in one script tag

Common Schema Types

1. Organization Schema

Essential for every business website:

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "TinyCode Labs",
  "url": "https://tinycodelabs.com",
  "logo": "https://tinycodelabs.com/logo.png",
  "description": "Innovative software development company",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Barranquilla",
    "addressCountry": "CO"
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "email": "tinycodelabs.dev@gmail.com",
    "contactType": "customer service"
  },
  "sameAs": [
    "https://twitter.com/tinycodelabs",
    "https://linkedin.com/company/tinycodelabs"
  ]
}

2. Article Schema

For blog posts and articles:

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title",
  "description": "Article description",
  "image": "https://yoursite.com/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "publisher": {
    "@type": "Organization",
    "name": "TinyCode Labs",
    "logo": {
      "@type": "ImageObject",
      "url": "https://tinycodelabs.com/logo.png"
    }
  },
  "datePublished": "2025-10-25",
  "dateModified": "2025-10-25"
}

3. Product Schema

For e-commerce or app listings:

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Taskify",
  "operatingSystem": "Android",
  "applicationCategory": "ProductivityApplication",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "ratingCount": "2100"
  },
  "description": "Smart task management app"
}

4. Breadcrumb Schema

For navigation breadcrumbs:

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://tinycodelabs.com"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://tinycodelabs.com/blog"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Article Title"
    }
  ]
}

5. FAQ Schema

For frequently asked questions:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is Taskify?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Taskify is a smart task management app..."
      }
    },
    {
      "@type": "Question",
      "name": "Is Taskify free?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, Taskify is completely free..."
      }
    }
  ]
}

Implementation in Next.js

Method 1: In Page Component

Add JSON-LD directly in your page:

export default function BlogPost() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: 'Your Article Title',
    author: {
      '@type': 'Person',
      name: 'Author Name',
    },
    datePublished: '2025-10-25',
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>
        {/* Your content */}
      </article>
    </>
  )
}

Method 2: Reusable Component

Create a JsonLd component for reusability:

// components/JsonLd.tsx
export function JsonLd({ data }: { data: any }) {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  )
}

// Usage
import { JsonLd } from '@/components/JsonLd'

export default function Page() {
  const articleData = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    // ...
  }

  return (
    <>
      <JsonLd data={articleData} />
      {/* Your content */}
    </>
  )
}

Method 3: Generate from Metadata

Automatically generate from Next.js metadata:

// lib/generateJsonLd.ts
export function generateArticleJsonLd(metadata: Metadata) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: metadata.title,
    description: metadata.description,
    datePublished: metadata.openGraph?.publishedTime,
    // ... more fields
  }
}

Best Practices

1. Use Required Properties

Each schema type has required properties. Check the Schema.org documentation for your specific type.

2. Be Accurate and Honest

Only markup content that is visible on the page. Don't add false information to manipulate search results.

3. Use Multiple Schemas

You can combine multiple schemas on one page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      // Organization data
    },
    {
      "@type": "WebPage",
      // WebPage data
    },
    {
      "@type": "Article",
      // Article data
    }
  ]
}
</script>

4. Include Images

High-quality images improve rich results:

• Use high-resolution images (minimum 1200px wide)
• Aspect ratio 16:9, 4:3, or 1:1
• Use HTTPS URLs

Testing Your Structured Data

Google Rich Results Test

Use Google's Rich Results Test to validate your structured data:

https://search.google.com/test/rich-results

Schema Markup Validator

Validate against Schema.org standards at:validator.schema.org

Search Console

Monitor your structured data in Google Search Console under "Enhancements" section.

Common Mistakes to Avoid

• Markup invisible content: Only markup content visible to users
• Missing required properties: Check Schema.org for required fields
• Wrong date formats: Use ISO 8601 format (YYYY-MM-DD)
• Invalid image URLs: Use absolute URLs with HTTPS
• Duplicate markup: Don't add the same structured data multiple times
• Misleading information: Be accurate and honest

Advanced: Dynamic Content

For dynamic content, generate JSON-LD from your data:

// app/blog/[slug]/page.tsx
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug)
  
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.excerpt,
    image: post.coverImage,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      '@type': 'Person',
      name: post.author.name,
    },
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* Post content */}
    </>
  )
}

Conclusion

Implementing structured data with JSON-LD is one of the most impactful SEO optimizations you can make. It helps search engines understand your content better and can significantly improve your visibility in search results with rich snippets, featured snippets, and knowledge panels.

Start with the basics - Organization and Article schemas - then expand to more specific types as needed. Always test your implementation and monitor performance in Search Console.