HowTo Schema Validator for Google

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "@id": "https://example.com/diy/repair-leaky-faucet/#howto",
  "name": "How to Fix a Leaky Faucet in 30 Minutes",
  "description": "Step-by-step guide to repairing a leaking bathroom or kitchen faucet. Save money on plumber fees with this easy DIY project.",
  "image": [
    "https://example.com/diy/faucet-repair-main.jpg",
    "https://example.com/diy/faucet-repair-tools.jpg",
    "https://example.com/diy/faucet-repair-steps.jpg"
  ],
  "totalTime": "PT30M",
  "supply": [
    {
      "@type": "HowToSupply",
      "name": "Adjustable wrench"
    },
    {
      "@type": "HowToSupply",
      "name": "Screwdriver set"
    },
    {
      "@type": "HowToSupply",
      "name": "Plumber's tape"
    },
    {
      "@type": "HowToSupply",
      "name": "Replacement faucet cartridge"
    },
    {
      "@type": "HowToSupply",
      "name": "Bucket or towel"
    }
  ],
  "tool": [
    {
      "@type": "HowToTool",
      "name": "Allen wrench (if needed)"
    }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "Turn off the water supply",
      "text": "Locate the shut-off valves under the sink and turn them clockwise to shut off both hot and cold water. Place a bucket under the faucet to catch any remaining water.",
      "image": "https://example.com/diy/step1-shut-off-water.jpg"
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "Remove the decorative cap",
      "text": "Use a flat screwdriver to gently pry off the decorative cap on the faucet handle. Be careful not to scratch the finish.",
      "image": "https://example.com/diy/step2-remove-cap.jpg"
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "Remove the handle screw",
      "text": "Use the appropriate screwdriver to remove the screw holding the faucet handle. Keep the screw in a safe place for reassembly.",
      "image": "https://example.com/diy/step3-handle-screw.jpg"
    },
    {
      "@type": "HowToStep",
      "position": 4,
      "name": "Pull off the handle",
      "text": "Gently pull the handle straight up and off the valve stem. If it's stuck, wiggle it gently while pulling upward.",
      "image": "https://example.com/diy/step4-remove-handle.jpg"
    },
    {
      "@type": "HowToStep",
      "position": 5,
      "name": "Remove and replace the cartridge",
      "text": "Use an adjustable wrench to loosen and remove the packing nut. Pull out the old cartridge and insert the new one, ensuring it's properly aligned.",
      "image": "https://example.com/diy/step5-replace-cartridge.jpg"
    },
    {
      "@type": "HowToStep",
      "position": 6,
      "name": "Reassemble the faucet",
      "text": "Replace the packing nut, handle, screw, and decorative cap. Tighten everything securely but not too tight to avoid damage.",
      "image": "https://example.com/diy/step6-reassemble.jpg"
    },
    {
      "@type": "HowToStep",
      "position": 7,
      "name": "Test the repair",
      "text": "Turn the water supply back on and test the faucet for leaks. Run both hot and cold water and check all connections.",
      "image": "https://example.com/diy/step7-test-repair.jpg"
    }
  ],
  "safetyConsideration": "Always turn off the water supply before working on plumbing. Wear safety glasses to protect your eyes from debris. If you're uncomfortable with plumbing work or the leak persists, contact a licensed plumber.",
  "yield": "1 repaired faucet",
  "prepTime": "PT10M",
  "performTime": "PT20M",
  "about": {
    "@type": "Thing",
    "name": "Faucet Repair",
    "description": "DIY home repair techniques for plumbing fixtures"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/diy/repair-leaky-faucet"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "@id": "https://example.com/tutorials/react-components/#howto",
  "name": "How to Create Reusable React Components",
  "description": "Complete guide to building reusable React components with TypeScript, including props, state management, and testing. Perfect for developers learning modern React patterns.",
  "image": [
    "https://example.com/tutorials/react-components-hero.jpg",
    "https://example.com/tutorials/react-components-code.jpg"
  ],
  "totalTime": "PT45M",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "USD",
    "value": "0"
  },
  "supply": [
    {
      "@type": "HowToSupply",
      "name": "Computer with internet access"
    },
    {
      "@type": "HowToSupply",
      "name": "Code editor (VS Code recommended)"
    }
  ],
  "tool": [
    {
      "@type": "HowToTool",
      "name": "Node.js (version 16+)",
      "url": "https://nodejs.org"
    },
    {
      "@type": "HowToTool",
      "name": "React Developer Tools browser extension",
      "url": "https://chrome.google.com/webstore/detail/react-developer-tools"
    }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "position": 1,
      "name": "Set up your React project",
      "text": "Create a new React project using Create React App or Vite. Open your terminal and run 'npx create-react-app my-components' or 'npm create vite@latest my-components'.",
      "url": "https://example.com/tutorials/react-components#setup"
    },
    {
      "@type": "HowToStep",
      "position": 2,
      "name": "Create the component structure",
      "text": "Create a components folder in your src directory. Create a new file for your component, such as Button.jsx or Button.tsx if using TypeScript.",
      "url": "https://example.com/tutorials/react-components#structure"
    },
    {
      "@type": "HowToStep",
      "position": 3,
      "name": "Define component props with TypeScript",
      "text": "Create an interface for your component props. Define optional and required props with proper TypeScript types. For example: interface ButtonProps { children: React.ReactNode; onClick?: () => void; variant?: 'primary' | 'secondary'; }",
      "url": "https://example.com/tutorials/react-components#props"
    },
    {
      "@type": "HowToStep",
      "position": 4,
      "name": "Implement the component logic",
      "text": "Write the component function with proper destructuring of props. Add event handlers, state management, and any necessary effects. Ensure the component follows React best practices.",
      "url": "https://example.com/tutorials/react-components#logic"
    },
    {
      "@type": "HowToStep",
      "position": 5,
      "name": "Add styling and accessibility",
      "text": "Apply CSS classes or styled-components for visual design. Ensure proper ARIA attributes, keyboard navigation, and screen reader support. Test with keyboard-only navigation.",
      "url": "https://example.com/tutorials/react-components#styling"
    },
    {
      "@type": "HowToStep",
      "position": 6,
      "name": "Write unit tests",
      "text": "Create test files using Jest and React Testing Library. Test component rendering, props handling, user interactions, and accessibility features.",
      "url": "https://example.com/tutorials/react-components#testing"
    },
    {
      "@type": "HowToStep",
      "position": 7,
      "name": "Document and export the component",
      "text": "Add JSDoc comments or README documentation. Export the component from an index file for easy importing. Create usage examples and prop documentation.",
      "url": "https://example.com/tutorials/react-components#export"
    }
  ],
  "video": {
    "@type": "VideoObject",
    "name": "React Components Tutorial - Complete Guide",
    "description": "45-minute video tutorial covering React component creation from start to finish",
    "thumbnailUrl": "https://example.com/videos/react-components-thumbnail.jpg",
    "contentUrl": "https://example.com/videos/react-components-tutorial.mp4",
    "embedUrl": "https://example.com/videos/embed/react-components-tutorial",
    "uploadDate": "2024-01-15T10:00:00Z",
    "duration": "PT45M"
  },
  "about": {
    "@type": "Thing",
    "name": "React Component Development",
    "description": "Building reusable user interface components with React and TypeScript"
  },
  "teaches": "React component development, TypeScript integration, testing, and accessibility",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/tutorials/react-components"
  }
}
</script>