XooCode(){

HowTo

HowTo is a standalone schema type for step-by-step instructions. Unlike TechArticle or BlogPosting, HowTo is not an Article subtype. It has its own structured format with steps, tools, materials, and costs. Google removed the HowTo rich result from desktop search in 2023 and reduced it on mobile, but the markup is still consumed by AI systems, voice assistants, and other search engines. As AI-powered search grows, the structured step format becomes more useful, not less.

The structure is strict: each step needs at least a name or text, and the steps must appear in order. supply and tool arrays let you declare materials and equipment separately. If your content walks someone through a process with a clear start and finish, HowTo gives it the most machine-readable format available.

Full example of schema.org/HowTo json-ld markup

The markup is verified as valid with Rich Results Test from Google.

Highlight legend:Required by GoogleRecommendedOptional
schema.org/HowTo
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@id": "https://xoocode.com/shop/how-to-screen-print-a-tee#howto",
  "@type": "HowTo",
  "name": "How to Screen-Print a XooTee Graphic Tee",
  "url": "https://xoocode.com/shop/how-to-screen-print-a-tee",
  "description": "The complete screen-printing process used at Xoo Code Shop Dunmore to produce XooTee shirts, from design prep through final heat cure. Covers single-color water-based ink printing on organic cotton.",
  "image": [
    "https://xoocode.com/shop/images/screen-print-howto-1x1.jpg",
    "https://xoocode.com/shop/images/screen-print-howto-4x3.jpg",
    "https://xoocode.com/shop/images/screen-print-howto-16x9.jpg"
  ],
  "totalTime": "PT45M",
  "estimatedCost": {
    "@type": "MonetaryAmount",
    "currency": "USD",
    "value": "18"
  },
  "supply": [
    {
      "@type": "HowToSupply",
      "name": "Blank organic cotton t-shirt",
      "requiredQuantity": "1"
    },
    {
      "@type": "HowToSupply",
      "name": "Water-based screen-printing ink (black)",
      "requiredQuantity": "30 ml"
    },
    {
      "@type": "HowToSupply",
      "name": "Photo emulsion",
      "requiredQuantity": "15 ml"
    },
    {
      "@type": "HowToSupply",
      "name": "Transparency film with printed design",
      "requiredQuantity": "1 sheet"
    }
  ],
  "tool": [
    { "@type": "HowToTool", "name": "Screen-printing press" },
    { "@type": "HowToTool", "name": "110-mesh aluminum screen" },
    { "@type": "HowToTool", "name": "Squeegee (12-inch)" },
    { "@type": "HowToTool", "name": "Exposure unit" },
    { "@type": "HowToTool", "name": "Heat gun or conveyor dryer" },
    { "@type": "HowToTool", "name": "Spray bottle with water" }
  ],
  "step": [
    {
      "@type": "HowToStep",
      "name": "Coat the screen with photo emulsion",
      "text": "In a dark room, apply a thin, even layer of photo emulsion to both sides of the 110-mesh screen using a scoop coater. Start from the bottom and pull upward in one smooth motion. Let the screen dry horizontally in the dark for 2 hours.",
      "url": "https://xoocode.com/shop/how-to-screen-print-a-tee#step-coat",
      "image": "https://xoocode.com/shop/images/screen-print-step-1.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Expose the screen with the design",
      "text": "Place the transparency film with the printed design face-down on the coated screen. Load the screen into the exposure unit and expose for 3 minutes under UV light. The emulsion hardens everywhere except where the design blocks the light.",
      "url": "https://xoocode.com/shop/how-to-screen-print-a-tee#step-expose",
      "image": "https://xoocode.com/shop/images/screen-print-step-2.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Wash out the unexposed emulsion",
      "text": "Immediately after exposure, spray both sides of the screen with water. The unexposed emulsion under the design washes away, leaving a clean stencil. Hold the screen up to a light to check for pinholes and patch any with emulsion.",
      "url": "https://xoocode.com/shop/how-to-screen-print-a-tee#step-washout",
      "image": "https://xoocode.com/shop/images/screen-print-step-3.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Set up the press and register the shirt",
      "text": "Mount the dried screen on the press and place the blank t-shirt on the platen. Adjust the screen position so the design sits centered on the chest, about 3 inches below the collar. Lock the registration and do a test print on scrap fabric.",
      "url": "https://xoocode.com/shop/how-to-screen-print-a-tee#step-register",
      "image": "https://xoocode.com/shop/images/screen-print-step-4.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Pull the squeegee to transfer the ink",
      "text": "Add a line of water-based ink above the design area on the screen. Hold the squeegee at a 45-degree angle and pull it toward you in one firm, even stroke. Lift the screen to check the print. Apply a second pull if coverage is uneven.",
      "url": "https://xoocode.com/shop/how-to-screen-print-a-tee#step-print",
      "image": "https://xoocode.com/shop/images/screen-print-step-5.jpg"
    },
    {
      "@type": "HowToStep",
      "name": "Cure the print with heat",
      "text": "Remove the shirt from the platen and cure the ink with a heat gun at 320 degrees Fahrenheit for 30 seconds, or run it through a conveyor dryer at the same temperature. The ink is fully cured when it no longer feels tacky. Press a damp cloth against the print to confirm no ink transfers.",
      "url": "https://xoocode.com/shop/how-to-screen-print-a-tee#step-cure",
      "image": "https://xoocode.com/shop/images/screen-print-step-6.jpg"
    }
  ]
}
</script>

HowToStep structure

