structured-data

Structured Data & Schema Markup

Why This Matters

Structured data tells search engines (and AI search) what your content IS, not just what it says. A product page with JSON-LD gets rich snippets (price, rating, availability). Without it, you're just another blue link.

JSON-LD Implementation in React

Next.js Pattern

// components/JsonLd.tsx
interface JsonLdProps {
  data: Record<string, unknown>;
}

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

Organization Schema (Site-wide)

// app/layout.tsx
const organizationSchema = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'YourBrand',
  url: 'https://yourdomain.com',
  logo: 'https://yourdomain.com/logo.png',
  sameAs: [
    'https://twitter.com/yourbrand',
    'https://linkedin.com/company/yourbrand',
    'https://github.com/yourbrand',
  ],
  contactPoint: {
    '@type': 'ContactPoint',
    email: '[email protected]',
    contactType: 'customer support',
  },
};

<JsonLd data={organizationSchema} />

WebSite with Search (Sitelinks Searchbox)

const websiteSchema = {
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'YourBrand',
  url: 'https://yourdomain.com',
  potentialAction: {
    '@type': 'SearchAction',
    target: {
      '@type': 'EntryPoint',
      urlTemplate: 'https://yourdomain.com/search?q={search_term_string}',
    },
    'query-input': 'required name=search_term_string',
  },
};

Article / Blog Post

function articleSchema(post: BlogPost) {
  return {
    '@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,
      url: post.author.profileUrl,
    },
    publisher: {
      '@type': 'Organization',
      name: 'YourBrand',
      logo: { '@type': 'ImageObject', url: 'https://yourdomain.com/logo.png' },
    },
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': `https://yourdomain.com/blog/${post.slug}`,
    },
  };
}