Agent skill

json-ld-schemas

JSON-LD structured data for Organization, Person, Service, Product, FAQPage, and BreadcrumbList with reusable components. Use when implementing schema.org markup, adding rich snippets, or improving search engine understanding of page content.

View SKILL.md on GitHub Repository
Stars 2
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/canatufkansu/claude-skills/tree/main/json-ld-schemas

SKILL.md

JSON-LD Schemas

Base JsonLd Component

tsx
// components/seo/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

tsx
// components/seo/OrganizationJsonLd.tsx
import { JsonLd } from './JsonLd';

interface OrganizationJsonLdProps {
  locale: string;
}

export function OrganizationJsonLd({ locale }: OrganizationJsonLdProps) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
  
  const data = {
    '@context': 'https://schema.org',
    '@type': 'LocalBusiness',
    '@id': `${siteUrl}/#organization`,
    name: 'Studio Name',
    url: siteUrl,
    logo: `${siteUrl}/logo.png`,
    image: `${siteUrl}/studio.jpg`,
    description: 'Professional Pilates and Yoga coaching',
    priceRange: '$$',
    areaServed: {
      '@type': 'City',
      name: 'Istanbul',
    },
    availableLanguage: ['Portuguese', 'English', 'Turkish', 'Spanish', 'French', 'German'],
    sameAs: [
      'https://instagram.com/studioname',
      'https://facebook.com/studioname',
    ],
    contactPoint: {
      '@type': 'ContactPoint',
      telephone: '+90-xxx-xxx-xxxx',
      contactType: 'customer service',
      availableLanguage: ['Portuguese', 'English', 'Turkish'],
    },
  };

  return <JsonLd data={data} />;
}

Person Schema (Trainer)

tsx
// components/seo/PersonJsonLd.tsx
export function PersonJsonLd() {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
  
  const data = {
    '@context': 'https://schema.org',
    '@type': 'Person',
    '@id': `${siteUrl}/#trainer`,
    name: 'Trainer Name',
    jobTitle: 'Certified Pilates & Yoga Instructor',
    description: 'Experienced instructor specializing in...',
    image: `${siteUrl}/trainer.jpg`,
    url: `${siteUrl}/about`,
    sameAs: ['https://linkedin.com/in/trainername'],
    knowsAbout: [
      'Pilates',
      'Yoga',
      'Posture Correction',
      'Strength Training',
      'Mobility',
    ],
    hasCredential: [
      {
        '@type': 'EducationalOccupationalCredential',
        name: 'Certified Pilates Instructor',
        credentialCategory: 'Professional Certification',
      },
    ],
  };

  return <JsonLd data={data} />;
}

Service Schema

tsx
// components/seo/ServiceJsonLd.tsx
import type { Service } from '@/types';

interface ServiceJsonLdProps {
  service: Service;
  locale: string;
}

export function ServiceJsonLd({ service, locale }: ServiceJsonLdProps) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
  
  const data = {
    '@context': 'https://schema.org',
    '@type': 'Service',
    '@id': `${siteUrl}/${locale}/services/${service.slug}`,
    name: service.name,
    description: service.longDesc,
    provider: {
      '@id': `${siteUrl}/#organization`,
    },
    areaServed: {
      '@type': 'City',
      name: 'Istanbul',
    },
    serviceType: service.tags.join(', '),
    offers: {
      '@type': 'Offer',
      price: service.priceFrom,
      priceCurrency: 'EUR',
      availability: 'https://schema.org/InStock',
    },
  };

  return <JsonLd data={data} />;
}

Product Schema (Programmes)

tsx
// components/seo/ProductJsonLd.tsx
import type { Programme } from '@/types';

interface ProductJsonLdProps {
  programme: Programme;
  locale: string;
}

export function ProductJsonLd({ programme, locale }: ProductJsonLdProps) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
  
  const data = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    '@id': `${siteUrl}/${locale}/programmes/${programme.slug}`,
    name: programme.title,
    description: programme.outcomes.join('. '),
    category: 'Digital Fitness Programme',
    offers: {
      '@type': 'Offer',
      price: programme.price,
      priceCurrency: 'EUR',
      availability: 'https://schema.org/InStock',
      url: `${siteUrl}/${locale}/programmes/${programme.slug}`,
    },
    brand: {
      '@id': `${siteUrl}/#organization`,
    },
  };

  return <JsonLd data={data} />;
}

