HowTo schema: tutorials that stand out in search results

What is HowTo schema and when should you use it?

HowTo schema is a Schema.org type specifically designed for marking up instructions and guides. When you have a step-by-step tutorial, whether it is about installing Schema.org markup, baking a cake or repairing a bicycle tire, you can use HowTo schema to make each step, each required tool and the total time investment machine-readable. Google can then display this information as a visually attractive rich result with steps that users can follow directly in search results.

The difference from a regular article is significant. A regular blog post with instructions is just text to Google. With HowTo schema you explicitly tell Google: "This is an instruction with X steps, it takes Y minutes and you need Z tools." That explicit communication is exactly what search engines and AI models need to present your content optimally.

HowTo schema fits within the broader family of Schema.org markup types that make your content machine-readable. Just like FAQ schema for questions and Product schema for products, HowTo schema is the standard for instructional content.

HowTo JSON-LD: the complete structure

A HowTo schema contains various components: the instruction itself, the steps (HowToStep), optionally the required tools (HowToTool) and materials (HowToSupply), the estimated time and an image per step.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "Adding Schema.org JSON-LD to your website",
  "description": "A step-by-step guide to adding Schema.org JSON-LD markup to your website for better visibility in search engines and AI models.",
  "image": "https://example.com/images/schema-guide.jpg",
  "totalTime": "PT30M",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "EUR",
    "value": "0"
  },
  "tool": [
    {
      "@type": "HowToTool",
      "name": "Text editor or CMS"
    },
    {
      "@type": "HowToTool",
      "name": "Google Rich Results Test"
    }
  ],
  "supply": [
    {
      "@type": "HowToSupply",
      "name": "Access to the HTML source code of your website"
    }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "name": "Choose the right schema type",
      "text": "Determine which Schema.org type fits your page. Use Article for blog posts, Product for product pages, Organization for your company page and FAQPage for FAQ sections.",
      "url": "https://example.com/guide/schema-org#step-1",
      "image": "https://example.com/images/step-1-schema-type.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Write the JSON-LD code",
      "text": "Create a JSON-LD script block with @context, @type and the required properties for your chosen schema type. Use the Schema.org documentation as reference.",
      "url": "https://example.com/guide/schema-org#step-2",
      "image": "https://example.com/images/step-2-json-ld.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Place the code in your HTML",
      "text": "Add the script block to the head section of your page or just before the closing body tag. Both locations work, but the head section is preferred.",
      "url": "https://example.com/guide/schema-org#step-3",
      "image": "https://example.com/images/step-3-html-placement.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Validate with Google Rich Results Test",
      "text": "Go to search.google.com/test/rich-results and enter your URL. Check that there are no errors and that the rich result is displayed correctly in the preview.",
      "url": "https://example.com/guide/schema-org#step-4",
      "image": "https://example.com/images/step-4-validation.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Monitor in Google Search Console",
      "text": "After indexing your page appears in the Enhancements report of Google Search Console. Check regularly for errors and warnings.",
      "url": "https://example.com/guide/schema-org#step-5",
      "image": "https://example.com/images/step-5-monitoring.jpg"
    }
  ]
}
</script>

The structure is richer than FAQ schema but follows the same logic: you describe the whole (the instruction) and the parts (the steps). Google uses the name, description and image of each step to build a visually attractive result.

The components in detail

HowToStep: the heart of your instruction

Each step in your guide becomes a HowToStep. The required properties are name (a short title of the step) and text (the detailed instruction). Optionally you can add a url that links to an anchor on your page and an image that visually illustrates the step.

• name: a concise title of maximum 100 characters that summarizes the step.
• text: the full instruction for this step. Be specific and concrete.
• url: a deep link to the relevant section of your page (use anchor links).
• image: an image illustrating the step. Google displays this in the rich result.

HowToTool and HowToSupply

Besides steps you can also specify which tools and materials (supplies) are needed. This is especially relevant for physical guides (cooking, DIY, repairs) but can also be used for digital instructions.

