Common Schema Types for Web Apps

Let's explore the most commonly used schema types for web applications and how to implement them correctly.

Article / BlogPosting

For blog posts and news articles:

const articleJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article', // or 'BlogPosting', 'NewsArticle'
  headline: 'SEO Best Practices for Next.js',
  description: 'Learn how to optimize your Next.js app for search engines',
  image: {
    '@type': 'ImageObject',
    url: 'https://example.com/article-image.jpg',
    width: 1200,
    height: 630,
  },
  datePublished: '2024-01-15T08:00:00+00:00',
  dateModified: '2024-01-20T10:30:00+00:00',
  author: {
    '@type': 'Person',
    name: 'Jane Developer',
    url: 'https://example.com/authors/jane',
  },
  publisher: {
    '@type': 'Organization',
    name: 'Tech Blog',
    logo: {
      '@type': 'ImageObject',
      url: 'https://example.com/logo.png',
    },
  },
  mainEntityOfPage: {
    '@type': 'WebPage',
    '@id': 'https://example.com/blog/seo-nextjs',
  },
}

Course

For educational content:

const courseJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Course',
  name: 'SEO Mastery for Next.js Developers',
  description: 'Learn to build search-optimized Next.js applications',
  provider: {
    '@type': 'Organization',
    name: 'FreeAcademy',
    url: 'https://freeacademy.ai',
  },
  offers: {
    '@type': 'Offer',
    price: '0',
    priceCurrency: 'USD',
    availability: 'https://schema.org/InStock',
    category: 'Free',
  },
  hasCourseInstance: {
    '@type': 'CourseInstance',
    courseMode: 'online',
    courseWorkload: 'PT10H', // ISO 8601 duration format
  },
  educationalLevel: 'Intermediate',
  inLanguage: 'en',
}

Product

For e-commerce pages:

const productJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: 'Wireless Headphones',
  image: [
    'https://example.com/photos/1.jpg',
    'https://example.com/photos/2.jpg',
  ],
  description: 'Premium wireless headphones with noise cancellation',
  sku: 'WH-1000XM4',
  brand: {
    '@type': 'Brand',
    name: 'TechBrand',
  },
  offers: {
    '@type': 'Offer',
    url: 'https://example.com/products/headphones',
    priceCurrency: 'USD',
    price: '299.99',
    availability: 'https://schema.org/InStock',
    seller: {
      '@type': 'Organization',
      name: 'TechStore',
    },
  },
  aggregateRating: {
    '@type': 'AggregateRating',
    ratingValue: '4.5',
    reviewCount: '1250',
  },
}

FAQPage

For frequently asked questions:

const faqJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: [
    {
      '@type': 'Question',
      name: 'What is Next.js?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Next.js is a React framework for building full-stack web applications.',
      },
    },
    {
      '@type': 'Question',
      name: 'Is Next.js good for SEO?',
      acceptedAnswer: {
        '@type': 'Answer',
        text: 'Yes, Next.js is excellent for SEO because it supports server-side rendering and static generation.',
      },
    },
  ],
}

Organization

For your company or website:

const organizationJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'FreeAcademy',
  url: 'https://freeacademy.ai',
  logo: 'https://freeacademy.ai/logo.png',
  sameAs: [
    'https://twitter.com/freeacademy',
    'https://linkedin.com/company/freeacademy',
    'https://github.com/freeacademy',
  ],
  contactPoint: {
    '@type': 'ContactPoint',
    contactType: 'customer service',
    email: 'support@freeacademy.ai',
  },
}

BreadcrumbList

For navigation breadcrumbs:

const breadcrumbJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    {
      '@type': 'ListItem',
      position: 1,
      name: 'Home',
      item: 'https://example.com',
    },
    {
      '@type': 'ListItem',
      position: 2,
      name: 'Courses',
      item: 'https://example.com/courses',
    },
    {
      '@type': 'ListItem',
      position: 3,
      name: 'SEO Mastery',
      item: 'https://example.com/courses/seo-nextjs',
    },
  ],
}

WebSite with SearchAction

Enable sitelinks search box in Google:

const websiteJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'FreeAcademy',
  url: 'https://freeacademy.ai',
  potentialAction: {
    '@type': 'SearchAction',
    target: {
      '@type': 'EntryPoint',
      urlTemplate: 'https://freeacademy.ai/search?q={search_term_string}',
    },
    'query-input': 'required name=search_term_string',
  },
}

Testing Structured Data

Google Rich Results Test

The primary tool for testing: https://search.google.com/test/rich-results

• Enter URL or paste JSON-LD
• Validates syntax
• Checks required properties
• Shows rich result preview

Schema.org Validator

General schema validation: https://validator.schema.org

Google Search Console

Monitor across your site:

• Valid/invalid structured data
• Errors and warnings
• Rich result appearances

Common Mistakes

Missing @context

// Bad: Missing context
const jsonLd = {
  '@type': 'Article',
  headline: 'Title',
}

// Good: Include context
const jsonLd = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: 'Title',
}

Wrong Property Types

// Bad: Price as number
offers: {
  price: 99.99,
}

// Good: Price as string
offers: {
  price: '99.99',
}

Summary

In this lesson, you learned common schema types:

• Article/BlogPosting for blog content
• Course for educational content
• Product for e-commerce
• FAQPage for FAQ sections
• Organization for company info
• BreadcrumbList for navigation
• WebSite with SearchAction

You also learned how to test and validate structured data.

In the next module, we'll cover technical SEO: sitemaps, robots.txt, and URL structure.