HowTo Schema Generator

Schema Structure Errors

• •Steps not using HowToStep type — must be explicitly typed
• •Missing name property on HowToStep objects
• •Missing text property in step — the instruction text is required
• •Using wrong duration format for totalTime — must be ISO 8601

Content Issues

• •Steps in schema not matching visible steps on page
• •Steps too vague to be useful as rich result snippets
• •Too many steps making the rich result unwieldy
• •Missing supply or tool arrays for hands-on guides that require materials

Image Issues

• •Step images too small for rich result display
• •Missing alt text on step images
• •Step images not showing the actual step being performed
• •Images hosted on authentication-required servers blocking Google crawler

Complete HowTo JSON-LD Schema

Full HowTo schema with steps, time, tools, and supplies:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Set Up Next.js with TypeScript",
  "description": "A step-by-step guide to creating a new Next.js 15 project with TypeScript configuration.",
  "image": "https://example.com/images/nextjs-setup.jpg",
  "totalTime": "PT15M",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "USD",
    "value": "0"
  },
  "tool": [
    { "@type": "HowToTool", "name": "Node.js 18+" },
    { "@type": "HowToTool", "name": "npm or yarn" },
    { "@type": "HowToTool", "name": "Code editor (VS Code recommended)" }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "Install Next.js",
      "text": "Run npx create-next-app@latest my-app --typescript in your terminal. Answer the configuration prompts to set up your project preferences.",
      "image": "https://example.com/images/step1-install.jpg",
      "url": "https://example.com/guides/nextjs-setup#step-1"
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "Navigate to project directory",
      "text": "Change into your new project directory with cd my-app. You'll see the complete Next.js project structure with TypeScript configuration already set up.",
      "image": "https://example.com/images/step2-navigate.jpg",
      "url": "https://example.com/guides/nextjs-setup#step-2"
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "Start the development server",
      "text": "Run npm run dev to start the development server. Open http://localhost:3000 in your browser to see your new Next.js app running.",
      "image": "https://example.com/images/step3-start.jpg",
      "url": "https://example.com/guides/nextjs-setup#step-3"
    }
  ]
}
</script>

Dynamic HowTo Schema in Next.js

Generate HowTo schema from your guide content data:

// components/HowToSchema.tsx
interface HowToStep {
  name: string;
  text: string;
  image?: string;
  url?: string;
}

interface HowToProps {
  name: string;
  description: string;
  totalTime?: string; // ISO 8601 e.g. "PT30M"
  tools?: string[];
  steps: HowToStep[];
}

export function HowToSchema({ name, description, totalTime, tools, steps }: HowToProps) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "HowTo",
    name,
    description,
    ...(totalTime && { totalTime }),
    ...(tools?.length && {
      tool: tools.map((t) => ({ "@type": "HowToTool", name: t })),
    }),
    step: steps.map((step, i) => ({
      "@type": "HowToStep",
      position: i + 1,
      name: step.name,
      text: step.text,
      ...(step.image && { image: step.image }),
      ...(step.url && { url: step.url }),
    })),
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}