"tool": [
  {
    "@type": "HowToTool",
    "name": "Visual Studio Code"
  },
  {
    "@type": "HowToTool",
    "name": "Chrome DevTools"
  },
  {
    "@type": "HowToTool",
    "name": "Google Rich Results Test"
  }
],
"supply": [
  {
    "@type": "HowToSupply",
    "name": "Schema.org documentation"
  },
  {
    "@type": "HowToSupply",
    "name": "Access to your web server or CMS"
  }
]

Time and cost

The totalTime property uses the ISO 8601 duration format. PT30M stands for 30 minutes, PT1H for 1 hour, PT1H30M for one and a half hours. For longer projects you can also specify performTime (active working time) and prepTime (preparation time) separately. The estimatedCost property is optional but valuable for users who want to know whether a project is free or paid.

HowTo schema and AI answer engines

Instructional content is one of the most requested content types in AI answer engines. When a user asks ChatGPT or Perplexity "How do I add Schema.org markup to my website?", these models search for structured instructions they can present step by step. Pages with HowTo schema provide exactly that structure.

For AEO purposes, HowTo schema is particularly powerful. AI models can extract individual steps and present them as a structured answer, complete with the correct order and any requirements. This makes your content not only citable, but also directly usable in AI-generated answers.

• AI models extract individual steps from HowTo schema for structured answers.
• The name property of each step serves as a summary that AI models use for concise overviews.
• Tools and supplies give AI models context about requirements, allowing them to better advise users.
• The totalTime helps AI models estimate whether an instruction fits the user's question.

Best practices and common mistakes

Implementing HowTo schema requires attention to detail. Here are the key best practices and pitfalls.

1. Only use HowTo for content that actually is a step-by-step instruction. An article "How to choose the best laptop" is not a HowTo but a buying guide. An instruction "How to install WordPress in 5 steps" is a HowTo.
2. Each step must describe a self-contained, actionable task. Avoid steps that are too vague ("Prepare yourself") or too broad ("Do the work").
3. Add images to each step when possible. Visual instructions are more valuable for both users and AI models.
4. Ensure the steps on your page exactly match the steps in your schema. Discrepancies lead to rejection.
5. Keep your steps under 250 words per step. Steps that are too long are difficult to process for both users and AI.

HowToSection for complex instructions

For extensive guides with multiple phases you can use HowToSection to group steps. Think of a guide for building a website that has sections for "Planning", "Design", "Development" and "Launch", each with their own steps.

"step": [
  {
    "@type": "HowToSection",
    "name": "Preparation",
    "itemListElement": [
      {
        "@type": "HowToStep",
        "name": "Define your target audience",
        "text": "Identify who will visit your website and what their needs are."
      },
      {
        "@type": "HowToStep",
        "name": "Choose a CMS",
        "text": "Select a content management system that matches your technical skills."
      }
    ]
  },
  {
    "@type": "HowToSection",
    "name": "Implementation",
    "itemListElement": [
      {
        "@type": "HowToStep",
        "name": "Install the CMS",
        "text": "Follow the installation guide for your chosen CMS."
      },
      {
        "@type": "HowToStep",
        "name": "Configure basic settings",
        "text": "Set your site title, permalink structure and timezone."
      }
    ]
  }
]

Summary: key takeaways

• HowTo schema marks step-by-step instructions with HowToStep, HowToTool and HowToSupply for rich results and AI models.
• Although Google has disabled HowTo rich results on mobile, the markup remains valuable for desktop rich results, AI Overviews and AI answer engines.
• Each step contains a name (short title), text (full instruction), optionally a url (anchor link) and image (illustration).
• AI models extract individual steps from HowTo schema to generate structured answers for instructional questions.
• Use HowToSection for complex instructions with multiple phases and keep steps concise and actionable.

Frequently asked questions

A good instruction does not only tell you what to do, but gives you the confidence that you can do it.