Each step is a HowToStep with name (short step title), text (full instruction), url (deep link to that step on the page), and optionally image. Google displays the name in the collapsed step list and shows text when expanded. Keep step names under 100 characters. The text should describe a single action, not multiple actions packed into one step.

HowToSection for grouped steps

If your how-to has logical phases (like "Preparation", "Printing", "Finishing"), you can wrap steps in HowToSection objects. Each section has a name and an itemListElement array of HowToStep objects. Use sections only when the how-to has 8 or more steps that naturally cluster into phases. For shorter how-tos like this one, flat steps are cleaner.

supply and tool

supply takes an array of HowToSupply objects (consumable materials). tool takes an array of HowToTool objects (reusable equipment). Both require at least a name property, and supply accepts an optional requiredQuantity. The distinction matters: supplies are consumed during the process (ink, emulsion, blank shirts), tools are not (press, squeegee, exposure unit).

totalTime and estimatedCost

totalTime uses ISO 8601 duration format (PT45M for 45 minutes). estimatedCost uses a MonetaryAmount with currency and value. totalTime should cover the entire process from first step to last, including any wait times like drying or curing. estimatedCost covers materials for a single run of the process.

HowTo vs TechArticle

Use HowTo when the content is a concise procedure with clear steps that make sense rendered as a numbered list. Use TechArticle when the content is longer-form documentation that includes procedures but also has explanations, code samples, and architectural context. If someone could follow the instructions without reading surrounding prose, it is a HowTo. If the instructions require understanding background material, it is a TechArticle.

Minimal valid version

The smallest markup that still produces a valid HowTo entity. Use it as the floor. Reach for the advanced example above when you want search engines and AI agents to understand more about your content.

schema.org/HowTo (minimal)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Screen-Print a XooTee Graphic Tee",
  "step": [
    { "@type": "HowToStep", "text": "Coat the screen with photo emulsion and let it dry for 2 hours in the dark." },
    { "@type": "HowToStep", "text": "Expose the screen under UV light for 3 minutes with the design transparency." },
    { "@type": "HowToStep", "text": "Wash out the unexposed emulsion to reveal the stencil." },
    { "@type": "HowToStep", "text": "Register the shirt on the press and do a test print." },
    { "@type": "HowToStep", "text": "Pull the squeegee across the screen to transfer the ink." },
    { "@type": "HowToStep", "text": "Cure the print at 320 degrees Fahrenheit for 30 seconds." }
  ]
}
</script>

Google rich results this unlocks

Markup matching this example makes your page eligible for the following Google Search rich results. The primary target drives the required / recommended property classification in the advanced code block above.

Common HowTo mistakes

Mistakes that pass validation but silently fail to earn rich results or mislead consumers walking the graph. Avoid these and your markup will be ahead of most sites in the wild.

  1. 01

    Multiple actions crammed into one step

    Wrong
    { "@type": "HowToStep", "text": "Coat the screen, expose it, and wash it out" }
    Right
    Three separate HowToStep objects, one for coating, one for exposing, one for washing

    Each HowToStep should describe a single action. Combining multiple actions into one step makes the instructions harder to follow and prevents search engines from rendering them as distinct steps. If a step description uses 'and' to connect two procedures, split it.

  2. 02

    Steps without deep-link URLs

    Wrong
    { "@type": "HowToStep", "name": "Coat the screen", "text": "..." } (no url)
    Right
    { "@type": "HowToStep", "name": "Coat the screen", "text": "...", "url": "https://example.com/howto#step-coat" }

    The url property on each step should be a fragment link to that step's position on the page. This lets search engines link directly to individual steps from the rich result. Without it, users always land at the top of the page.

  3. 03

    Mixing up supply and tool

    Wrong
    "supply": [{ "@type": "HowToSupply", "name": "Squeegee" }] (squeegee is reusable, not consumed)
    Right
    "tool": [{ "@type": "HowToTool", "name": "Squeegee" }]

    Supplies are consumed during the process (ink, emulsion, blank shirts). Tools are reusable equipment (press, squeegee, exposure unit). The distinction helps readers estimate costs: supplies are recurring, tools are one-time purchases.

  4. 04

    totalTime that excludes wait periods

    Wrong
    "totalTime": "PT15M" (only counting active work, ignoring the 2-hour emulsion drying time)
    Right
    "totalTime": "PT45M" (includes active work and necessary wait times)

    totalTime should cover the entire process from first step to last, including drying, curing, and other wait times. Users plan around total elapsed time, not just the minutes they are actively doing something. Understating the time erodes trust.

  5. 05

    Using HowTo for content that is really an article

    Wrong
    "@type": "HowTo" for a 3000-word guide with background theory, comparisons, and an opinionated conclusion
    Right
    "@type": "TechArticle" or "BlogPosting" for long-form content with procedural sections

    HowTo is for concise procedures. If the content includes substantial background, discussion, or opinion alongside the steps, it is an article that happens to contain instructions. Use TechArticle or BlogPosting and describe the steps in the articleBody.

Schema properties in this example

HowToHowToStepHowToSupplyHowToToolMonetaryAmountnamedescriptionimagetotalTimeestimatedCostcurrencyvaluesupplytoolsteptexturlrequiredQuantity

About the example data

The how-to describes the screen-printing process used at Xoo Code Shop Dunmore to produce XooTee graphic tees. The supplies and tools match what the Dunmore shop actually uses for single-color water-based printing on organic cotton. This is the process behind every XooTee shirt in the Xoo universe.

Comments

Loading comments...

Leave a comment