feat: Add FAQPage and ProfessionalService schema to service pages

[vibemarketerpromax]

Summary

• Added comprehensive schema markup to all service pages
• Automatically generates ProfessionalService and FAQPage schemas
• Extracts data from frontmatter for dynamic schema generation
• Completes Phase 2 of schema implementation plan

Changes

Updated Files

• app/services/[slug]/page.tsx:
  • Added generateSchemas() function to create schema objects
  • Generates ProfessionalService schema with service details
  • Generates FAQPage schema when FAQs exist in frontmatter
  • Renders schemas using JsonLd component
  • Works for both service-style and expertise-style pages

Schema Implementation

ProfessionalService Schema

Each service page now includes:

• ✅ Service name and description
• ✅ Service URL
• ✅ Provider (Procedure Technologies)
• ✅ Service areas (United States, India)
• ✅ Service types (extracted from capabilities array)

FAQPage Schema

When FAQs exist in service frontmatter:

• ✅ Question name
• ✅ Accepted answer text
• ✅ Proper schema.org structure

Pages Covered

This implementation automatically covers all service pages:

• /services/ai-engineering
• /services/ai-security
• /services/ai-agents
• /services/ai-privacy
• /services/backend-development
• /services/frontend-development
• /services/mobile-development
• /services/product-design
• /services/cloud
• /services/kubernetes
• /services/software-testing-and-qa
• /services/design-systems

Example Schema Output

For /services/ai-engineering:

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "AI Engineering Services",
  "description": "AI engineering services for teams that need reliable...",
  "url": "https://procedure.tech/services/ai-engineering",
  "provider": {
    "@type": "Organization",
    "name": "Procedure Technologies",
    "url": "https://procedure.tech"
  },
  "areaServed": [
    { "@type": "Country", "name": "United States" },
    { "@type": "Country", "name": "India" }
  ],
  "serviceType": [
    "AI System Architecture",
    "Model Development & Integration",
    "Data Pipelines & Feature Engineering",
    "MLOps & LLMOps",
    "AI Application Development",
    "AI System Monitoring & Optimization"
  ]
}

Implementation Status

• ✅ Phase 1: JsonLd component + Organization schema (PR feat: Add JsonLd component and update Organization schema #70)
• ✅ Phase 2: FAQPage + ProfessionalService schemas for service pages (this PR)
• ⏳ Phase 3: TechArticle schema for blog posts
• ⏳ Phase 4: BreadcrumbList schema for nested pages

Testing

After deployment, validate schemas using:

• Google Rich Results Test
• Schema.org Validator

Test any service page, for example:

• https://procedure.tech/services/ai-engineering
• https://procedure.tech/services/ai-security

Related

• Follows specification in schema-implementation-for-claude-code.md
• Builds on PR feat: Add JsonLd component and update Organization schema #70 (JsonLd component)

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying website with    Cloudflare Pages

Latest commit:	ca51a78
Status:	✅  Deploy successful!
Preview URL:	https://e21716a1.website-yiq.pages.dev
Branch Preview URL:	https://feat-service-page-schemas.website-yiq.pages.dev

View logs