FAQPage Schema

tsx
// components/seo/FAQPageJsonLd.tsx
import type { FAQGroup } from '@/types';

interface FAQPageJsonLdProps {
  faqs: FAQGroup[];
}

export function FAQPageJsonLd({ faqs }: FAQPageJsonLdProps) {
  const allQuestions = faqs.flatMap((group) =>
    group.items.map((item) => ({
      '@type': 'Question',
      name: item.question,
      acceptedAnswer: {
        '@type': 'Answer',
        text: item.answer,
      },
    }))
  );

  const data = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: allQuestions,
  };

  return <JsonLd data={data} />;
}

BreadcrumbList Schema

tsx
// components/seo/BreadcrumbJsonLd.tsx
interface BreadcrumbItem {
  name: string;
  href: string;
}

interface BreadcrumbJsonLdProps {
  items: BreadcrumbItem[];
  locale: string;
}

export function BreadcrumbJsonLd({ items, locale }: BreadcrumbJsonLdProps) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
  
  const data = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.name,
      item: `${siteUrl}/${locale}${item.href}`,
    })),
  };

  return <JsonLd data={data} />;
}

WebPage Schema

tsx
// components/seo/WebPageJsonLd.tsx
interface WebPageJsonLdProps {
  title: string;
  description: string;
  locale: string;
  path: string;
  lastUpdated?: string;
}

export function WebPageJsonLd({
  title,
  description,
  locale,
  path,
  lastUpdated,
}: WebPageJsonLdProps) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
  
  const data = {
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    name: title,
    description,
    url: `${siteUrl}/${locale}${path}`,
    inLanguage: locale,
    isPartOf: {
      '@type': 'WebSite',
      '@id': `${siteUrl}/#website`,
      name: 'Studio Name',
      url: siteUrl,
    },
    ...(lastUpdated && { dateModified: lastUpdated }),
  };

  return <JsonLd data={data} />;
}

Usage in Pages

tsx
// app/[locale]/services/page.tsx
export default async function ServicesPage({ params }: Props) {
  const { locale } = await params;
  const services = await getServices(locale as Locale);

  return (
    <>
      <OrganizationJsonLd locale={locale} />
      <BreadcrumbJsonLd
        locale={locale}
        items={[
          { name: 'Home', href: '' },
          { name: 'Services', href: '/services' },
        ]}
      />
      {/* Page content */}
    </>
  );
}

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

canatufkansu/claude-skills

framer-motion-animations

Subtle animation patterns for hero sections, card reveals, page transitions, and scroll-triggered effects using Framer Motion. Use when adding animations to components, implementing scroll effects, or creating page transitions.

2 0
Explore
canatufkansu/claude-skills

json-content-management

JSON-driven content architecture for services, programmes, FAQs, testimonials, and policies with TypeScript interfaces and locale-aware data fetching. Use when defining content schemas, creating data utilities, adding new content types, or fetching localized business data.

2 0
Explore
canatufkansu/claude-skills

accessibility-a11y

Semantic HTML, keyboard navigation, focus states, ARIA labels, skip links, and WCAG contrast requirements. Use when ensuring accessibility compliance, implementing keyboard navigation, or adding screen reader support.

2 0
Explore
canatufkansu/claude-skills

email-resend

Email sending via Resend API for contact forms and booking requests with locale-aware templates. Use when implementing email notifications, contact form submissions, or transactional emails.

2 0
Explore
canatufkansu/claude-skills

nextjs-app-router

Next.js 15 App Router patterns for Server/Client Components, async params, layouts, route handlers, Server Actions, and data fetching. Use when creating routes, pages, layouts, API endpoints, or implementing form submissions with revalidation.

2 0
Explore
canatufkansu/claude-skills

zod-react-hook-form

Form validation combining Zod schemas with React Hook Form, including localized error messages, Server Action integration, and shadcn/ui Form components. Use when building forms, validating user input, handling form submissions, or implementing Server Actions with validation.

2 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results